

CSS reference
=============


Use this **CSS reference** to browse an [alphabetical index](#index) of all of the standard [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) properties, <pseudo-classes>, <pseudo-elements>, [data types](css_types), [functional notations](css_functions) and [at-rules](at-rule). You can also browse [key CSS concepts](#concepts) and a list of [selectors organized by type](#selectors). Also included is a brief [DOM-CSS / CSSOM reference](#dom-css_cssom).


Basic rule syntax
-----------------


### Style rule syntax




```
style-rule ::=
 selectors-list {
      properties-list
    }

```
 Where:

 
```
selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]

```
 See the index of [*selectors*](#selectors), [*pseudo-classes*](#pseudo), and *[pseudo-elements](#pseudo)* below. The syntax for each specified *value* depends on the data type defined for each specified *property*.

 #### Style rule examples

 
```
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

```
 For a beginner-level introduction to the syntax of selectors, see our [guide on CSS Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors). Be aware that any <syntax> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) [text-based](https://www.w3.org/TR/css-syntax-3/#intro), whereas DOM-CSS / CSSOM (the rule management system) is [object-based](https://www.w3.org/TR/cssom/#introduction).


### At-rule syntax


As the structure of at-rules varies widely, please see [At-rule](at-rule) to find the syntax of the specific one you want.

Index
-----



 **Note:** This index does not include SVG-exclusive [presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation), which can be used as CSS properties on [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) elements.

   **Note:** The property names in this index do **not** include the JavaScript names which do differ from the CSS standard names.

 
 ### -


* [`--*`](--*)
* [`-webkit-line-clamp`](-webkit-line-clamp)


### A


* [`abs()`](abs)
* [`accent-color`](accent-color)
* [`acos()`](acos)
* [`:active`](:active)
* [`additive-symbols (@counter-style)`](@counter-style/additive-symbols)
* [`::after (:after)`](::after)
* [`align-content`](align-content)
* [`align-items`](align-items)
* [`align-self`](align-self)
* [`align-tracks`](align-tracks)
* [`all`](all)
* `<an-plus-b>`
* [`<angle>`](angle)
* [`<angle-percentage>`](angle-percentage)
* [`animation`](animation)
* [`animation-composition`](animation-composition)
* [`animation-delay`](animation-delay)
* [`animation-direction`](animation-direction)
* [`animation-duration`](animation-duration)
* [`animation-fill-mode`](animation-fill-mode)
* [`animation-iteration-count`](animation-iteration-count)
* [`animation-name`](animation-name)
* [`animation-play-state`](animation-play-state)
* [`animation-timeline`](animation-timeline)
* [`animation-timing-function`](animation-timing-function)
* [`@annotation`](@font-feature-values#@annotation)
* [`annotation()`](font-variant-alternates#annotation())
* [`:any-link`](:any-link)
* [`appearance`](appearance)
* [`ascent-override (@font-face)`](@font-face/ascent-override)
* [`asin()`](asin)
* [`aspect-ratio`](aspect-ratio)
* [`atan()`](atan)
* [`atan2()`](atan2)
* [`attr()`](attr)


### B


* [`::backdrop`](::backdrop)
* [`backdrop-filter`](backdrop-filter)
* [`backface-visibility`](backface-visibility)
* [`background`](background)
* [`background-attachment`](background-attachment)
* [`background-blend-mode`](background-blend-mode)
* [`background-clip`](background-clip)
* [`background-color`](background-color)
* [`background-image`](background-image)
* [`background-origin`](background-origin)
* [`background-position`](background-position)
* [`background-position-x`](background-position-x)
* [`background-position-y`](background-position-y)
* [`background-repeat`](background-repeat)
* [`background-size`](background-size)
* [`<basic-shape>`](basic-shape)
* [`::before (:before)`](::before)
* [`:blank`](:blank)
* `bleed (@page)`
* [`<blend-mode>`](blend-mode)
* `block-overflow`
* [`block-size`](block-size)
* [`blur()`](filter-function/blur)
* [`border`](border)
* [`border-block`](border-block)
* [`border-block-color`](border-block-color)
* [`border-block-end`](border-block-end)
* [`border-block-end-color`](border-block-end-color)
* [`border-block-end-style`](border-block-end-style)
* [`border-block-end-width`](border-block-end-width)
* [`border-block-start`](border-block-start)
* [`border-block-start-color`](border-block-start-color)
* [`border-block-start-style`](border-block-start-style)
* [`border-block-start-width`](border-block-start-width)
* [`border-block-style`](border-block-style)
* [`border-block-width`](border-block-width)
* [`border-bottom`](border-bottom)
* [`border-bottom-color`](border-bottom-color)
* [`border-bottom-left-radius`](border-bottom-left-radius)
* [`border-bottom-right-radius`](border-bottom-right-radius)
* [`border-bottom-style`](border-bottom-style)
* [`border-bottom-width`](border-bottom-width)
* [`border-collapse`](border-collapse)
* [`border-color`](border-color)
* [`border-end-end-radius`](border-end-end-radius)
* [`border-end-start-radius`](border-end-start-radius)
* [`border-image`](border-image)
* [`border-image-outset`](border-image-outset)
* [`border-image-repeat`](border-image-repeat)
* [`border-image-slice`](border-image-slice)
* [`border-image-source`](border-image-source)
* [`border-image-width`](border-image-width)
* [`border-inline`](border-inline)
* [`border-inline-color`](border-inline-color)
* [`border-inline-end`](border-inline-end)
* [`border-inline-end-color`](border-inline-end-color)
* [`border-inline-end-style`](border-inline-end-style)
* [`border-inline-end-width`](border-inline-end-width)
* [`border-inline-start`](border-inline-start)
* [`border-inline-start-color`](border-inline-start-color)
* [`border-inline-start-style`](border-inline-start-style)
* [`border-inline-start-width`](border-inline-start-width)
* [`border-inline-style`](border-inline-style)
* [`border-inline-width`](border-inline-width)
* [`border-left`](border-left)
* [`border-left-color`](border-left-color)
* [`border-left-style`](border-left-style)
* [`border-left-width`](border-left-width)
* [`border-radius`](border-radius)
* [`border-right`](border-right)
* [`border-right-color`](border-right-color)
* [`border-right-style`](border-right-style)
* [`border-right-width`](border-right-width)
* [`border-spacing`](border-spacing)
* [`border-start-end-radius`](border-start-end-radius)
* [`border-start-start-radius`](border-start-start-radius)
* [`border-style`](border-style)
* [`border-top`](border-top)
* [`border-top-color`](border-top-color)
* [`border-top-left-radius`](border-top-left-radius)
* [`border-top-right-radius`](border-top-right-radius)
* [`border-top-style`](border-top-style)
* [`border-top-width`](border-top-width)
* [`border-width`](border-width)
* [`bottom`](bottom)
* [`@bottom-center`](@page#page-margin-box-type)
* [`box-decoration-break`](box-decoration-break)
* [`box-shadow`](box-shadow)
* [`box-sizing`](box-sizing)
* [`break-after`](break-after)
* [`break-before`](break-before)
* [`break-inside`](break-inside)
* [`brightness()`](filter-function/brightness)


### C


* [`calc()`](calc)
* [`caption-side`](caption-side)
* `caret`
* [`caret-color`](caret-color)
* `caret-shape`
* [`@character-variant`](@font-feature-values#@character-variant)
* [`character-variant()`](font-variant-alternates#character-variant())
* [`@charset`](@charset)
* [`:checked`](:checked)
* [`circle()`](basic-shape#circle())
* [`clamp()`](clamp)
* [`clear`](clear)
* [`clip`](clip)
* [`clip-path`](clip-path)
* [`<color>`](color_value)
* [`color`](color)
* [`color-scheme`](color-scheme)
* [`column-count`](column-count)
* [`column-fill`](column-fill)
* [`column-gap`](column-gap)
* [`column-rule`](column-rule)
* [`column-rule-color`](column-rule-color)
* [`column-rule-style`](column-rule-style)
* [`column-rule-width`](column-rule-width)
* [`column-span`](column-span)
* [`column-width`](column-width)
* [`columns`](columns)
* [`conic-gradient()`](gradient/conic-gradient)
* [`contain`](contain)
* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-height`](contain-intrinsic-height)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contain-intrinsic-width`](contain-intrinsic-width)
* [`content`](content)
* [`content-visibility`](content-visibility)
* [`contrast()`](filter-function/contrast)
* [`cos()`](cos)
* [`<counter>`](counter)
* [`counter-increment`](counter-increment)
* [`counter-reset`](counter-reset)
* [`counter-set`](counter-set)
* [`@counter-style`](@counter-style)
* [`counters()`](counters)
* [`cross-fade()`](cross-fade)
* [`cubic-bezier()`](easing-function#cubic-bezier())
* [`::cue`](::cue)
* [`::cue-region`](::cue-region)
* [`:current`](:current)
* [`cursor`](cursor)
* [`<custom-ident>`](custom-ident)
* [`length#cap`](length#cap)
* [`length#ch`](length#ch)
* [`length#cm`](length#cm)


### D


* [`angle#deg`](angle#deg)
* [`:default`](:default)
* [`:defined`](:defined)
* [`descent-override (@font-face)`](@font-face/descent-override)
* [`<dimension>`](dimension)
* [`:dir`](:dir)
* [`direction`](direction)
* [`:disabled`](:disabled)
* [`display`](display)
* [`<display-box>`](display-box)
* [`<display-inside>`](display-inside)
* [`<display-internal>`](display-internal)
* [`<display-legacy>`](display-legacy)
* [`<display-listitem>`](display-listitem)
* [`<display-outside>`](display-outside)
* [`drop-shadow()`](filter-function/drop-shadow)
* [`resolution#dpcm`](resolution#dpcm)
* [`resolution#dpi`](resolution#dpi)
* [`resolution#dppx`](resolution#dppx)


### E


* [`element()`](element())
* [`ellipse()`](basic-shape#ellipse())
* [`:empty`](:empty)
* [`empty-cells`](empty-cells)
* [`:enabled`](:enabled)
* [`env()`](env)
* [`exp()`](exp)
* [`length#em`](length#em)
* [`length#ex`](length#ex)


### F


* [`fallback (@counter-style)`](@counter-style/fallback)
* [`filter`](filter)
* [`<filter-function>`](filter-function)
* [`:first`](:first)
* [`:first-child`](:first-child)
* [`::first-letter (:first-letter)`](::first-letter)
* [`::first-line (:first-line)`](::first-line)
* [`:first-of-type`](:first-of-type)
* [`fit-content()`](fit-content)
* [`<flex>`](flex_value)
* [`flex`](flex)
* [`flex-basis`](flex-basis)
* [`flex-direction`](flex-direction)
* [`flex-flow`](flex-flow)
* [`flex-grow`](flex-grow)
* [`flex-shrink`](flex-shrink)
* [`flex-wrap`](flex-wrap)
* [`flex_value#fr`](flex_value#fr)
* [`float`](float)
* [`:focus`](:focus)
* [`:focus-visible`](:focus-visible)
* [`:focus-within`](:focus-within)
* [`font`](font)
* [`font-display (@font-face)`](@font-face/font-display)
* [`@font-face`](@font-face)
* [`font-family`](font-family)
* [`font-family (@font-face)`](@font-face/font-family)
* [`font-feature-settings`](font-feature-settings)
* `font-feature-settings (@font-face)`
* [`@font-feature-values`](@font-feature-values)
* [`font-kerning`](font-kerning)
* [`font-language-override`](font-language-override)
* [`font-optical-sizing`](font-optical-sizing)
* [`font-size`](font-size)
* [`font-size-adjust`](font-size-adjust)
* [`font-stretch`](font-stretch)
* [`font-stretch (@font-face)`](@font-face/font-stretch)
* [`font-style`](font-style)
* [`font-style (@font-face)`](@font-face/font-style)
* [`font-synthesis`](font-synthesis)
* [`font-variant`](font-variant)
* [`font-variant (@font-face)`](@font-face)
* [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)
* [`font-variation-settings`](font-variation-settings)
* [`font-variation-settings (@font-face)`](@font-face/font-variation-settings)
* [`font-weight`](font-weight)
* [`font-weight (@font-face)`](@font-face/font-weight)
* [`forced-color-adjust`](forced-color-adjust)
* [`format()`](@font-face/src#format())
* [`<frequency>`](frequency)
* [`<frequency-percentage>`](frequency-percentage)
* [`:fullscreen`](:fullscreen)
* [`:future`](:future)


### G


* [`angle#grad`](angle#grad)
* [`gap`](gap)
* [`<gradient>`](gradient)
* [`::grammar-error`](::grammar-error)
* [`grayscale()`](filter-function/grayscale)
* [`grid`](grid)
* [`grid-area`](grid-area)
* [`grid-auto-columns`](grid-auto-columns)
* [`grid-auto-flow`](grid-auto-flow)
* [`grid-auto-rows`](grid-auto-rows)
* [`grid-column`](grid-column)
* [`grid-column-end`](grid-column-end)
* [`grid-column-start`](grid-column-start)
* [`grid-row`](grid-row)
* [`grid-row-end`](grid-row-end)
* [`grid-row-start`](grid-row-start)
* [`grid-template`](grid-template)
* [`grid-template-areas`](grid-template-areas)
* [`grid-template-columns`](grid-template-columns)
* [`grid-template-rows`](grid-template-rows)


### H


* [`frequency#Hz`](frequency#hz)
* [`hanging-punctuation`](hanging-punctuation)
* [`:has`](:has)
* [`height`](height)
* [`height (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* `@historical-forms`
* [`:host()`](:host_function)
* `:host-context()`
* [`:hover`](:hover)
* [`hsl()`](color_value#hsl())
* [`hsla()`](color_value#hsla())
* [`hue-rotate()`](filter-function/hue-rotate)
* `hwb()`
* [`hyphenate-character`](hyphenate-character)
* [`hyphenate-limit-chars`](hyphenate-limit-chars)
* [`hyphens`](hyphens)
* [`hypot()`](hypot)


### I


* [`<ident>`](ident)
* [`<image>`](image)
* [`image()`](image#the_image()_functional_notation)
* [`image-orientation`](image-orientation)
* [`image-rendering`](image-rendering)
* [`image-resolution`](image-resolution)
* [`image-set()`](image/image-set)
* [`@import`](@import)
* [`:in-range`](:in-range)
* [`:indeterminate`](:indeterminate)
* [`inherit`](inherit)
* [`inherits (@property)`](@property/inherits)
* [`initial`](initial)
* [`initial-letter`](initial-letter)
* [`initial-letter-align`](initial-letter-align)
* [`initial-value (@property)`](@property/initial-value)
* [`inline-size`](inline-size)
* `input-security`
* [`inset`](inset)
* [`inset()`](basic-shape#inset())
* [`inset-block`](inset-block)
* [`inset-block-end`](inset-block-end)
* [`inset-block-start`](inset-block-start)
* [`inset-inline`](inset-inline)
* [`inset-inline-end`](inset-inline-end)
* [`inset-inline-start`](inset-inline-start)
* [`<integer>`](integer)
* [`:invalid`](:invalid)
* [`invert()`](filter-function/invert)
* [`:is`](:is)
* [`isolation`](isolation)
* [`length#ic`](length#ic)
* [`length#in`](length#in)


### J


* [`justify-content`](justify-content)
* [`justify-items`](justify-items)
* [`justify-self`](justify-self)
* [`justify-tracks`](justify-tracks)


### K


* [`frequency#kHz`](frequency#khz)
* [`@keyframes`](@keyframes)


### L


* `lab()`
* [`:lang`](:lang)
* [`:last-child`](:last-child)
* [`:last-of-type`](:last-of-type)
* [`@layer`](@layer)
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* [`:left`](:left)
* [`left`](left)
* [`@left-bottom`](@page#page-margin-box-type)
* [`<length>`](length)
* [`<length-percentage>`](length-percentage)
* [`letter-spacing`](letter-spacing)
* [`line-break`](line-break)
* `line-clamp`
* [`line-gap-override (@font-face)`](@font-face/line-gap-override)
* [`line-height`](line-height)
* [`line-height-step`](line-height-step)
* [`linear-gradient()`](gradient/linear-gradient)
* [`:link`](:link)
* [`list-style`](list-style)
* [`list-style-image`](list-style-image)
* [`list-style-position`](list-style-position)
* [`list-style-type`](list-style-type)
* [`local()`](@font-face/src#local())
* [`:local-link`](:local-link)
* [`log()`](log)


### M


* [`length#mm`](length#mm)
* [`margin`](margin)
* [`margin-block`](margin-block)
* [`margin-block-end`](margin-block-end)
* [`margin-block-start`](margin-block-start)
* [`margin-bottom`](margin-bottom)
* [`margin-inline`](margin-inline)
* [`margin-inline-end`](margin-inline-end)
* [`margin-inline-start`](margin-inline-start)
* [`margin-left`](margin-left)
* [`margin-right`](margin-right)
* [`margin-top`](margin-top)
* [`margin-trim`](margin-trim)
* [`::marker`](::marker)
* `marks (@page)`
* [`mask`](mask)
* [`mask-border`](mask-border)
* [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-slice`](mask-border-slice)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)
* [`mask-clip`](mask-clip)
* [`mask-composite`](mask-composite)
* [`mask-image`](mask-image)
* [`mask-mode`](mask-mode)
* [`mask-origin`](mask-origin)
* [`mask-position`](mask-position)
* [`mask-repeat`](mask-repeat)
* [`mask-size`](mask-size)
* [`mask-type`](mask-type)
* [`masonry-auto-flow`](masonry-auto-flow)
* [`math-depth`](math-depth)
* [`math-shift`](math-shift)
* [`math-style`](math-style)
* [`matrix()`](transform-function/matrix)
* [`matrix3d()`](transform-function/matrix3d)
* [`max()`](max)
* [`max-block-size`](max-block-size)
* [`max-height`](max-height)
* [`max-height (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`max-inline-size`](max-inline-size)
* `max-lines`
* [`max-width`](max-width)
* [`max-width (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`max-zoom (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`@media`](@media)
* [`min()`](min)
* [`min-block-size`](min-block-size)
* [`min-height`](min-height)
* [`min-height (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`min-inline-size`](min-inline-size)
* [`min-width`](min-width)
* [`min-width (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`min-zoom (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`minmax()`](minmax)
* [`mix-blend-mode`](mix-blend-mode)
* [`mod()`](mod)
* [`time#ms`](time#ms)


### N


* [`@namespace`](@namespace)
* [`negative (@counter-style)`](@counter-style/negative)
* [`:not`](:not)
* [`:nth-child`](:nth-child)
* [`:nth-col`](:nth-col)
* [`:nth-last-child`](:nth-last-child)
* [`:nth-last-col`](:nth-last-col)
* [`:nth-last-of-type`](:nth-last-of-type)
* [`:nth-of-type`](:nth-of-type)
* [`<number>`](number)


### O


* [`object-fit`](object-fit)
* [`object-position`](object-position)
* [`offset`](offset)
* [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)
* [`offset-rotate`](offset-rotate)
* [`:only-child`](:only-child)
* [`:only-of-type`](:only-of-type)
* [`opacity`](opacity)
* [`opacity()`](filter-function/opacity)
* [`:optional`](:optional)
* [`order`](order)
* [`orientation (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`@ornaments`](@font-feature-values#@ornaments)
* [`ornaments()`](font-variant-alternates#ornaments())
* [`orphans`](orphans)
* [`:out-of-range`](:out-of-range)
* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-offset`](outline-offset)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)
* [`overflow`](overflow)
* [`overflow-anchor`](overflow-anchor)
* [`overflow-block`](overflow-block)
* [`overflow-clip-margin`](overflow-clip-margin)
* [`overflow-inline`](overflow-inline)
* [`overflow-wrap`](overflow-wrap)
* [`overflow-x`](overflow-x)
* [`overflow-y`](overflow-y)
* [`overscroll-behavior`](overscroll-behavior)
* [`overscroll-behavior-block`](overscroll-behavior-block)
* [`overscroll-behavior-inline`](overscroll-behavior-inline)
* [`overscroll-behavior-x`](overscroll-behavior-x)
* [`overscroll-behavior-y`](overscroll-behavior-y)


### P


* [`Pseudo-classes`](pseudo-classes)
* [`Pseudo-elements`](pseudo-elements)
* [`length#pc`](length#pc)
* [`length#pt`](length#pt)
* [`length#px`](length#px)
* [`pad (@counter-style)`](@counter-style/pad)
* [`padding`](padding)
* [`padding-block`](padding-block)
* [`padding-block-end`](padding-block-end)
* [`padding-block-start`](padding-block-start)
* [`padding-bottom`](padding-bottom)
* [`padding-inline`](padding-inline)
* [`padding-inline-end`](padding-inline-end)
* [`padding-inline-start`](padding-inline-start)
* [`padding-left`](padding-left)
* [`padding-right`](padding-right)
* [`padding-top`](padding-top)
* [`@page`](@page)
* [`page-break-after`](page-break-after)
* [`page-break-before`](page-break-before)
* [`page-break-inside`](page-break-inside)
* [`paint()`](image/paint)
* [`paint-order`](paint-order)
* [`::part`](::part)
* [`:past`](:past)
* [`path()`](path)
* [`:paused`](:paused)
* [`<percentage>`](percentage)
* [`perspective`](perspective)
* [`perspective()`](transform-function/perspective)
* [`perspective-origin`](perspective-origin)
* [`:picture-in-picture`](:picture-in-picture)
* [`place-content`](place-content)
* [`place-items`](place-items)
* [`place-self`](place-self)
* [`::placeholder`](::placeholder)
* [`:placeholder-shown`](:placeholder-shown)
* [`:playing`](:playing)
* [`pointer-events`](pointer-events)
* [`polygon()`](basic-shape#polygon())
* [`<position>`](position_value)
* [`position`](position)
* [`pow()`](pow)
* [`prefix (@counter-style)`](@counter-style/prefix)
* [`print-color-adjust`](print-color-adjust)
* [`@property`](@property)


### Q


* [`length#Q`](length#q)
* [`quotes`](quotes)


### R


* [`angle#rad`](angle#rad)
* [`length#rem`](length#rem)
* [`radial-gradient()`](gradient/radial-gradient)
* [`range (@counter-style)`](@counter-style/range)
* [`<ratio>`](ratio)
* [`:read-only`](:read-only)
* [`:read-write`](:read-write)
* [`rect()`](shape#rect())
* [`rem()`](rem)
* [`repeat()`](repeat)
* [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)
* [`repeating-linear-gradient()`](gradient/repeating-linear-gradient)
* [`repeating-radial-gradient()`](gradient/repeating-radial-gradient)
* [`:required`](:required)
* [`resize`](resize)
* [`<resolution>`](resolution)
* `reversed()`
* [`revert`](revert)
* [`rgb()`](color_value#rgb())
* [`rgba()`](color_value#rgba())
* [`:right`](:right)
* [`right`](right)
* [`@right-bottom`](@page#page-margin-box-type)
* [`:root`](:root)
* [`rotate`](rotate)
* [`rotate()`](transform-function/rotate)
* [`rotate3d()`](transform-function/rotate3d)
* [`rotateX()`](transform-function/rotatex)
* [`rotateY()`](transform-function/rotatey)
* [`rotateZ()`](transform-function/rotatez)
* [`round()`](round)
* [`row-gap`](row-gap)
* [`ruby-align`](ruby-align)
* `ruby-merge`
* [`ruby-position`](ruby-position)


### S


* [`saturate()`](filter-function/saturate)
* [`scale`](scale)
* [`scale()`](transform-function/scale)
* [`scale3d()`](transform-function/scale3d)
* [`scaleX()`](transform-function/scalex)
* [`scaleY()`](transform-function/scaley)
* [`scaleZ()`](transform-function/scalez)
* [`:scope`](:scope)
* [`scroll()`](overflow)
* [`scroll-behavior`](scroll-behavior)
* [`scroll-margin`](scroll-margin)
* [`scroll-margin-block`](scroll-margin-block)
* [`scroll-margin-block-end`](scroll-margin-block-end)
* [`scroll-margin-block-start`](scroll-margin-block-start)
* [`scroll-margin-bottom`](scroll-margin-bottom)
* [`scroll-margin-inline`](scroll-margin-inline)
* [`scroll-margin-inline-end`](scroll-margin-inline-end)
* [`scroll-margin-inline-start`](scroll-margin-inline-start)
* [`scroll-margin-left`](scroll-margin-left)
* [`scroll-margin-right`](scroll-margin-right)
* [`scroll-margin-top`](scroll-margin-top)
* [`scroll-padding`](scroll-padding)
* [`scroll-padding-block`](scroll-padding-block)
* [`scroll-padding-block-end`](scroll-padding-block-end)
* [`scroll-padding-block-start`](scroll-padding-block-start)
* [`scroll-padding-bottom`](scroll-padding-bottom)
* [`scroll-padding-inline`](scroll-padding-inline)
* [`scroll-padding-inline-end`](scroll-padding-inline-end)
* [`scroll-padding-inline-start`](scroll-padding-inline-start)
* [`scroll-padding-left`](scroll-padding-left)
* [`scroll-padding-right`](scroll-padding-right)
* [`scroll-padding-top`](scroll-padding-top)
* [`scroll-snap-align`](scroll-snap-align)
* [`scroll-snap-stop`](scroll-snap-stop)
* [`scroll-snap-type`](scroll-snap-type)
* [`@scroll-timeline`](scroll-timeline)
* [`scroll-timeline`](scroll-timeline)
* [`scroll-timeline-axis`](scroll-timeline-axis)
* [`scroll-timeline-name`](scroll-timeline-name)
* [`scrollbar-color`](scrollbar-color)
* [`scrollbar-gutter`](scrollbar-gutter)
* [`scrollbar-width`](scrollbar-width)
* [`::selection`](::selection)
* `selector()`
* [`sepia()`](filter-function/sepia)
* [`<shape>`](shape)
* [`shape-image-threshold`](shape-image-threshold)
* [`shape-margin`](shape-margin)
* [`shape-outside`](shape-outside)
* [`sign()`](sign)
* [`sin()`](sin)
* [`size (@page)`](@page/size)
* [`size-adjust (@font-face)`](@font-face/size-adjust)
* [`skew()`](transform-function/skew)
* [`skewX()`](transform-function/skewx)
* [`skewY()`](transform-function/skewy)
* [`::slotted`](::slotted)
* [`speak-as (@counter-style)`](@counter-style/speak-as)
* [`::spelling-error`](::spelling-error)
* [`sqrt()`](sqrt)
* [`src (@font-face)`](@font-face/src)
* [`steps()`](easing-function#steps())
* [`<string>`](string)
* [`@styleset`](@font-feature-values#@styleset)
* [`styleset()`](font-variant-alternates#styleset())
* [`@stylistic`](@font-feature-values#@stylistic)
* [`stylistic()`](font-variant-alternates#stylistic())
* [`suffix (@counter-style)`](@counter-style/suffix)
* [`@supports`](@supports)
* `supports() (@import)`
* [`@swash`](@font-feature-values#@swash)
* [`swash()`](font-variant-alternates#swash())
* [`symbols (@counter-style)`](@counter-style/symbols)
* [`symbols()`](@counter-style/symbols)
* [`syntax (@property)`](@property/syntax)
* [`system (@counter-style)`](@counter-style/system)
* [`time#s`](time#s)


### T


* [`angle#turn`](angle#turn)
* [`tab-size`](tab-size)
* [`table-layout`](table-layout)
* [`tan()`](tan)
* [`:target`](:target)
* `target-counter()`
* `target-counters()`
* [`::target-text`](::target-text)
* `target-text()`
* [`:target-within`](:target-within)
* [`text-align`](text-align)
* [`text-align-last`](text-align-last)
* [`text-combine-upright`](text-combine-upright)
* [`text-decoration`](text-decoration)
* [`text-decoration-color`](text-decoration-color)
* [`text-decoration-line`](text-decoration-line)
* [`text-decoration-skip`](text-decoration-skip)
* [`text-decoration-skip-ink`](text-decoration-skip-ink)
* [`text-decoration-style`](text-decoration-style)
* [`text-decoration-thickness`](text-decoration-thickness)
* [`text-emphasis`](text-emphasis)
* [`text-emphasis-color`](text-emphasis-color)
* [`text-emphasis-position`](text-emphasis-position)
* [`text-emphasis-style`](text-emphasis-style)
* [`text-indent`](text-indent)
* [`text-justify`](text-justify)
* [`text-orientation`](text-orientation)
* [`text-overflow`](text-overflow)
* [`text-rendering`](text-rendering)
* [`text-shadow`](text-shadow)
* [`text-size-adjust`](text-size-adjust)
* [`text-transform`](text-transform)
* [`text-underline-offset`](text-underline-offset)
* [`text-underline-position`](text-underline-position)
* [`<time>`](time)
* [`<time-percentage>`](time-percentage)
* [`<timing-function>`](easing-function)
* [`top`](top)
* [`@top-center`](@page#page-margin-box-type)
* [`touch-action`](touch-action)
* [`transform`](transform)
* [`transform-box`](transform-box)
* [`<transform-function>`](transform-function)
* [`transform-origin`](transform-origin)
* [`transform-style`](transform-style)
* [`transition`](transition)
* [`transition-delay`](transition-delay)
* [`transition-duration`](transition-duration)
* [`transition-property`](transition-property)
* [`transition-timing-function`](transition-timing-function)
* [`translate`](translate)
* [`translate()`](transform-function/translate)
* [`translate3d()`](transform-function/translate3d)
* [`translateX()`](transform-function/translatex)
* [`translateY()`](transform-function/translatey)
* [`translateZ()`](transform-function/translatez)
* `type()`


### U


* [`unicode-bidi`](unicode-bidi)
* [`unicode-range (@font-face)`](@font-face/unicode-range)
* [`unset`](unset)
* [`<url>`](url)
* [`url()`](url#the_url()_functional_notation)
* [`:user-invalid`](:user-invalid)
* [`user-select`](user-select)
* [`:user-valid`](:user-valid)
* [`user-zoom (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)


### V


* [`length#vh`](length#vh)
* [`length#vmax`](length#vmax)
* [`length#vmin`](length#vmin)
* [`length#vw`](length#vw)
* [`:valid`](:valid)
* [`var()`](var())
* [`vertical-align`](vertical-align)
* [`@viewport`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`viewport-fit (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`visibility`](visibility)
* [`:visited`](:visited)


### W


* [`:where`](:where)
* [`white-space`](white-space)
* [`widows`](widows)
* [`width`](width)
* [`width (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)
* [`will-change`](will-change)
* [`word-break`](word-break)
* [`word-spacing`](word-spacing)
* [`word-wrap`](overflow-wrap)
* [`writing-mode`](writing-mode)


### X


* [`resolution#x`](resolution#x)


### Z


* [`z-index`](z-index)
* [`zoom (@viewport)`](https://developer.mozilla.org/en-US/docs/Web/CSS)


### Others


* [`--*`](--*)

 
Selectors
---------


The following are the various [selectors](css_selectors), which allow styles to be conditional based on various features of elements within the DOM.

### Basic selectors



**Basic selectors** are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.

 * [Universal selector](universal_selectors) `*`
* [Type selector](type_selectors) `elementname`
* [Class selector](class_selectors) `.classname`
* [ID selector](id_selectors) `#idname`
* [Attribute selector](attribute_selectors) `[attr=value]`


### Grouping selectors


 
[Selector list](selector_list) `A, B`
  Specifies that both `A` and `B` elements are selected. This is a grouping method to select several matching elements.

  ### Combinators



Combinators are selectors that establish a relationship between two or more simple selectors, such as "`A` is a child of `B`" or "`A` is adjacent to `B`", creating a complex selector.

  
[Adjacent sibling combinator](adjacent_sibling_combinator) `A + B`
  Specifies that the elements selected by both `A` and `B` have the same parent and that the element selected by `B` immediately follows the element selected by `A` horizontally.

  
[General sibling combinator](general_sibling_combinator) `A ~ B`
  Specifies that the elements selected by both `A` and `B` share the same parent and that the element selected by `A` comes before—but not necessarily immediately before—the element selected by `B`.

  
[Child combinator](child_combinator) `A > B`
  Specifies that the element selected by `B` is the direct child of the element selected by `A`.

  
[Descendant combinator](descendant_combinator) `A B`
  Specifies that the element selected by `B` is a descendant of the element selected by `A`, but is not necessarily a direct child.

  
[Column combinator](column_combinator) `A || B`  Experimental 
  Specifies that the element selected by `B` is located within the table column specified by `A`. Elements which span multiple columns are considered to be a member of all of those columns.

  
### Pseudo



 
[Pseudo classes](pseudo-classes) `:`
  Specifies a special state of the selected element(s).

  
[Pseudo elements](pseudo-elements) `::`
  Represents entities that are not included in HTML.

    See also [Selectors in the Selectors Level 4 specification](https://www.w3.org/TR/selectors/#overview).

 
Concepts
--------


### Syntax and semantics


* [CSS syntax](syntax)
* [At-rules](at-rule)
* [Cascade](cascade)
* [Comments](comments)
* [Descriptor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Descriptor)
* [Inheritance](inheritance)
* [Shorthand properties](shorthand_properties)
* [Specificity](specificity)
* [Value definition syntax](value_definition_syntax)
* [CSS unit and value types](css_values_and_units)
* [CSS functional notations](css_functions)
### Values


* [Actual value](actual_value)
* [Computed value](computed_value)
* [Initial value](initial_value)
* [Resolved value](resolved_value)
* [Specified value](specified_value)
* [Used value](used_value)
### Layout


* [Block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)
* [Box model](css_box_model/introduction_to_the_css_box_model)
* [Containing block](containing_block)
* [Layout mode](layout_mode)
* [Margin collapsing](css_box_model/mastering_margin_collapsing)
* [Replaced elements](replaced_element)
* [Stacking context](css_positioning/understanding_z_index/the_stacking_context)
* [Visual formatting model](visual_formatting_model)
DOM-CSS / CSSOM
---------------


### Major object types


* [`Document.styleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets)
* `[styleSheets](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList)[i].[cssRules](https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList)`
* `cssRules[i].[cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText)` (selector & style)
* `cssRules[i].[selectorText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule/selectorText)`
* [`HTMLElement.style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
* `HTMLElement.style.[cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)` (just style)
* [`Element.className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
* [`Element.classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
### Important methods


* [`CSSStyleSheet.insertRule()`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule)
* [`CSSStyleSheet.deleteRule()`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule)
See also
--------


* [Mozilla CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions) (prefixed with `-moz-`)
* [WebKit CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions) (mostly prefixed with `-webkit-`)
External Links
--------------


* [CSS Indices (w3.org)](https://www.w3.org/TR/CSS/#indices)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Reference>

Pseudo-classes
==============



A [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) ***pseudo-class*** is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class [`:hover`](:hover) can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

 
```
/\* Any button over which the user's pointer is hovering \*/
button:hover {
  color: blue;
}

```
 A pseudo-class consists of a colon (`:`) followed by the pseudo-class name (e.g., `:hover`). A functional pseudo-class also contains a pair of parenthesis to define the arguments (e.g., `:dir()`). The element that a pseudo-class is attached to is defined as an *anchor element* (e.g., `button` in case `button:hover`).

 Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ([`:visited`](:visited), for example), the status of its content (like [`:checked`](:checked) on certain form elements), or the position of the mouse (like [`:hover`](:hover), which lets you know if the mouse is over an element or not).

  **Note:** In contrast to pseudo-classes, <pseudo-elements> can be used to style a *specific part* of an element.

 

Element display state pseudo-classes
------------------------------------



These pseudo-classes enable the selection of elements based on their display states.

  [`:fullscreen`](:fullscreen)  Matches an element that is currently in fullscreen mode.

  [`:modal`](:modal)  Matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed.

  [`:picture-in-picture`](:picture-in-picture)  Matches an element that is currently in picture-in-picture mode.

  
Input pseudo-classes
--------------------



These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

  [`:autofill`](:autofill)  Matches when an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) has been autofilled by the browser.

  [`:enabled`](:enabled)  Represents a user interface element that is in an enabled state.

  [`:disabled`](:disabled)  Represents a user interface element that is in a disabled state.

  [`:read-only`](:read-only)  Represents any element that cannot be changed by the user.

  [`:read-write`](:read-write)  Represents any element that is user-editable.

  [`:placeholder-shown`](:placeholder-shown)  Matches an input element that is displaying placeholder text. For example, it will match the `placeholder` attribute in the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) and [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) elements.

  [`:default`](:default)  Matches one or more UI elements that are the default among a set of elements.

  [`:checked`](:checked)  Matches when elements such as checkboxes and radio buttons are toggled on.

  [`:indeterminate`](:indeterminate)  Matches UI elements when they are in an indeterminate state.

  [`:blank`](:blank)  Matches a user-input element which is empty, containing an empty string or other null input.

  [`:valid`](:valid)  Matches an element with valid contents. For example, an input element with the type 'email' that contains a validly formed email address or an empty value if the control is not required.

  [`:invalid`](:invalid)  Matches an element with invalid contents. For example, an input element with type 'email' with a name entered.

  [`:in-range`](:in-range)  Applies to elements with range limitations. For example, a slider control when the selected value is in the allowed range.

  [`:out-of-range`](:out-of-range)  Applies to elements with range limitations. For example, a slider control when the selected value is outside the allowed range.

  [`:required`](:required)  Matches when a form element is required.

  [`:optional`](:optional)  Matches when a form element is optional.

  [`:user-invalid`](:user-invalid)  Represents an element with incorrect input, but only when the user has interacted with it.

  
Linguistic pseudo-classes
-------------------------



These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.

  [`:dir()`](:dir)  The directionality pseudo-class selects an element based on its directionality as determined by the document language.

  [`:lang()`](:lang)  Select an element based on its content language.

  
Location pseudo-classes
-----------------------



These pseudo-classes relate to links, and to targeted elements within the current document.

  [`:any-link`](:any-link)  Matches an element if the element would match either [`:link`](:link) or [`:visited`](:visited).

  [`:link`](:link)  Matches links that have not yet been visited.

  [`:visited`](:visited)  Matches links that have been visited.

  [`:local-link`](:local-link)  Matches links whose absolute URL is the same as the target URL. For example, anchor links to the same page.

  [`:target`](:target)  Matches the element which is the target of the document URL.

  [`:target-within`](:target-within)  Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.

  [`:scope`](:scope)  Represents elements that are a reference point for selectors to match against.

  
Resource state pseudo-classes
-----------------------------



These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

  [`:playing`](:playing)  Represents a media element that is capable of playing when that element is playing.

  [`:paused`](:paused)  Represents a media element that is capable of playing when that element is paused.

  
Time-dimensional pseudo-classes
-------------------------------



These pseudo-classes apply when viewing something which has timing, such as a [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) caption track.

  [`:current`](:current)  Represents the element or ancestor of the element that is being displayed.

  [`:past`](:past)  Represents an element that occurs entirely before the [`:current`](:current) element.

  [`:future`](:future)  Represents an element that occurs entirely after the [`:current`](:current) element.

  
Tree-structural pseudo-classes
------------------------------



These pseudo-classes relate to the location of an element within the document tree.

  [`:root`](:root)  Represents an element that is the root of the document. In HTML this is usually the `<html>` element.

  [`:empty`](:empty)  Represents an element with no children other than white-space characters.

  [`:nth-child`](:nth-child)  Uses `An+B` notation to select elements from a list of sibling elements.

  [`:nth-last-child`](:nth-last-child)  Uses `An+B` notation to select elements from a list of sibling elements, counting backwards from the end of the list.

  [`:first-child`](:first-child)  Matches an element that is the first of its siblings.

  [`:last-child`](:last-child)  Matches an element that is the last of its siblings.

  [`:only-child`](:only-child)  Matches an element that has no siblings. For example, a list item with no other list items in that list.

  [`:nth-of-type`](:nth-of-type)  Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.

  [`:nth-last-of-type`](:nth-last-of-type)  Uses `An+B` notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.

  [`:first-of-type`](:first-of-type)  Matches an element that is the first of its siblings, and also matches a certain type selector.

  [`:last-of-type`](:last-of-type)  Matches an element that is the last of its siblings, and also matches a certain type selector.

  [`:only-of-type`](:only-of-type)  Matches an element that has no siblings of the chosen type selector.

  
User action pseudo-classes
--------------------------



These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

  [`:hover`](:hover)  Matches when a user designates an item with a pointing device, such as holding the mouse pointer over the item.

  [`:active`](:active)  Matches when an item is being activated by the user. For example, when the item is clicked on.

  [`:focus`](:focus)  Matches when an element has focus.

  [`:focus-visible`](:focus-visible)  Matches when an element has focus and the user agent identifies that the element should be visibly focused.

  [`:focus-within`](:focus-within)  Matches an element to which [`:focus`](:focus) applies, plus any element that has a descendant to which [`:focus`](:focus) applies.

  
Functional pseudo-classes
-------------------------



These pseudo-classes accept a [selector list](selector_list#selector_list) or [forgiving selector list](selector_list#forgiving_selector_list) as a parameter.

  [`:is()`](:is)  The matches-any pseudo-class matches any element that matches any of the selectors in the list provided. The list is forgiving.

  [`:not()`](:not)  The negation, or matches-none, pseudo-class represents any element that is not represented by its argument.

  [`:where()`](:where)  The specificity-adjustment pseudo-class matches any element that matches any of the selectors in the list provided without adding any specificity weight. The list is forgiving.

  [`:has()`](:has)  The relational pseudo-class represents an element if any of the relative selectors match when anchored against the attached element.

  
Syntax
------




```
selector:pseudo-class {
  property: value;
}

```
 Like regular classes, you can chain together as many pseudo-classes as you want in a selector.


Alphabetical index
------------------



Pseudo-classes defined by a set of CSS specifications include the following:

 A

 * [`:active`](:active)
* [`:any-link`](:any-link)
* [`:autofill`](:autofill)

 B

 * [`:blank`](:blank)  Experimental

 C

 * [`:checked`](:checked)
* [`:current`](:current)  Experimental

 D

 * [`:default`](:default)
* [`:defined`](:defined)
* [`:dir()`](:dir)  Experimental
* [`:disabled`](:disabled)

 E

 * [`:empty`](:empty)
* [`:enabled`](:enabled)

 F

 * [`:first`](:first)
* [`:first-child`](:first-child)
* [`:first-of-type`](:first-of-type)
* [`:fullscreen`](:fullscreen)
* [`:future`](:future)  Experimental
* [`:focus`](:focus)
* [`:focus-visible`](:focus-visible)
* [`:focus-within`](:focus-within)

 H

 * [`:has()`](:has)  Experimental
* [`:host`](:host)
* [`:host()`](:host)
* [`:host-context()`](:host-context)  Experimental
* [`:hover`](:hover)

 I

 * [`:indeterminate`](:indeterminate)
* [`:in-range`](:in-range)
* [`:invalid`](:invalid)
* [`:is()`](:is)

 L

 * [`:lang()`](:lang)
* [`:last-child`](:last-child)
* [`:last-of-type`](:last-of-type)
* [`:left`](:left)
* [`:link`](:link)
* [`:local-link`](:local-link)  Experimental

 M

 * [`:modal`](:modal)

 N

 * [`:not()`](:not)
* [`:nth-child()`](:nth-child)
* [`:nth-col()`](:nth-col)  Experimental
* [`:nth-last-child()`](:nth-last-child)
* [`:nth-last-col()`](:nth-last-col)  Experimental
* [`:nth-last-of-type()`](:nth-last-of-type)
* [`:nth-of-type()`](:nth-of-type)

 O

 * [`:only-child`](:only-child)
* [`:only-of-type`](:only-of-type)
* [`:optional`](:optional)
* [`:out-of-range`](:out-of-range)

 P

 * [`:past`](:past)  Experimental
* [`:picture-in-picture`](:picture-in-picture)
* [`:placeholder-shown`](:placeholder-shown)
* [`:paused`](:paused)
* [`:playing`](:playing)

 R

 * [`:read-only`](:read-only)
* [`:read-write`](:read-write)
* [`:required`](:required)
* [`:right`](:right)
* [`:root`](:root)

 S

 * [`:scope`](:scope)
* `:state()`  Experimental

 T

 * [`:target`](:target)
* [`:target-within`](:target-within)  Experimental

 U

 * [`:user-invalid`](:user-invalid)  Experimental

 V

 * [`:valid`](:valid)
* [`:visited`](:visited)

 W

 * [`:where()`](:where)


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # pseudo-classes](https://html.spec.whatwg.org/multipage/#pseudo-classes) |
| [Selectors Level 4](https://drafts.csswg.org/selectors/)  |
| [CSS Basic User Interface Module Level 4](https://drafts.csswg.org/css-ui/)  |


See also
--------


* [Pseudo-elements](pseudo-elements)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes>

Custom properties (--\*): CSS variables
=======================================



Property names that are prefixed with `--`, like `--example-name`, represent *custom properties* that contain a value that can be used in other declarations using the [`var()`](var()) function.

 Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.




|  |  |
| --- | --- |
| [Initial value](initial_value) | see prose |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified with variables substituted |
| Animation type | discrete |



Syntax
------




```
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

```
  `<declaration-value>`  This value matches any sequence of one or more tokens, so long as the sequence does not contain an disallowed token. It represents the entirety of what a valid declaration can have as its value.

    **Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.

 
Example
-------


### HTML



```
<p id="firstParagraph">
  This paragraph should have a blue background and yellow text.
</p>
<p id="secondParagraph">
  This paragraph should have a yellow background and blue text.
</p>
<div id="container">
  <p id="thirdParagraph">
    This paragraph should have a green background and yellow text.
  </p>
</div>

```
### CSS



```
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables](https://w3c.github.io/csswg-drafts/css-variables/#defining-variables) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `--*` | 49 | 15 | 31 | No | 36 | 9.1 | 49 | 49 | 31 | 36 | 9.3 | 5.0 |
| `env` | 69 | 79 | 65 | No | 56 | 11.111–11.1 | 69 | 69 | 65 | 48 | 11.311–11.3 | 10.0 |
| `var` | 49 | 15 | 31 | No | 36 | 9.1 | 50 | 49 | 31 | 36 | 9.3 | 5.0 |


See also
--------


* [Using CSS variables](using_css_custom_properties)
* The [`var()`](var()) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

[https://developer.mozilla.org/en-US/docs/Web/CSS/--\*](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)

-webkit-line-clamp
==================



The `-webkit-line-clamp` CSS property allows limiting of the contents of a [block](https://developer.mozilla.org/en-US/docs/Glossary/Block) to the specified number of lines.

 It only works in combination with the [`display`](display) property set to `-webkit-box` or `-webkit-inline-box` and the [`-webkit-box-orient`](box-orient) property set to `vertical`.

 In most cases you will also want to set [`overflow`](overflow) to `hidden`, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.

 When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

  **Note:** This property was originally implemented in WebKit and has some issues. It got standardized in [CSS Overflow Module Level 4](https://w3c.github.io/csswg-drafts/css-overflow-4/#propdef--webkit-line-clamp) for legacy support. The [CSS Overflow Module Level 4](https://w3c.github.io/csswg-drafts/css-overflow-4/#propdef-line-clamp) specification also defines a `line-clamp` property, which is meant to replace this property and avoid its issues.

 

Syntax
------



```
/\* Keyword value \*/
-webkit-line-clamp: none;

/\* <integer> values \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* Global values \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

```
### Values


 `none`  This value specifies that the content won't be clamped.

  [`<integer>`](integer)  This value specifies the number of lines after which the content will be clamped. It must be greater than 0.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
-webkit-line-clamp =   
  none       [|](value_definition_syntax#single_bar)  
  [<integer>](integer)    
  

```
Examples
--------


### Truncating a paragraph



#### HTML

 
```
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>

```
 #### CSS

 
```
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 4 # propdef--webkit-line-clamp](https://w3c.github.io/csswg-drafts/css-overflow-4/#propdef--webkit-line-clamp) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-webkit-line-clamp` | 6 | 17 | 68 | No | 15 | 5 | ≤37 | 18 | 68 | 14 | 4.2 | 1.0 |


See also
--------


* [Line Clampin' (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)
* `line-clamp`


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp>

<angle-percentage>
==================



The `<angle-percentage>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a value that can be either a [`<angle>`](angle) or a [`<percentage>`](percentage).

 Where an `<angle-percentage>` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a [`calc()`](calc) expression.



Syntax
------


Refer to the documentation for [`<angle>`](angle) and [`<percentage>`](percentage) for details of the individual syntaxes allowed by this type.

Formal syntax
-------------



```
<angle-percentage> =   
  [<angle>](angle)       [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # mixed-percentages](https://w3c.github.io/csswg-drafts/css-values/#mixed-percentages) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `angle-percentage` | 2 | 12 | 3.6 | 9 | 15 | 4 | 2 | 18 | 4 | 14 | 3.2 | 1.0 |


See also
--------


* [CSS data types](css_types)
* [Using CSS gradients](css_images/using_css_gradients)
* [`conic-gradient()`](gradient/conic-gradient) and [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/angle-percentage>

accent-color
============


The `accent-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [accent](https://developer.mozilla.org/en-US/docs/Glossary/Accent) color for user-interface controls generated by some elements.


Try it
------



 Browsers that support `accent-color` currently apply it to the following HTML elements:

 * [`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
* [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
* [`<input type="range">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
* [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)


Syntax
------



```
/\* Keyword values \*/
accent-color: auto;

/\* <color> values \*/
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

/\* Global values \*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

```
### Values


 `auto`  Represents a UA-chosen color, which should match the accent color of the platform, if any.

  [`<color>`](color_value)  Specifies the color to be used as the accent color.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | `auto` is computed as specified and `<color>` values are computed as defined for the [`color`](color) property. |
| Animation type | by computed value type |

Formal syntax
-------------



```
accent-color =   
  auto     [|](value_definition_syntax#single_bar)  
  [<color>](color_value)    
  

```
Examples
--------


### Setting a custom accent color



#### HTML

 
```
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

```
 #### CSS

 
```
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # widget-accent](https://w3c.github.io/csswg-drafts/css-ui/#widget-accent) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `accent-color` | 93 | 93 | 92 | No | 79 | 15.4 | 93 | 93 | 92 | 66 | 15.4 | 17.0 |


See also
--------


* [`background-color`](background-color), [`border-color`](border-color), [`caret-color`](caret-color), [`color`](color), [`column-rule-color`](column-rule-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow): Other color-related properties
* [`<color>`](color_value): Related data type
* [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input): Related HTML element
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color>

acos()
======


The `acos()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the inverse cosine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an [`<angle>`](angle) between `0deg` and `180deg`.


Syntax
------



```
/\* Single <number> values \*/
transform: rotate(acos(-0.2));
transform: rotate(acos(2 * 0.125));

/\* Other values \*/
transform: rotate(acos(pi / 5));
transform: rotate(acos(e / 3));

```
### Parameter



The `acos(number)` function accepts only one value as its parameter.

  `number`  A calculation which resolves to a [`<number>`](number) between `-1` and `1`.

  
### Return value



The inverse cosine of an `number` will always return an [`<angle>`](angle) between `0deg` and `180deg`.

 * If `number` is less than `-1` or greater than `1`, the result is `NaN`.
* If `number` is exactly `1`, the result is `0`.


### Formal syntax



```
<acos()> =   
  acos( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Rotate elements



The `acos()` function can be used to [`rotate`](transform-function/rotate) elements as it return an [`<angle>`](angle).

 #### HTML

 
```
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

```
 #### CSS

 
```
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(acos(1));
}
div.box-2 {
  transform: rotate(acos(0.5));
}
div.box-3 {
  transform: rotate(acos(0));
}
div.box-4 {
  transform: rotate(acos(-0.5));
}
div.box-5 {
  transform: rotate(acos(-1));
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `acos` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`sin()`](sin)
* [`cos()`](cos)
* [`tan()`](tan)
* [`asin()`](asin)
* [`atan()`](atan)
* [`atan2()`](atan2)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/acos>

:active
=======


The `:active` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.


Try it
------



 The `:active` pseudo-class is commonly used on [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) elements. Other common targets of this pseudo-class include elements that are *contained in* an activated element, and form elements that are being activated through their associated [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).

 Styles defined by the `:active` pseudo-class will be overridden by any subsequent link-related pseudo-class ([`:link`](:link), [`:hover`](:hover), or [`:visited`](:visited)) that has at least equal specificity. To style links appropriately, put the `:active` rule after all other link-related rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`.

  **Note:** On systems with multi-button mice, CSS specifies that the `:active` pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.

 
Syntax
------



```
:active {
  /\* ... \*/
}

```
Examples
--------


### Active links



#### HTML

 
```
<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.</a>
  The paragraph will get a gray background while you click on it or the link.
</p>

```
 #### CSS

 
```
/\* Unvisited links \*/
a:link {
  color: blue;
}
/\* Visited links \*/
a:visited {
  color: purple;
}
/\* Hovered links \*/
a:hover {
  background: yellow;
}
/\* Active links \*/
a:active {
  color: red;
}

/\* Active paragraphs \*/
p:active {
  background: #eee;
}

```
 #### Result



### Active form elements



#### HTML

 
```
<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>

```
 #### CSS

 
```
form :active {
  color: red;
}

form button {
  background: white;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-active](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-active) |
| [Selectors Level 4 # the-active-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-active-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:active` | 1 | 12 | 1 | 4 | 5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `non_a_elements` | 1 | 12 | 1 | 8 | 7 | 1 | 4.4 | 18 | 4 | 14 | 1By default, Safari on iOS does not use the [`:active`](https://developer.mozilla.org/docs/Web/CSS/:active) state unless there is a [`touchstart`](https://developer.mozilla.org/docs/Web/Reference/Events/touchstart) event handler on the relevant element or on the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. | 1.0 |


See also
--------


* Link-related pseudo-classes: [`:link`](:link), [`:visited`](:visited), and [`:hover`](:hover)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:active>

additive-symbols
================


The `additive-symbols` descriptor lets you specify symbols when the value of a counter [`system`](system) descriptor is `additive`. The `additive-symbols` descriptor defines *additive tuples*, each of which is a pair containing a symbol and a non-negative integer weight. The additive system is used to construct [sign-value numbering](https://en.wikipedia.org/wiki/Sign-value_notation) systems such as Roman numerals.


Syntax
------




```
additive-symbols: 3 "0";
additive-symbols: 3 "0", 2 "\2E\20";
additive-symbols: 3 "0", 2 url(symbol.png);

```
 When the `system` descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`, use the [`symbols()`](symbols) descriptor instead of `additive-symbols`.


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `n/a (required)` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
additive-symbols =   
  [[](../value_definition_syntax#brackets) [<integer [0,∞]>](../integer) [&&](../value_definition_syntax#double_ampersand) <symbol> []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)    
  
<symbol> =   
  [<string>](../string)        [|](../value_definition_syntax#single_bar)  
  <image>         [|](../value_definition_syntax#single_bar)  
  [<custom-ident>](../custom-ident)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Specifying additive symbols



#### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: V 5, IV 4, I 1;
}
.list {
  list-style: additive-symbols-example;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-symbols](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-symbols) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `additive-symbols` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* The [`symbols()`](symbols), functional notation is used for creating anonymous counter styles.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/additive-symbols>

::after
=======


In CSS, `::after` creates a [pseudo-element](pseudo-elements) that is the last child of the selected element. It is often used to add cosmetic content to an element with the [`content`](content) property. It is inline by default.


Try it
------



  **Note:** The pseudo-elements generated by `::before` and `::after` are [contained by the element's formatting box](https://www.w3.org/TR/CSS2/generate.html#before-after-content), and thus don't apply to *[replaced elements](replaced_element)* such as [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), or to [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br) elements.

 
Syntax
------




```
::after {
  /\* ... \*/
}

```
  **Note:** CSS introduced the `::after` notation (with two colons) to distinguish <pseudo-classes> from <pseudo-elements>. For backward compatibility, browsers also accept `:after`, introduced earlier.

 
Examples
--------


### Simple usage



Let's create two classes: one for boring paragraphs and one for exciting ones. We can use these classes to add pseudo-elements to the end of paragraphs.

 #### HTML

 
```
<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

```
 #### CSS

 
```
.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

```
 #### Result



### Decorative example



We can style text or images in the [`content`](content) property almost any way we want.

 #### HTML

 
```
<span class="ribbon">Look at the orange box after this text. </span>

```
 #### CSS

 
```
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

```
 #### Result



### Tooltips



This example uses `::after`, in conjunction with the [`attr()`](attr) CSS expression and a `data-descr` [custom data attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*), to create tooltips. No JavaScript is required!

 We can also support keyboard users with this technique, by adding a `tabindex` of `0` to make each `span` keyboard focusable, and using a CSS `:focus` selector. This shows how flexible `::before` and `::after` can be, though for the most accessible experience a semantic disclosure widget created in some other way (such as with [details and summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elements) is likely to be more appropriate.

 #### HTML

 
```
<p>
  Here we have some
  <span tabindex="0" data-descr="collection of words and punctuation">
    text
  </span>
  with a few
  <span tabindex="0" data-descr="small popups that appear when hovering">
    tooltips</span
 >.
</p>

```
 #### CSS

 
```
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

```
 #### Result



Accessibility concerns
----------------------


Using an `::after` pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # generated-content](https://w3c.github.io/csswg-drafts/css-pseudo/#generated-content) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::after` | 11 | 1212 | 1.5["Before Firefox 57, Firefox had a bug where `::after` pseudo-elements were still generated, even if the [`content`](https://developer.mozilla.org/docs/Web/CSS/content) property value were set to `normal` or `none`.", "Before Firefox 3.5, only the CSS level 2 behavior of `:after` was supported, which disallowed [`position`](https://developer.mozilla.org/docs/Web/CSS/position), [`float`](https://developer.mozilla.org/docs/Web/CSS/float), `list-style-*` and some `display` properties."]1 | 98 | 74 | 44 | ≤37≤37 | 1818 | 4["Before Firefox 57, Firefox had a bug where `::after` pseudo-elements were still generated, even if the [`content`](https://developer.mozilla.org/docs/Web/CSS/content) property value were set to `normal` or `none`.", "Before Firefox 3.5, only the CSS level 2 behavior of `:after` was supported, which disallowed [`position`](https://developer.mozilla.org/docs/Web/CSS/position), [`float`](https://developer.mozilla.org/docs/Web/CSS/float), `list-style-*` and some `display` properties."]4 | 10.110.1 | 3.23.2 | 1.01.0 |
| `animation_and_transition_support` | 26 | 12 | 4 | No | 15 | No | 4.4 | 26 | 4 | 14 | No | 1.5 |


See also
--------


* [`::before`](::before)
* [`content`](content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::after>

align-tracks
============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `align-tracks` CSS property sets the alignment in the masonry axis for grid containers that have [masonry](css_grid_layout/masonry_layout) in their block axis.



Syntax
------




```
/\* Keyword values \*/
align-tracks: start;
align-tracks: space-between;
align-tracks: center;
align-tracks: start, center, end;

/\* Global values \*/
align-tracks: inherit;
align-tracks: initial;
align-tracks: revert;
align-tracks: revert-layer;
align-tracks: unset;

```
 The property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next and so on.

 If there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored.


### Values


 `start`  The items are packed flush to each other toward the start edge of the alignment container in the masonry axis.

  `end`  The items are packed flush to each other toward the end edge of the alignment container in the masonry axis.

  `center`  The items are packed flush to each other toward the center of the alignment container along the masonry axis.

  `normal`  Acts as `start`.

   `baseline first baseline` `last baseline`    Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `space-between`  The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

  `space-around`  The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

  `space-evenly`  The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

  `stretch`  The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | Grid containers with masonry layout in their block axis |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
align-tracks =   
  [[](value_definition_syntax#brackets) normal [|](value_definition_syntax#single_bar) <baseline-position> [|](value_definition_syntax#single_bar) <content-distribution> [|](value_definition_syntax#single_bar) <overflow-position>[?](value_definition_syntax#question_mark) <content-position> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<baseline-position> =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  baseline             
  
<content-distribution> =   
  space-between  [|](value_definition_syntax#single_bar)  
  space-around   [|](value_definition_syntax#single_bar)  
  space-evenly   [|](value_definition_syntax#single_bar)  
  stretch          
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<content-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### Masonry layout with multiple values for align-tracks


Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 3 # tracks-alignment](https://w3c.github.io/csswg-drafts/css-grid-3/#tracks-alignment) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `align-tracks` | No | No | 77 | No | No | No | No | No | No | No | No | No |


See also
--------


* Related CSS properties: [`justify-tracks`](justify-tracks), [`masonry-auto-flow`](masonry-auto-flow)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/align-tracks>

<angle>
=======


The `<angle>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in [`<gradient>`](gradient)s and in some [`transform`](transform) functions.


Try it
------


Syntax
------



The `<angle>` data type consists of a [`<number>`](number) followed by one of the units listed below. As with all dimensions, there is no space between the unit literal and the number. The angle unit is optional after the number `0`.

 Optionally, it may be preceded by a single `+` or `-` sign. Positive numbers represent clockwise angles, while negative numbers represent counterclockwise angles. For static properties of a given unit, any angle can be represented by various equivalent values. For example, `90deg` equals `-270deg`, and `1turn` equals `4turn`. For dynamic properties, like when applying an [`animation`](animation) or [`transition`](transition), the effect will nevertheless be different.


### Units


 `deg`  Represents an angle in [degrees](https://en.wikipedia.org/wiki/Degree_%28angle%29). One full circle is `360deg`. Examples: `0deg`, `90deg`, `14.23deg`.

  `grad`  Represents an angle in [gradians](https://en.wikipedia.org/wiki/Gradian). One full circle is `400grad`. Examples: `0grad`, `100grad`, `38.8grad`.

  `rad`  Represents an angle in [radians](https://en.wikipedia.org/wiki/Radian). One full circle is 2π radians which approximates to `6.2832rad`. `1rad` is 180/π degrees. Examples: `0rad`, `1.0708rad`, `6.2832rad`.

  `turn`  Represents an angle in a number of turns. One full circle is `1turn`. Examples: `0turn`, `0.25turn`, `1.2turn`.

  Examples
--------


### Setting a clockwise right angle




|  |  |
| --- | --- |
|  | `90deg = 100grad = 0.25turn ≈ 1.5708rad` |

### Setting a flat angle




|  |  |
| --- | --- |
|  | `180deg = 200grad = 0.5turn ≈ 3.1416rad` |

### Setting a counterclockwise right angle




|  |  |
| --- | --- |
|  | `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |

### Setting a null angle




|  |  |
| --- | --- |
|  | `0 = 0deg = 0grad = 0turn = 0rad` |

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # angles](https://w3c.github.io/csswg-drafts/css-values/#angles) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `angle` | 2 | 12 | 3.6 | 9 | 15 | 4 | 2 | 18 | 4 | 14 | 3.2 | 1.0 |
| `deg` | 2 | 12 | 3.6 | 9 | 15 | 4 | 2 | 18 | 4 | 14 | 3.2 | 1.0 |
| `grad` | 2 | 12 | 3.6 | 9 | 15 | 4 | 2 | 18 | 4 | 14 | 3.2 | 1.0 |
| `rad` | 2 | 12 | 3.6 | 9 | 15 | 4 | 2 | 18 | 4 | 14 | 3.2 | 1.0 |
| `turn` | 2 | 12 | 13 | 9 | 15 | 4 | 2 | 18 | 14 | 14 | 3.2 | 1.0 |


See also
--------


* [CSS data types](css_types)
* The [`<gradient>`](gradient) type
* CSS rotation transforms: [`rotate()`](transform-function/rotate), [`rotate3d()`](transform-function/rotate3d), [`rotateX()`](transform-function/rotatex), [`rotateY()`](transform-function/rotatey), and [`rotateZ()`](transform-function/rotatez)
* [CSS transforms](css_transforms)
* [Using CSS transforms](css_transforms/using_css_transforms)
* [Using CSS gradients](css_images/using_css_gradients)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/angle>

Pseudo-elements
===============



A CSS **pseudo-element** is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, [`::first-line`](::first-line) can be used to change the font of the first line of a paragraph.

 
```
/\* The first line of every <p> element. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}

```
  **Note:** In contrast to pseudo-elements, [`pseudo-classes`](pseudo-classes) can be used to style an element based on its *state*.

 

Syntax
------




```
selector::pseudo-element {
  property: value;
}

```
 You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

  **Note:** As a rule, double colons (`::`) should be used instead of a single colon (`:`). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

 
Alphabetical index
------------------



Pseudo-elements defined by a set of CSS specifications include the following:

 A

 * [`::after`](::after)

 B

 * [`::backdrop`](::backdrop)
* [`::before`](::before)

 C

 * [`::cue`](::cue)
* [`::cue-region`](::cue-region)

 F

 * [`::first-letter`](::first-letter)
* [`::first-line`](::first-line)
* [`::file-selector-button`](::file-selector-button)

 G

 * [`::grammar-error`](::grammar-error)  Experimental

 M

 * [`::marker`](::marker)

 P

 * [`::part()`](::part)
* [`::placeholder`](::placeholder)

 S

 * [`::selection`](::selection)
* [`::slotted()`](::slotted)
* [`::spelling-error`](::spelling-error)  Experimental

 T

 * [`::target-text`](::target-text)  Experimental


Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # pseudo-element-selectors](https://www.w3.org/TR/CSS22/selector.html#pseudo-element-selectors) |


Browser compatibility
---------------------

See also
--------


* [Pseudo-classes](pseudo-classes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements>

abs()
=====



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `abs()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) returns the absolute value of the argument, as the same type as the input.



Syntax
------



```
/\* property: abs(expression) \*/
width: abs(20% - 100px);

```
### Parameters



The `abs(x)` function accepts only one value as its parameter.

  `x`  A calculation which resolves to a number.

  
### Return value



The absolute value of `x`.

 * if `x`'s numeric value is positive or `0⁺`, return `x`.
* Otherwise, returns `-1 * x`.


### Formal syntax



```
<abs()> =   
  abs( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Positive variables



The `abs()` function can be used to ensure that a value is always positive. In the following example a CSS custom property `--font-size` is used as the value of [`font-size`](font-size). Wrapping this custom property in `abs()` will convert a negative value to a positive one.

 
```
h1 {
  font-size: abs(var(--font-size));
}

```

### Control gradient angle of direction



You can also control the gradient direction using `abs()` function. In the following example, with an angle of -45deg the gradient would start red and transition to blue. By using `abs()` to make the value positive, the gradient will start blue and transition to red.

 
```
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}

```

### Backwards compatible fallback



In older browsers that lack the support for CSS `abs()` function, you can use the CSS [`max()`](max) function to achieve the same result, as shown below:

 
```
p {
  line-height: max(var(--lh), -1 * var(--lh));
}

```
 We use the [`max()`](max) function to return the largest (most positive) value from a list of two values: `var(--lh)` or `-1 * var(--lh)`. Irrespective of whether `--lh` is positive or negative, the calculated return value will always be positive, that is, an absolute number.


Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # sign-funcs](https://w3c.github.io/csswg-drafts/css-values/#sign-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `abs` | No | No | No | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`sign()`](sign)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/abs>

align-content
=============



The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `align-content` property sets the distribution of space between and around content items along a [flexbox](css_flexible_box_layout)'s cross-axis or a [grid](css_grid_layout)'s block axis.

 The interactive example below uses Grid Layout to demonstrate some of the values of this property.



Try it
------



 This property has no effect on single line flex containers (i.e. ones with `flex-wrap: nowrap`).


Syntax
------



```
/\* Basic positional alignment \*/
/\* align-content does not take left and right values \*/
align-content: center; /\* Pack items around the center \*/
align-content: start; /\* Pack items from the start \*/
align-content: end; /\* Pack items from the end \*/
align-content: flex-start; /\* Pack flex items from the start \*/
align-content: flex-end; /\* Pack flex items from the end \*/

/\* Normal alignment \*/
align-content: normal;

/\* Baseline alignment \*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/\* Distributed alignment \*/
align-content: space-between; /\* Distribute items evenly
 The first item is flush with the start,
 the last is flush with the end \*/
align-content: space-around; /\* Distribute items evenly
 Items have a half-size space
 on either end \*/
align-content: space-evenly; /\* Distribute items evenly
 Items have equal space around them \*/
align-content: stretch; /\* Distribute items evenly
 Stretch 'auto'-sized items to fit
 the container \*/

/\* Overflow alignment \*/
align-content: safe center;
align-content: unsafe center;

/\* Global values \*/
align-content: inherit;
align-content: initial;
align-content: revert;
align-content: revert-layer;
align-content: unset;

```
### Values


 `start`  The items are packed flush to each other against the start edge of the alignment container in the cross axis.

  `end`  The items are packed flush to each other against the end edge of the alignment container in the cross axis.

  `flex-start`   The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`. 

  `flex-end`   The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`. 

  `center`  The items are packed flush to each other in the center of the alignment container along the cross axis.

  `normal`  The items are packed in their default position as if no `align-content` value was set.

  
`baseline`, `first baseline`, `last baseline`
  Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.

  ![the baseline is the line upon which most letters "sit" and below which descenders extend.] 

 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

  `space-between`  The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The first item is flush with the start edge of the alignment container in the cross axis, and the last item is flush with the end edge of the alignment container in the cross axis.

  `space-around`  The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

  `space-evenly`  The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.

  `stretch`  If the combined size of the items along the cross axis is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.

  `safe`  Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | multi-line flex containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
align-content =   
  normal                                   [|](value_definition_syntax#single_bar)  
  <baseline-position>                      [|](value_definition_syntax#single_bar)  
  <content-distribution>                   [|](value_definition_syntax#single_bar)  
  <overflow-position>[?](value_definition_syntax#question_mark) <content-position>    
  
<baseline-position> =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  baseline             
  
<content-distribution> =   
  space-between  [|](value_definition_syntax#single_bar)  
  space-around   [|](value_definition_syntax#single_bar)  
  space-evenly   [|](value_definition_syntax#single_bar)  
  stretch          
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<content-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### CSS



```
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

```
### HTML




```
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

```

### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # align-justify-content](https://w3c.github.io/csswg-drafts/css-align/#align-justify-content) |
| [CSS Flexible Box Layout Module Level 1 # align-content-property](https://w3c.github.io/csswg-drafts/css-flexbox/#align-content-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `align-content` | 2921 | 1212 | 4928 | 11 | 1615 | 97 | ≤374.4 | 2925 | 4928 | 1614 | 97 | 2.01.5 |
| `flex_context` | 21 | 12 | 28 | 11 | 15 | 9 | 4.4 | 25 | 28 | 14 | 9 | 1.5 |
| `grid_context` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 52 | 52 | 43 | 10.3 | 6.2 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/align-content>

CSS data types
==============



**CSS data types** define typical values (including keywords and units) accepted by CSS properties and functions. They are a special kind of [component value type](https://www.w3.org/TR/css3-values/#component-types).

 The most commonly-used types are defined in the [CSS Values and Units](css_values_and_units) specification. This specification also defines [functional notations](css_functions), which allow for more complex types or processing. Other types are defined in the specifications to which they apply.

 Below you will find a reference to the types that you are most likely to come across, however it is not a comprehensive reference for all types defined in every CSS specification.



Syntax
------




```
selector {
  property: <unit-data-type>;
}

```
 In formal CSS syntax, data types are denoted by a keyword placed between the inequality signs "`<`" and "`>`".


Textual data types
------------------



These types include keywords and identifiers as well as strings, and URLs.

  Pre-defined keywords  Keywords with a pre-defined meaning, for example the value of `collapse` for the [`border-collapse`](border-collapse) property.

  CSS-wide keyword: `initial`
  The value specified as the property's initial value.

  CSS-wide keyword: `inherit`
  The computed value of the property on the element's parent.

  CSS-wide keyword: `unset`
  Acts as `inherit` or `initial` depending on whether the property is inherited or not.

  [`<custom-ident>`](custom-ident)  A user-defined identifier, for example the name assigned using the [`grid-area`](grid-area) property.

  [`<dashed-ident>`](dashed-ident)  A `<custom-ident>` with the additional restriction that it must start with two dashes, for example with [CSS Custom Properties](using_css_custom_properties).

  [`<string>`](string)  A quoted string, such as used for a value of the [`content`](content) property.

  [`url()`](url)  A pointer to a resource, for example as the value of [`background-image`](background-image).

  
Numeric data types
------------------



These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the Values and Units specification, however additional types are described in other specifications where they are specific to that specification alone — for example the `fr` unit in [CSS Grid Layout](https://www.w3.org/TR/css-grid-1/#fr-unit).

  [`<integer>`](integer)  One or more decimal units 0 through 9.

  [`<number>`](number)  Real numbers which may also have a fractional component, for example 1 or 1.34.

  [`<dimension>`](dimension)  A number with a unit attached to it, for example 23px or 15em.

  [`<percentage>`](percentage)  A number with a percentage sign attached to it, for example 10%.

  [`<ratio>`](ratio)  A ratio, written with the syntax `<number> / <number>`.

  [`<flex>`](flex_value)  A flexible length introduced for [CSS Grid Layout](css_grid_layout), written as a `<number>` with the `fr` unit attached and used for grid track sizing.

  
Quantities
----------



These types are used to specify distance and other quantities.

  [`<length>`](length)  Lengths are a `<dimension>` and refer to distances.

  [`<angle>`](angle)  Angles are used in properties such as [`linear-gradient()`](gradient/linear-gradient) and are a `<dimension>` with one of `deg`, `grad`, `rad`, or `turn` units attached.

  [`<time>`](time)  Duration units are a `<dimension>` with an `s` or `ms` unit.

  [`<frequency>`](frequency)  Frequencies are a `<dimension>` with a `Hz` or `kHz` unit attached.

  [`<resolution>`](resolution)  Is a `<dimension>` with a unit identifier of `dpi`, `dpcm`, `dppx`, or `x`.

  
Combinations of types
---------------------



Some CSS properties can take a dimension or a percentage value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.

  [`<length-percentage>`](length-percentage)  A type that can accept a length or a percentage as a value.

  [`<frequency-percentage>`](frequency-percentage)  A type that can accept a frequency or a percentage as a value.

  [`<angle-percentage>`](angle-percentage)  A type that can accept an angle or a percentage as a value.

  [`<time-percentage>`](time-percentage)  A type that can accept a time or a percentage as a value.

  
Color
-----



[The CSS Color Specification](https://www.w3.org/TR/css-color-4/) defines the [`<color>`](color_value) data type, and other types which relate to color in CSS.

  [`<color>`](color_value)  Specified as a keyword or a numerical color value.

  [`<alpha-value>`](alpha-value)  Specifies the transparency of a color. May be a `<number>`, in which case 0 is fully transparent and 1 is fully opaque, or a `<percentage>`, in which case 0% is fully transparent and 100% fully opaque.

  [`<hue>`](hue)  Specifies the `<angle>`, with a unit identifier of `deg`, `grad`, `rad`, or `turn`, or unitless `<number>` interpreted as `deg`, of the [color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel) specific to the `<absolute-color-functions>` of which it is a component.

  
Images
------



[The CSS Images Specification](https://www.w3.org/TR/css-images-3/) defines the data types which deal with images, including gradients.

  [`<image>`](image)  A URL reference to an image or a color gradient.

  `<color-stop-list>`  A list of two or more color stops with optional transition information using a color hint.

  `<linear-color-stop>`  A `<color>` and a `<length-percentage>` to indicate the color stop for this part of the gradient.

  `<linear-color-hint>`  A `<length-percentage>` to indicate how the color interpolates.

  `<ending-shape>`  Used for radial gradients; can have a keyword value of `circle` or `ellipse`.

  `<size>`  Determines the size of the radial gradient's ending shape. This accepts a value of a keyword or a `<length>` but not a percentage.

  
2D positioning
--------------



The [`<position>`](position_value) data type is interpreted as defined for the [`<background-position>`](background-position) property.

  [`<position>`](position_value)  Defines the position of an object area. Accepts a keyword value such as `top` or `left`, or a `<length-percentage>`.

  
Calculation data types
----------------------



These data types are used in [CSS math function](css_functions#math_functions) calculations.

  [`<calc-sum>`](calc-sum)  A calculation which is a sequence of calculation values interspersed with addition (`+`) and subtraction (`-`) operators. This data type requires both values to have units.

  `<calc-product>`  A calculation which is a sequence of calculation values interspersed with multiplication (`*`) and division (`/`) operators. When multiplying, one value must be unitless. When dividing, the second value must be unitless.

  `<calc-value>`  Defines accepted values for calculations, values such as [`<number>`](number), [`<dimension>`](dimension), [`<percentage>`](percentage), [`<calc-constant>`](calc-constant) or nested [`<calc-sum>`](calc-sum) calculations.

  [`<calc-constant>`](calc-constant)  Defines a number of CSS keywords representing numeric constants such as `e` and `π`, that can be used in CSS math functions.

  
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4](https://drafts.csswg.org/css-values/)  |


See also
--------


* [CSS Units and Values](css_values_and_units)
* [Introduction to CSS: Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
* [CSS Functional Notation](css_functions)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types>

At-rules
========


**At-rules** are [CSS statements](syntax#css_statements) that instruct CSS how to behave. They begin with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and includes everything up to the next semicolon, '`;`' (`U+003B SEMICOLON`), or the next [CSS block](syntax#css_declarations_blocks), whichever comes first.


Syntax
------


### Regular




```
/\* General structure \*/
@identifier (RULE);

/\* Example: tells browser to use UTF-8 character set \*/
@charset "utf-8";

```
 There are several regular at-rules, designated by their identifiers, each with a different syntax:

 * [`@charset`](@charset) — Defines the character set used by the style sheet.
* [`@import`](@import) — Tells the CSS engine to include an external style sheet.
* [`@namespace`](@namespace) — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.


### Nested




```
@identifier (RULE) {
}

```
 A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

 * [`@media`](@media) — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a *media query*.
* [`@supports`](@supports) — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
* [`@document`](@document)  Deprecated  — A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. *(deferred to Level 4 of CSS Spec)*
* [`@page`](@page) — Describes the aspect of layout changes that will be applied when printing the document.
* [`@font-face`](@font-face) — Describes the aspect of an external font to be downloaded.
* [`@keyframes`](@keyframes) — Describes the aspect of intermediate steps in a CSS animation sequence.
* [`@counter-style`](@counter-style) — Defines specific counter styles that are not part of the predefined set of styles. *(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)*
* [`@font-feature-values`](@font-feature-values) (plus `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` and `@character-variant`) — Define common names in [`font-variant-alternates`](font-variant-alternates) for feature activated differently in OpenType. *(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)*
* [`@property`](@property)  Experimental  — Describes the aspect of custom properties and variables. *(currently at the Working Draft stage)*
* [`@layer`](@layer) – Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.


Conditional group rules
-----------------------



Much like the values of properties, each at-rule has a different syntax. Nevertheless, several of them can be grouped into a special category named **conditional group rules**. These statements share a common syntax and each of them can include *nested statements*—either *rulesets* or *nested at-rules*. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either **true** or **false**. If the condition evaluates to **true**, then all of the statements within the group will be applied.

 Conditional group rules are defined in [CSS Conditionals Level 3](https://drafts.csswg.org/css-conditional-3/) and are:

 * [`@media`](@media),
* [`@supports`](@supports),
* [`@document`](@document). *(deferred to Level 4 of CSS Spec)*

 Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.


Index
-----


* [`@charset`](@charset)
* [`@color-profile`](@color-profile)
* [`@container`](@container)
* [`@counter-style`](@counter-style)
* [`@document`](@document)  Deprecated
* [`@font-face`](@font-face)
* [`@font-feature-values`](@font-feature-values)
* [`@font-palette-values`](@font-palette-values)
* [`@import`](@import)
* [`@keyframes`](@keyframes)
* [`@layer`](@layer)
* [`@media`](@media)
* [`@namespace`](@namespace)
* [`@page`](@page)
* [`@property`](@property)  Experimental
* [`@supports`](@supports)
Specifications
--------------




| Specification |
| --- |
| [CSS Conditional Rules Module Level 3](https://drafts.csswg.org/css-conditional-3/)  |
| [Compatibility Standard # css-at-rules](https://compat.spec.whatwg.org/#css-at-rules) |


See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule>

Syntax
======



The basic goal of the Cascading Stylesheet ([CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The *CSS syntax* reflects this goal and its basic building blocks are:

 * The **property** which is an identifier, that is a human-readable *name*, that defines which feature is considered.
* The **value** which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.



CSS declarations
----------------



Setting CSS properties to specific values is the core function of the CSS language. A property and value pair is called a **declaration**, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.

 Both properties and values are case-insensitive by default in CSS. The pair is separated by a colon, '`:`' (`U+003A COLON`), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored.

  ![css syntax - declaration.png] 

 There are more than [100 different properties](index) in CSS and a nearly infinite number of different values. Not all pairs of properties and values are allowed and each property defines what are the valid values. When a value is not valid for a given property, the declaration is deemed *invalid* and is wholly ignored by the CSS engine.


CSS declaration blocks
----------------------



Declarations are grouped in **blocks**, that is in a structure delimited by an opening brace, '`{`' (`U+007B LEFT CURLY BRACKET`), and a closing one, '`}`' (`U+007D RIGHT CURLY BRACKET`). Blocks sometimes can be nested, so opening and closing braces must be matched.

  ![css syntax - block.png] 

 Such blocks are naturally called **declaration blocks** and declarations inside them are separated by a semicolon, '`;`' (`U+003B SEMICOLON`). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semicolon, though it is often considered *good style* to do it as it prevents forgetting to add it when extending the block with another declaration.

 A CSS declaration block is visualized in the diagram below.

  ![css syntax - declarations block.png] 

  **Note:** The content of a CSS declaration block, that is a list of semicolon-separated declarations, without the initial and closing braces, can be put inside an HTML [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#style) attribute.

 
CSS rulesets
------------



If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

 CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated [**selectors**](css_selectors), which are conditions selecting some elements of the page. A [selector group](selector_list) and an associated declarations block, together, are called a **ruleset**, or often a **rule**.

 A CSS ruleset (or rule) is visualized in the diagram below.

  ![css syntax - ruleset.png] 

 As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the [cascade](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) algorithm.

  **Note:** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

 This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole *selector* is invalid and therefore the entire rule is ignored (as invalid too).

 
CSS statements
--------------



Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

 A **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semicolon (outside a string, non-escaped and not included into another {}, () or [] pair).

  ![css syntax - statements Venn diag.png] 

 There are two kinds of statements:

 * **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a [selector](css_selectors).
* **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up to the end of the statement, that is up to the next semicolon (;) outside of a block, or the end of the next block. Each type of [at-rules](at-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like [`@charset`](@charset) or [`@import`](@import)), conditional information (like [`@media`](@media) or [`@document`](@document)), or descriptive information (like [`@font-face`](@font-face)).

 Any statement which isn't a ruleset or an at-rule is invalid and ignored.


### Nested statements


There is another group of statements – the **nested statements**. These are statements that can be used in a specific subset of at-rules – the *conditional group rules*. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which the browser runs matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only *rulesets* could be used inside conditional group rules. That was very restrictive and this restriction was lifted in [*CSS Conditionals Level 3*](css_conditional_rules). Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.

See also
--------


* CSS key concepts:
	+ **CSS syntax**
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax>

animation
=========



The `animation` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property applies an animation between styles. It is a shorthand for [`animation-name`](animation-name), [`animation-duration`](animation-duration), [`animation-timing-function`](animation-timing-function), [`animation-delay`](animation-delay), [`animation-iteration-count`](animation-iteration-count), [`animation-direction`](animation-direction), [`animation-fill-mode`](animation-fill-mode), and [`animation-play-state`](animation-play-state).

 A [description of which properties are animatable](css_animated_properties) is available; it's worth noting that this description is also valid for [CSS transitions](css_transitions/using_css_transitions).



Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`animation-delay`](animation-delay)
* [`animation-direction`](animation-direction)
* [`animation-duration`](animation-duration)
* [`animation-fill-mode`](animation-fill-mode)
* [`animation-iteration-count`](animation-iteration-count)
* [`animation-name`](animation-name)
* [`animation-play-state`](animation-play-state)
* [`animation-timing-function`](animation-timing-function)


Syntax
------




```
/\* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | easing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* two animations \*/
animation: 3s linear slidein, 3s ease-out 5s slideout;

```
 The `animation` property is specified as one or more single animations, separated by commas.

 Each individual animation is specified as:

 * zero, one, or two occurrences of the [`<time>`](time) value
* zero or one occurrences of the following values:
	+ [`<single-easing-function>`](animation#single-easing-function)
	+ [`<single-animation-iteration-count>`](animation#single-animation-iteration-count)
	+ [`<single-animation-direction>`](animation#single-animation-direction)
	+ [`<single-animation-fill-mode>`](animation#single-animation-fill-mode)
	+ [`<single-animation-play-state>`](animation#single-animation-play-state)
* an optional name for the animation, which may be `none`, a [`<custom-ident>`](custom-ident), or a [`<string>`](string)


### Values


 `<single-easing-function>`  Determines the type of transition. The value must be one of those available in [`<easing-function>`](easing-function).

  `<single-animation-iteration-count>`  The number of times the animation is played. The value must be one of those available in [`animation-iteration-count`](animation-iteration-count).

  `<single-animation-direction>`  The direction in which the animation is played. The value must be one of those available in [`animation-direction`](animation-direction).

  `<single-animation-fill-mode>`  Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in [`animation-fill-mode`](animation-fill-mode).

  `<single-animation-play-state>`  Determines whether the animation is playing or not. The value must be one of those available in [`animation-play-state`](animation-play-state).

  Description
-----------



The order of time values within each animation definition is important: the first value that can be parsed as a [`<time>`](time) is assigned to the [`animation-duration`](animation-duration), and the second one is assigned to [`animation-delay`](animation-delay).

 The order of other values within each animation definition is also important for distinguishing an [`animation-name`](animation-name) value from other values. If a value in the `animation` shorthand can be parsed as a value for an animation property other than `animation-name`, then the value will be applied to that property first and not to `animation-name`. For this reason, the recommended practice is to specify a value for `animation-name` as the last value in a list of values when using the `animation` shorthand; this holds true even when you specify multiple, comma-separated animations using the `animation` shorthand.

 An `animation-name` value is not required to be declared in the `animation` shorthand property. If no name exists, there is no animation to apply on any of the properties.

 When the `animation-duration` value is omitted from the `animation` shorthand property, the value for this property defaults to `0s`. In this case, the animation will still occur (the [`animationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event) and [`animationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) events will be fired) but no animation will be visible.


Accessibility concerns
----------------------



Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

 Consider providing a mechanism for pausing or disabling animation as well as using the [Reduced Motion Media Query](@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for reduced animated experiences.

 * [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/)
* [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/)
* [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/)
* [MDN Understanding WCAG, Guideline 2.2 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content)
* [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`animation-name`](animation-name): `none`
* [`animation-duration`](animation-duration): `0s`
* [`animation-timing-function`](animation-timing-function): `ease`
* [`animation-delay`](animation-delay): `0s`
* [`animation-iteration-count`](animation-iteration-count): `1`
* [`animation-direction`](animation-direction): `normal`
* [`animation-fill-mode`](animation-fill-mode): `none`
* [`animation-play-state`](animation-play-state): `running`
* [`animation-timeline`](animation-timeline): `auto`
 |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`animation-name`](animation-name): as specified
* [`animation-duration`](animation-duration): as specified
* [`animation-timing-function`](animation-timing-function): as specified
* [`animation-delay`](animation-delay): as specified
* [`animation-direction`](animation-direction): as specified
* [`animation-iteration-count`](animation-iteration-count): as specified
* [`animation-fill-mode`](animation-fill-mode): as specified
* [`animation-play-state`](animation-play-state): as specified
* [`animation-timeline`](animation-timeline): listEachItemIdentifyerOrNoneAuto
 |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation =   
  <single-animation>[#](value_definition_syntax#hash_mark)    
  
<single-animation> =   
  [<time>](time)                              [||](value_definition_syntax#double_bar)  
  <easing-function>                   [||](value_definition_syntax#double_bar)  
  [<time>](time)                              [||](value_definition_syntax#double_bar)  
  <single-animation-iteration-count>  [||](value_definition_syntax#double_bar)  
  <single-animation-direction>        [||](value_definition_syntax#double_bar)  
  <single-animation-fill-mode>        [||](value_definition_syntax#double_bar)  
  <single-animation-play-state>       [||](value_definition_syntax#double_bar)  
  [[](value_definition_syntax#brackets) none [|](value_definition_syntax#single_bar) <keyframes-name> []](value_definition_syntax#brackets)           
  
<easing-function> =   
  linear                          [|](value_definition_syntax#single_bar)  
  <linear-easing-function>        [|](value_definition_syntax#single_bar)  
  <cubic-bezier-easing-function>  [|](value_definition_syntax#single_bar)  
  <step-easing-function>            
  
<single-animation-iteration-count> =   
  infinite        [|](value_definition_syntax#single_bar)  
  [<number [0,∞]>](number)    
  
<single-animation-direction> =   
  normal             [|](value_definition_syntax#single_bar)  
  reverse            [|](value_definition_syntax#single_bar)  
  alternate          [|](value_definition_syntax#single_bar)  
  alternate-reverse    
  
<single-animation-fill-mode> =   
  none       [|](value_definition_syntax#single_bar)  
  forwards   [|](value_definition_syntax#single_bar)  
  backwards  [|](value_definition_syntax#single_bar)  
  both         
  
<single-animation-play-state> =   
  running  [|](value_definition_syntax#single_bar)  
  paused     
  
<keyframes-name> =   
  [<custom-ident>](custom-ident)  [|](value_definition_syntax#single_bar)  
  [<string>](string)          
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                [|](value_definition_syntax#single_bar)  
  ease-in                                             [|](value_definition_syntax#single_bar)  
  ease-out                                            [|](value_definition_syntax#single_bar)  
  ease-in-out                                         [|](value_definition_syntax#single_bar)  
  cubic-bezier( [<number [0,1]>](number) , [<number>](number) , [<number [0,1]>](number) , [<number>](number) )    
  
<step-easing-function> =   
  step-start                                [|](value_definition_syntax#single_bar)  
  step-end                                  [|](value_definition_syntax#single_bar)  
  steps( [<integer>](integer) [[](value_definition_syntax#brackets), <step-position> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<linear-stop-list> =   
  [[](value_definition_syntax#brackets) <linear-stop> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<step-position> =   
  jump-start  [|](value_definition_syntax#single_bar)  
  jump-end    [|](value_definition_syntax#single_bar)  
  jump-none   [|](value_definition_syntax#single_bar)  
  jump-both   [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end           
  
<linear-stop> =   
  [<number>](number)               [&&](value_definition_syntax#double_ampersand)  
  <linear-stop-length>[?](value_definition_syntax#question_mark)    
  
<linear-stop-length> =   
  [<percentage>](percentage)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


 **Note:** Animating [CSS Box Model](css_box_model) properties is discouraged. Animating any box model property is inherently CPU intensive; consider animating the <transform> property instead.

 ### Sun Rise



 Here we animate a yellow sun across a light blue sky. The sun rises to the center of the viewport and then falls out of sight. 

 
```
<div class="sun"></div>

```
 
```
:root {
  overflow: hidden; /\* hides any part of the sun below the horizon \*/
  background-color: lightblue;
  display: flex;
  justify-content: center; /\* centers the sun in the background \*/
}

.sun {
  background-color: yellow;
  border-radius: 50%; /\* creates a circular background \*/
  height: 100vh; /\* makes the sun the size of the viewport \*/
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /\* pushes the sun down past the viewport \*/
    transform: translateY(110vh);
  }
  to {
    /\* returns the sun to its default position \*/
    transform: translateY(0);
  }
}

```


### Animating Multiple Properties



Adding onto the sun animation in the previous example, we add a second animation changing the color of the sun as it rises and sets. The sun starts off dark red when it is below the horizon and changes to a bright orange as it reaches the top.

 
```
<div class="sun"></div>

```
 
```
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/\* it is possible to animate multiple properties in a single animation \*/
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /\* unset properties i.e. 'filter' will revert to default values \*/
  }
}

```


### Applying Multiple Animations



 Here is a sun that rises and falls on a lightblue background. The sun gradually rotates through a rainbow of colors. The timing of the sun's position and color are independent. 

 
```
<div class="sun"></div>

```
 
```
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\* multiple animations are separated by commas, each animation's parameters are set independently \*/
  animation: 4s linear 0s infinite alternate rise, 24s linear 0s infinite
      psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

```


### Cascading Multiple Animations



 Here is a yellow sun on a lightblue background. The sun bounces between the left and right sides of the viewport. The sun remains in the viewport even though a rise animation is defined. The rise animation's transform property is 'overwritten' by the bounce animation. 

 
```
<div class="sun"></div>

```
 
```
:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /\*
 animations declared later in the cascade will override the
 properties of previously declared animations
 \*/
  /\* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally \*/
  animation: 4s linear 0s infinite alternate rise, 4s linear 0s infinite
      alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

```

 See [Using CSS animations](css_animations/using_css_animations#examples) for additional examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation](https://w3c.github.io/csswg-drafts/css-animations/#animation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 94 | 432The [`animation-fill-mode`](https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode) property is not supported in Android browsers below 2.3. | 4318 | 49165 | 301412.1–1412–14 | 93.2 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation>

animation-delay
===============


The `animation-delay` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------



```
/\* Single animation \*/
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/\* Multiple animations \*/
animation-delay: 2.1s, 480ms;

/\* Global values \*/
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: revert-layer;
animation-delay: unset;

```
### Values



 `[`<time>`](time)`  The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds (`s`) or milliseconds (`ms`). The unit is required.

 A positive value indicates that the animation should begin after the specified amount of time has elapsed. A value of `0s`, which is the default, indicates that the animation should begin as soon as it's applied.

 A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify `-1s` as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence. If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.

    **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0s` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-delay =   
  [[](value_definition_syntax#brackets) <'animation-delay-start'> <'animation-delay-end'>[?](value_definition_syntax#question_mark) [|](value_definition_syntax#single_bar) [<timeline-range-name>](timeline-range-name) []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Setting an animation delay



This animation has a delay of 2 seconds.

 #### HTML

 
```
<div class="box"></div>

```
 #### CSS

 
```
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-delay: 2s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

```
 #### Result

 Hover over the rectangle to start the animation.


 See [CSS animations](css_animations/using_css_animations) for examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-delay](https://w3c.github.io/csswg-drafts/css-animations/#animation-delay) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-delay` | 433 | 1212 | 4916Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows.5 | 10 | 301512.1–1512–15 | 94 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 93.2 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay>

CSS value functions
===================


**CSS value functions** are statements that invoke special data processing or calculations to return a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [value](css_values_and_units) for a CSS property. CSS value functions represent more complex [data types](css_types) and they may take some input arguments to calculate the return value.


Syntax
------




```
selector {
  property: function([argument]? [, argument]!);
}

```
 The value syntax starts with the **name of the function**, followed by a left parenthesis `(`. Next up are the argument(s), and the function is finished off with a closing parenthesis `)`.

 Functions can take multiple arguments, which are formatted similarly to CSS property values. Whitespace is allowed, but they are optional inside the parentheses. In some functional notations multiple arguments are separated by commas, while others use spaces.

  **Note:** The CSS value functions are used as property values and should not be confused with pseudo-classes. The [functional pseudo-classes](pseudo-classes#functional_pseudo-classes), [linguistic pseudo-classes](pseudo-classes#linguistic_pseudo-classes), and several [tree-structural pseudo-classes](pseudo-classes#tree-structural_pseudo-classes) require parameter values, but they're not value functions. The [conditional at-rules](at-rule#conditional_group_rules) are also not value functions; the parentheses are used for groupings.

 
Transform functions
-------------------


The [`<transform-function>`](transform-function) CSS [data type](css_types) represent appearance transformation. It is used as a value of [`transform`](transform) property.

### Translate functions


 [`translateX()`](transform-function/translatex)  Translates an element horizontally.

  [`translateY()`](transform-function/translatey)  Translates an element vertically.

  [`translateZ()`](transform-function/translatez)  Translates an element along the z-axis.

  [`translate()`](transform-function/translate)  Translates an element on the 2D plane.

  [`translate3d()`](transform-function/translate3d)  Translates an element in 3D space.

  ### Rotation functions


 [`rotateX()`](transform-function/rotatex)  Rotates an element around the horizontal axis.

  [`rotateY()`](transform-function/rotatey)  Rotates an element around the vertical axis.

  [`rotateZ()`](transform-function/rotatez)  Rotates an element around the z-axis.

  [`rotate()`](transform-function/rotate)  Rotates an element around a fixed point on the 2D plane.

  [`rotate3d()`](transform-function/rotate3d)  Rotates an element around a fixed axis in 3D space.

  ### Scaling functions


 [`scaleX()`](transform-function/scalex)  Scales an element up or down horizontally.

  [`scaleY()`](transform-function/scaley)  Scales an element up or down vertically.

  [`scaleZ()`](transform-function/scalez)  Scales an element up or down along the z-axis.

  [`scale()`](transform-function/scale)  Scales an element up or down on the 2D plane.

  [`scale3d()`](transform-function/scale3d)  Scales an element up or down in 3D space.

  ### Skew functions


 [`skewX()`](transform-function/skewx)  Skews an element in the horizontal direction.

  [`skewY()`](transform-function/skewy)  Skews an element in the vertical direction.

  [`skew()`](transform-function/skew)  Skews an element on the 2D plane.

  ### Matrix functions


 [`matrix()`](transform-function/matrix)  Describes a homogeneous 2D transformation matrix.

  [`matrix3d()`](transform-function/matrix3d)  Describes a 3D transformation as a 4×4 homogeneous matrix.

  ### Perspective functions


 [`perspective()`](transform-function/perspective)  Sets the distance between the user and the z=0 plane.

  Math functions
--------------


The math functions allow CSS numeric values to be written as mathematical expressions.

### Basic arithmetic


 [`calc()`](calc)  Performs basic arithmetic calculations on numerical values.

  ### Comparison functions


 [`min()`](min)  Calculates the smallest of a list of values.

  [`max()`](max)  Calculates the largest of a list of values.

  [`clamp()`](clamp)  Calculates the central of a minimum, central, and maximum values.

  ### Stepped value functions


 
[`round()`](round)  Experimental 
  Calculates a rounded number based on a rounding strategy.

  
[`mod()`](mod)  Experimental 
  Calculates a modulus (with the same sign as the divisor) when dividing one number by another.

  
[`rem()`](rem)  Experimental 
  Calculates a remainder (with the same sign as the dividend) when dividing one number by another.

  ### Trigonometric functions


 [`sin()`](sin)  Calculates the trigonometric sine of a number.

  [`cos()`](cos)  Calculates the trigonometric cosine of a number.

  [`tan()`](tan)  Calculates the trigonometric tangent of a number.

  [`asin()`](asin)  Calculates the trigonometric inverse sine of a number.

  [`acos()`](acos)  Calculates the trigonometric inverse cosine of a number.

  [`atan()`](atan)  Calculates the trigonometric inverse tangent of a number.

  [`atan2()`](atan2)  Calculates the trigonometric inverse tangent of two-numbers in a plane.

  ### Exponential functions


 
[`pow()`](pow)  Experimental 
  Calculates the base raised to the power of a number.

  
[`sqrt()`](sqrt)  Experimental 
  Calculates the square root of a number.

  
[`hypot()`](hypot)  Experimental 
  Calculates the square root of the sum of the squares of its arguments.

  
[`log()`](log)  Experimental 
  Calculates the logarithm of a number.

  
[`exp()`](exp)  Experimental 
  Calculates `e` raised to the power of a number.

  ### Sign-related functions


 
[`abs()`](abs)  Experimental 
  Calculates the absolute value of a number.

  
[`sign()`](sign)  Experimental 
  Calculates the sign (positive or negative) of the number.

  Filter functions
----------------



The [`<filter-function>`](filter-function) CSS [data type](css_types) represents a graphical effect that can change the appearance of an input image. It is used in the [`filter`](filter) and [`backdrop-filter`](backdrop-filter) properties.

  [`blur()`](filter-function/blur)  Increases the image gaussian blur.

  [`brightness()`](filter-function/brightness)  Brightens or darkens an image.

  [`contrast()`](filter-function/contrast)  Increases or decreases the image contrast.

  [`drop-shadow()`](filter-function/drop-shadow)  Applies a drop shadow behind an image.

  [`grayscale()`](filter-function/grayscale)  Converts an image to grayscale.

  [`hue-rotate()`](filter-function/hue-rotate)  Changes the overall hue of an image.

  [`invert()`](filter-function/invert)  Inverts the colors of an image.

  [`opacity()`](filter-function/opacity)  Adds transparency to an image.

  [`saturate()`](filter-function/saturate)  Changes the overall saturation of an image.

  [`sepia()`](filter-function/sepia)  Increases the sepia of an image.

  
Color functions
---------------



The [`<color>`](color_value) CSS [data type](css_types) specifies different color representations.

  [`rgb()`](color_value/rgb)  Defines a given color according to its red, green, blue and alpha (transparency) components.

  [`hsl()`](color_value/hsl)  Defines a given color according to its hue, saturation, lightness and alpha (transparency) components.

  [`hwb()`](color_value/hwb)  Defines a given color according to its hue, whiteness and blackness components.

  
[`lch()`](color_value/lch)  Experimental 
  Defines a given color according to its lightness, chroma and hue components.

  
[`oklch()`](color_value/oklch)  Experimental 
  Defines a given color according to its lightness, chroma, hue and alpha (transparency) components.

  
[`lab()`](color_value/lab)  Experimental 
  Defines a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace.

  
[`oklab()`](color_value/oklab)  Experimental 
  Defines a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency).

  
[`color()`](color_value/color)  Experimental 
  Specifies a particular, specified colorspace rather than the implicit sRGB colorspace.

  
[`color-mix()`](color_value/color-mix)  Experimental 
  Mixes two color values in a given colorspace by a given amount.

  
[`color-contrast()`](color_value/color-contrast)  Experimental 
  Selects the highest color contrast from a list of colors, compare to a base color value.

  
[`device-cmyk()`](color_value/device-cmyk)  Experimental 
  Defines CMYK colors in a device-independent way.

  
Image functions
---------------


The [`<image>`](image) CSS [data type](css_types) provides graphical representation of images or gradients.

### Gradient functions


 [`linear-gradient()`](gradient/linear-gradient)  Linear gradients transition colors progressively along an imaginary line.

  [`radial-gradient()`](gradient/radial-gradient)  Radial gradients transition colors progressively from a center point (origin).

  [`conic-gradient()`](gradient/conic-gradient)  Conic gradients transition colors progressively around a circle.

  [`repeating-linear-gradient()`](gradient/repeating-linear-gradient)  Is similar to `linear-gradient()` and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

  [`repeating-radial-gradient()`](gradient/repeating-radial-gradient)  Is similar to `radial-gradient()` and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

  [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)  Is similar to `conic-gradient()` and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

  ### Image functions


 
[`image()`](image/image)  Experimental 
  Defines an [`<image>`](image) in a similar fashion to the [`url()`](url) function, but with added functionality including specifying the image's directionality and fallback images for when the preferred image is not supported.

  [`image-set()`](image/image-set)  Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.

  [`cross-fade()`](cross-fade)  Blends two or more images at a defined transparency.

  
[`element()`](element())  Experimental 
  Defines an [`<image>`](image) value generated from an arbitrary HTML element.

  [`paint()`](image/paint)  Defines an [`<image>`](image) value generated with a PaintWorklet.

  Counter functions
-----------------



CSS counter functions are generally used with the [`content`](content) property, although in theory, they may be used wherever a [`<string>`](string) is supported.

  [`counter()`](counter)  Returns a string representing the current value of the named counter if there is one.

  [`counters()`](counters)  Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

  [`symbols()`](@counter-style/symbols)  Defines the counter styles inline, directly as the value of a property.

  
Shape functions
---------------



The [`<basic-shape>`](basic-shape) CSS [data type](css_types) represents a graphical shape. It is used in the [`clip-path`](clip-path), [`offset-path`](offset-path), and [`shape-outside`](shape-outside) properties.

  [`circle()`](basic-shape/circle)  Defines a circle shape.

  [`ellipse()`](basic-shape/ellipse)  Defines an ellipse shape.

  [`inset()`](basic-shape/inset)  Defines an inset rectangle shape.

  [`polygon()`](basic-shape/polygon)  Defines a polygon shape.

  [`path()`](path)  Accepts an SVG path string to enable a shape to be drawn.

  
Reference functions
-------------------



The following functions are used as a value of properties to reference a value defined elsewhere.

  [`attr()`](attr)  Uses the attributes defined on HTML element.

  [`env()`](env)  Uses the user-agent defined as environment variable.

  [`url()`](url)  Uses a file from the specified URL.

  [`var()`](var())  Uses the custom property value instead of any part of a value of another property.

  
Grid functions
--------------



The following functions are used to define a [CSS Grid](css_grid_layout).

  [`fit-content()`](fit-content)  Clamps a given size to an available size according to the formula `min(maximum size, max(minimum size, argument))`.

  [`minmax()`](minmax)  Defines a size range greater-than or equal-to *min* and less-than or equal-to *max*.

  [`repeat()`](repeat)  Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern.

  
Font functions
--------------



CSS font functions are used with the [`font-variant-alternates`](font-variant-alternates) property to control the use of alternate glyphs.

  [`stylistic()`](font-variant-alternates#stylistic)  Enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `salt`, like `salt 2`.

  [`styleset()`](font-variant-alternates#styleset)  Enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ssXY`, such as `ss02`.

  [`character-variant()`](font-variant-alternates#character-variant)  Enables specific stylistic alternatives for characters. It is similar to `styleset()`, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `cvXY`, such as `cv02`.

  [`swash()`](font-variant-alternates#swash)  Enables [swash](https://en.wikipedia.org/wiki/Swash_%28typography%29) glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values `swsh` and `cswh`, such as `swsh 2` and `cswh 2`.

  [`ornaments()`](font-variant-alternates#ornaments)  Enables ornaments such as [fleurons](https://en.wikipedia.org/wiki/Fleuron_%28typography%29) and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ornm`, such as `ornm 2`.

  [`annotation()`](font-variant-alternates#annotation)  Enables annotations such as circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `nalt`, such as `nalt 2`.

  
Timing functions
----------------



The following functions are used as a value in transition and animation properties.

  [`cubic-bezier()`](easing-function#cubic_b%C3%A9zier_easing_function)  Easing function that defines a cubic Bézier curve.

  [`steps()`](easing-function#step_easing_function)  Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time.

  
Animation functions
-------------------



The following functions are used as a value of different [`animation`](animation) properties.

  
[`scroll()`](animation-timeline/scroll)  Experimental 
  Sets the [`animation-timeline`](animation-timeline) of an element to depend on scrollbar on a particular axis of either the nearest parent (with that scrollbar), or the root container.

  
See also
--------


* [CSS Values and Units](css_values_and_units)
* [Introduction to CSS: Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions>

align-items
===========



The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `align-items` property sets the [`align-self`](align-self) value on all direct children as a group. In Flexbox, it controls the alignment of items on the [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis). In Grid Layout, it controls the alignment of items on the Block Axis within their [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).

 The interactive example below demonstrates some of the values for `align-items` using grid layout.



Try it
------


Syntax
------



```
/\* Basic keywords \*/
align-items: normal;
align-items: stretch;

/\* Positional alignment \*/
/\* align-items does not take left and right values \*/
align-items: center; /\* Pack items around the center \*/
align-items: start; /\* Pack items from the start \*/
align-items: end; /\* Pack items from the end \*/
align-items: flex-start; /\* Pack flex items from the start \*/
align-items: flex-end; /\* Pack flex items from the end \*/
align-items: self-start; /\* Pack flex items from the start \*/
align-items: self-end; /\* Pack flex items from the end \*/

/\* Baseline alignment \*/
align-items: baseline;
align-items: first baseline;
align-items: last baseline; /\* Overflow alignment (for positional alignment only) \*/
align-items: safe center;
align-items: unsafe center;

/\* Global values \*/
align-items: inherit;
align-items: initial;
align-items: revert;
align-items: revert-layer;
align-items: unset;

```
### Values


 `normal`  The effect of this keyword is dependent of the layout mode we are in:

 * In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
* For flex items, the keyword behaves as `stretch`.
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* The property doesn't apply to block-level boxes, and to table cells.

  `flex-start`  The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.

  `flex-end`  The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.

  `center`  The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.

  `start`  The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.

  `end`  The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.

  `self-start`  The items are packed flush to the edge of the alignment container's start side of the item, in the appropriate axis.

  `self-end`  The items are packed flush to the edge of the alignment container's end side of the item, in the appropriate axis.

  
`baseline`, `first baseline`, `last baseline`
  All flex items are aligned such that their [flex container baselines](https://drafts.csswg.org/css-flexbox-1/#flex-baselines) align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

  `stretch`  Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.

  `safe`  Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
align-items =   
  normal                                    [|](value_definition_syntax#single_bar)  
  stretch                                   [|](value_definition_syntax#single_bar)  
  <baseline-position>                       [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <overflow-position>[?](value_definition_syntax#question_mark) <self-position> []](value_definition_syntax#brackets)    
  
<baseline-position> =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  baseline             
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<self-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  self-start  [|](value_definition_syntax#single_bar)  
  self-end    [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### CSS



```
#container {
  height: 200px;
  width: 240px;
  align-items: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

```
### HTML




```
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

```

### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # align-items-property](https://w3c.github.io/csswg-drafts/css-align/#align-items-property) |
| [CSS Flexible Box Layout Module Level 1 # align-items-property](https://w3c.github.io/csswg-drafts/css-flexbox/#align-items-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `align-items` | 2921 | 1212 | 4920 | 11 | 1615 | 97 | 4.44.4 | 2925 | 4920 | 1614 | 97 | 2.01.5 |
| `flex_context` | 5221–52Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 12 | 20Multi-line flexbox has been supported since Firefox 28. | 11In Internet Explorer 10 and 11, if column flex items have `align-items: center;` set on them and their content is too large, then they will overflow the bounds of their container. See [Flexbug #2](https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container). | 3915–39Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Opera implements the new behavior beginning with Opera 39. | 7 | 524.4–52Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 5225–52Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 20Multi-line flexbox has been supported since Firefox 28. | 4114–41Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Opera implements the new behavior beginning with Opera 41. | 7 | 6.01.5–6.0Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Samsung Internet implements the new behavior beginning with Samsung Internet 6.0. |
| `grid_context` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 52 | 52 | 43 | 10.3 | 6.2 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`align-self`](align-self) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/align-items>

align-self
==========


The `align-self` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property overrides a grid or flex item's [`align-items`](align-items) value. In Grid, it aligns the item inside the [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas). In Flexbox, it aligns the item on the [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis).


Try it
------



 The property doesn't apply to block-level boxes, or to table cells. If a flexbox item's cross-axis margin is `auto`, then `align-self` is ignored.


Syntax
------



```
/\* Keyword values \*/
align-self: auto;
align-self: normal;

/\* Positional alignment \*/
/\* align-self does not take left and right values \*/
align-self: center; /\* Put the item around the center \*/
align-self: start; /\* Put the item at the start \*/
align-self: end; /\* Put the item at the end \*/
align-self: self-start; /\* Align the item flush at the start \*/
align-self: self-end; /\* Align the item flush at the end \*/
align-self: flex-start; /\* Put the flex item at the start \*/
align-self: flex-end; /\* Put the flex item at the end \*/

/\* Baseline alignment \*/
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /\* Stretch 'auto'-sized items to fit the container \*/

/\* Overflow alignment \*/
align-self: safe center;
align-self: unsafe center;

/\* Global values \*/
align-self: inherit;
align-self: initial;
align-self: revert;
align-self: revert-layer;
align-self: unset;

```
### Values


 `auto`  Computes to the parent's [`align-items`](align-items) value.

  `normal`  The effect of this keyword is dependent of the layout mode we are in:

 * In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
* For flex items, the keyword behaves as `stretch`.
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* The property doesn't apply to block-level boxes, and to table cells.

  `self-start`  Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

  `self-end`  Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.

  `flex-start`  The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.

  `flex-end`  The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

  `center`  The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.

  
`baseline`, `first baseline`, `last baseline`
   Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `stretch`  If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.

  `safe`  If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | flex items, grid items, and absolutely-positioned boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | `auto` computes to itself on absolutely-positioned elements, and to the computed value of [`align-items`](align-items) on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for [`justify-self`](justify-self). Otherwise the specified value. |
| Animation type | discrete |

Formal syntax
-------------



```
align-self =   
  auto                                  [|](value_definition_syntax#single_bar)  
  normal                                [|](value_definition_syntax#single_bar)  
  stretch                               [|](value_definition_syntax#single_bar)  
  <baseline-position>                   [|](value_definition_syntax#single_bar)  
  <overflow-position>[?](value_definition_syntax#question_mark) <self-position>    
  
<baseline-position> =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  baseline             
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<self-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  self-start  [|](value_definition_syntax#single_bar)  
  self-end    [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### HTML



```
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

```
### CSS



```
section {
  display: flex;
  align-items: center;
  height: 120px;
  background: beige;
}

div {
  height: 60px;
  background: cyan;
  margin: 5px;
}

div:nth-child(3) {
  align-self: flex-end;
  background: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # align-self-property](https://w3c.github.io/csswg-drafts/css-align/#align-self-property) |
| [CSS Flexible Box Layout Module Level 1 # align-items-property](https://w3c.github.io/csswg-drafts/css-flexbox/#align-items-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `align-self` | 2921 | 1212 | 4920 | 10 | 12.1 | 97 | 4.44.4 | 2925 | 4920 | 12.1 | 97 | 2.01.5 |
| `flex_context` | 3621–36Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 12 | 20Before Firefox 27, only single-line flexbox is supported. | 11 | 12.1 | 7 | 374.4–37Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 3625–36Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 20Before Firefox 27, only single-line flexbox is supported. | 12.1 | 7 | 3.01.5–3.0Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Samsung Internet implements the new behavior beginning with Samsung Internet 6.0. |
| `grid_context` | 57 | 16 | 52 | 10Internet Explorer 10 and 11 have the property `-ms-grid-row-align`, which acts in a similar way to `align-self`. | 44 | 10.1 | 57 | 52 | 52 | 43 | 10.3 | 6.2 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`align-items`](align-items) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/align-self>

all
===


The `all` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property resets all of an element's properties except [`unicode-bidi`](unicode-bidi), [`direction`](direction), and [CSS Custom Properties](using_css_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.


Try it
------


Syntax
------




```
/\* Global values \*/
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

```
 The `all` property is specified as one of the CSS global keyword values. Note that none of these values affect the [`unicode-bidi`](unicode-bidi) and [`direction`](direction) properties.


### Values


 [`initial`](initial)  Specifies that all the element's properties should be changed to their [initial values](initial_value).

  [`inherit`](inherit)  Specifies that all the element's properties should be changed to their [inherited values](inheritance).

  [`unset`](unset)  Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.

  [`revert`](revert)  Specifies behavior that depends on the stylesheet origin to which the declaration belongs:

 * If the rule belongs to the [author origin](cascade#author_stylesheets), the `revert` value rolls back the <cascade> to the user level, so that the [specified values](specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins.
* If the rule belongs to the [user origin](cascade#user_stylesheets), the `revert` value rolls back the <cascade> to the user-agent level, so that the [specified values](specified_value) are calculated as if no author-level or user-level rules were specified for the element.
* If the rule belongs to the [user-agent origin](cascade#user-agent_stylesheets), the `revert` value acts like `unset`.

  [`revert-layer`](revert-layer)  Specifies that all the element's properties should roll back the cascade to a previous [cascade layer](@layer), if one exists. If no other cascade layer exists, the element's properties will roll back to the matching rule, if one exists, in the current layer or to a previous [style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | There is no practical initial value for it. |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but [`unicode-bidi`](unicode-bidi) and [`direction`](direction)) |

Formal syntax
-------------



```
all =   
  initial       [|](value_definition_syntax#single_bar)  
  inherit       [|](value_definition_syntax#single_bar)  
  unset         [|](value_definition_syntax#single_bar)  
  revert        [|](value_definition_syntax#single_bar)  
  revert-layer    
  

```
Examples
--------


In this example, the CSS file contains styling for the [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element in addition to some styling for the parent `<body>` element. Various outputs in the Results subsection demonstrate how the styling of the `<blockquote>` element is affected when different values are applied to the `all` property inside the `blockquote` rule.

### HTML



```
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

```
### CSS



```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

```
### Results



#### A. No `all` property


 This is the scenario in which no `all` property is set inside the `blockquote` rule. The [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element uses the browser's default styling which gives it a margin, together with a specific background and text color as specified in the stylesheet. It also behaves as a *block* element: the text that follows it is beneath it.

 #### B. `all: initial`


 With the `all` property set to `initial` in the `blockquote` rule, the [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element doesn't use the browser default styling anymore: it is an *inline* element now (initial value), its [`background-color`](background-color#formal_definition) is `transparent` (initial value), its [`font-size`](font-size#formal_definition) is `medium`, and its [`color`](color#formal_definition) is `black` (initial value).

 #### C. `all: inherit`


 In this case, the [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element doesn't use the browser default styling. Instead, it inherits style values from its parent [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element: it is a *block* element now (inherited value), its [`background-color`](background-color) is `#F0F0F0` (inherited value), its [`font-size`](font-size) is `small` (inherited value), and its [`color`](color) is `blue` (inherited value).

 #### D. `all: unset`


 When the `unset` value is applied to the `all` property in the `blockquote` rule, the [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element doesn't use the browser default styling. Because [`background-color`](background-color#formal_definition) is a non-inherited property and [`font-size`](font-size#formal_definition) and [`color`](color#formal_definition) are inherited properties, the `<blockquote>` element is an *inline* element now (initial value), its [`background-color`](background-color) is `transparent` (initial value), but its [`font-size`](font-size) is still `small` (inherited value), and its [`color`](color) is `blue` (inherited value).

 #### E. `all: revert`


 When the `all` property is set to `revert` in the `blockquote` rule, the `blockquote` rule is considered to be non-existent and the styling property values are inherited from the ones applied to the parent element `<body>`. So the `<blockquote>` element gets styled as a *block* element, with [`background-color`](background-color) `#F0F0F0`, [`font-size`](font-size) `small`, and [`color`](color) `blue` - all values inherited from the `body` rule.

 #### F. `all: revert-layer`


 There are no cascade layers defined in the CSS file, so the `<blockquote>` element inherits its style from the matching `body` rule. The `<blockquote>` element here is styled as a *block* element, with [`background-color`](background-color) `#F0F0F0`, [`font-size`](font-size) `small`, and [`color`](color) `blue` - all values inherited from the `body` rule. This scenario is an example of the case when `all` set to `revert-layer` behaves the same as when `all` is set to `revert`.


Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 4 # all-shorthand](https://w3c.github.io/csswg-drafts/css-cascade/#all-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `all` | 37 | 79 | 27 | No | 24 | 9.1 | 37 | 37 | 27 | 24 | 9.3 | 3.0 |


See also
--------


CSS global keyword values: [`initial`](initial), [`inherit`](inherit), [`unset`](unset), [`revert`](revert), [`revert-layer`](revert-layer)



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/all>

animation-composition
=====================


The `animation-composition` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the [composite operation](https://developer.mozilla.org/en-US/docs/Glossary/Composite_operation) to use when multiple animations affect the same property simultaneously.


Syntax
------




```
/\* Single animation \*/
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/\* Multiple animations \*/
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

/\* Global values \*/
animation-composition: inherit;
animation-composition: initial;
animation-composition: revert;
animation-composition: revert-layer;
animation-composition: unset;

```
  **Note:** When you specify multiple comma-separated values on an `animation-*` property, they will be applied to the animations in the order in which the [`animation-name`](animation-name)s appear. If the number of animations and compositions differ, the values listed in the `animation-composition` property will cycle from the first to the last `animation-name`, looping until all the animations have an assigned `animation-composition` value. For more information, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
### Values


 `replace`  The effect value overrides the underlying value of the property. This is the default value.

  `add`  The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.

  `accumulate`  The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.

  Description
-----------



Each property that is targeted by the <@keyframes> at-rule is associated with an effect stack. The value of the effect stack is calculated by combining the *underlying value* of a property in a CSS style rule with the *effect value* of that property in the keyframe. The `animation-composition` property helps to specify how to combine the underlying value with the effect value.

 For example, in the CSS below, `blur(5px)` is the underlying value, and `blur(10px)` is the effect value. The `animation-composition` property specifies the operation to perform to produce the final effect value after compositing the effect of the underlying value and the effect value.

 
```
.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}

```
 Consider different values for the `animation-composition` property in the above example. The final effect value in each of those cases will be calculated as explained below:

 * With `replace`, `blur(10px)` will replace `blur(5px)` in the `0%` keyframe. This is the default behavior of the property.
* With `add`, the composite effect value in the `0%` keyframe will be `blur(5px) blur(10px)`.
* With `accumulate`, the composite effect value in `0%` keyframe will be `blur(15px)`.

  **Note:** A composite operation can also be specified in a keyframe. In that case, the specified composite operation is used for each property first within that keyframe and then on each property in the next keyframe.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `replace` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-composition =   
  <single-animation-composition>[#](value_definition_syntax#hash_mark)    
  
<single-animation-composition> =   
  replace     [|](value_definition_syntax#single_bar)  
  add         [|](value_definition_syntax#single_bar)  
  accumulate    
  

```
Examples
--------


### Understanding the animation-composition values



The example below shows the effect of different `animation-composition` values side-by-side.

 #### HTML

 
```
<div class="container">
  replace
  <div id="replace" class="target"></div>
</div>
<div class="container">
  add
  <div id="add" class="target"></div>
</div>
<div class="container">
  accumulate
  <div id="accumulate" class="target"></div>
</div>

```
 #### CSS

 Here the underlying value is `translateX(50px) rotate(45deg)`.

 
```
@keyframes slide {
  20%,
 40% {
    transform: translateX(100px);
    background: yellow;
  }
  80%,
 100% {
    transform: translateX(150px);
    background: orange;
  }
}
.container {
  width: 240px;
  height: 220px;
  background: cyan;
  display: inline-block;
}
.target {
  width: 20px;
  height: 50px;
  background: green;
  border-radius: 10px;
  transform: translateX(50px) rotate(45deg);
  animation: slide 5s linear infinite;
}
.target:hover {
  animation-play-state: paused;
}
#replace {
  animation-composition: replace;
}
#add {
  animation-composition: add;
}
#accumulate {
  animation-composition: accumulate;
}

```
 #### Result


 * With `replace`, the final effect value for the `transform` property in the `0%, 20%` keyframe is `translateX(100px)` (completely replacing the underlying value `translateX(50px) rotate(45deg)`). In this case, the element rotates from 45deg to 0deg as it animates from the default value set on the element itself to the non-rotated value set at the 0% mark. This is the default behavior.
* With `add`, the final effect value for the `transform` property in the `0%, 20%` keyframe is `translateX(50px) rotate(45deg)` followed by `translateX(100px)`. So the element is moved `50px` to the right, rotated `45deg`, then translated `100px` more along the redirected X axis.
* With `accumulate`, the final effect value in the `0%, 20%` keyframe is `translateX(150px) rotate(45deg)`. This means that the two X-axis translation values of `50px` and `100px` are combined or "accumulated".


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 2 # animation-composition](https://w3c.github.io/csswg-drafts/css-animations-2/#animation-composition) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-composition` | 112 | 112 | 104 | No | 98 | 16 | 112 | 112 | No | No | 16 | No |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* [Composite property of KeyFrameEffect](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite)
* Other related animation properties: [`animation`](animation), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition>

animation-duration
==================


The `animation-duration` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the length of time that an animation takes to complete one cycle.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------



```
/\* Single animation \*/
animation-duration: 6s;
animation-duration: 120ms;

/\* Multiple animations \*/
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/\* Global values \*/
animation-duration: inherit;
animation-duration: initial;
animation-duration: revert;
animation-duration: revert-layer;
animation-duration: unset;

```
### Values



 `[`<time>`](time)`  The time that an animation takes to complete one cycle. This may be specified in either seconds (`s`) or milliseconds (`ms`). The value must be positive or zero and the unit is required.

 If no value is provided, the default value of `0s` is used, in which case the animation still executes (the [`animationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event) and [`animationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) events are fired). Whether or not the animation will be visible when the duration is `0s` will depend on the value of [`animation-fill-mode`](animation-fill-mode), as explained below:

 * If `animation-fill-mode` is set to `backwards` or `both`, the first frame of the animation as defined by `animation-direction` will be displayed during [`animation-delay`](animation-delay) countdown.
* If `animation-fill-mode` is set to `forwards` or `both`, the last frame of the animation will be displayed, as defined by `animation-direction`, after the `animation-delay` expires.
* If `animation-fill-mode` is set to `none`, the animation will have no visible effect.

    **Note:** Negative values are invalid, causing the declaration to be ignored. Some early, prefixed, implementations may consider them as identical to `0s`.

   **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0s` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-duration =   
  [<time [0s,∞]>](time)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Setting animation duration



This animation has an animation-duration of 0.7 seconds.

 #### HTML

 
```
<div class="box"></div>

```
 #### CSS

 
```
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

```
 #### Result

 Hover over the rectangle to start the animation.


 See [CSS animations](css_animations/using_css_animations) for more examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-duration](https://w3c.github.io/csswg-drafts/css-animations/#animation-duration) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-duration` | 433 | 1212 | 49165 | 10Once the element has loaded, changing the value of this property has no effect. | 301512.1–1512–15 | 94 | 432 | 4318 | 49165 | 301412.1–1412–14 | 94.2 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration>

animation-name
==============


The `animation-name` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the names of one or more [`@keyframes`](@keyframes) at-rules that describe the animation to apply to an element. Multiple `@keyframe` at-rules are specified as a comma-separated list of names. If the specified name does not match any `@keyframe` at-rule, no properties are animated.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------



```
/\* Single animation \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* Multiple animations \*/
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/\* Global values \*/
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;

```
### Values



 `none`  A special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.

  [`<custom-ident>`](custom-ident)  A name identifying the animation. This identifier is composed of a combination of case-sensitive letters `a` to `z`, numbers `0` to `9`, underscores (`_`), and/or dashes (`-`). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be `none`, `unset`, `initial`, or `inherit`.

    **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-name =   
  [[](value_definition_syntax#brackets) none [|](value_definition_syntax#single_bar) <keyframes-name> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<keyframes-name> =   
  [<custom-ident>](custom-ident)  [|](value_definition_syntax#single_bar)  
  [<string>](string)          
  

```
Examples
--------


### Naming an animation



This animation has an `animation-name` of `rotate`.

 #### HTML

 
```
<div class="box"></div>

```
 #### CSS

 
```
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

```
 #### Result

 Hover over the rectangle to start the animation.


 See [CSS animations](css_animations/using_css_animations) for examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-name](https://w3c.github.io/csswg-drafts/css-animations/#animation-name) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-name` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 94 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 93.2 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name>

animation-play-state
====================


The `animation-play-state` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an animation is running or paused.


Try it
------



 Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.


Syntax
------



```
/\* Single animation \*/
animation-play-state: running;
animation-play-state: paused;

/\* Multiple animations \*/
animation-play-state: paused, running, running;

/\* Global values \*/
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: revert;
animation-play-state: revert-layer;
animation-play-state: unset;

```
### Values



 `running`  The **animation** is currently **playing**.

  `paused`  The **animation** is currently **paused**.

    **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `running` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-play-state =   
  <single-animation-play-state>[#](value_definition_syntax#hash_mark)    
  
<single-animation-play-state> =   
  running  [|](value_definition_syntax#single_bar)  
  paused     
  

```
Examples
--------


### Pausing an animation



This animation is paused, but runs when you hover over it.

 #### HTML

 
```
<div class="box"></div>

```
 #### CSS

 
```
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

```
 #### Result

 Hover over the rectangle to play the animation.


 See [CSS animations](css_animations/using_css_animations) for examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-play-state](https://w3c.github.io/csswg-drafts/css-animations/#animation-play-state) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-play-state` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 94 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 92 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state>

animation-direction
===================


The `animation-direction` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------



```
/\* Single animation \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* Multiple animations \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/\* Global values \*/
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;

```
### Values



 `normal`  The animation plays *forwards* each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default value.

  `reverse`  The animation plays *backwards* each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an `ease-in` timing function becomes `ease-out`.

  `alternate`  The animation reverses direction each cycle, with the first iteration being played *forwards*. The count to determine if a cycle is even or odd starts at one.

  `alternate-reverse`  The animation reverses direction each cycle, with the first iteration being played *backwards*. The count to determine if a cycle is even or odd starts at one.

    **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-direction =   
  <single-animation-direction>[#](value_definition_syntax#hash_mark)    
  
<single-animation-direction> =   
  normal             [|](value_definition_syntax#single_bar)  
  reverse            [|](value_definition_syntax#single_bar)  
  alternate          [|](value_definition_syntax#single_bar)  
  alternate-reverse    
  

```
Examples
--------


### Reversing the animation direction



#### HTML

 
```
<div class="box"></div>

```
 #### CSS

 
```
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

```
 #### Result


 See [CSS animations](css_animations/using_css_animations) for examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-direction](https://w3c.github.io/csswg-drafts/css-animations/#animation-direction) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-direction` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 94 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 93.2 | 4.01.0 |
| `alternate-reverse` | 19 | 12 | 16 | 10 | 12.1 | 6 | 4.4 | 25 | 16 | 12.1 | 6 | 1.5 |
| `reverse` | 19 | 12 | 16 | 10 | 12.1 | 6 | 4.4 | 25 | 16 | 12.1 | 6 | 1.5 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction>

animation-fill-mode
===================


The `animation-fill-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how a CSS animation applies styles to its target before and after its execution.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------



```
/\* Single animation \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Multiple animations \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

/\* Global values \*/
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;

```
### Values



 `none`  The animation will not apply any styles to the target when it's not executing. The element will instead be displayed using any other CSS rules applied to it. This is the default value.

  `forwards`  The target will retain the computed values set by the last [keyframe](@keyframes) encountered during execution. The last keyframe depends on the value of [`animation-direction`](animation-direction) and [`animation-iteration-count`](animation-iteration-count):

 

| `animation-direction` | `animation-iteration-count` | last keyframe encountered |
| --- | --- | --- |
| `normal` | even or odd | `100%` or `to` |
| `reverse` | even or odd | `0%` or `from` |
| `alternate` | even | `0%` or `from` |
| `alternate` | odd | `100%` or `to` |
| `alternate-reverse` | even | `100%` or `to` |
| `alternate-reverse` | odd | `0%` or `from` |

  `backwards`  The animation will apply the values defined in the first relevant [keyframe](@keyframes) as soon as it is applied to the target, and retain this during the [`animation-delay`](animation-delay) period. The first relevant keyframe depends on the value of [`animation-direction`](animation-direction):

 

| `animation-direction` | first relevant keyframe |
| --- | --- |
| `normal` or `alternate` | `0%` or `from` |
| `reverse` or `alternate-reverse` | `100%` or `to` |

  `both`  The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

    **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-fill-mode =   
  <single-animation-fill-mode>[#](value_definition_syntax#hash_mark)    
  
<single-animation-fill-mode> =   
  none       [|](value_definition_syntax#single_bar)  
  forwards   [|](value_definition_syntax#single_bar)  
  backwards  [|](value_definition_syntax#single_bar)  
  both         
  

```
Examples
--------


### Setting fill mode



You can see the effect of `animation-fill-mode` in the following example. It demonstrates how you can make the animation remain in its final state rather than reverting to the original state (which is the default).

 #### HTML

 
```
<p>Move your mouse over the gray box!</p>
<div class="demo">
  <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>

```
 #### CSS

 
```
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

```
 #### Result


 See [CSS animations](css_animations/using_css_animations) for more examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-fill-mode](https://w3c.github.io/csswg-drafts/css-animations/#animation-fill-mode) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-fill-mode` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 95 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 94 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode>

animation-iteration-count
=========================


The `animation-iteration-count` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the number of times an animation sequence should be played before stopping.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------




```
/\* Keyword value \*/
animation-iteration-count: infinite;

/\* <number> values \*/
animation-iteration-count: 3;
animation-iteration-count: 2.4;

/\* Multiple values \*/
animation-iteration-count: 2, 0, infinite;

/\* Global values \*/
animation-iteration-count: inherit;
animation-iteration-count: initial;
animation-iteration-count: revert;
animation-iteration-count: revert-layer;
animation-iteration-count: unset;

```
 The `animation-iteration-count` property is specified as one or more comma-separated values.


### Values



 `infinite`  The animation will repeat forever.

  `[`<number>`](number)`  The number of times the animation will repeat; this is `1` by default. You may specify non-integer values to play part of an animation cycle: for example, `0.5` will play half of the animation cycle. Negative values are invalid.

    **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `1` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-iteration-count =   
  <single-animation-iteration-count>[#](value_definition_syntax#hash_mark)    
  
<single-animation-iteration-count> =   
  infinite        [|](value_definition_syntax#single_bar)  
  [<number [0,∞]>](number)    
  

```
Examples
--------


### Setting iteration count



This animation will run 10 times.

 #### HTML

 
```
<div class="box"></div>

```
 #### CSS

 
```
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-iteration-count: 10;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

```
 #### Result

 Hover over the rectangle to start the animation.


 See [CSS animations](css_animations/using_css_animations) for examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-iteration-count](https://w3c.github.io/csswg-drafts/css-animations/#animation-iteration-count) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-iteration-count` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 94 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 93.2 | 4.01.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count>

animation-timeline
==================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `animation-timeline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the timeline that is used to control the progress of an animation.

  The timeline can be provided by the current position on a scrollbar, in which case it is referred to as a scrollbar timeline. The element that provides the scrollbar timeline can be specified in two ways: 

 * A *named scroll timeline* is one in which the element that will provide the scrollbar timeline is explicitly named, by applying the [`scroll-timeline-name`](scroll-timeline-name) property (or the [`scroll-timeline`](scroll-timeline) shorthand property). The name is then associated with the element to animate using the `animation-timeline` property.
* An *anonymous scroll timeline* is set using the [`scroll()`](animation-timeline/scroll) functional notation, which indicates that the element providing the scroll timeline is an ancestor of the element to be animated. The ancestor can either be set as either the root element or the nearest ancestor that has a scroll bar in either axis.

  Whether the scrollbar uses a scrollbar at the top/bottom or left/right of the element can also be specified. If the selected axis does not have a scrollbar the associated animation timeline will be inactive. 

 The animation timeline can also be set using the [`animation`](animation) shorthand property.



Syntax
------



```
/\* Keyword \*/
animation-timeline: none;
animation-timeline: auto;

/\* Single animation named timeline \*/
animation-timeline: some_scrollbar_timeline_name;
animation-timeline: -specific;
animation-timeline: sliding-vertically;

/\* Single animation anonymous timeline \*/
animation-timeline: scroll();
animation-timeline: scroll(root inline);

/\* Multiple animations \*/
animation-timeline: test1, animation4;
animation-timeline: none, -moz-specific, sliding;

/\* Global values \*/
animation-timeline: inherit;
animation-timeline: initial;
animation-timeline: revert;
animation-timeline: revert-layer;
animation-timeline: unset;

```
### Values


 `none`  The animation is not associated with a timeline.

  `auto`  The animation's timeline is the document's default [DocumentTimeline](https://developer.mozilla.org/en-US/docs/Web/API/DocumentTimeline).

  
`scroll()`  Experimental 
  The "anonymous" timeline is provided by some ancestor of the current element.

 See [`scroll()`](animation-timeline/scroll) for additional information.

  `<timeline-name>`   A [`<custom-ident>`](custom-ident) or string identifying the named scroll timeline, declared with the [`scroll-timeline-name`](scroll-timeline-name) property (or [`scroll-timeline`](scroll-timeline) shorthand property). If two or more scroll timelines share the same name, the last declared within the cascade will be used. If no matching scroll timeline is found, the animation is not associated with a timeline. 

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | listEachItemIdentifyerOrNoneAuto |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-timeline =   
  <single-animation-timeline>[#](value_definition_syntax#hash_mark)    
  
<single-animation-timeline> =   
  auto             [|](value_definition_syntax#single_bar)  
  none             [|](value_definition_syntax#single_bar)  
  <timeline-name>    
  
<timeline-name> =   
  [<custom-ident>](custom-ident)  [|](value_definition_syntax#single_bar)  
  [<string>](string)          
  

```
Examples
--------


### Setting a named scroll timeline



 A scroll timeline named `squareTimeline` is defined using the `scroll-timeline-name` property on the element with id `container`. This is then applied to the animation on the `#square` element using `animation-timeline: squareTimeline`. 

 #### HTML

 The HTML for the example is shown below.

 
```
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

```
 #### CSS

 The CSS for the container sets it as the source of a scroll timeline named `squareTimeline` using the `scroll-timeline-name` property (we could also set which scrollbar axis to use with `scroll-timeline-axis`, but there will be only one scrollbar here, and it will be used by default).

 The height of the container is set to 300px and we also set the container to create a vertical scrollbar if it overflows (below we will use CSS on the "stretcher" element to ensure that it does overflow).

 
```
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: squareTimeline;
  position: relative;
}

```
 The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property, which is set to the `squareTimeline` timeline named above.

 
```
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: squareTimeline;

  position: absolute;
  bottom: 0;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

```
  The "stretcher" CSS simply sets the block height to 600px, which forces the container element to overflow and create scroll bars. Without this element there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline. 

 
```
#stretcher {
  height: 600px;
}

```
 #### Result

 Scroll to see the square element being animated.



### Setting an anonymous scroll timeline



 The `#square` element is animated using an anonymous scrollbar timeline, which is applied to the element to be animated using the `scroll()` functional notation. The timeline in this particular example is provided by the nearest parent element that has (any) scrollbar, from the scrollbar in the block direction. 

 #### HTML

 The HTML for the example is shown below.

 
```
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

```
 #### CSS

  The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property. In this case the timeline is provided by `scroll(block nearest)`, which means that it will select the scrollbar in the block direction of the nearest ancestor element that has scrollbars; in this case the vertical scrollbar of the "container" element. 

 Note that the `block nearest` options below are actually the default, so we could instead just have had: `scroll()`.

 
```
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

```
  The CSS for the container sets its height to 300px and we also set the container to create a vertical scrollbar if it overflows. The "stretcher" CSS sets the block height to 600px, which forces the container element to overflow. These two together ensure that the container has a vertical scrollbar, which allows it to be used as the source of the anonymous scrollbar timeline. 

 
```
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

```
 #### Result

 Scroll to see the square element being animated.



Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 2 # animation-timeline](https://w3c.github.io/csswg-drafts/css-animations-2/#animation-timeline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-timeline` | No | No | 97 | No | No | No | No | No | No | No | No | No |
| `scroll` | No | No | 101Zero scroll range is treated as 100% but should be 0% (see [bug 1780865](https://bugzil.la/1780865)). | No | No | No | No | No | No | No | No | No |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timing-function`](animation-timing-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline>

@font-feature-values
====================



The `@font-feature-values` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> lets you use a common name in the [`font-variant-alternates`](font-variant-alternates) property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.

 The `@font-feature-values` at-rule may be used either at the top level of your CSS or inside any [CSS conditional-group at-rule](at-rule#conditional_group_rules).



Syntax
------


### Feature value blocks


 `@swash`  Specifies a feature name that will work with the [`swash()`](font-variant-alternates#swash()) functional notation of [`font-variant-alternates`](font-variant-alternates). A swash feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

  `@annotation`  Specifies a feature name that will work with the [`annotation()`](font-variant-alternates#annotation()) functional notation of [`font-variant-alternates`](font-variant-alternates). An annotation feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

  `@ornaments`  Specifies a feature name that will work with the [`ornaments()`](font-variant-alternates#ornaments()) functional notation of [`font-variant-alternates`](font-variant-alternates). An ornaments feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

  `@stylistic`  Specifies a feature name that will work with the [`stylistic()`](font-variant-alternates#stylistic()) functional notation of [`font-variant-alternates`](font-variant-alternates). A stylistic feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

  `@styleset`  Specifies a feature name that will work with the [`styleset()`](font-variant-alternates#styleset()) functional notation of [`font-variant-alternates`](font-variant-alternates). A styleset feature value definition allows an unlimited number of values: `ident1: 2 4 12 1` maps to the OpenType values `ss02`, `ss04`, `ss12`, and `ss01`. Note that values higher than `99` are valid, but don't map to any OpenType values and are ignored.

  `@character-variant`  Specifies a feature name that will work with the [`character-variant()`](font-variant-alternates#character-variant()) functional notation of [`font-variant-alternates`](font-variant-alternates). A character-variant feature value definition allows either one or two values: `ident1: 3` maps to `cv03=1`, and `ident2: 2 4` maps to `cv02=4`, but `ident2: 2 4 5` is invalid.

  Formal syntax
-------------



```
@font-feature-values =   
  @font-feature-values [<family-name>](family-name)[#](value_definition_syntax#hash_mark) { [<declaration-list>](declaration-list) }    
  

```
Examples
--------


### Using @styleset in a @font-feature-values rule



```
/\* At-rule for "nice-style" in Font One \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* At-rule for "nice-style" in Font Two \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/\* Apply the at-rules with a single declaration \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-feature-values](https://w3c.github.io/csswg-drafts/css-fonts/#font-feature-values) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@font-feature-values` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `annotation` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `character-variant` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `historical-forms` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `ornaments` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `styleset` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `stylistic` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |
| `swash` | No | No | 34 | No | No | 9.1 | No | No | 34 | No | 9.3 | No |


See also
--------


* The [`font-variant-alternates`](font-variant-alternates) property that uses values that this at-rule defines.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values>

animation-timing-function
=========================


The `animation-timing-function` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how an animation progresses through the duration of each cycle.


Try it
------



 It is often convenient to use the shorthand property [`animation`](animation) to set all animation properties at once.


Syntax
------




```
/\* Keyword values \*/
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/\* Function values \*/
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/\* Steps Function keywords \*/
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/\* Multiple animations \*/
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Global values \*/
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: revert-layer;
animation-timing-function: unset;

```
  **Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the [`animation-name`](animation-name)s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](css_animations/using_css_animations#setting_multiple_animation_property_values).

 
### Values


 [`<easing-function>`](easing-function)  The easing function that corresponds to a given animation, as determined by [`animation-name`](animation-name).

 The non-step keyword values (ease, linear, ease-in-out, etc.) each represent cubic Bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. The step timing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.

  `ease`  Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the animation, slowing back down at the end.

  `linear`  Equal to `cubic-bezier(0.0, 0.0, 1.0, 1.0)`, animates at an even speed.

  `ease-in`  Equal to `cubic-bezier(0.42, 0, 1.0, 1.0)`, starts off slowly, with the speed of the transition of the animating property increasing until complete.

  `ease-out`  Equal to `cubic-bezier(0, 0, 0.58, 1.0)`, starts quickly, slowing down the animation continues.

  `ease-in-out`  Equal to `cubic-bezier(0.42, 0, 0.58, 1.0)`, with the animating properties slowly transitioning, speeding up, and then slowing down again.

  `cubic-bezier(p1, p2, p3, p4)`  An author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

  `steps(n, <jumpterm>)`  Displays an animation iteration along *n* stops along the transition, displaying each stop for equal lengths of time. For example, if *n* is 5, there are 5 steps. Whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:

  `jump-start`  Denotes a left-continuous function, so that the first jump happens when the animation begins;

  `jump-end`  Denotes a right-continuous function, so that the last jump happens when the animation ends;

  `jump-none`  There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration.

  `jump-both`  Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration.

  `start`  Same as `jump-start`.

  `end`  Same as `jump-end`.

    `step-start`  Equal to `steps(1, jump-start)`

  `step-end`  Equal to `steps(1, jump-end)`

  Description
-----------



Timing functions may be specified on individual keyframes in a <@keyframes> rule. If no `animation-timing-function` is specified on a keyframe, the corresponding value of `animation-timing-function` from the element to which the animation is applied is used for that keyframe.

 Within a keyframe, `animation-timing-function` is an at-rule-specific descriptor, not the property of the same name. The timing is not being animated. Rather, a keyframe's timing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property. As a result, an `animation-timing-function` specified on the `100%` or `to` keyframe will never be used.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `ease` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
animation-timing-function =   
  <easing-function>[#](value_definition_syntax#hash_mark)    
  
<easing-function> =   
  linear                          [|](value_definition_syntax#single_bar)  
  <linear-easing-function>        [|](value_definition_syntax#single_bar)  
  <cubic-bezier-easing-function>  [|](value_definition_syntax#single_bar)  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                [|](value_definition_syntax#single_bar)  
  ease-in                                             [|](value_definition_syntax#single_bar)  
  ease-out                                            [|](value_definition_syntax#single_bar)  
  ease-in-out                                         [|](value_definition_syntax#single_bar)  
  cubic-bezier( [<number [0,1]>](number) , [<number>](number) , [<number [0,1]>](number) , [<number>](number) )    
  
<step-easing-function> =   
  step-start                                [|](value_definition_syntax#single_bar)  
  step-end                                  [|](value_definition_syntax#single_bar)  
  steps( [<integer>](integer) [[](value_definition_syntax#brackets), <step-position> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<linear-stop-list> =   
  [[](value_definition_syntax#brackets) <linear-stop> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<step-position> =   
  jump-start  [|](value_definition_syntax#single_bar)  
  jump-end    [|](value_definition_syntax#single_bar)  
  jump-none   [|](value_definition_syntax#single_bar)  
  jump-both   [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end           
  
<linear-stop> =   
  [<number>](number)               [&&](value_definition_syntax#double_ampersand)  
  <linear-stop-length>[?](value_definition_syntax#question_mark)    
  
<linear-stop-length> =   
  [<percentage>](percentage)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Cubic-Bezier examples




```
.ease {
  animation-timing-function: ease;
}
.easein {
  animation-timing-function: ease-in;
}
.easeout {
  animation-timing-function: ease-out;
}
.easeinout {
  animation-timing-function: ease-in-out;
}
.linear {
  animation-timing-function: linear;
}
.cb {
  animation-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

```


### Step examples




```
.jump-start {
  animation-timing-function: steps(5, jump-start);
}
.jump-end {
  animation-timing-function: steps(5, jump-end);
}
.jump-none {
  animation-timing-function: steps(5, jump-none);
}
.jump-both {
  animation-timing-function: steps(5, jump-both);
}
.start {
  animation-timing-function: steps(5, start);
}
.end {
  animation-timing-function: steps(5, end);
}
.step-start {
  animation-timing-function: step-start;
}
.step-end {
  animation-timing-function: step-end;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # animation-timing-function](https://w3c.github.io/csswg-drafts/css-animations/#animation-timing-function) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `animation-timing-function` | 433 | 1212 | 49165 | 10 | 301512.1–1512–15 | 94 | 43≤37 | 4318 | 49165 | 301412.1–1412–14 | 93.2 | 4.01.0 |
| `jump` | 77 | 79 | 65 | No | 64 | 14 | 77 | 77 | 65 | 55 | 14 | 12.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* [`<easing-function>`](easing-function)
* JavaScript [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) API
* [cubic-bezier.com](https://cubic-bezier.com)
* Other related animation properties: [`animation`](animation), [`animation-composition`](animation-composition), [`animation-delay`](animation-delay), [`animation-direction`](animation-direction), [`animation-duration`](animation-duration), [`animation-fill-mode`](animation-fill-mode), [`animation-iteration-count`](animation-iteration-count), [`animation-name`](animation-name), [`animation-play-state`](animation-play-state), [`animation-timeline`](animation-timeline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function>

font-variant-alternates
=======================



The `font-variant-alternates` CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in [`@font-feature-values`](@font-feature-values).

 
```
/\* Keyword values \*/
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/\* Functional notation values \*/
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/\* Global values \*/
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

```
 The [`@font-feature-values`](@font-feature-values) at-rule can define names for alternative glyph functions (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament` or `annotation`), associating the name with OpenType parameters. This property allows those human-readable names (defined in [`@font-feature-values`](@font-feature-values)) in the stylesheet.



Syntax
------



This property may take one of two forms:

 * either the keyword `normal`
* or one or more of the other keywords and functions listed below, space-separated, in any order.


### Values


 `normal`  This keyword deactivates alternate glyphs.

  `historical-forms`  This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value `hist`.

  `stylistic()`  This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `salt`, like `salt 2`.

  `styleset()`  This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ssXY`, like `ss02`.

  `character-variant()`  This function enables specific stylistic alternatives for characters. It is similar to `styleset()`, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `cvXY`, like `cv02`.

  `swash()`  This function enables [swash](https://en.wikipedia.org/wiki/Swash_%28typography%29) glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values `swsh` and `cswh`, like `swsh 2` and `cswh 2`.

  `ornaments()`  This function enables ornaments, like [fleurons](https://en.wikipedia.org/wiki/Fleuron_%28typography%29) and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ornm`, like `ornm 2`.

  **Note:** In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.

   `annotation()`  This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `nalt`, like `nalt 2`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant-alternates =   
  normal                                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) stylistic( <feature-value-name> ) [||](value_definition_syntax#double_bar) historical-forms [||](value_definition_syntax#double_bar) styleset( <feature-value-name>[#](value_definition_syntax#hash_mark) ) [||](value_definition_syntax#double_bar) character-variant( <feature-value-name>[#](value_definition_syntax#hash_mark) ) [||](value_definition_syntax#double_bar) swash( <feature-value-name> ) [||](value_definition_syntax#double_bar) ornaments( <feature-value-name> ) [||](value_definition_syntax#double_bar) annotation( <feature-value-name> ) []](value_definition_syntax#brackets)    
  
<feature-value-name> =   
  [<ident>](ident)    
  

```
Examples
--------


### Enabling swash glyphs



#### HTML

 
```
<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>

```
 #### CSS

 
```
@font-face {
  font-family: MonteCarlo;
  src: url(MonteCarlo-Regular.ttf);
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo";
  font-size: 1.5rem;
}

.variant {
  font-feature-settings: "swsh" 1;
  font-variant-alternates: swash(fancy);
}

```
  **Note:** For this example to work you need to load the MonteCarlo font which is licensed under the [SIL Open Font License Version 1.1](http://scripts.sil.org/OFL). Download at <https://github.com/googlefonts/monte-carlo>.

 More fonts are available in the [Google Font corpus](https://github.com/google/fonts). However, note that fonts loaded from Google Fonts directly (for example, using `@import url("https://fonts.googleapis.com/css2?family=MonteCarlo");`) won't work. Google Fonts hosted fonts seem to strip the swash feature.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-alternates-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-alternates-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-alternates` | NoSee [bug 716567](https://crbug.com/716567). | NoSee [bug 716567](https://crbug.com/716567). | 34 | No | NoSee [bug 716567](https://crbug.com/716567). | 9.1 | NoSee [bug 716567](https://crbug.com/716567). | NoSee [bug 716567](https://crbug.com/716567). | 34 | NoSee [bug 716567](https://crbug.com/716567). | 9.3 | NoSee [bug 716567](https://crbug.com/716567). |
| `annotation` | No | No | 34 | No | No | 16.2 | No | No | 34 | No | 16.2 | No |
| `character_variant` | No | No | 34 | No | No | 16.2 | No | No | 34 | No | 16.2 | No |
| `ornaments` | No | No | 34 | No | No | 16.2 | No | No | 34 | No | 16.2 | No |
| `styleset` | No | No | 34 | No | No | 16.2 | No | No | 34 | No | 16.2 | No |
| `stylistic` | No | No | 34 | No | No | 16.2 | No | No | 34 | No | 16.2 | No |
| `swash` | No | No | 34 | No | No | 16.2 | No | No | 34 | No | 16.2 | No |


See also
--------


* [`font-variant`](font-variant)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)
* [`@font-feature-values`](@font-feature-values)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates>

:any-link
=========


The `:any-link` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) or [`<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) element that has an `href` attribute. Thus, it matches all elements that match [`:link`](:link) or [`:visited`](:visited).


Try it
------


Syntax
------



```
:any-link {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>

```
### CSS



```
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit browsers \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-any-link-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-any-link-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:any-link` | 651 | 7979 | 501–50 | No | 5215 | 931.2–3 | 65≤37 | 6518 | 504–50 | 4714 | 91 | 9.01.0 |
| `not_match_link` | 65 | 79 | 87 | No | 52 | NoSafari currently matches `<link>` elements with link pseudo-classes. See [Bug: 220740](https://webkit.org/b/220740). | 65 | 65 | 87 | 47 | NoSafari currently matches `<link>` elements with link pseudo-classes. See [Bug: 220740](https://webkit.org/b/220740). | 9.0 |


See also
--------


* [Creating hyperlinks](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
* Matches HTML elements: [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [`<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) with an [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href) attribute
* Related CSS selectors:
	+ [`:visited`](:visited)
	+ [`:link`](:link)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link>

ascent-override
===============


The `ascent-override` CSS descriptor defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.


Syntax
------



```
ascent-override: normal;
ascent-override: 90%;

```
### Values


 `normal`  The default value. When used the metric value is obtained from the font file.

  `<percentage>`  A [`<percentage>`](../percentage) value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| Percentages | as specified |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
ascent-override =   
  [[](../value_definition_syntax#brackets) normal [|](../value_definition_syntax#single_bar) [<percentage [0,∞]>](../percentage) []](../value_definition_syntax#brackets)[{1,2}](../value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Overriding metrics of a fallback font



The `ascent-override` property can help when overriding the metrics of a fallback font to better match those of a primary web font.

 
```
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  ascent-override: 125%;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-metrics-override-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-metrics-override-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ascent-override` | 87 | 87 | 89 | No | 73 | No | 87 | 87 | 89 | 62 | No | 14.0 |


See also
--------


* [`descent-override`](descent-override)
* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-weight`](font-weight)
* [`font-style`](font-style)
* [`font-stretch`](font-stretch)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`line-gap-override`](line-gap-override)
* [`src`](src)
* [`size-adjust`](size-adjust)
* [`unicode-range descriptor`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override>

asin()
======


The `asin()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the inverse sine of a number between `-1` and `1`. The function contains a single calculation that returns the number of radians representing an [`<angle>`](angle) between `-90deg` and `90deg`.


Syntax
------



```
/\* Single <number> values \*/
transform: rotate(asin(-0.2));
transform: rotate(asin(2 * 0.125));

/\* Other values \*/
transform: rotate(asin(pi / 5));
transform: rotate(asin(e / 3));

```
### Parameter



The `asin(number)` function accepts only one value as its parameter.

  `number`  A calculation which resolves to a [`<number>`](number) between `-1` and `1`.

  
### Return value



The inverse sine of an `number` will always return an [`<angle>`](angle) between `-90deg` and `90deg`.

 * If `number` is less than `-1` or greater than `1`, the result is `NaN`.
* If `number` is `0⁻`, the result is `0⁻`.


### Formal syntax



```
<asin()> =   
  asin( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Rotate elements



The `asin()` function can be used to [`rotate`](transform-function/rotate) elements as it return an [`<angle>`](angle).

 #### HTML

 
```
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

```
 #### CSS

 
```
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(asin(1));
}
div.box-2 {
  transform: rotate(asin(0.5));
}
div.box-3 {
  transform: rotate(asin(0));
}
div.box-4 {
  transform: rotate(asin(-0.5));
}
div.box-5 {
  transform: rotate(asin(-1));
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `asin` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`sin()`](sin)
* [`cos()`](cos)
* [`tan()`](tan)
* [`acos()`](acos)
* [`atan()`](atan)
* [`atan2()`](atan2)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/asin>

aspect-ratio
============


The `aspect-ratio` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets a **preferred aspect ratio** for the box, which will be used in the calculation of auto sizes and some other layout functions.


Try it
------


Syntax
------



```
aspect-ratio: 1 / 1;
aspect-ratio: 1;

/\* Global values \*/
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

```
### Values


 `auto`  [Replaced elements](replaced_element) with an intrinsic aspect ratio use *that* aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.

  [`<ratio>`](ratio)  The box's preferred aspect ratio is the specified ratio of `width` / `height`. If `height` and the preceding slash character are omitted, `height` defaults to `1`. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by `box-sizing`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements except inline boxes and internal ruby or table boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
aspect-ratio =   
  auto     [||](value_definition_syntax#double_bar)  
  <ratio>    
  
<ratio> =   
  [<number [0,∞]>](number) [[](value_definition_syntax#brackets) / [<number [0,∞]>](number) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Examples of values for aspect-ratio



```
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # aspect-ratio](https://w3c.github.io/csswg-drafts/css-sizing-4/#aspect-ratio) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `aspect-ratio` | 88 | 88 | 89 | No | 74 | 15 | 88 | 88 | 89 | 63 | 15 | 15.0 |


See also
--------


* [Image aspect-ratio: preventing jank](https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia#rendering_strategy_preventing_jank_when_loading_images)
* [Designing an aspect ratio unit for CSS](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/)
* [Setting Height And Width On Images Is Important Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio>

appearance
==========


The `appearance` CSS property is used to control native appearance of UI controls, that are based on operating system's theme.


Try it
------



 Before standardization this property allowed simple elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.

  **Note:** If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword `none` does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

 
Syntax
------



```
/\* CSS Basic User Interface Module Level 4 values \*/
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;

/\* "Compat-auto" values, which have the same effect as 'auto' \*/
appearance: button;
appearance: searchfield;
appearance: textarea;
appearance: push-button;
appearance: slider-horizontal;
appearance: checkbox;
appearance: radio;
appearance: square-button;
appearance: menulist;
appearance: listbox;
appearance: meter;
appearance: progress-bar;

/\* Partial list of available values in Gecko \*/
-moz-appearance: scrollbarbutton-up;
-moz-appearance: button-bevel;

/\* Partial list of available values in WebKit/Blink (as well as Gecko and Edge) \*/
-webkit-appearance: media-mute-button;
-webkit-appearance: caret;

/\* Global values \*/
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

```
### Values



#### Standard keywords

 

| Value | Browser | Description |
| --- | --- | --- |
| `none` | Firefox Chrome Safari Edge | Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded. |
| `auto` | Firefox Chrome Edge |  The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling.  |
| `menulist-button` | Firefox Chrome Safari Edge |  |
| `textfield` | Firefox Chrome Safari Edge |  |
| The following values are treated as equivalent to `auto`: |
| `button` | Firefox Chrome Safari Edge | The element used to be drawn like a button. |
| `checkbox` | Firefox Chrome Safari Edge |  The element used to be drawn like a checkbox, including only the actual "checkbox" portion.  |
| `listbox` | Firefox Chrome Safari Edge |  |
| `menulist` | Firefox Chrome Safari Edge |  |
| `meter` | Chrome Safari Firefox |  |
| `progress-bar` | Chrome Safari Firefox |  |
| `push-button` | Chrome Safari Edge |  |
| `radio` | Firefox Chrome Safari Edge |  The element used to be drawn like a radio button, including only the actual "radio button" portion.  |
| `searchfield` | Firefox Chrome Safari Edge |  |
| `slider-horizontal` | Chrome Safari Edge |  |
| `square-button` | Chrome Safari Edge |  |
| `textarea` | Firefox Chrome Safari Edge |  |

 #### Non-standard keywords

 The following values may be operational on historical browser versions using `-moz-appearance` or `-webkit-appearance` prefix, but not on the standard `appearance` property.

 

| Value | Browser | Description |
| --- | --- | --- |
| `attachment` | Safari |  |
| `borderless-attachment` | Safari |  |
| `button-bevel` | Firefox Chrome Safari Edge |  |
| `caps-lock-indicator` | Safari Edge |  |
| `caret` | Firefox Chrome Safari Edge |  |
| `checkbox-container` | Firefox | The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox. |
| `checkbox-label` | Firefox |  |
| `checkmenuitem` | Firefox |  |
| `color-well` | Safari | `input type=color` |
| `continuous-capacity-level-indicator` | Safari |  |
| `default-button` | Safari Edge |  |
| `discrete-capacity-level-indicator` | Safari |  |
| `inner-spin-button` | Firefox Chrome Safari |  |
| `image-controls-button` | Safari |  |
| `list-button` | Safari | datalist |
| `listitem` | Firefox Chrome Safari Edge |  |
| `media-enter-fullscreen-button` | Chrome Safari |  |
| `media-exit-fullscreen-button` | Chrome Safari |  |
| `media-fullscreen-volume-slider` | Safari |  |
| `media-fullscreen-volume-slider-thumb` | Safari |  |
| `media-mute-button` | Chrome Safari Edge |  |
| `media-play-button` | Chrome Safari Edge |  |
| `media-overlay-play-button` | Chrome Safari |  |
| `media-return-to-realtime-button` | Safari |  |
| `media-rewind-button` | Safari |  |
| `media-seek-back-button` | Safari Edge |  |
| `media-seek-forward-button` | Safari Edge |  |
| `media-toggle-closed-captions-button` | Chrome Safari |  |
| `media-slider` | Chrome Safari Edge |  |
| `media-sliderthumb` | Chrome Safari Edge |  |
| `media-volume-slider-container` | Chrome Safari |  |
| `media-volume-slider-mute-button` | Safari |  |
| `media-volume-slider` | Chrome Safari |  |
| `media-volume-sliderthumb` | Chrome Safari |  |
| `media-controls-background` | Chrome Safari |  |
| `media-controls-dark-bar-background` | Safari |  |
| `media-controls-fullscreen-background` | Chrome Safari |  |
| `media-controls-light-bar-background` | Safari |  |
| `media-current-time-display` | Chrome Safari |  |
| `media-time-remaining-display` | Chrome Safari |  |
| `menulist-text` | Firefox Chrome Safari Edge |  |
| `menulist-textfield` | Firefox Chrome Safari Edge | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
| `meterbar` | Firefox | Use `meter` instead. |
| `number-input` | Firefox |  |
| `progress-bar-value` | Chrome Safari |  |
| `progressbar` | Firefox | The element is styled like a progress bar. Use `progress-bar` instead |
| `progressbar-vertical` | Firefox |  |
| `range` | Firefox |  |
| `range-thumb` | Firefox |  |
| `rating-level-indicator` | Safari |  |
| `relevancy-level-indicator` | Safari |  |
| `scale-horizontal` | Firefox |  |
| `scalethumbend` | Firefox |  |
| `scalethumb-horizontal` | Firefox |  |
| `scalethumbstart` | Firefox |  |
| `scalethumbtick` | Firefox |  |
| `scalethumb-vertical` | Firefox |  |
| `scale-vertical` | Firefox |  |
| `scrollbarthumb-horizontal` | Firefox |  |
| `scrollbarthumb-vertical` | Firefox |  |
| `scrollbartrack-horizontal` | Firefox |  |
| `scrollbartrack-vertical` | Firefox |  |
| `searchfield-decoration` | Safari Edge |  |
| `searchfield-results-decoration` | Chrome Safari Edge | (Works on Chrome 51 on Windows 7) |
| `searchfield-results-button` | Safari Edge |  |
| `searchfield-cancel-button` | Chrome Safari Edge |  |
| `snapshotted-plugin-overlay` | Safari |  |
| `sheet` | None |  |
| `slider-vertical` | Chrome Safari Edge |  |
| `sliderthumb-horizontal` | Chrome Safari Edge |  |
| `sliderthumb-vertical` | Chrome Safari Edge |  |
| `textfield-multiline` | Firefox | Use `textarea` instead. |
| `-apple-pay-button` | Safari | **iOS and macOS only**. Available on the web starting in iOS 10.1 and macOS 10.12.1 |


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
appearance =   
  none              [|](value_definition_syntax#single_bar)  
  auto              [|](value_definition_syntax#single_bar)  
  <compat-auto>     [|](value_definition_syntax#single_bar)  
  <compat-special>    
  
<compat-auto> =   
  searchfield        [|](value_definition_syntax#single_bar)  
  textarea           [|](value_definition_syntax#single_bar)  
  push-button        [|](value_definition_syntax#single_bar)  
  slider-horizontal  [|](value_definition_syntax#single_bar)  
  checkbox           [|](value_definition_syntax#single_bar)  
  radio              [|](value_definition_syntax#single_bar)  
  square-button      [|](value_definition_syntax#single_bar)  
  menulist           [|](value_definition_syntax#single_bar)  
  listbox            [|](value_definition_syntax#single_bar)  
  meter              [|](value_definition_syntax#single_bar)  
  progress-bar       [|](value_definition_syntax#single_bar)  
  button               
  
<compat-special> =   
  textfield        [|](value_definition_syntax#single_bar)  
  menulist-button    
  

```
Examples
--------


### Make an element look like a menulist button



```
.exampleone {
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
}

```
### Apply custom styling



#### HTML

 
```
<select class="none">
  <option>appearance: none</option>
</select>
<select class="auto">
  <option>appearance: auto</option>
</select>

```
 #### CSS

 
```
.none {
  appearance: none;
}
.auto {
  appearance: auto;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # appearance-switching](https://w3c.github.io/csswg-drafts/css-ui/#appearance-switching) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `appearance` | 841 | 8412 | 80641 | No | 7015 | 15.43 | 844.4 | 8418 | 80644 | 6014 | 15.41 | 14.01.0 |
| `auto` | 83 | 83 | 80 | No | 69 | 15.4 | 83 | 83 | 80 | 59 | 15.4 | 13.0 |
| `compat-auto` | 1 | 12 | 1 | No | 15 | 3 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `menulist-button` | 1 | 12 | 801See [bug 1481615](https://bugzil.la/1481615). | No | 15 | 3 | 4.4 | 18 | 804See [bug 1481615](https://bugzil.la/1481615). | 14 | 1 | 1.0 |
| `none` | 1 | 12 | 541Doesn't work with `<input type="checkbox">` and `<input type="radio">`. | No | 15 | 3 | 4.4 | 18 | 544Doesn't work with `<input type="checkbox">` and `<input type="radio">`. | 14 | 3 | 1.0 |
| `textfield` | 1 | 12 | 1 | No | 15 | 3 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Definition of `appearance` in CSS Basic User Interface Module Level 4](https://drafts.csswg.org/css-ui/#appearance-switching)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/appearance>

atan()
======


The `atan()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the inverse tangent of a number between `-∞` and `+∞`. The function contains a single calculation that returns the number of radians representing an [`<angle>`](angle) between `-90deg` and `90deg`.


Syntax
------



```
/\* Single <number> values \*/
transform: rotate(atan(1));
transform: rotate(atan(4 * 50));

/\* Other values \*/
transform: rotate(atan(pi / 2));
transform: rotate(atan(e * 3));

```
### Parameter



The `atan(number)` function accepts only one value as its parameter.

  `number`  A calculation which resolves to a [`<number>`](number) between `-∞` and `+∞`.

  
### Return value



The inverse tangent of an `number` will always return an [`<angle>`](angle) between `-90deg` and `90deg`.

 * If `number` is `0⁻`, the result is `0⁻`.
* If `number` is `+∞` the result is `90deg`.
* If `number` is `-∞` the result is `-90deg`.

 That is:

 * `atan(-infinity)` representing `-90deg`.
* `atan(-1)` representing `-45deg`
* `atan(0)` representing `0deg`
* `atan(1)` representing `45deg`
* `atan(infinity)` representing `90deg`.


### Formal syntax



```
<atan()> =   
  atan( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Rotate elements



The `atan()` function can be used to [`rotate`](transform-function/rotate) elements as it return an [`<angle>`](angle).

 #### HTML

 
```
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

```
 #### CSS

 
```
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan(-99999));
}
div.box-2 {
  transform: rotate(atan(-1));
}
div.box-3 {
  transform: rotate(atan(0));
}
div.box-4 {
  transform: rotate(atan(1));
}
div.box-5 {
  transform: rotate(atan(99999));
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `atan` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`sin()`](sin)
* [`cos()`](cos)
* [`tan()`](tan)
* [`asin()`](asin)
* [`acos()`](acos)
* [`atan2()`](atan2)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/atan>

::backdrop
==========



The `::backdrop` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) is a box the size of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) and [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) elements.

 When multiple elements have been placed into fullscreen mode, the backdrop is drawn immediately beneath the frontmost such element, and on top of the older fullscreen elements.

 
```
/\* Backdrop is only displayed when dialog is opened with dialog.showModal() \*/
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}

```
 All fullscreen elements are placed in a last-in/first out (LIFO) stack in the top layer, which is a special layer in the viewport which is always rendered last (and therefore on top) before drawing the viewport's contents to the screen. The `::backdrop` pseudo-element makes it possible to obscure, style, or completely hide everything located below the element when it's the topmost one in the top layer.

 `::backdrop` neither inherits from nor is inherited by any other elements. No restrictions are made on what properties apply to this pseudo-element.



Syntax
------



```
::backdrop {
  /\* ... \*/
}

```
Examples
--------


### Styling the backdrop for fullscreen video



In this example, the backdrop style used when a video is shifted to fullscreen mode is configured to be a grey-blue color rather than the black it defaults to in most browsers.

 
```
video::backdrop {
  background-color: #448;
}

```
 The resulting screen looks like this:

  ![An almost full-screen video player with purple above and below the player as the video player doesn't completely fill the screen.](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop/bbb-backdrop.png) 

 [See this example in action](https://mdn.github.io/css-examples/backdrop/index.html), after changing the color of the background cause the video to go fullscreen to see the change to the backdrop color.


Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 4 # backdrop](https://w3c.github.io/csswg-drafts/css-position-4/#backdrop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::backdrop` | 3732 | 7912–79 | 47 | 11 | 2419 | 15.4 | 374.4.3 | 3732 | 47 | 2419 | 15.4 | 3.02.0 |
| `dialog` | 32 | 79 | 98 | No | 19 | 15.4 | 4.4.3 | 32 | 98 | 19 | 15.4 | 2.0 |
| `fullscreen` | No | 12–79 | 47 | 11 | No | No | No | No | 47 | No | No | No |


See also
--------


* [`:fullscreen`](:fullscreen) pseudo-class
* [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) HTML element
* [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop>

background-attachment
=====================


The `background-attachment` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether a background image's position is fixed within the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport), or scrolls with its containing block.


Try it
------


Syntax
------




```
/\* Keyword values \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/\* Global values \*/
background-attachment: inherit;
background-attachment: initial;
background-attachment: revert;
background-attachment: revert-layer;
background-attachment: unset;

```
 The `background-attachment` property is specified as one of the keyword values from the list below.


### Values


 `fixed`  The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with [`background-clip: text`](background-clip#values).)

  `local`  The background is fixed relative to the element's contents. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

  `scroll`  The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `scroll` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
background-attachment =   
  <attachment>[#](value_definition_syntax#hash_mark)    
  
<attachment> =   
  scroll  [|](value_definition_syntax#single_bar)  
  fixed   [|](value_definition_syntax#single_bar)  
  local     
  

```
Examples
--------


### Simple example



#### HTML

 
```
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>

```
 #### CSS

 
```
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}

```
 #### Result



### Multiple background images



This property supports multiple background images. You can specify a different `<attachment>` for each background, separated by commas. Each image is matched with the corresponding `<attachment>` type, from first specified to last.

 #### HTML

 
```
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>

```
 #### CSS

 
```
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-background-attachment](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-attachment) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-attachment` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 3.2 | 1.0 |
| `fixed` | 1 | 12 | 2 | 9 | 10.5 | 14`local` is recognized but has no effect due to [a bug](https://webkit.org/b/219324).3.1–14 | 37 | 18 | 4 | 14 | 5`fixed` is recognized but has no effect. See [bug 219324](https://webkit.org/b/219324). | 1.0 |
| `local` | 1 | 12 | 25 | 9 | 10.5 | 13`local` is recognized but has no effect due to [a bug](https://webkit.org/b/219324).5–13 | 37 | 18 | 25 | 14 | 13`local` is recognized but has no effect due to [a bug](https://webkit.org/b/219324).4.2–13If `-webkit-overflow-scrolling: touch` is set, then `local` has no effect. | 1.0 |
| `multiple_backgrounds` | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 | ≤37 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment>

atan2()
=======


The `atan2()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the inverse tangent of two values between `-infinity` and `infinity`. The function accepts two arguments and returns the number of radians representing an [`<angle>`](angle) between `-180deg` and `180deg`.


Syntax
------



```
/\* Two <number> values \*/
transform: rotate(atan2(3, 2));

/\* Two <dimension> values \*/
transform: rotate(atan2(1rem, -0.5rem));

/\* Two <percentage> values \*/
transform: rotate(atan2(20%, -30%));

/\* Other values \*/
transform: rotate(atan2(pi, 45));
transform: rotate(atan2(e, 30));

```
### Parameters



The `atan2(y, x)` function accepts two comma-separated values as its parameters. Each value can be a [`<number>`](number), a [`<dimension>`](dimension), or a [`<percentage>`](percentage). Both values must be of the same type, although if they are [`<dimension>`](dimension) they can be of different units (example: `atan2(100px, 5vw)` is valid).

  `y`  The y-coordinate of the point. A calculation which resolves to a [`<number>`](number), a [`<dimension>`](dimension), or a [`<percentage>`](percentage).

  `x`  The x-coordinate of the point. A calculation which resolves to a [`<number>`](number), a [`<dimension>`](dimension), or a [`<percentage>`](percentage).

  
### Return value


Given two values `x` and `y`, the function `atan2(y, x)` calculates and returns the [`<angle>`](angle) between the positive x-axis and the ray from the origin to the point `(x, y)`.

### Formal syntax



```
<atan2()> =   
  atan2( <calc-sum> , <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Rotate elements



The `atan2()` function can be used to [`rotate`](transform-function/rotate) elements as it return an [`<angle>`](angle).

 #### HTML

 
```
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

```
 #### CSS

 
```
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(atan2(3, 2));
}
div.box-2 {
  transform: rotate(atan2(3%, -2%));
}
div.box-3 {
  transform: rotate(atan2(-1, 0.5));
}
div.box-4 {
  transform: rotate(atan2(1, 0.5));
}
div.box-5 {
  transform: rotate(atan2(1rem, -0.5rem));
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `atan2` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`sin()`](sin)
* [`cos()`](cos)
* [`tan()`](tan)
* [`asin()`](asin)
* [`acos()`](acos)
* [`atan()`](atan)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/atan2>

attr()
======



 **Note:** The `attr()` function can be used with any CSS property, but support for properties other than [`content`](content) is experimental, and support for the type-or-unit parameter is sparse.

  The `attr()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on <pseudo-elements>, in which case the value of the attribute on the pseudo-element's originating element is returned.



Try it
------


Syntax
------



```
/\* Simple usage \*/
attr(data-count);
attr(title);

/\* With type \*/
attr(src url);
attr(data-count number);
attr(data-width px);

/\* With fallback \*/
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");

```
### Values


 `attribute-name`  The name of an attribute on the HTML element referenced in the CSS.

  
`<type-or-unit>`  Experimental 
  A keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of `<type-or-unit>` as a value for the given attribute is invalid, the `attr()` expression will be invalid too. If omitted, it defaults to `string`. The list of valid values are:

  `string`  The attribute value is treated as a CSS [`<string>`](string). It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.

 Default value: an empty string.

  
`color`  Experimental 
  The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS [`<string>`](string) value. Leading and trailing spaces are stripped.

 Default value: `currentcolor`.

  
`url`  Experimental 
   The attribute value is parsed as a string that is used inside a CSS `url()` function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. 

 Default value: the URL `about:invalid` that points to a non-existent document with a generic error condition.

  
`integer`  Experimental 
   The attribute value is parsed as a CSS [`<integer>`](integer). If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

  
`number`  Experimental 
   The attribute value is parsed as a CSS [`<number>`](number). If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

  
`length`  Experimental 
   The attribute value is parsed as a CSS [`<length>`](length) dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. 

 Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

  
`em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`  Experimental 
   The attribute value is parsed as a CSS [`<number>`](number), that is without the unit (e.g. `12.5`), and interpreted as a [`<length>`](length) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. 

 Default value: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

  
`angle`  Experimental 
   The attribute value is parsed as a CSS [`<angle>`](angle) dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.

  
`deg`, `grad`, `rad`  Experimental 
   The attribute value is parsed as a CSS [`<number>`](number), that is without the unit (e.g. `12.5`), and interpreted as an [`<angle>`](angle) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.

  
`time`  Experimental 
   The attribute value is parsed as a CSS [`<time>`](time) dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.

  
`s`, `ms`  Experimental 
   The attribute value is parsed as a CSS [`<number>`](number), that is without the unit (e.g. `12.5`), and interpreted as an [`<time>`](time) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.

  
`frequency`  Experimental 
  The attribute value is parsed as a CSS [`<frequency>`](frequency) dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.

 Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.

  
`Hz`, `kHz`  Experimental 
   The attribute value is parsed as a CSS [`<number>`](number), that is without the unit (e.g. `12.5`), and interpreted as a [`<frequency>`](frequency) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. 

 Default value: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.

  
`%`  Experimental 
   The attribute value is parsed as a CSS [`<number>`](number), that is without the unit (e.g. `12.5`), and interpreted as a [`<percentage>`](percentage). If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped. 

 Default value: `0%`, or, if `0%` is not a valid value for the property, the property's minimum value.

    
`<fallback>`  Experimental 
  The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each `<type-or-unit>`.

  ### Formal syntax



```
<attr()> =   
  attr( [<q-name>](q-name) <attr-type>[?](value_definition_syntax#question_mark) , [<declaration-value>](declaration-value)[?](value_definition_syntax#question_mark) )    
  
<attr-type> =   
  string            [|](value_definition_syntax#single_bar)  
  url               [|](value_definition_syntax#single_bar)  
  ident             [|](value_definition_syntax#single_bar)  
  color             [|](value_definition_syntax#single_bar)  
  number            [|](value_definition_syntax#single_bar)  
  percentage        [|](value_definition_syntax#single_bar)  
  length            [|](value_definition_syntax#single_bar)  
  angle             [|](value_definition_syntax#single_bar)  
  time              [|](value_definition_syntax#single_bar)  
  frequency         [|](value_definition_syntax#single_bar)  
  flex              [|](value_definition_syntax#single_bar)  
  [<dimension-unit>](dimension-unit)    
  

```
Examples
--------


### content property



#### HTML

 
```
<p data-foo="hello">world</p>

```
 #### CSS

 
```
[data-foo]::before {
  content: attr(data-foo) " ";
}

```
 #### Result



### color value



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 #### HTML

 
```
<div class="background" data-background="lime">
  background expected to be red if your browser does not support advanced usage
  of attr()
</div>

```
 #### CSS

 
```
.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 5 # attr-notation](https://w3c.github.io/csswg-drafts/css-values-5/#attr-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `attr` | 2 | 12 | 1 | 8 | 9 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `fallback` | No | No | NoSee [bug 1448248](https://bugzil.la/1448248). | No | No | NoSee [bug 204275](https://webkit.org/b/204275). | No | No | NoSee [bug 1448248](https://bugzil.la/1448248). | No | NoSee [bug 204275](https://webkit.org/b/204275). | No |
| `type-or-unit` | No | No | NoSee [bug 435426](https://bugzil.la/435426). | No | No | NoSee [bug 204275](https://webkit.org/b/204275). | No | No | NoSee [bug 435426](https://bugzil.la/435426). | No | NoSee [bug 204275](https://webkit.org/b/204275). | No |


See also
--------


* [Attribute selectors](attribute_selectors)
* [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
* [SVG `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/attr>

backdrop-filter
===============


The `backdrop-filter` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything *behind* the element, to see the effect you must make the element or its background at least partially transparent.


Try it
------


Syntax
------



```
/\* Keyword value \*/
backdrop-filter: none;

/\* URL to SVG filter \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* <filter-function> values \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* Multiple filters \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/\* Global values \*/
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

```
### Values


 `none`  No filter is applied to the backdrop.

  `<filter-function-list>`  A space-separated list of [`<filter-function>`](filter-function)s or an [SVG filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) that will be applied to the backdrop. CSS `<filter-function>`s include [`blur()`](filter-function/blur), [`brightness()`](filter-function/brightness), [`contrast()`](filter-function/contrast), [`drop-shadow()`](filter-function/drop-shadow), [`grayscale()`](filter-function/grayscale), [`hue-rotate()`](filter-function/hue-rotate), [`invert()`](filter-function/invert), [`opacity()`](filter-function/opacity), [`saturate()`](filter-function/saturate), and [`sepia()`](filter-function/sepia).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | a [filter function list](filter#interpolation) |

Formal syntax
-------------



```
backdrop-filter =   
  none                 [|](value_definition_syntax#single_bar)  
  <filter-value-list>    
  
<filter-value-list> =   
  [[](value_definition_syntax#brackets) <filter-function> [|](value_definition_syntax#single_bar) <url> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)    
  
<filter-function> =   
  <blur()>         [|](value_definition_syntax#single_bar)  
  <brightness()>   [|](value_definition_syntax#single_bar)  
  <contrast()>     [|](value_definition_syntax#single_bar)  
  <drop-shadow()>  [|](value_definition_syntax#single_bar)  
  <grayscale()>    [|](value_definition_syntax#single_bar)  
  <hue-rotate()>   [|](value_definition_syntax#single_bar)  
  <invert()>       [|](value_definition_syntax#single_bar)  
  <opacity()>      [|](value_definition_syntax#single_bar)  
  <sepia()>        [|](value_definition_syntax#single_bar)  
  <saturate()>       
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<blur()> =   
  blur( [<length>](length)[?](value_definition_syntax#question_mark) )    
  
<brightness()> =   
  brightness( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<contrast()> =   
  contrast( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<drop-shadow()> =   
  drop-shadow( [[](value_definition_syntax#brackets) [<color>](color_value)[?](value_definition_syntax#question_mark) [&&](value_definition_syntax#double_ampersand) [<length>](length)[{2,3}](value_definition_syntax#curly_braces) []](value_definition_syntax#brackets) )    
  
<grayscale()> =   
  grayscale( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<hue-rotate()> =   
  hue-rotate( [[](value_definition_syntax#brackets) [<angle>](angle) [|](value_definition_syntax#single_bar) [<zero>](zero) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<invert()> =   
  invert( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<opacity()> =   
  opacity( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<sepia()> =   
  sepia( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<saturate()> =   
  saturate( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  

```
Examples
--------


### CSS




```
.box {
  background-color: rgb(255 255 255 / 0.3);
  backdrop-filter: blur(10px);
}

body {
  background-image: url("anemones.jpg");
}

```

### HTML



```
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 2 # BackdropFilterProperty](https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `backdrop-filter` | 76 | 17 | 103 | No | 63 | 9 | 76 | 76 | 103 | 54 | 9 | 12.0 |


See also
--------


* [`filter`](filter)
* [`<filter-function>`](filter-function)
* [`background-blend-mode`](background-blend-mode), [`mix-blend-mode`](mix-blend-mode)
* [CSS filter effects](filter_effects)
* [CSS compositing and blending](compositing_and_blending)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter>

backface-visibility
===================


The `backface-visibility` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether the back face of an element is visible when turned towards the user.


Try it
------



 An element's back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space. (This property has no effect on 2D transforms, which have no perspective.)


Syntax
------




```
/\* Keyword values \*/
backface-visibility: visible;
backface-visibility: hidden;

/\* Global values \*/
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: revert;
backface-visibility: revert-layer;
backface-visibility: unset;

```
 The `backface-visibility` property is specified as one of the keywords listed below.


### Values


 `visible`  The back face is visible when turned towards the user.

  `hidden`  The back face is hidden, effectively making the element invisible when turned away from the user.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `visible` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
backface-visibility =   
  visible  [|](value_definition_syntax#single_bar)  
  hidden     
  

```
Examples
--------


### Cube with transparent and opaque faces



This example shows a cube with transparent faces, and one with opaque faces.

 #### HTML

 
```
<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        Since all faces are partially transparent, the back faces (2, 4, 5) are
        visible through the front faces (1, 3, 6).
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>The three back faces (2, 4, 5) are hidden.</p>
    </td>
  </tr>
</table>

```
 #### CSS

 
```
/\* Classes that will show or hide the
 three back faces of the "cube" \*/
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # backface-visibility-property](https://w3c.github.io/csswg-drafts/css-transforms-2/#backface-visibility-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `backface-visibility` | 3612 | 1212 | 491610 | 10 | 2315 | 15.45.1 | 373 | 3618 | 491610 | 2414 | 15.45 | 3.01.0 |


See also
--------


* [Using CSS transforms](css_transforms/using_css_transforms)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility>

background
==========


The `background` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the `background` shorthand property value declaration are set to their default values.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`background-attachment`](background-attachment)
* [`background-clip`](background-clip)
* [`background-color`](background-color)
* [`background-image`](background-image)
* [`background-origin`](background-origin)
* [`background-position`](background-position)
* [`background-repeat`](background-repeat)
* [`background-size`](background-size)


Syntax
------




```
/\* Using a <background-color> \*/
background: green;

/\* Using a <bg-image> and <repeat-style> \*/
background: url("test.jpg") repeat-y;

/\* Using a <box> and <background-color> \*/
background: border-box red;

/\* A single image, centered and scaled \*/
background: no-repeat center/80% url("../img/image.png");

/\* Global values \*/
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;

```
 The `background` property is specified as one or more background layers, separated by commas.

 The syntax of each layer is as follows:

 * Each layer may include zero or one occurrences of any of the following values:
	+ `<attachment>`
	+ `<bg-image>`
	+ `<position>`
	+ `<bg-size>`
	+ `<repeat-style>`
* The `<bg-size>` value may only be included immediately after `<position>`, separated with the '/' character, like this: "`center/80%`".
* The `<box>` value may be included zero, one, or two times. If included once, it sets both [`background-origin`](background-origin) and [`background-clip`](background-clip). If it is included twice, the first occurrence sets [`background-origin`](background-origin), and the second sets [`background-clip`](background-clip).
* The `<background-color>` value may only be included in the last layer specified.


### Values



 `<attachment>`  See [`background-attachment`](background-attachment). Default: `scroll`.

  `<box>`  See [`background-clip`](background-clip) and [`background-origin`](background-origin). Default: `border-box` and `padding-box` respectively.

  `<background-color>`  See [`background-color`](background-color). Default: `transparent`.

  `<bg-image>`  See [`background-image`](background-image). Default: `none`.

  `<position>`  See [`background-position`](background-position). Default: 0% 0%.

  `<repeat-style>`  See [`background-repeat`](background-repeat). Default: `repeat`.

  `<bg-size>`  See [`background-size`](background-size). Default: `auto`.

   The following three lines of CSS are equivalent:

 
```
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

```

Accessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`background-image`](background-image): `none`
* [`background-position`](background-position): `0% 0%`
* [`background-size`](background-size): `auto auto`
* [`background-repeat`](background-repeat): `repeat`
* [`background-origin`](background-origin): `padding-box`
* [`background-clip`](background-clip): `border-box`
* [`background-attachment`](background-attachment): `scroll`
* [`background-color`](background-color): `transparent`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`background-position`](background-position): refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
* [`background-size`](background-size): relative to the background positioning area
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`background-image`](background-image): as specified, but with [`url()`](url) values made absolute
* [`background-position`](background-position): as each of the properties of the shorthand:
	+ [`background-position-x`](background-position-x): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
	+ [`background-position-y`](background-position-y): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* [`background-size`](background-size): as specified, but with relative lengths converted into absolute lengths
* [`background-repeat`](background-repeat): a list, each item consisting of two keywords, one per dimension
* [`background-origin`](background-origin): as specified
* [`background-clip`](background-clip): as specified
* [`background-attachment`](background-attachment): as specified
* [`background-color`](background-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`background-color`](background-color): a [color](color_value#interpolation)
* [`background-image`](background-image): discrete
* [`background-clip`](background-clip): discrete
* [`background-position`](background-position): repeatable list of simple list of length, percentage, or calc
* [`background-size`](background-size): repeatable list of simple list of length, percentage, or calc
* [`background-repeat`](background-repeat): discrete
* [`background-attachment`](background-attachment): discrete
 |

Formal syntax
-------------



```
background =   
  [[](value_definition_syntax#brackets) <bg-layer>[#](value_definition_syntax#hash_mark) , []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) <final-bg-layer>    
  
<bg-layer> =   
  <bg-image>                      [||](value_definition_syntax#double_bar)  
  <bg-position> [[](value_definition_syntax#brackets) / <bg-size> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [||](value_definition_syntax#double_bar)  
  <repeat-style>                  [||](value_definition_syntax#double_bar)  
  <attachment>                    [||](value_definition_syntax#double_bar)  
  <box>                           [||](value_definition_syntax#double_bar)  
  <box>                             
  
<final-bg-layer> =   
  <'background-color'>            [||](value_definition_syntax#double_bar)  
  <bg-image>                      [||](value_definition_syntax#double_bar)  
  <bg-position> [[](value_definition_syntax#brackets) / <bg-size> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [||](value_definition_syntax#double_bar)  
  <repeat-style>                  [||](value_definition_syntax#double_bar)  
  <attachment>                    [||](value_definition_syntax#double_bar)  
  <box>                           [||](value_definition_syntax#double_bar)  
  <box>                             
  
<bg-image> =   
  <image>  [|](value_definition_syntax#single_bar)  
  none       
  
<bg-position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) top [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage>[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage>[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)    
  
<bg-size> =   
  [[](value_definition_syntax#brackets) [<length-percentage [0,∞]>](length-percentage) [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)  [|](value_definition_syntax#single_bar)  
  cover                                      [|](value_definition_syntax#single_bar)  
  contain                                      
  
<repeat-style> =   
  repeat-x                                     [|](value_definition_syntax#single_bar)  
  repeat-y                                     [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) repeat [|](value_definition_syntax#single_bar) space [|](value_definition_syntax#single_bar) round [|](value_definition_syntax#single_bar) no-repeat []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  
<attachment> =   
  scroll  [|](value_definition_syntax#single_bar)  
  fixed   [|](value_definition_syntax#single_bar)  
  local     
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Setting backgrounds with color keywords and images



#### HTML

 
```
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>

```
 #### CSS

 
```
.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-background](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `SVG_image_as_background` | 1 | 12 | 4 | 9 | 9.5 | 3.1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `background` | 1 | 12 | 1 | 4 | 3.5 | 1 | 2 | 18 | 4 | 10.1 | 1 | 1.0 |
| `background-clip` | 21 | 12 | 22 | 9 | 15 | 5.1 | 3 | 25 | 22 | 14 | 4 | 1.5 |
| `background-origin` | 21 | 12 | 22 | 9 | 15 | 5.1 | 3 | 25 | 22 | 14 | 4 | 1.5 |
| `background-size` | 21 | 12 | 9 | 9 | 21 | 5.1 | 3 | 25 | 18 | 14 | 4 | 1.5 |
| `multiple_backgrounds` | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 | 2 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`box-decoration-break`](box-decoration-break)
* [Using gradients](css_images/using_css_gradients)
* [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background>

background-blend-mode
=====================


The `background-blend-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how an element's background images should blend with each other and with the element's background color.


Try it
------



 Blending modes should be defined in the same order as the [`background-image`](background-image) property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.


Syntax
------



```
/\* One value \*/
background-blend-mode: normal;

/\* Two values, one per background \*/
background-blend-mode: darken, luminosity;

/\* Global values \*/
background-blend-mode: inherit;
background-blend-mode: initial;
background-blend-mode: revert;
background-blend-mode: revert-layer;
background-blend-mode: unset;

```
### Values


 [`<blend-mode>`](blend-mode)  The blending mode to be applied. There can be several values, separated by commas.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
background-blend-mode =   
  [<mix-blend-mode>](mix-blend-mode)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Basic example



```
.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}

```
### Try out different blend modes




Specifications
--------------




| Specification |
| --- |
| [Compositing and Blending Level 2 # background-blend-mode](https://drafts.fxtf.org/compositing/#background-blend-mode) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-blend-mode` | 35 | 79 | 30 | No | 22 | 8 | 37 | 35 | 30 | 22 | 8 | 3.0 |


See also
--------


* [`<blend-mode>`](blend-mode)
* [`mix-blend-mode`](mix-blend-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode>

background-clip
===============


The `background-clip` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an element's background extends underneath its border box, padding box, or content box.


Try it
------



 If the element has no [`background-image`](background-image) or [`background-color`](background-color), this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to [`border-style`](border-style) or [`border-image`](border-image)); otherwise, the border masks the difference.

  **Note:** Because the [root element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) has a different background painting area, the `background-clip` property has no effect when specified on it. See "[The backgrounds of special elements.](https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds)"

   **Note:** For documents whose [root element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) is an HTML element: if the computed value of [`background-image`](background-image) on the root element is `none` and its [`background-color`](background-color) is `transparent`, user agents must instead propagate the computed values of the `background` properties from that element's first HTML [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) child element. The used values of that `<body>` element's `background` properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the `<body>` element rather than the HTML element.

 
Syntax
------



```
/\* Keyword values \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/\* Global values \*/
background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: revert-layer;
background-clip: unset;

```
### Values


 `border-box`  The background extends to the outside edge of the border (but underneath the border in z-ordering).

  `padding-box`  The background extends to the outside edge of the padding. No background is drawn beneath the border.

  `content-box`  The background is painted within (clipped to) the content box.

  `text`  The background is painted within (clipped to) the foreground text.

  Accessibility concerns
----------------------



When using `background-clip: text` check that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

 If the background image does not load, this could also lead to the text becoming unreadable. Add a fallback [`background-color`](background-color) to prevent this from happening, and test without the image.

 Consider using feature queries with [`@supports`](@supports) to test for support of `background-clip: text` and provide an accessible alternative where it is not supported.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `border-box` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
background-clip =   
  <box>[#](value_definition_syntax#hash_mark)    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  

```
Examples
--------


### HTML



```
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>

```
### CSS




```
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # background-clip](https://w3c.github.io/csswg-drafts/css-backgrounds/#background-clip) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-clip` | 11Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 1212Since Edge 79, accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 4941–4Used the `-moz-background-clip: padding | border` syntax. | 9In IE 7 and IE 8 of Internet Explorer, this property always behaved like `background-clip: padding` when `overflow` was `hidden`, `auto`, or `scroll`. | 15Opera accepts alternate synonyms to its values: `padding`, `border`, and `content`.10.5 | 143Safari accepts alternate synonyms to its values: `padding`, `border`, and `content`. | ≤37WebView accepts alternate synonyms to its values: `padding`, `border`, and `content`.4 | 1818Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 4914 | 14Opera accepts alternate synonyms to its values: `padding`, `border`, and `content`.11 | 141Safari accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 1.01.0Samsung Internet accepts alternate synonyms to its values: `padding`, `border`, and `content`. |
| `content-box` | 1 | 12 | 4 | 9In IE 7 and IE 9 of Internet Explorer, it always behaved like `background-clip: padding` if `overflow: hidden | auto | scroll` | 10.5 | 3 | 4 | 18 | 14 | 11 | 1 | 1.0 |
| `text` | 3The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 1512Before Edge 15, this value was supported with the prefixed version of the property only. | 49 | No | 15The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 144The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 4.4The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 18The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 49 | 14The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 143.2The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). | 1.0The `text` value is only supported by `-webkit-background-clip` (and not by `background-clip`). |


See also
--------


* The [`clip-path`](clip-path) property creates a clipping region that defines what part of an *entire element* should be displayed.
* Background properties: [`background`](background), [`background-color`](background-color), [`background-image`](background-image), [`background-origin`](background-origin)
* [Introduction to the CSS box model](css_box_model/introduction_to_the_css_box_model)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip>

background-color
================


The `background-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the background color of an element.


Try it
------


Syntax
------




```
/\* Keyword values \*/
background-color: red;
background-color: indigo;

/\* Hexadecimal value \*/
background-color: #bbff00; /\* Fully opaque \*/
background-color: #bf0; /\* Fully opaque shorthand \*/
background-color: #11ffee00; /\* Fully transparent \*/
background-color: #1fe0; /\* Fully transparent shorthand \*/
background-color: #11ffeeff; /\* Fully opaque \*/
background-color: #1fef; /\* Fully opaque shorthand \*/

/\* RGB value \*/
background-color: rgb(255 255 128); /\* Fully opaque \*/
background-color: rgb(117 190 218 / 0.5); /\* 50% transparent \*/

/\* HSL value \*/
background-color: hsl(50 33% 25%); /\* Fully opaque \*/
background-color: hsl(50 33% 25% / 0.75); /\* 75% opaque, i.e. 25% transparent \*/

/\* Special keyword values \*/
background-color: currentcolor;
background-color: transparent;

/\* Global values \*/
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;

```
 The `background-color` property is specified as a single `<color>` value.


### Values


 [`<color>`](color_value)  The uniform color of the background. It is rendered behind any [`background-image`](background-image) that is specified, although the color will still be visible through any transparency in the image.

  Accessibility concerns
----------------------



It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

 Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](font-weight) or larger, or 24px or larger.

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `transparent` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
background-color =   
  [<color>](color_value)    
  

```
Examples
--------


### HTML



```
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>

```
### CSS



```
.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # background-color](https://w3c.github.io/csswg-drafts/css-backgrounds/#background-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-color` | 1 | 12 | 1 | 4In Internet Explorer 8 and 9, there is a bug where a computed `background-color` of `transparent` causes `click` events to not get fired on overlaid elements. | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)
* The [`<color>`](color_value) data type
* Other color-related properties: [`color`](color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-color>

background-image
================


The `background-image` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets one or more background images on an element.


Try it
------



 The background 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](border) of the element are then drawn on top of them, and the [`background-color`](background-color) is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the [`background-clip`](background-clip) and [`background-origin`](background-origin) CSS properties.

 If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a `none` value.

  **Note:** Even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a [`background-color`](background-color). If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.

 
Syntax
------



Each background image is specified either as the keyword `none` or as an [`<image>`](image) value.

 To specify multiple background images, supply multiple values, separated by a comma:

 
```
background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("catfront.png");

/\* Global values \*/
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

```

### Values


 `none`  Is a keyword denoting the absence of images.

  `<image>`  Is an [`<image>`](image) denoting the image to display. There can be several of them, separated by commas, as [multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds) are supported.

  Accessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with [`url()`](url) values made absolute |
| Animation type | discrete |

Formal syntax
-------------



```
background-image =   
  <bg-image>[#](value_definition_syntax#hash_mark)    
  
<bg-image> =   
  <image>  [|](value_definition_syntax#single_bar)  
  none       
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Layering background images



Note that the star image is partially transparent and is layered over the cat image.

 #### HTML

 
```
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>

```
 #### CSS

 
```
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # background-image](https://w3c.github.io/csswg-drafts/css-backgrounds/#background-image) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-image` | 1 | 12 | 1If the `browser.display.use_document_colors` user preference in `about:config` is set to `false`, background images will not be displayed. | 4 | 3.5 | 1 | ≤37 | 18 | 4If the `browser.display.use_document_colors` user preference in `about:config` is set to `false`, background images will not be displayed. | 14 | 1 | 1.0 |
| `element` | No | No | 4 | No | No | No | No | No | 4 | No | No | No |
| `gradients` | 1Some versions support only experimental gradients prefixed with `-webkit`. | 12 | 3.6Some versions support only experimental gradients prefixed with `-moz`. | 10 | 11Some versions support only experimental gradients prefixed with `-o`. | 4Some versions support only experimental gradients prefixed with `-webkit`. | ≤37Some versions support only experimental gradients prefixed with `-webkit`. | 18Some versions support only experimental gradients prefixed with `-webkit`. | 4Some versions support only experimental gradients prefixed with `-moz`. | 14Some versions support only experimental gradients prefixed with `-webkit`. | 3.2Some versions support only experimental gradients prefixed with `-webkit`. | 1.0Some versions support only experimental gradients prefixed with `-webkit`. |
| `image-rect` | No | No | 4 | No | No | No | No | No | 4 | No | No | No |
| `image-set` | 21 | 79 | 9088Before Firefox 89, the `type()` function is not supported as an argument to `image-set()`. | No | 15 | 6Support for `url` images only and `x` is the only supported resolution unit. See [bug 160934](https://webkit.org/b/160934).preview | 4.4 | 25 | 9088Before Firefox 89, the `type()` function is not supported as an argument to `image-set()`. | 14 | 6Support for `url` images only and `x` is the only supported resolution unit. See [bug 160934](https://webkit.org/b/160934). | 1.5 |
| `multiple_backgrounds` | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `svg_images` | 8 | 12 | 4 | 9 | 9.5 | 5Support of SVG in CSS background is incomplete. | ≤37 | 18 | 4 | 14 | 5Support of SVG in CSS background is incomplete. | 1.0 |


See also
--------


* [Implementing image sprites in CSS](css_images/implementing_image_sprites_in_css)
* [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)
* Image-related data types: [`<image>`](image), [`<gradient>`](gradient)
* Image-related functions:
	+ [`cross-fade()`](cross-fade)
	+ [`element()`](element())
	+ [`image()`](image/image)
	+ [`image-set()`](image/image-set)
	+ [`linear-gradient()`](gradient/linear-gradient)
	+ [`radial-gradient()`](gradient/radial-gradient)
	+ [`conic-gradient()`](gradient/conic-gradient)
	+ [`repeating-linear-gradient()`](gradient/repeating-linear-gradient)
	+ [`repeating-radial-gradient()`](gradient/repeating-radial-gradient)
	+ [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)
	+ [`paint()`](image/paint)
	+ [`url()`](url)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-image>

background-origin
=================


The `background-origin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the background's origin: from the border start, inside the border, or inside the padding.


Try it
------



 Note that `background-origin` is ignored when [`background-attachment`](background-attachment) is `fixed`.


Syntax
------




```
/\* Keyword values \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/\* Global values \*/
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

```
 The `background-origin` property is specified as one of the keyword values listed below.


### Values


 `border-box`  The background is positioned relative to the border box.

  `padding-box`  The background is positioned relative to the padding box.

  `content-box`  The background is positioned relative to the content box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `padding-box` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
background-origin =   
  <box>[#](value_definition_syntax#hash_mark)    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  

```
Examples
--------


### Setting background origins




```
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}

```
 
```
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}

```
 
```
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

```

### Using two gradients



In this example the box has a thick dotted border. The first gradient uses the `padding-box` as the `background-origin` and therefore the background sits inside the border. The second uses the `content-box` and so only displays behind the content.

 
```
.box {
  margin: 10px 0;
  color: #fff;
  background: linear-gradient(
      90deg,
      rgba(131, 58, 180, 1) 0%,
      rgba(253, 29, 29, 0.6) 60%,
      rgba(252, 176, 69, 1) 100%
    ), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}

```
 
```
<div class="box">Hello!</div>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-background-origin](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-origin) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-origin` | 11Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 1212Since Edge 79, accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 4941–4Used the `-moz-background-clip: padding | border` syntax. | 9In IE 7 and before, Internet explorer was behaving as if `background-origin: border-box` was set. In Internet Explorer 8, as if `background-origin: padding-box`, the regular default value, was set. | 15Opera accepts alternate synonyms to its values: `padding`, `border`, and `content`.10.5 | 33Webkit accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 44WebView accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 1818Chrome accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 4914 | 14Opera accepts alternate synonyms to its values: `padding`, `border`, and `content`.11 | 11Webkit accepts alternate synonyms to its values: `padding`, `border`, and `content`. | 1.01.0Samsung Internet accepts alternate synonyms to its values: `padding`, `border`, and `content`. |
| `content-box` | 1 | 12 | 4 | 9In IE 7 and IE 9 of Internet Explorer, it always behaved like `background-clip: padding` if `overflow: hidden | auto | scroll`. | 10.5 | 3 | 4 | 18 | 14 | 11 | 1 | 1.0 |


See also
--------


* [`background-clip`](background-clip)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin>

background-position-x
=====================


The `background-position-x` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the initial horizontal position for each background image. The position is relative to the position layer set by [`background-origin`](background-origin).


Try it
------



 The value of this property is overridden by any declaration of the [`background`](background) or [`background-position`](background-position) shorthand properties applied to the element after it.


Syntax
------




```
/\* Keyword values \*/
background-position-x: left;
background-position-x: center;
background-position-x: right;

/\* <percentage> values \*/
background-position-x: 25%;

/\* <length> values \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* Side-relative values \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* Multiple values \*/
background-position-x: 0px, center;

/\* Global values \*/
background-position-x: inherit;
background-position-x: initial;
background-position-x: revert;
background-position-x: revert-layer;
background-position-x: unset;

```
 The `background-position-x` property is specified as one or more values, separated by commas.


### Values


 `left`  Aligns the left edge of the background image with the left edge of the background position layer.

  `center`  Aligns the center of the background image with the center of the background position layer.

  `right`  Aligns the right edge of the background image with the right edge of the background position layer.

  [`<length>`](length)  The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).

  [`<percentage>`](percentage)  The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the *right* edge of the background image is aligned with the *right* edge of the container, thus a value of 50% horizontally centers the background image.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0%` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to width of background positioning area minus width of background image |
| [Computed value](computed_value) | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | discrete |

Formal syntax
-------------



```
background-position-x =   
  [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) x-start [|](value_definition_syntax#single_bar) x-end []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) <length-percentage>[?](value_definition_syntax#question_mark) ]! []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Basic example



The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

 #### HTML

 
```
<div></div>

```
 #### CSS

 
```
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom 10px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 4 # background-position-longhands](https://w3c.github.io/csswg-drafts/css-backgrounds-4/#background-position-longhands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-position-x` | 1 | 12 | 49 | 6 | 15 | 1 | ≤37 | 18 | 49 | 18 | 1 | 1.0 |
| `two_value_syntax` | No | 12–79 | 49 | 9 | No | 15.4 | No | No | 49 | No | 15.4 | No |


See also
--------


* [`background-position`](background-position)
* [`background-position-y`](background-position-y)
* `background-position-inline`
* `background-position-block`
* [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x>

<basic-shape>
=============


The `<basic-shape>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a shape used in the [`clip-path`](clip-path), [`shape-outside`](shape-outside), and [`offset-path`](offset-path) properties.


Try it
------


Syntax
------



The `<basic-shape>` data type is defined with one of the basic shape functions listed below.

 When creating a shape, the reference box is defined by each property that uses `<basic-shape>` values. The coordinate system for the shape has its origin at 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.

 The default reference box is the `margin-box`, as demonstrated in the below image which shows a circle created using `shape-outside: circle(50%)`. The shape is being defined with reference to the margin box.

  ![An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.] 


### Shape functions



The following shapes are supported. All `<basic-shape>` values use functional notation and are defined here using the [value definition syntax](value_definition_syntax).

  `[`inset()`](basic-shape/inset)`  Defines an inset rectangle.

 
```
inset( <shape-arg>{1,4} [round <border-radius>]? )

```
 When all of the first four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.

 The optional [`<border-radius>`](border-radius) argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

 A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area.

  `[`circle()`](basic-shape/circle)`  Defines a circle using a radius and a position.

 
```
circle( [<shape-radius>]? [at <position>]? )

```
 The `<shape-radius>` argument represents *r*, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`.

 The [`<position>`](position_value) argument defines the center of the circle. This defaults to center if omitted.

  `[`ellipse()`](basic-shape/ellipse)`  Defines an ellipse using two radii and a position.

 
```
ellipse( [<shape-radius>{2}]? [at <position>]? )

```
 The `<shape-radius>` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.

 The position argument defines the center of the ellipse. This defaults to center if omitted.

  `[`polygon()`](basic-shape/polygon)`  Defines a polygon using an SVG `[fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)` and a set of vertices.

 
```
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

```
 `<fill-rule>` represents the `[fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)` used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`.

 Each pair argument in the list represents *xi* and *yi* - the x and y axis coordinates of the vertex of the polygon at position i.

  `[`path()`](path)`  Defines a shape using an SVG `[fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)` and an SVG [path definition](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).

 
```
path( [<fill-rule>,]? <string>)

```
 The optional `<fill-rule>` represents the `[fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)` used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`.

 The required <string> is an [SVG Path](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes

   The arguments not defined above are defined as follows:

 
```
<shape-arg> = <length> | <percentage>
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

```
 Defines a radius for a circle or ellipse. If omitted it defaults to `closest-side`.

 `closest-side` uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

 `farthest-side` uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.


Description
-----------


### Computed values of basic shapes



The values in a `<basic-shape>` function are computed as specified, with these exceptions:

 * Omitted values are included and compute to their defaults.
* A [`<position>`](position_value) value in `circle()` or `ellipse()` is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
* A [`<border-radius>`](border-radius) value in `inset()` is computed as an expanded list of all eight [`<length>`](length) or percentage values.


### Interpolation of basic shapes



When animating between one `<basic-shape>` and another, the rules below are applied. The values in the shape functions [interpolate](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) as a simple list. The list values interpolate as [`<length>`](length), [`<percentage>`](percentage), or [`calc()`](calc) where possible. If list values are not one of those types but are identical, those values do interpolate.

 * Both shapes must use the same reference box.
* If both shapes are the same type, that type is `ellipse()` or `circle()`, and none of the radii use the `closest-side` or `farthest-side` keywords, interpolate between each value in the shape functions.
* If both shapes are of type `inset()`, interpolate between each value in the shape functions.
* If both shapes are of type `polygon()`, both polygons have the same number of vertices, and use the same `<fill-rule>`, interpolate between each value in the shape functions.
* If both shapes are of type `path()`, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.
* In all other cases no interpolation occurs.


Examples
--------


### Animated polygon



In this example, we use the <@keyframes> at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.

 #### HTML

 
```
<div></div>

```
 #### CSS

 
```
div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # basic-shape-functions](https://w3c.github.io/csswg-drafts/css-shapes/#basic-shape-functions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `basic-shape` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |
| `animation` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |
| `circle` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |
| `ellipse` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |
| `inset` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |
| `path` | 46Only supported on the `offset-path` property. | 79Only supported on the `offset-path` property. | 97Only supported on the `d` SVG presentation attribute and the `clip-path` and `offset-path` CSS properties. Not supported on the `shape-outside` CSS property.71Only supported on the `clip-path` and `offset-path` properties.63Only supported on the `offset-path` property. | No | 33Only supported on the `offset-path` property. | No | 46Only supported on the `offset-path` property. | 46Only supported on the `offset-path` property. | 97Only supported on the `d` SVG presentation attribute and the `clip-path` and `offset-path` CSS properties. Not supported on the `shape-outside` CSS property.79Only supported on the `clip-path` and `offset-path` properties.63Only supported on the `offset-path` property. | 33Only supported on the `offset-path` property. | No | 5.0Only supported on the `offset-path` property. |
| `polygon` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |


See also
--------


* Properties that use this data type: [`clip-path`](clip-path), [`shape-outside`](shape-outside)
* [Edit Shape Paths in CSS — Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)
* [Overview of CSS Shapes](css_shapes/overview_of_css_shapes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape>

background-position-y
=====================


The `background-position-y` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the initial vertical position for each background image. The position is relative to the position layer set by [`background-origin`](background-origin).


Try it
------



 The value of this property is overridden by any declaration of the [`background`](background) or [`background-position`](background-position) shorthand properties applied to the element after it.


Syntax
------




```
/\* Keyword values \*/
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/\* <percentage> values \*/
background-position-y: 25%;

/\* <length> values \*/
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/\* Side-relative values \*/
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/\* Multiple values \*/
background-position-y: 0px, center;

/\* Global values \*/
background-position-y: inherit;
background-position-y: initial;
background-position-y: revert;
background-position-y: revert-layer;
background-position-y: unset;

```
 The `background-position-y` property is specified as one or more values, separated by commas.


### Values


 `top`  Aligns the top edge of the background image with the top edge of the background position layer.

  `center`  Aligns the vertical center of the background image with the vertical center of the background position layer.

  `bottom`  Aligns the bottom edge of the background image with the bottom edge of the background position layer.

  [`<length>`](length)  The offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge. (Some browsers allow assigning the bottom edge for offset).

  [`<percentage>`](percentage)  The offset of the given background image's vertical position relative to the container. A value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the *bottom* edge of the background image is aligned with the *bottom* edge of the container, thus a value of 50% vertically centers the background image.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0%` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to height of background positioning area minus height of background image |
| [Computed value](computed_value) | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| Animation type | discrete |

Formal syntax
-------------



```
background-position-y =   
  [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) y-start [|](value_definition_syntax#single_bar) y-end []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) <length-percentage>[?](value_definition_syntax#question_mark) ]! []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Basic example



The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

 #### HTML

 
```
<div></div>

```
 #### CSS

 
```
div {
  width: 300px;
  height: 300px;
  background-color: skyblue;
  background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom 10px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 4 # background-position-longhands](https://w3c.github.io/csswg-drafts/css-backgrounds-4/#background-position-longhands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `2_value_syntax` | No | 12–79 | 49 | 9 | No | 15.4 | No | No | 49 | No | 15.4 | No |
| `background-position-y` | 1 | 12 | 49 | 6 | 15 | 1 | ≤37 | 18 | 49 | 14 | 1 | 1.0 |


See also
--------


* [`background-position`](background-position)
* [`background-position-x`](background-position-x)
* `background-position-inline`
* `background-position-block`
* [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y>

background-size
===============


 The `background-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space. 


Try it
------



 Spaces not covered by a background image are filled with the [`background-color`](background-color) property, and the background color will be visible behind background images that have transparency/translucency.


Syntax
------




```
/\* Keyword values \*/
background-size: cover;
background-size: contain;

/\* One-value syntax \*/
/\* the width of the image (height becomes 'auto') \*/
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/\* Two-value syntax \*/
/\* first value: width of the image, second value: height \*/
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/\* Multiple backgrounds \*/
background-size: auto, auto; /\* Not to be confused with `auto auto` \*/
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/\* Global values \*/
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

```
 The `background-size` property is specified in one of the following ways:

 * Using the keyword values `contain` or `cover`.
* Using a width value only, in which case the height defaults to `auto`.
* Using both a width and a height value, in which case the first sets the width and the second sets the height. Each value can be a [`<length>`](length), a [`<percentage>`](percentage), or `auto`.

 To specify the size of multiple background images, separate the value for each one with a comma.


### Values


 `contain`   Scales the image as large as possible within its container without cropping or stretching the image. If the container is larger than the image, this will result in image tiling, unless the [`background-repeat`](background-repeat) property is set to `no-repeat`. 

  `cover`   Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely *cover* the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally. 

  `auto`  Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

  [`<length>`](length)  Stretches the image in the corresponding dimension to the specified length. Negative values are not allowed.

  [`<percentage>`](percentage)   Stretches the image in the corresponding dimension to the specified percentage of the *background positioning area*. The background positioning area is determined by the value of [`background-origin`](background-origin) (by default, the padding box). However, if the background's [`background-attachment`](background-attachment) value is `fixed`, the positioning area is instead the entire [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport). Negative values are not allowed. 

  ### Intrinsic dimensions and proportions



 The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows: 

 * A bitmap image (such as JPG) always has intrinsic dimensions and proportions.
* A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.
* CSS [`<gradient>`](gradient)s have no intrinsic dimensions or intrinsic proportions.
* Background images created with the [`element()`](element()) function use the intrinsic dimensions and proportions of the generating element.

  **Note:** In Gecko, background images created using the [`element()`](element()) function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.

  Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

 * **If both components of `background-size` are specified and are not `auto`:** The background image is rendered at the specified size.
* **If the `background-size` is `contain` or `cover`:** While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
* **If the `background-size` is `auto` or `auto auto`:**
	+ If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
	+ If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
	+ If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if `contain` had been specified instead.
	+ If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.
	+ If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area. **Note:** SVG images have a [`preserveAspectRatio`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) attribute that defaults to the equivalent of `contain`; an explicit `background-size` causes `preserveAspectRatio` to be ignored.
* **If the `background-size` has one `auto` component and one non-`auto` component:**
	+ If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
	+ If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.

   **Note:** Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable. 

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto auto` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | relative to the background positioning area |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | repeatable list of simple list of length, percentage, or calc |

Formal syntax
-------------



```
background-size =   
  <bg-size>[#](value_definition_syntax#hash_mark)    
  
<bg-size> =   
  [[](value_definition_syntax#brackets) [<length-percentage [0,∞]>](length-percentage) [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)  [|](value_definition_syntax#single_bar)  
  cover                                      [|](value_definition_syntax#single_bar)  
  contain                                      
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Tiling a large image



 Let's consider a large image, a 2982x2808 Firefox logo image. We want to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed `background-size` value of 150 pixels. 

 #### HTML

 
```
<div class="tiledBackground"></div>

```
 #### CSS

 
```
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

```
 #### Result


 See [Resizing background images](css_backgrounds_and_borders/resizing_background_images) for more examples.


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-background-size](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `background-size` | 31WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords. | 1212 | 4943.6–4 | 9 | 15WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.109.5–15Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds. Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10. | 53WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords. | ≤37WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.2.2 | 1818WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords. | 494 | 14WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords.10.110.1–14Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds. Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension. This has been fixed in Opera 10. | 4.21WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords. | 1.01.0WebKit-based browsers originally implemented an older draft of CSS3 `background-size` in which an omitted second value is treated as duplicating the first value; this draft does not include the `contain` or `cover` keywords. |
| `contain_and_cover` | 3 | 12 | 3.6 | 9 | 10 | 5 | 37 | 18 | 4 | 14 | 4.2 | 1.0 |


See also
--------


* [Resizing background images](css_backgrounds_and_borders/resizing_background_images)
* [Scaling of SVG backgrounds](scaling_of_svg_backgrounds)
* [`object-fit`](object-fit)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-size>

background-position
===================


The `background-position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the initial position for each background image. The position is relative to the position layer set by [`background-origin`](background-origin).


Try it
------


Syntax
------




```
/\* Keyword values \*/
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/\* <percentage> values \*/
background-position: 25% 75%;

/\* <length> values \*/
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/\* Multiple images \*/
background-position: 0 0, center;

/\* Edge offsets values \*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/\* Global values \*/
background-position: inherit;
background-position: initial;
background-position: revert;
background-position: revert-layer;
background-position: unset;

```
 The `background-position` property is specified as one or more `<position>` values, separated by commas.


### Values


 `<position>`  A [`<position>`](position_value). A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).

 **1-value syntax:** the value may be:

 * The keyword value `center`, which centers the image.
* One of the keyword values `top`, `left`, `bottom`, `right`. This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
* A [`<length>`](length) or [`<percentage>`](percentage). This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

 **2-value syntax:** one value defines X and the other defines Y. Each value may be:

 * One of the keyword values `top`, `left`, `bottom`, `right`. If `left` or `right` are given here, then this defines X and the other given value defines Y. If `top` or `bottom` are given, then this defines Y and the other value defines X.
* A [`<length>`](length) or [`<percentage>`](percentage). If the other value is `left` or `right`, then this value defines Y, relative to the top edge. If the other value is `top` or `bottom`, then this value defines X, relative to the left edge. If both values are `<length>` or `<percentage>` values, then the first defines X and the second Y.
* Note that: If one value is `top` or `bottom`, then the other value may not be `top` or `bottom`. If one value is `left` or `right`, then the other value may not be `left` or `right`. This means, e.g., that `top top` and `left right` are not valid.
* Order: when pairing keywords, placement is not important as the browser can reorder it, the value `top left` or `left top` will yield the same result. With pairing [`<length>`](length) or [`<percentage>`](percentage) with a keyword the placement is important, the value defining X should come first followed by Y, the value `right 20px` is not the same as `20px right` the former is valid but the latter is invalid. The value `left 20%` or `20% bottom` is valid as X and Y values are clearly defined and the placement is right.
* The default value is `left top` or `0% 0%`.

 **3-value syntax:** Two values are keyword values, and the third is the offset for the preceding value:

 * The first value is one of the keyword values `top`, `left`, `bottom`, `right`, or `center`. If `left` or `right` are given here, then this defines X. If `top` or `bottom` are given, then this defines Y and the other keyword value defines X.
* The [`<length>`](length) or [`<percentage>`](percentage) value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.
* The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two [`<length>`](length) or [`<percentage>`](percentage) values is not valid.

 **4-value syntax:** The first and third values are keyword value defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:

 * The first value and third values one of the keyword values `top`, `left`, `bottom`, `right`. If `left` or `right` are given here, then this defines X. If `top` or `bottom` are given, then this defines Y and the other keyword value defines X.
* The second and fourth values are [`<length>`](length) or [`<percentage>`](percentage) values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.

  ### Regarding Percentages



The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the *right* (or *bottom*) edge of the background image is aligned with the *right* (or *bottom*) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, `background-position: 25% 75%` means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.

 Essentially what happens is the background image dimension is *subtracted* from the corresponding container dimension, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge.

 
```
(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

```
 Using the X axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is 100px wide, with background-size set to auto:

 
```
100px - 300px = -200px (container & image difference)

```
 So that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values:

 
```
-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

```
 So with these resultant values for our example, the **left edge** of the **image** is offset from the **left edge** of the **container** by:

 * + 50px (putting the left image edge in the center of the 100-pixel-wide container)
* 0px (left image edge coincident with the left container edge)
* -100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the container)
* -200px (left image edge 200px to the left of the container, in this example that means the right image edge is coincident with the right container edge)
* -250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container)

 It's worth mentioning that if your background-size is equal to the container size for a given axis, then a *percentage* position for that axis will have no effect because the "container-image difference" will be zero. You will need to offset using absolute values.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0% 0%` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`background-position-x`](background-position-x): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
* [`background-position-y`](background-position-y): A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
 |
| Animation type | repeatable list of simple list of length, percentage, or calc |

Formal syntax
-------------



```
background-position =   
  <bg-position>[#](value_definition_syntax#hash_mark)    
  
<bg-position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) top [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage>[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage>[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Positioning background images



Each of these three examples uses the [`background`](background) property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.

 #### HTML

 
```
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

```
 #### CSS

 
```
/\* Shared among all <div>s \*/
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/\* These examples use the `background` shorthand property \*/
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 left 4em bottom 1em no-repeat;
}

/\* Multiple background images: Each image is matched with the
 corresponding position, from first specified to last. \*/
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position: 0px 0px, right 3em bottom 2em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # background-position](https://w3c.github.io/csswg-drafts/css-backgrounds/#background-position) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `4_value_syntax` | 25 | 12 | 13 | 9 | 10.5 | 7 | 4.4 | 25 | 14 | 14 | 7 | 1.5 |
| `background-position` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `multiple_backgrounds` | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`background-position-x`](background-position-x)
* [`background-position-y`](background-position-y)
* [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)
* [`transform-origin`](transform-origin)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-position>

background-repeat
=================


The `background-repeat` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.


Try it
------



 By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using `round`) or evenly distributed from end to end (using `space`).


Syntax
------



```
/\* Keyword values \*/
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/\* Two-value syntax: horizontal | vertical \*/
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

/\* Global values \*/
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;

```
### Values


 `<repeat-style>`  The one-value syntax is a shorthand for the full two-value syntax:

 

|  |  |
| --- | --- |
| **Single value** | **Two-value equivalent** |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

 In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:

 

|  |  |
| --- | --- |
| `repeat` |  The image is repeated as much as needed to cover the whole background image painting area. The last image will be clipped if it doesn't fit.  |
| `space` |  The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The [`background-position`](background-position) property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using `space` is when there isn't enough room to display one image.  |
| `round` |  As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.  |
| `no-repeat` |  The image is not repeated (and hence the background image painting area will not necessarily be entirely covered). The position of the non-repeated background image is defined by the [`background-position`](background-position) CSS property.  |

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `repeat` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | a list, each item consisting of two keywords, one per dimension |
| Animation type | discrete |

Formal syntax
-------------



```
background-repeat =   
  <repeat-style>[#](value_definition_syntax#hash_mark)    
  
<repeat-style> =   
  repeat-x                                     [|](value_definition_syntax#single_bar)  
  repeat-y                                     [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) repeat [|](value_definition_syntax#single_bar) space [|](value_definition_syntax#single_bar) round [|](value_definition_syntax#single_bar) no-repeat []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting background-repeat



#### HTML

 
```
<ol>
  <li>
    no-repeat
    <div class="one"></div>
  </li>
  <li>
    repeat
    <div class="two"></div>
  </li>
  <li>
    repeat-x
    <div class="three"></div>
  </li>
  <li>
    repeat-y
    <div class="four"></div>
  </li>
  <li>
    space
    <div class="five"></div>
  </li>
  <li>
    round
    <div class="six"></div>
  </li>
  <li>
    repeat-x, repeat-y (multiple images)
    <div class="seven"></div>
  </li>
</ol>

```
 #### CSS

 
```
/\* Shared for all DIVS in example \*/
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(starsolid.gif);
  width: 160px;
  height: 70px;
}

/\* Background repeats \*/
.one {
  background-repeat: no-repeat;
}
.two {
  background-repeat: repeat;
}
.three {
  background-repeat: repeat-x;
}
.four {
  background-repeat: repeat-y;
}
.five {
  background-repeat: space;
}
.six {
  background-repeat: round;
}

/\* Multiple images \*/
.seven {
  background-image: url(starsolid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

```
 #### Result

 In this example, each list item is matched with a different value of `background-repeat`.



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-background-repeat](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-background-repeat) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `2-value` | 3 | 12 | 13 | 9 | 10.5 | 5 | ≤37 | 18 | 14 | 11 | 4 | 1.0 |
| `background-repeat` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `multiple_backgrounds` | 1 | 12 | 3.6 | 9 | 10.5 | 1.3 | 4.4 | 18 | 4 | 11 | 1 | 1.0 |
| `round_space` | 30 | 12 | 49 | 9 | 1710.5–15 | 8 | 4.4 | 30 | 49 | 18 | 8 | 2.0 |


See also
--------


* [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat>

:blank
======



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

  **Note:** The `:blank` selector is considered at risk, as the CSSWG keeps changing it.

 See [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967).

  The `:blank` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selects empty user input elements (e.g. [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)).



Syntax
------



```
:blank {
  /\* ... \*/
}

```
Examples
--------


### Simple :blank example



In eventual supporting browsers, the `:blank` pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.

 #### HTML

 
```
<textarea></textarea>

```
 #### CSS

 
```
textarea:blank {
  border: 3px solid red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # blank-pseudo](https://w3c.github.io/csswg-drafts/selectors/#blank-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:blank` | No | No | NoSee [bug 1197736](https://bugzil.la/1197736). | No | No | No | No | No | NoSee [bug 1197736](https://bugzil.la/1197736). | No | No | No |


See also
--------


* [`:empty`](:empty)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:blank>

block-size
==========



The `block-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the [`width`](width) or the [`height`](height) property, depending on the value of [`writing-mode`](writing-mode).

 If the writing mode is vertically oriented, the value of `block-size` relates to the width of the element; otherwise, it relates to the height of the element. A related property is [`inline-size`](inline-size), which defines the other dimension of the element.



Try it
------


Syntax
------



```
/\* <length> values \*/
block-size: 300px;
block-size: 25em;

/\* <percentage> values \*/
block-size: 75%;

/\* Keyword values \*/
block-size: max-content;
block-size: min-content;
block-size: fit-content(20em);
block-size: auto;

/\* Global values \*/
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;

```
### Values


The `block-size` property takes the same values as the [`width`](width) and [`height`](height) properties.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | same as [`width`](width) and [`height`](height) |
| [Inherited](inheritance) | no |
| Percentages | block-size of containing block |
| [Computed value](computed_value) | same as [`width`](width) and [`height`](height) |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
block-size =   
  <'width'>    
  

```
Examples
--------


### Block size with vertical text



#### HTML

 
```
<p class="exampleText">Example text</p>

```
 #### CSS

 
```
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # dimension-properties](https://w3c.github.io/csswg-drafts/css-logical/#dimension-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `block-size` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 5.0 |
| `fit-content` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 5.0 |
| `min-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 5.0 |


See also
--------


* The mapped physical properties: [`width`](width) and [`height`](height)
* [`writing-mode`](writing-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/block-size>

border-block
============


The `border-block` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for setting the individual logical block border property values in a single place in the style sheet.


Try it
------



 `border-block` can be used to set the values for one or more of [`border-block-width`](border-block-width), [`border-block-style`](border-block-style), and [`border-block-color`](border-block-color) setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top`](border-top) and [`border-bottom`](border-bottom) or [`border-right`](border-right), and [`border-left`](border-left) properties depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 The borders in the other dimension can be set with [`border-inline`](border-inline), which sets [`border-inline-start`](border-inline-start), and [`border-inline-end`](border-inline-end).


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-block-color`](border-block-color)
* [`border-block-style`](border-block-style)
* [`border-block-width`](border-block-width)


Syntax
------



```
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;

/\* Global values \*/
border-block: inherit;
border-block: initial;
border-block: revert;
border-block: revert-layer;
border-block: unset;

```
### Values



The `border-block` is specified with one or more of the following, in any order:

  `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  [`<color>`](color_value)  The color of the border.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-block-width`](border-block-width): `medium`
* [`border-block-style`](border-block-style): `none`
* [`border-block-color`](border-block-color): `currentcolor`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-block-width`](border-block-width): absolute length; `0` if the border style is `none` or `hidden`
* [`border-block-style`](border-block-style): as specified
* [`border-block-color`](border-block-color): computed color
 |
| Animation type | discrete |

Formal syntax
-------------



```
border-block =   
  <'border-block-start'>    
  

```
Examples
--------


### Border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block: 5px dashed blue;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-block](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block>

border-block-end-width
======================


The `border-block-end-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), or [`border-left-width`](border-left-width) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-width'> values \*/
border-block-end-width: 5px;
border-block-end-width: thick;

/\* Global values \*/
border-block-end-width: inherit;
border-block-end-width: initial;
border-block-end-width: revert;
border-block-end-width: revert-layer;
border-block-end-width: unset;

```
 Related properties are [`border-block-start-width`](border-block-start-width), [`border-inline-start-width`](border-inline-start-width), and [`border-inline-end-width`](border-inline-end-width), which define the other border widths of the element.


### Values


 `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-block-end-width =   
  <'border-top-width'>    
  

```
Examples
--------


### Border width with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-end-width: 5px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-width](https://w3c.github.io/csswg-drafts/css-logical/#border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-end-width` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-left-width`](border-left-width)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-width>

::before
========


In CSS, `::before` creates a [pseudo-element](pseudo-elements) that is the first child of the selected element. It is often used to add cosmetic content to an element with the [`content`](content) property. It is inline by default.


Try it
------



  **Note:** The pseudo-elements generated by `::before` and `::after` are [contained by the element's formatting box](https://www.w3.org/TR/CSS2/generate.html#before-after-content), and thus don't apply to *[replaced elements](replaced_element)* such as [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), or to [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br) elements.

 
Syntax
------




```
::before {
  /\* ... \*/
}

```
  **Note:** [Selectors Level 3](https://drafts.csswg.org/selectors-3/#gen-content) introduced the double-colon notation `::before` to distinguish <pseudo-classes> from <pseudo-elements>. Browsers also accept single-colon notation`:before`, introduced in CSS2.

 
Examples
--------


### Adding quotation marks



One simple example of using `::before` pseudo-elements is to provide quotation marks. Here we use both `::before` and `[`::after`](::after)` to insert quotation characters.

 #### HTML

 
```
<q>Some quotes</q>, he said, <q>are better than none.</q>

```
 #### CSS

 
```
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}

```
 #### Result



### Decorative example



We can style text or images in the [`content`](content) property almost any way we want.

 #### HTML

 
```
<span class="ribbon">Notice where the orange box is.</span>

```
 #### CSS

 
```
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

```
 #### Result



### To-do list



In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

 #### HTML

 
```
<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

```
 #### CSS

 
```
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

```
 #### JavaScript

 
```
const list = document.querySelector("ul");
list.addEventListener(
  "click",
  (ev) => {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false
);

```
 Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the `::before` that has been styled in CSS. Go ahead and get some stuff done.

 #### Result



### Special characters



As this is CSS; not HTML, you can **not** use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

 #### HTML

 
```
<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current="step">Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

```
 #### CSS

 
```
li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /\* Hexadecimal for Unicode Leftwards white arrow\*/
  display: inline;
}

```
 #### Result



Accessibility concerns
----------------------


Using a `::before` pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.

Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # generated-content](https://w3c.github.io/csswg-drafts/css-pseudo/#generated-content) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::before` | 11 | 1212 | 1.5["Before Firefox 57, Firefox had a bug where `::before` pseudo-elements were still generated, even if the [`content`](https://developer.mozilla.org/docs/Web/CSS/content) property value were set to `normal` or `none`.", "Before Firefox 3.5, only the CSS level 2 behavior of `:before` was supported, which disallowed [`position`](https://developer.mozilla.org/docs/Web/CSS/position), [`float`](https://developer.mozilla.org/docs/Web/CSS/float), `list-style-*` and some `display` properties."]1 | 98 | 74 | 44 | ≤37≤37 | 1818 | 4Before Firefox 57, Firefox had a bug where `::before` pseudo-elements were still generated, even if the [`content`](https://developer.mozilla.org/docs/Web/CSS/content) property value were set to `normal` or `none`.4 | 10.110.1 | 33 | 1.01.0 |
| `animation_and_transition_support` | 26 | 12 | 4 | No | 15 | No | 4.4 | 26 | 4 | 14 | No | 1.5 |


See also
--------


* [`::after`](::after)
* [`content`](content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::before>

<blend-mode>
============


The `<blend-mode>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) describes how colors should appear when elements overlap. It is used in the [`background-blend-mode`](background-blend-mode) and [`mix-blend-mode`](mix-blend-mode) properties.


Syntax
------


The `<blend-mode>` data type is defined using a keyword value chosen from the list below.

### Values


 `normal`   The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping. 

  `multiply`   The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping. 

  `screen`   The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen. 

  `overlay`   The final color is the result of `multiply` if the bottom color is darker, or `screen` if the bottom color is lighter. This blend mode is equivalent to `hard-light` but with the layers swapped. 

  `darken`  The final color is composed of the darkest values of each color channel.

  `lighten`  The final color is composed of the lightest values of each color channel.

  `color-dodge`   The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to `screen`, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color. 

  `color-burn`   The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to `multiply`, but the foreground need only be as dark as the inverse of the backdrop to make the final image black. 

  `hard-light`   The final color is the result of `multiply` if the top color is darker, or `screen` if the top color is lighter. This blend mode is equivalent to `overlay` but with the layers swapped. The effect is similar to shining a *harsh* spotlight on the backdrop. 

  `soft-light`   The final color is similar to `hard-light`, but softer. This blend mode behaves similar to `hard-light`. The effect is similar to shining a *diffused* spotlight on the backdrop\*.\* 

  `difference`   The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color. 

  `exclusion`   The final color is similar to `difference`, but with less contrast. As with `difference`, a black layer has no effect, while a white layer inverts the other layer's color. 

  `hue`  The final color has the *hue* of the top color, while using the *saturation* and *luminosity* of the bottom color.

  `saturation`   The final color has the *saturation* of the top color, while using the *hue* and *luminosity* of the bottom color. A pure gray backdrop, having no saturation, will have no effect. 

  `color`   The final color has the *hue* and *saturation* of the top color, while using the *luminosity* of the bottom color. The effect preserves gray levels and can be used to colorize the foreground. 

  `luminosity`   The final color has the *luminosity* of the top color, while using the *hue* and *saturation* of the bottom color. This blend mode is equivalent to `color`, but with the layers swapped. 

  Description
-----------



For each pixel among the layers to which it is applied, a blend mode takes the colors of the foreground and the background, performs a calculation on them, and returns a new color value.

 Changes between blend modes are not interpolated. Any change occurs immediately.


Formal syntax
-------------



```
<blend-mode> =   
  normal       [|](value_definition_syntax#single_bar)  
  multiply     [|](value_definition_syntax#single_bar)  
  screen       [|](value_definition_syntax#single_bar)  
  overlay      [|](value_definition_syntax#single_bar)  
  darken       [|](value_definition_syntax#single_bar)  
  lighten      [|](value_definition_syntax#single_bar)  
  color-dodge  [|](value_definition_syntax#single_bar)  
  color-burn   [|](value_definition_syntax#single_bar)  
  hard-light   [|](value_definition_syntax#single_bar)  
  soft-light   [|](value_definition_syntax#single_bar)  
  difference   [|](value_definition_syntax#single_bar)  
  exclusion    [|](value_definition_syntax#single_bar)  
  hue          [|](value_definition_syntax#single_bar)  
  saturation   [|](value_definition_syntax#single_bar)  
  color        [|](value_definition_syntax#single_bar)  
  luminosity     
  

```
Examples
--------


### Example using "normal"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: normal;
}

```


### Example using "multiply"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: multiply;
}

```


### Example using "screen"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}

```


### Example using "overlay"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: overlay;
}

```


### Example using "darken"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: darken;
}

```


### Example using "lighten"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: lighten;
}

```


### Example using "color-dodge"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-dodge;
}

```


### Example using "color-burn"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color-burn;
}

```


### Example using "hard-light"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hard-light;
}

```


### Example using "soft-light"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: soft-light;
}

```


### Example using "difference"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: difference;
}

```


### Example using "exclusion"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: exclusion;
}

```


### Example using "hue"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: hue;
}

```


### Example using "saturation"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: saturation;
}

```


### Example using "color"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: color;
}

```


### Example using "luminosity"




```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: luminosity;
}

```


### Blend mode comparison



In the following example, we have a `<div>` with two background images set on it — a Firefox logo on top of a linear gradient. Below it, we have a provided a `<select>` menu that allows you to change the `background-blend-mode` applied to the `<div>`, allowing you to compare the different blend mode effects.

 #### HTML

 
```
<div></div>
<p>Choose a blend-mode:</p>
<select>
  <option selected>normal</option>
  <option>multiply</option>
  <option>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>

```
 #### CSS

 
```
div {
  width: 300px;
  height: 300px;
  background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png)
      no-repeat center, linear-gradient(to bottom, blue, orange);
}

```
 #### JavaScript

 
```
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");

selectElem.addEventListener("change", () => {
  divElem.style.backgroundBlendMode = selectElem.value;
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Compositing and Blending Level 2 # ltblendmodegt](https://drafts.fxtf.org/compositing/#ltblendmodegt) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `blend-mode` | 35 | 79 | 30 | No | 22 | 8 | 59 | 59 | 54 | 22 | 8 | 7.0 |


See also
--------



* The [CSS compositing and blending](compositing_and_blending) module that defines the `<blend-mode>` values.
* Properties that use this data type: [`background-blend-mode`](background-blend-mode), [`mix-blend-mode`](mix-blend-mode)

 Description to various blend modes on other website:

 * [Blend modes](https://en.wikipedia.org/wiki/Blend_modes) on Wikipedia
* [Blending modes in Adobe Photoshop](https://helpx.adobe.com/photoshop/using/blending-modes.html) by Adobe




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode>

blur()
======


The `blur()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) applies a [Gaussian blur](https://en.wikipedia.org/wiki/Gaussian_blur) to the input image. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



```
blur(radius)

```
### Parameters


 `radius`  The radius of the blur, specified as a [`<length>`](../length). It defines the value of the standard deviation to the Gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. A value of `0` leaves the input unchanged. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `0`.

  Examples
--------


### Setting a blur with pixels and with rem



```
blur(0)        /\* No effect \*/
blur(8px)      /\* Blur with 8px radius \*/
blur(1.17rem)  /\* Blur with 1.17rem radius \*/

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-blur](https://drafts.fxtf.org/filter-effects/#funcdef-filter-blur) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `blur` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------



The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:

 * [`brightness()`](brightness)
* [`contrast()`](contrast)
* [`drop-shadow()`](drop-shadow)
* [`grayscale()`](grayscale)
* [`hue-rotate()`](hue-rotate)
* [`invert()`](invert)
* [`opacity()`](opacity)
* [`saturate()`](saturate)
* [`sepia()`](sepia)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur>

border
======


The `border` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets an element's border. It sets the values of [`border-width`](border-width), [`border-style`](border-style), and [`border-color`](border-color).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-color`](border-color)
* [`border-style`](border-style)
* [`border-width`](border-width)


Syntax
------




```
/\* style \*/
border: solid;

/\* width | style \*/
border: 2px dotted;

/\* style | color \*/
border: outset #f33;

/\* width | style | color \*/
border: medium dashed green;

/\* Global values \*/
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;

```
 The `border` property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

  **Note:** The border will be invisible if its style is not defined. This is because the style defaults to `none`.

 
### Values


 `<line-width>`  Sets the thickness of the border. Defaults to `medium` if absent. See [`border-width`](border-width).

  `<line-style>`  Sets the style of the border. Defaults to `none` if absent. See [`border-style`](border-style).

  [`<color>`](color_value)  Sets the color of the border. Defaults to `currentcolor` if absent. See [`border-color`](border-color).

  Description
-----------



As with all shorthand properties, any omitted sub-values will be set to their [initial value](initial_value). Importantly, `border` cannot be used to specify a custom value for [`border-image`](border-image), but instead sets it to its initial value, i.e., `none`.

 The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand [`border-width`](border-width), [`border-style`](border-style), and [`border-color`](border-color) properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., [`border-top`](border-top) ) and logical (e.g., [`border-block-start`](border-block-start)) border properties.


### Borders vs. outlines



Borders and [outlines](outline) are very similar. However, outlines differ from borders in the following ways:

 * Outlines never take up space, as they are drawn outside of an element's content.
* According to the spec, outlines don't have to be rectangular, although they usually are.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-top-width`](border-top-width): `medium`
	+ [`border-right-width`](border-right-width): `medium`
	+ [`border-bottom-width`](border-bottom-width): `medium`
	+ [`border-left-width`](border-left-width): `medium`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-top-style`](border-top-style): `none`
	+ [`border-right-style`](border-right-style): `none`
	+ [`border-bottom-style`](border-bottom-style): `none`
	+ [`border-left-style`](border-left-style): `none`
* [`border-color`](border-color): as each of the properties of the shorthand:
	+ [`border-top-color`](border-top-color): `currentcolor`
	+ [`border-right-color`](border-right-color): `currentcolor`
	+ [`border-bottom-color`](border-bottom-color): `currentcolor`
	+ [`border-left-color`](border-left-color): `currentcolor`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden`
	+ [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden`
	+ [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden`
	+ [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-bottom-style`](border-bottom-style): as specified
	+ [`border-left-style`](border-left-style): as specified
	+ [`border-right-style`](border-right-style): as specified
	+ [`border-top-style`](border-top-style): as specified
* [`border-color`](border-color): as each of the properties of the shorthand:
	+ [`border-bottom-color`](border-bottom-color): computed color
	+ [`border-left-color`](border-left-color): computed color
	+ [`border-right-color`](border-right-color): computed color
	+ [`border-top-color`](border-top-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-color`](border-color): as each of the properties of the shorthand:
	+ [`border-bottom-color`](border-bottom-color): a [color](color_value#interpolation)
	+ [`border-left-color`](border-left-color): a [color](color_value#interpolation)
	+ [`border-right-color`](border-right-color): a [color](color_value#interpolation)
	+ [`border-top-color`](border-top-color): a [color](color_value#interpolation)
* [`border-style`](border-style): discrete
* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-bottom-width`](border-bottom-width): a [length](length#interpolation)
	+ [`border-left-width`](border-left-width): a [length](length#interpolation)
	+ [`border-right-width`](border-right-width): a [length](length#interpolation)
	+ [`border-top-width`](border-top-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border =   
  <line-width>  [||](value_definition_syntax#double_bar)  
  <line-style>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)         
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Setting a pink outset border



#### HTML

 
```
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

```
 #### CSS

 
```
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # propdef-border](https://w3c.github.io/csswg-drafts/css-backgrounds/#propdef-border) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`border-width`](border-width)
* [`border-style`](border-style)
* [`border-color`](border-color)
* [`outline`](outline)
* [Backgrounds and borders](css_backgrounds_and_borders)
* [Learn CSS: Backgrounds and borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border>

border-block-color
==================


The `border-block-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top-color`](border-top-color) and [`border-bottom-color`](border-bottom-color), or [`border-right-color`](border-right-color) and [`border-left-color`](border-left-color) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------



 The border color in the other dimension can be set with [`border-inline-color`](border-inline-color) which sets [`border-inline-start-color`](border-inline-start-color), and [`border-inline-end-color`](border-inline-end-color).


Syntax
------



```
border-block-color: yellow;
border-block-color: #f5f6f7;

/\* Global values \*/
border-block-color: inherit;
border-block-color: initial;
border-block-color: revert;
border-block-color: revert-layer;
border-block-color: unset;

```
### Values


 [`<color>`](color_value)  The color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | discrete |

Formal syntax
-------------



```
border-block-color =   
  <'border-top-color'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-block-color](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-block-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-color` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to the physical border properties: [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color>

border-block-end
================


The `border-block-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for setting the individual logical block-end border property values in a single place in the style sheet.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-block-end-color`](border-block-end-color)
* [`border-block-end-style`](border-block-end-style)
* [`border-block-end-width`](border-block-end-width)


Syntax
------




```
border-block-end: 1px;
border-block-end: 2px dotted;
border-block-end: medium dashed blue;

/\* Global values \*/
border-block-end: inherit;
border-block-end: initial;
border-block-end: revert;
border-block-end: revert-layer;
border-block-end: unset;

```
 `border-block-end` can be used to set the values for one or more of [`border-block-end-width`](border-block-end-width), [`border-block-end-style`](border-block-end-style), and [`border-block-end-color`](border-block-end-color). The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 Related properties are [`border-block-start`](border-block-start), [`border-inline-start`](border-inline-start), and [`border-inline-end`](border-inline-end), which define the other borders of the element.


### Values



The `border-block-end` is specified with one or more of the following, in any order:

  `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  [`<color>`](color_value)  The color of the border.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-top-width`](border-top-width): `medium`
* [`border-top-style`](border-top-style): `none`
* [`border-top-color`](border-top-color): `currentcolor`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
* [`border-top-style`](border-top-style): as specified
* [`border-top-color`](border-top-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-block-end-color`](border-block-end-color): a [color](color_value#interpolation)
* [`border-block-end-style`](border-block-end-style): discrete
* [`border-block-end-width`](border-block-end-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-block-end =   
  <'border-top-width'>  [||](value_definition_syntax#double_bar)  
  <'border-top-style'>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)                 
  

```
Examples
--------


### Border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-end: 5px dashed blue;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-shorthands](https://w3c.github.io/csswg-drafts/css-logical/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-end` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end>

border-block-end-color
======================


The `border-block-end-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
border-block-end-color: yellow;
border-block-end-color: #f5f6f7;

/\* Global values \*/
border-block-end-color: inherit;
border-block-end-color: initial;
border-block-end-color: revert;
border-block-end-color: revert-layer;
border-block-end-color: unset;

```
 Related properties are [`border-block-start-color`](border-block-start-color), [`border-inline-start-color`](border-inline-start-color), and [`border-inline-end-color`](border-inline-end-color), which define the other border colors of the element.


### Values


 [`<color>`](color_value)  The color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-block-end-color =   
  <'border-top-color'>    
  

```
Examples
--------


### Border color with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-end-color: red;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-color](https://w3c.github.io/csswg-drafts/css-logical/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-end-color` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-color>

border-block-end-style
======================


The `border-block-end-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-style'> values \*/
border-block-end-style: dashed;
border-block-end-style: dotted;
border-block-end-style: groove;

/\* Global values \*/
border-block-end-style: inherit;
border-block-end-style: initial;
border-block-end-style: revert;
border-block-end-style: revert-layer;
border-block-end-style: unset;

```
 Related properties are [`border-block-start-style`](border-block-start-style), [`border-inline-start-style`](border-inline-start-style), and [`border-inline-end-style`](border-inline-end-style), which define the other border styles of the element.


### Values


 `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-block-end-style =   
  <'border-top-style'>    
  

```
Examples
--------


### Dashed border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-style: dashed;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-style](https://w3c.github.io/csswg-drafts/css-logical/#border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-end-style` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-style`](border-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), and [`border-left-style`](border-left-style).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-end-style>

border-block-start
==================


The `border-block-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for setting the individual logical block-start border property values in a single place in the style sheet.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-block-start-color`](border-block-start-color)
* [`border-block-start-style`](border-block-start-style)
* [`border-block-start-width`](border-block-start-width)


Syntax
------




```
border-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;

/\* Global values \*/
border-block-start: inherit;
border-block-start: initial;
border-block-start: revert;
border-block-start: revert-layer;
border-block-start: unset;

```
 `border-block-start` can be used to set the values for one or more of [`border-block-start-width`](border-block-start-width), [`border-block-start-style`](border-block-start-style), and [`border-block-start-color`](border-block-start-color). The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 Related properties are [`border-block-end`](border-block-end), [`border-inline-start`](border-inline-start), and [`border-inline-end`](border-inline-end), which define the other borders of the element.


### Values



The `border-block-start` is specified with one or more of the following, in any order:

  `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  [`<color>`](color_value)  The color of the border.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-top-width`](border-top-width): `medium`
	+ [`border-right-width`](border-right-width): `medium`
	+ [`border-bottom-width`](border-bottom-width): `medium`
	+ [`border-left-width`](border-left-width): `medium`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-top-style`](border-top-style): `none`
	+ [`border-right-style`](border-right-style): `none`
	+ [`border-bottom-style`](border-bottom-style): `none`
	+ [`border-left-style`](border-left-style): `none`
* [`color`](color): `canvastext`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden`
	+ [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden`
	+ [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden`
	+ [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-bottom-style`](border-bottom-style): as specified
	+ [`border-left-style`](border-left-style): as specified
	+ [`border-right-style`](border-right-style): as specified
	+ [`border-top-style`](border-top-style): as specified
* [`border-block-start-color`](border-block-start-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-block-start-color`](border-block-start-color): a [color](color_value#interpolation)
* [`border-block-start-style`](border-block-start-style): discrete
* [`border-block-start-width`](border-block-start-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-block-start =   
  <'border-top-width'>  [||](value_definition_syntax#double_bar)  
  <'border-top-style'>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)                 
  

```
Examples
--------


### Border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-block-start: 5px dashed blue;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-shorthands](https://w3c.github.io/csswg-drafts/css-logical/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-start` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start>

border-block-start-style
========================


The `border-block-start-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-style'> values \*/
border-block-start-style: dashed;
border-block-start-style: dotted;
border-block-start-style: groove;

/\* Global values \*/
border-block-start-style: inherit;
border-block-start-style: initial;
border-block-start-style: revert;
border-block-start-style: revert-layer;
border-block-start-style: unset;

```
 Related properties are [`border-block-end-style`](border-block-end-style), [`border-inline-start-style`](border-inline-start-style), and [`border-inline-end-style`](border-inline-end-style), which define the other border styles of the element.


### Values


 `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-block-start-style =   
  <'border-top-style'>    
  

```
Examples
--------


### Dashed border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-start-style: dashed;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-style](https://w3c.github.io/csswg-drafts/css-logical/#border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-start-style` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-style`](border-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-style>

border-block-start-width
========================


The `border-block-start-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), or [`border-left-width`](border-left-width) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-width'> values \*/
border-block-start-width: 5px;
border-block-start-width: thick;

/\* Global values \*/
border-block-start-width: inherit;
border-block-start-width: initial;
border-block-start-width: revert;
border-block-start-width: revert-layer;
border-block-start-width: unset;

```
 Related properties are [`border-block-end-width`](border-block-end-width), [`border-inline-start-width`](border-inline-start-width), and [`border-inline-end-width`](border-inline-end-width), which define the other border widths of the element.


### Values


 `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-block-start-width =   
  <'border-top-width'>    
  

```
Examples
--------


### Border width with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-start-width: 5px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-width](https://w3c.github.io/csswg-drafts/css-logical/#border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-start-width` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-left-width`](border-left-width)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-width>

border-block-style
==================


The `border-block-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top-style`](border-top-style) and [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style) and [`border-right-style`](border-right-style) properties depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------



 The border style in the other dimension can be set with [`border-inline-style`](border-inline-style), which sets [`border-inline-start-style`](border-inline-start-style), and [`border-inline-end-style`](border-inline-end-style).


Syntax
------



```
/\* <'border-style'> values \*/
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;

/\* Global values \*/
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: revert-layer;
border-block-style: unset;

```
### Values


 `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-block-style =   
  <'border-top-style'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Dashed border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-style: dashed;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-block-style](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-block-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-style` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-style`](border-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-style>

border-block-width
==================


The `border-block-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top-width`](border-top-width) and [`border-bottom-width`](border-bottom-width), or [`border-left-width`](border-left-width), and [`border-right-width`](border-right-width) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------



 The border width in the other dimension can be set with [`border-inline-width`](border-inline-width), which sets [`border-inline-start-width`](border-inline-start-width), and [`border-inline-end-width`](border-inline-end-width).


Syntax
------



```
/\* <'border-width'> values \*/
border-block-width: 5px;
border-block-width: thick;

/\* Global values \*/
border-block-width: inherit;
border-block-width: initial;
border-block-width: revert;
border-block-width: revert-layer;
border-block-width: unset;

```
### Values


 `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | discrete |

Formal syntax
-------------



```
border-block-width =   
  <'border-top-width'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Border width with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-width: 5px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-block-width](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-block-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-width` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-left-width`](border-left-width)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-width>

border-block-start-color
========================


The `border-block-start-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
border-block-start-color: blue;
border-block-start-color: #4c5d21;

/\* Global values \*/
border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;

```
 Related properties are [`border-block-end-color`](border-block-end-color), [`border-inline-start-color`](border-inline-start-color), and [`border-inline-end-color`](border-inline-end-color), which define the other border colors of the element.


### Values


 [`<color>`](color_value)  The color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-block-start-color =   
  <'border-top-color'>    
  

```
Examples
--------


### Border color with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-color](https://w3c.github.io/csswg-drafts/css-logical/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-block-start-color` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-start-color>

border-bottom
=============


The `border-bottom` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets an element's bottom <border>. It sets the values of [`border-bottom-width`](border-bottom-width), [`border-bottom-style`](border-bottom-style) and [`border-bottom-color`](border-bottom-color).


Try it
------



 As with all shorthand properties, `border-bottom` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

 
```
border-bottom-style: dotted;
border-bottom: thick green;

```
 It is actually the same as this one:

 
```
border-bottom-style: dotted;
border-bottom: none thick green;

```
 The value of [`border-bottom-style`](border-bottom-style) given before `border-bottom` is ignored. Since the default value of [`border-bottom-style`](border-bottom-style) is `none`, not specifying the `border-style` part results in no border.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-bottom-color`](border-bottom-color)
* [`border-bottom-style`](border-bottom-style)
* [`border-bottom-width`](border-bottom-width)


Syntax
------




```
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;

/\* Global values \*/
border-bottom: inherit;
border-bottom: initial;
border-bottom: revert;
border-bottom: revert-layer;
border-bottom: unset;

```
 The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.


### Values


 `<br-width>`  See [`border-bottom-width`](border-bottom-width).

  `<br-style>`  See [`border-bottom-style`](border-bottom-style).

  [`<color>`](color_value)  See [`border-bottom-color`](border-bottom-color).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-bottom-width`](border-bottom-width): `medium`
* [`border-bottom-style`](border-bottom-style): `none`
* [`border-bottom-color`](border-bottom-color): `currentcolor`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden`
* [`border-bottom-style`](border-bottom-style): as specified
* [`border-bottom-color`](border-bottom-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-bottom-color`](border-bottom-color): a [color](color_value#interpolation)
* [`border-bottom-style`](border-bottom-style): discrete
* [`border-bottom-width`](border-bottom-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-bottom =   
  <line-width>  [||](value_definition_syntax#double_bar)  
  <line-style>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)         
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Applying a bottom border



#### HTML

 
```
<div>This box has a border on the bottom side.</div>

```
 #### CSS

 
```
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-shorthands](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-bottom` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`border`](border)
* [`border-block`](border-block)
* [`outline`](outline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom>

border-bottom-color
===================


The `border-bottom-color` CSS property sets the color of an element's bottom <border>. It can also be set with the shorthand CSS properties [`border-color`](border-color) or [`border-bottom`](border-bottom).


Try it
------


Syntax
------




```
/\* <color> values \*/
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255, 0, 0);
border-bottom-color: hsl(100deg 50% 25% / 0.75);
border-bottom-color: currentcolor;
border-bottom-color: transparent;

/\* Global values \*/
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: revert;
border-bottom-color: revert-layer;
border-bottom-color: unset;

```
 The `border-bottom-color` property is specified as a single value.


### Values


 [`<color>`](color_value)  The color of the bottom border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-bottom-color =   
  [<color>](color_value)    
  

```
Examples
--------


### A simple div with a border



#### HTML

 
```
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>

```
 #### CSS

 
```
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-color](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-bottom-color` | 1 | 12 | 1Firefox also supports the non-standard [`-moz-border-bottom-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-bottom-colors) CSS property that sets the bottom border to multiple colors. | 4 | 3.5 | 1 | 4.4 | 18 | 4Firefox also supports the non-standard [`-moz-border-bottom-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-bottom-colors) CSS property that sets the bottom border to multiple colors. | 10.1 | 1 | 1.0 |


See also
--------


* The border-related CSS shorthand properties: [`border`](border), [`border-bottom`](border-bottom), and [`border-color`](border-color).
* The color-related CSS properties for the other borders: [`border-right-color`](border-right-color), [`border-top-color`](border-top-color), and [`border-left-color`](border-left-color).
* The other border-related CSS properties applying to the same border: [`border-bottom-style`](border-bottom-style) and [`border-bottom-width`](border-bottom-width).
* The default [`currentcolor`](color_value#currentcolor_keyword) color value.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color>

border-bottom-left-radius
=========================


The `border-bottom-left-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.


Try it
------



 The rounding can be a circle or an ellipse, or if one of the value is `0` no rounding is done and the corner is square.

  ![border-bottom-left-radius.png] 

 A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the [`background-clip`](background-clip) property.

  **Note:** If the value of this property is not set in a [`border-radius`](border-radius) shorthand property that is applied to the element after the `border-bottom-left-radius` CSS property, the value of this property is then reset to its initial value by the [shorthand property](shorthand_properties).

 
Syntax
------




```
/\* the corner is a circle \*/
/\* border-bottom-left-radius: radius \*/
border-bottom-left-radius: 3px;

/\* Percentage values \*/

/\* circle if box is a square or ellipse if box is a rectangle \*/
border-bottom-left-radius: 20%;

/\* same as above: 20% of horizontal(width) and vertical(height) \*/
border-bottom-left-radius: 20% 20%;

/\* 20% of horizontal(width) and 10% of vertical(height) \*/
border-bottom-left-radius: 20% 10%;

/\* the corner is an ellipse \*/
/\* border-bottom-left-radius: horizontal vertical \*/
border-bottom-left-radius: 0.5em 1em;

/\* Global values \*/
border-bottom-left-radius: inherit;
border-bottom-left-radius: initial;
border-bottom-left-radius: revert;
border-bottom-left-radius: revert-layer;
border-bottom-left-radius: unset;

```
 With one value:

 * the value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the radius of the circle to use for the border in that corner.

 With two values:

 * the first value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the vertical semi-major axis of the ellipse to use for the border in that corner.


### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-bottom-left-radius =   
  [<length-percentage [0,∞]>](length-percentage)[{1,2}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Arc of a circle



A single `<length>` value produces an arc of a circle.

 
```
div {
  border-bottom-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Arc of an ellipse



Two different `<length>` values produce an arc of an ellipse.

 
```
div {
  border-bottom-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Square element with percentage radius



A square element with a single `<percentage>` value produces an arc of a circle.

 
```
div {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Non-square element with percentage radius



A non-square element with a single `<percentage>` value produces an arc of an ellipse.

 
```
div {
  border-bottom-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-radius](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-radius) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-bottom-left-radius` | 41 | 1212 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.1–12 | 9 | 1510.5 | 53 | ≤37≤37 | 1818 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.4–14 | 1411 | 4.21 | 1.01.0 |
| `elliptical_corners` | 1 | 12 | 3.5 | 9 | 10.5 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `percentages` | 4 | 12 | 41–4Before Firefox 4, the [`<percentage>`](https://developer.mozilla.org/docs/Web/CSS/percentage) was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value. | 9 | 10.5 | 5 | ≤37 | 18 | 4 | 14 | 4.2 | 1.0 |


See also
--------


* [`border-radius`](border-radius) shorthand property
* [`border-top-right-radius`](border-top-right-radius), [`border-bottom-right-radius`](border-bottom-right-radius), and [`border-top-left-radius`](border-top-left-radius)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius>

border-bottom-right-radius
==========================


The `border-bottom-right-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.


Try it
------



 The rounding can be a circle or an ellipse, or if one of the value is `0` no rounding is done and the corner is square.

  ![border-bottom-right-radius.png] 

 A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the [`background-clip`](background-clip) property.

  **Note:** If the value of this property is not set in a [`border-radius`](border-radius) shorthand property that is applied to the element after the `border-bottom-right-radius` CSS property, the value of this property is then reset to its initial value by the [shorthand property](shorthand_properties).

 
Syntax
------




```
/\* The corner is a circle \*/
/\* border-bottom-right-radius: radius \*/
border-bottom-right-radius: 3px;

/\* Percentage values \*/
border-bottom-right-radius: 20%; /\* corner of a circle if box is a square or else corner of a rectangle \*/
border-bottom-right-radius: 20% 20%; /\* same as above \*/ /\* 20% of horizontal(width) and vertical(height) \*/
border-bottom-right-radius: 20% 10%; /\* 20% of horizontal(width) and 10% of vertical(height) \*/

/\*The corner is an ellipse \*/
/\* border-bottom-right-radius: horizontal vertical \*/
border-bottom-right-radius: 0.5em 1em;

/\* Global values \*/
border-bottom-right-radius: inherit;
border-bottom-right-radius: initial;
border-bottom-right-radius: revert;
border-bottom-right-radius: revert-layer;
border-bottom-right-radius: unset;

```
 With one value:

 * the value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the radius of the circle to use for the border in that corner.

 With two values:

 * the first value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the vertical semi-major axis of the ellipse to use for the border in that corner.


### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-bottom-right-radius =   
  [<length-percentage [0,∞]>](length-percentage)[{1,2}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Arc of a circle



A single `<length>` value produces an arc of a circle.

 
```
div {
  border-bottom-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Arc of an ellipse



Two different `<length>` values produce an arc of an ellipse.

 
```
div {
  border-bottom-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Square element with percentage radius



A square element with a single `<percentage>` value produces an arc of a circle.

 
```
div {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Non-square element with percentage radius



A non-square element with a single `<percentage>` value produces an arc of an ellipse.

 
```
div {
  border-bottom-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-radius](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-radius) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-bottom-right-radius` | 41 | 1212 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.1–12 | 9 | 1510.5 | 53 | ≤37≤37 | 1818 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.4–14 | 1411 | 4.21 | 1.01.0 |
| `elliptical_corners` | 1 | 12 | 3.5 | 9 | 10.5 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `percentages` | 4 | 12 | 41–4Before Firefox 4, the [`<percentage>`](https://developer.mozilla.org/docs/Web/CSS/percentage) was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value. | 9 | 10.5 | 5 | ≤37 | 18 | 4 | 14 | 4.2 | 1.0 |


See also
--------


* [`border-radius`](border-radius) shorthand property
* [`border-top-right-radius`](border-top-right-radius), [`border-bottom-left-radius`](border-bottom-left-radius), and [`border-top-left-radius`](border-top-left-radius)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius>

border-bottom-width
===================


The `border-bottom-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the bottom border of an element.


Try it
------


Syntax
------



```
/\* Keyword values \*/
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/\* <length> values \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/\* Global keywords \*/
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: revert;
border-bottom-width: revert-layer;
border-bottom-width: unset;

```
### Values



 `<line-width>`  Defines the width of the border, either as an explicit nonnegative [`<length>`](length) or a keyword. If it's a keyword, it must be one of the following values:

 * `thin`
* `medium`
* `thick`

    **Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-bottom-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Comparing bottom border widths



#### HTML

 
```
<div>Element 1</div>
<div>Element 2</div>

```
 #### CSS

 
```
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-width](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-bottom-width` | 1 | 12 | 1 | 4 | 3.5 | 1 | 2.2 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* The other border-width-related CSS properties: [`border-left-width`](border-left-width), [`border-right-width`](border-right-width), [`border-top-width`](border-top-width), and [`border-width`](border-width).
* The other border-bottom-related CSS properties: [`border`](border), [`border-bottom`](border-bottom), [`border-bottom-style`](border-bottom-style), and [`border-bottom-color`](border-bottom-color).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width>

border-bottom-style
===================


The `border-bottom-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style of an element's bottom [`border`](border).


Try it
------



  **Note:** The specification doesn't define how borders of different styles connect in the corners.

 
Syntax
------




```
/\* Keyword values \*/
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

/\* Global values \*/
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: revert;
border-bottom-style: revert-layer;
border-bottom-style: unset;

```
 The `border-bottom-style` property is specified as a single keyword chosen from those available for the [`border-style`](border-style) property.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-bottom-style =   
  <line-style>    
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Demonstrating all border styles



#### HTML

 
```
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

```
 #### CSS

 
```
/\* Define look of the table \*/
table {
  border-width: 3px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-bottom-style example classes \*/
.b1 {
  border-bottom-style: none;
}
.b2 {
  border-bottom-style: hidden;
}
.b3 {
  border-bottom-style: dotted;
}
.b4 {
  border-bottom-style: dashed;
}
.b5 {
  border-bottom-style: solid;
}
.b6 {
  border-bottom-style: double;
}
.b7 {
  border-bottom-style: groove;
}
.b8 {
  border-bottom-style: ridge;
}
.b9 {
  border-bottom-style: inset;
}
.b10 {
  border-bottom-style: outset;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-style](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-bottom-style` | 1 | 12 | 1Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50. | 5.5 | 9.2 | 1 | ≤37 | 18 | 4Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50. | 14 | 1 | 1.0 |


See also
--------


* The other style-related border properties: [`border-left-style`](border-left-style), [`border-right-style`](border-right-style), [`border-top-style`](border-top-style), and [`border-style`](border-style).
* The other bottom-border-related properties: [`border-bottom`](border-bottom), [`border-bottom-color`](border-bottom-color), and [`border-bottom-width`](border-bottom-width).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style>

border-image-outset
===================



The `border-image-outset` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the distance by which an element's [border image](border-image) is set out from its border box.

 The parts of the border image that are rendered outside the element's border box with `border-image-outset` do not trigger overflow scrollbars and don't capture mouse events.



Try it
------


Syntax
------




```
/\* <length> value \*/
border-image-outset: 1rem;

/\* <number> value \*/
border-image-outset: 1.5;

/\* top and bottom | left and right \*/
border-image-outset: 1 1.2;

/\* top | left and right | bottom \*/
border-image-outset: 30px 2 45px;

/\* top | right | bottom | left \*/
border-image-outset: 7px 12px 14px 5px;

/\* Global values \*/
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: revert-layer;
border-image-outset: unset;

```
 The `border-image-outset` property may be specified as one, two, three, or four values. Each value is a [`<length>`](length) or [`<number>`](number). Negative values are invalid and will cause the `border-image-outset` declaration to be ignored.

 1. If **one** value is specified, it applies to **all four sides**.
2. If **two** values are specified, the first applies to the **top and bottom** and the second to the **left and right**.
3. If **three** values are specified, the first applies to the **top**, the second to the **left and right**, and the third to the **bottom**.
4. If **four** values are specified, they apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 [`<length>`](length)  The size of the `border-image` outset as a dimension — a number with a unit.

  [`<number>`](number)  The size of the `border-image` outset as a multiple of the element's corresponding [`border-width`](border-width)s. For example, if an element has `border-width: 1em 2px 0 1.5rem`, and `border-image-outset: 2`, the final `border-image-outset` would be calculated as `2em 4px 0 3rem`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except internal table elements when [`border-collapse`](border-collapse) is `collapse`. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

Formal syntax
-------------



```
border-image-outset =   
  [[](value_definition_syntax#brackets) [<length [0,∞]>](length) [|](value_definition_syntax#single_bar) [<number [0,∞]>](number) []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Outsetting a border image



#### HTML

 
```
<div id="outset">This element has an outset border image!</div>

```
 #### CSS

 
```
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* 1.5 × 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-image-outset](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-image-outset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-image-outset` | 15 | 12 | 15 | 11 | 15 | 6 | 4.4 | 18 | 15 | 14 | 6 | 1.0 |


See also
--------


* [Backgrounds and borders](css_backgrounds_and_borders)
* [Learn CSS: Backgrounds and borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset>

border-image-repeat
===================


The `border-image-repeat` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines how the [edge regions](border-image-slice#edge-regions) and [middle region](border-image-slice#middle-region) of a source image are adjusted to fit the dimensions of an element's [border image](border-image). The middle region can be displayed by using the keyword "fill" in the border-image-slice property.


Try it
------


Syntax
------




```
/\* Keyword value \*/
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/\* top and bottom | left and right \*/
border-image-repeat: round stretch;

/\* Global values \*/
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: revert;
border-image-repeat: revert-layer;
border-image-repeat: unset;

```
 The `border-image-repeat` property may be specified using one or two values chosen from the list of values below.

 * When **one** value is specified, it applies the same behavior on **all four sides**.
* When **two** values are specified, the first applies to the **top, middle, and bottom**, the second to the **left and right**.


### Values


 `stretch`  The source image's edge regions are stretched to fill the gap between each border.

  `repeat`  The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.

  `round`  The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.

  `space`  The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `stretch` |
| Applies to | all elements, except internal table elements when [`border-collapse`](border-collapse) is `collapse`. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-image-repeat =   
  [[](value_definition_syntax#brackets) stretch [|](value_definition_syntax#single_bar) repeat [|](value_definition_syntax#single_bar) round [|](value_definition_syntax#single_bar) space []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Repeating border images



#### CSS

 
```
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /\* Can be changed in the live sample \*/
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-image-repeat) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-image-repeat` | 15 | 12 | 15 | 11 | 15 | 6 | 4.4 | 18 | 15 | 14 | 9.3 | 1.0 |
| `round` | 30 | 12 | 15 | 11 | 17 | 9.1 | ≤37 | 30 | 15 | 18 | 9.3 | 2.0 |
| `space` | 56 | 12 | 50 | 11 | 43 | 9.1 | 56 | 56 | 50 | 43 | 9.3 | 6.0 |


See also
--------


* [Backgrounds and borders](css_backgrounds_and_borders)
* [Learn CSS: Backgrounds and borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat>

border-collapse
===============


The `border-collapse` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether cells inside a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) have shared or separate borders.


Try it
------



 When cells are collapsed, the [`border-style`](border-style) value of `inset` behaves like `groove`, and `outset` behaves like `ridge`.

 When cells are separated, the distance between cells is defined by the [`border-spacing`](border-spacing) property.


Syntax
------




```
/\* Keyword values \*/
border-collapse: collapse;
border-collapse: separate;

/\* Global values \*/
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: revert-layer;
border-collapse: unset;

```
 The `border-collapse` property is specified as a single keyword, which may be chosen from the list below.


### Values


 `collapse`  Adjacent cells have shared borders (the collapsed-border table rendering model).

  `separate`  Adjacent cells have distinct borders (the separated-border table rendering model).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `separate` |
| Applies to | `table` and `inline-table` elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-collapse =   
  separate  [|](value_definition_syntax#single_bar)  
  collapse    
  

```
Examples
--------


### A colorful table of browser engines



#### HTML

 
```
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

```
 #### CSS

 
```
.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse](https://w3c.github.io/csswg-drafts/css2/#propdef-border-collapse) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-collapse` | 1 | 12 | 1 | 5 | 4 | 1.2 | 2.2 | 18 | 4 | 10.1 | 3 | 1.0 |


See also
--------


* [`border-spacing`](border-spacing), [`border-style`](border-style)
* The `border-collapse` property alters the appearance of the [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) HTML element.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse>

border-color
============


The `border-color` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the color of an element's border.


Try it
------



 Each side can be set individually using [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), and [`border-left-color`](border-left-color); or using the writing mode-aware [`border-block-start-color`](border-block-start-color), [`border-block-end-color`](border-block-end-color), [`border-inline-start-color`](border-inline-start-color), and [`border-inline-end-color`](border-inline-end-color).

 You can find more information about border colors in [CSS colors](css_colors/applying_color#borders_2).


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-bottom-color`](border-bottom-color)
* [`border-left-color`](border-left-color)
* [`border-right-color`](border-right-color)
* [`border-top-color`](border-top-color)


Syntax
------




```
/\* <color> values \*/
border-color: red;

/\* top and bottom | left and right \*/
border-color: red #f015ca;

/\* top | left and right | bottom \*/
border-color: red rgb(240, 30, 50, 0.7) green;

/\* top | right | bottom | left \*/
border-color: red yellow green blue;

/\* Global values \*/
border-color: inherit;
border-color: initial;
border-color: revert;
border-color: revert-layer;
border-color: unset;

```
 The `border-color` property may be specified using one, two, three, or four values.

 * When **one** value is specified, it applies the same color to **all four sides**.
* When **two** values are specified, the first color applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first color applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the colors apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 [`<color>`](color_value)  Defines the color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-top-color`](border-top-color): `currentcolor`
* [`border-right-color`](border-right-color): `currentcolor`
* [`border-bottom-color`](border-bottom-color): `currentcolor`
* [`border-left-color`](border-left-color): `currentcolor`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-bottom-color`](border-bottom-color): computed color
* [`border-left-color`](border-left-color): computed color
* [`border-right-color`](border-right-color): computed color
* [`border-top-color`](border-top-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-bottom-color`](border-bottom-color): a [color](color_value#interpolation)
* [`border-left-color`](border-left-color): a [color](color_value#interpolation)
* [`border-right-color`](border-right-color): a [color](color_value#interpolation)
* [`border-top-color`](border-top-color): a [color](color_value#interpolation)
 |

Formal syntax
-------------



```
border-color =   
  [<color>](color_value)[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Complete border-color usage



#### HTML

 
```
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>

```
 #### CSS

 
```
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/\* Set width and style for all divs \*/
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # logical-shorthand-keyword](https://w3c.github.io/csswg-drafts/css-logical/#logical-shorthand-keyword) |
| [CSS Backgrounds and Borders Module Level 3 # border-color](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-color` | 1 | 12 | 1Firefox also supports the following non-standard CSS properties to set the border sides to multiple colors: [`-moz-border-top-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-top-colors), [`-moz-border-right-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-right-colors), [`-moz-border-bottom-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-bottom-colors), [`-moz-border-left-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-left-colors) | 4 | 3.5 | 1 | 4 | 18 | 4Firefox also supports the following non-standard CSS properties to set the border sides to multiple colors: [`-moz-border-top-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-top-colors), [`-moz-border-right-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-right-colors), [`-moz-border-bottom-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-bottom-colors), [`-moz-border-left-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-left-colors) | 10.1 | 1 | 1.0 |


See also
--------


* Border-color related CSS properties: [`border`](border), [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), [`border-left-color`](border-left-color),
* Other border-related CSS properties: [`border-width`](border-width), [`border-style`](border-style)
* The [`<color>`](color_value) data type
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-color>

border-end-end-radius
=====================


The `border-end-end-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). This is useful when building styles to work regardless of the [text orientation](text-orientation) and [writing mode](css_writing_modes).


Try it
------



 This property affects the corner between the block-end and the inline-end sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the [`border-bottom-right-radius`](border-bottom-right-radius) property.


Syntax
------



```
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-end-radius: 1em 2em;

/\* Global values \*/
border-end-end-radius: inherit;
border-end-end-radius: initial;
border-end-end-radius: revert;
border-end-end-radius: revert-layer;
border-end-end-radius: unset;

```
### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-end-end-radius =   
  <'border-top-left-radius'>    
  

```
Examples
--------


### Border radius with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example</p>
</div>

```
 #### CSS Content

 
```
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-radius-properties](https://w3c.github.io/csswg-drafts/css-logical/#border-radius-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-end-end-radius` | 89 | 89 | 66 | No | 75 | 15 | 89 | 89 | 66 | 63 | 15 | 15.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical property: [`border-bottom-right-radius`](border-bottom-right-radius)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius>

border-end-start-radius
=======================


The `border-end-start-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a logical border radius on an element, which maps to a physical border radius depending on the element's [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). This is useful when building styles to work regardless of the [text orientation](text-orientation) and [writing mode](css_writing_modes).


Try it
------



 This property affects the corner between the block-end and the inline-start sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the [`border-bottom-left-radius`](border-bottom-left-radius) property.


Syntax
------



```
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-start-radius: 10px;
border-end-start-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-start-radius: 1em 2em;

/\* Global values \*/
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-radius: unset;

```
### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-end-start-radius =   
  <'border-top-left-radius'>    
  

```
Examples
--------


### Border radius with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example</p>
</div>

```
 #### CSS

 
```
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-radius-properties](https://w3c.github.io/csswg-drafts/css-logical/#border-radius-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-end-start-radius` | 89 | 89 | 66 | No | 75 | 15 | 89 | 89 | 66 | 63 | 15 | 15.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical property: [`border-top-right-radius`](border-top-right-radius)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius>

border-image-slice
==================


The `border-image-slice` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property divides the image specified by [`border-image-source`](border-image-source) into regions. These regions form the components of an element's [border image](border-image).


Try it
------



 The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

 [![The nine regions defined by the border-image or border-image-slice properties]

 The above diagram illustrates the location of each region.

 * Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
* Zones 5-8 are edge regions. These are [repeated, scaled, or otherwise modified](border-image-repeat) in the final border image to match the dimensions of the element.
* Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword `fill` is set.

 The [`border-image-repeat`](border-image-repeat), [`border-image-width`](border-image-width), and [`border-image-outset`](border-image-outset) properties determine how these regions are used to form the final border image.


Syntax
------




```
/\* All sides \*/
border-image-slice: 30%;

/\* top and bottom | left and right \*/
border-image-slice: 10% 30%;

/\* top | left and right | bottom \*/
border-image-slice: 30 30% 45;

/\* top | right | bottom | left \*/
border-image-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
border-image-slice: 10% fill 7 12;

/\* Global values \*/
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: revert;
border-image-slice: revert-layer;
border-image-slice: unset;

```
 The `border-image-slice` property may be specified using one to four `<number-percentage>` values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to `100%`.

 * When **one** position is specified, it creates all four slices at the same distance from their respective sides.
* When **two** positions are specified, the first value creates slices measured from the **top and bottom**, the second creates slices measured from the **left and right**.
* When **three** positions are specified, the first value creates a slice measured from the **top**, the second creates slices measured from the **left and right**, the third creates a slice measured from the **bottom**.
* When **four** positions are specified, they create slices measured from the **top**, **right**, **bottom**, and **left** in that order (clockwise).

 The optional `fill` value, if used, can be placed anywhere in the declaration.


### Values


 [`<number>`](number)  Represents an edge offset in *pixels* for raster images and *coordinates* for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

  [`<percentage>`](percentage)  Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.

  `fill`  Preserves the middle image region and displays it like a background image, but stacked above the actual [`background`](background). Its width and height are sized to match the top and left image regions, respectively.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `100%` |
| Applies to | all elements, except internal table elements when [`border-collapse`](border-collapse) is `collapse`. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the size of the border image |
| [Computed value](computed_value) | one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
border-image-slice =   
  [[](value_definition_syntax#brackets) [<number [0,∞]>](number) [|](value_definition_syntax#single_bar) [<percentage [0,∞]>](percentage) []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces)  [&&](value_definition_syntax#double_ampersand)  
  fill[?](value_definition_syntax#question_mark)                                           
  

```
Examples
--------


### Adjustable border width and slice



The following example shows a simple `<div>` with a border image set on it. The source image for the borders is as follows:

  ![nice multi-colored diamonds] 

 The diamonds are 30px across, therefore setting 30 pixels as the value for both [`border-width`](border-width) and `border-image-slice` will get you complete and fairly crisp diamonds in your border:

 
```
border-width: 30px;
border-image-slice: 30;

```
 These are the default values we have used in this example. However, we have also provided two sliders to allow you to dynamically change the values of the above two properties, allowing you to appreciate the effect they have:

 `border-image-slice` Changes the size of the image slice sampled for use in each border and border corner (and the content area, if the `fill` keyword is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects.

 `border-width`: Changes the width of the border. The sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixelated (unless of course you use an SVG image).

 #### HTML

 
```
<div class="wrapper">
  <div></div>
</div>

<ul>
  <li>
    <label for="width">slide to adjust <code>border-width</code></label>
    <input type="range" min="10" max="45" id="width" />
    <output id="width-output">30px</output>
  </li>
  <li>
    <label for="slice">slide to adjust <code>border-image-slice</code></label>
    <input type="range" min="10" max="45" id="slice" />
    <output id="slice-output">30</output>
  </li>
</ul>

```
 #### CSS

 
```
.wrapper {
  width: 400px;
  height: 300px;
}

div > div {
  width: 300px;
  height: 200px;
  border-width: 30px;
  border-style: solid;
  border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
  border-image-slice: 30;
  border-image-repeat: round;
}

li {
  display: flex;
  place-content: center;
}

```
 #### JavaScript

 
```
const widthSlider = document.getElementById("width");
const sliceSlider = document.getElementById("slice");
const widthOutput = document.getElementById("width-output");
const sliceOutput = document.getElementById("slice-output");
const divElem = document.querySelector("div > div");

widthSlider.addEventListener("input", () => {
  const newValue = `${widthSlider.value}px`;
  divElem.style.borderWidth = newValue;
  widthOutput.textContent = newValue;
});

sliceSlider.addEventListener("input", () => {
  const newValue = sliceSlider.value;
  divElem.style.borderImageSlice = newValue;
  sliceOutput.textContent = newValue;
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-image-slice](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-image-slice) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-image-slice` | 15 | 12 | 15["Small SVGs are incorrectly stretched, because percentages in [`border-image-slice`](https://developer.mozilla.org/docs/Web/CSS/border-image-slice) are computed to integers instead of floats ([bug 1284797](https://bugzil.la/1284797)).", "Until Firefox 47, SVGs without viewport were not sliced correctly ([bug 619500](https://bugzil.la/619500)).", "From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched ([bug 1264809](https://bugzil.la/1264809)).", "Until Firefox 57, an issue persisted for SVGs without viewport when [e10s](https://wiki.mozilla.org/Electrolysis) was disabled ([bug 1290782](https://bugzil.la/1290782))."] | 11 | 15 | 6 | 4.44 | 18 | 15["Small SVGs are incorrectly stretched, because percentages in [`border-image-slice`](https://developer.mozilla.org/docs/Web/CSS/border-image-slice) are computed to integers instead of floats ([bug 1284797](https://bugzil.la/1284797)).", "Until Firefox 47, SVGs without viewport were not sliced correctly ([bug 619500](https://bugzil.la/619500)).", "From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched ([bug 1264809](https://bugzil.la/1264809)).", "Until Firefox 57, an issue persisted for SVGs without viewport when [e10s](https://wiki.mozilla.org/Electrolysis) was disabled ([bug 1290782](https://bugzil.la/1290782))."] | 14 | 6 | 1.0 |


See also
--------


* [Illustrated description of the 1-to-4-value syntax](shorthand_properties#tricky_edge_cases)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice>

border-image-source
===================


The `border-image-source` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the source image used to create an element's [border image](border-image).


Try it
------



 The [`border-image-slice`](border-image-slice) property is used to divide the source image into regions, which are then dynamically applied to the final border image.


Syntax
------



```
/\* Keyword value \*/
border-image-source: none;

/\* <image> values \*/
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

/\* Global values \*/
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;

```
### Values


 `none`  No border image is used. The appearance defined by [`border-style`](border-style) is displayed instead.

  [`<image>`](image)  Image reference to use for the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements, except internal table elements when [`border-collapse`](border-collapse) is `collapse`. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | `none` or the image with its URI made absolute |
| Animation type | discrete |

Formal syntax
-------------



```
border-image-source =   
  none     [|](value_definition_syntax#single_bar)  
  <image>    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Basic example



```
.box {
  border-image-source: url("image.png");
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-image-source](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-image-source) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-image-source` | 15 | 12 | 15 | 11 | 15 | 6 | 4.4 | 18 | 15 | 14 | 6 | 1.0 |


See also
--------


* [`border`](border)
* [`outline`](outline)
* [`box-shadow`](box-shadow)
* [`background-image`](background-image)
* [`url()`](url) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source>

border-image-width
==================


The `border-image-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of an element's [border image](border-image).


Try it
------



 If this property's value is greater than the element's [`border-width`](border-width), the border image will extend beyond the padding (and/or content) edge.


Syntax
------




```
/\* Keyword value \*/
border-image-width: auto;

/\* <length> value \*/
border-image-width: 1rem;

/\* <percentage> value \*/
border-image-width: 25%;

/\* <number> value \*/
border-image-width: 3;

/\* top and bottom | left and right \*/
border-image-width: 2em 3em;

/\* top | left and right | bottom \*/
border-image-width: 5% 15% 10%;

/\* top | right | bottom | left \*/
border-image-width: 5% 2em 10% auto;

/\* Global values \*/
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

```
 The `border-image-width` property may be specified using one, two, three, or four values chosen from the list of values below.

 * When **one** value is specified, it applies the same width to **all four sides**.
* When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 `<length-percentage>`  The width of the border, specified as a [`<length>`](length) or a [`<percentage>`](percentage). Percentages are relative to the *width* of the border image area for horizontal offsets and the *height* of the border image area for vertical offsets. Must not be negative.

  `<number>`  The width of the border, specified as a multiple of the corresponding [`border-width`](border-width). Must not be negative.

  `auto`  The width of the border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding [`border-image-slice`](border-image-slice). If the image does not have the required intrinsic dimension, the corresponding `border-width` is used instead.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `1` |
| Applies to | all elements, except internal table elements when [`border-collapse`](border-collapse) is `collapse`. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width or height of the border image area |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

Formal syntax
-------------



```
border-image-width =   
  [[](value_definition_syntax#brackets) [<length-percentage [0,∞]>](length-percentage) [|](value_definition_syntax#single_bar) [<number [0,∞]>](number) [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Tiling a border image



This example creates a border image using the following ".png" file, which is 90 by 90 pixels:

  ![Square image containing eight circles. The circles in each corner are light purple. The four side circles are blue. The area in the middle, where a ninth circle could fit, is blank.] 

 Thus, each circle in the source image is 30 by 30 pixels.

 #### HTML

 
```
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

```
 #### CSS

 
```
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-image-width](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-image-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-image-width` | 15 | 12 | 13 | 11 | 15 | 6 | 4.4 | 18 | 14 | 14 | 6 | 1.0 |


See also
--------


* [Backgrounds and borders](css_backgrounds_and_borders)
* [Learn CSS: Backgrounds and borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width>

border-inline
=============


The `border-inline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for setting the individual logical inline border property values in a single place in the style sheet.


Try it
------



 The physical borders to which `border-inline` maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top`](border-top) and [`border-bottom`](border-bottom) or [`border-right`](border-right), and [`border-left`](border-left) properties, depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 The borders in the other dimension can be set with [`border-block`](border-block), which sets [`border-block-start`](border-block-start), and [`border-block-end`](border-block-end).


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-inline-color`](border-inline-color)
* [`border-inline-style`](border-inline-style)
* [`border-inline-width`](border-inline-width)


Syntax
------



```
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;

/\* Global values \*/
border-inline: inherit;
border-inline: initial;
border-inline: revert;
border-inline: revert-layer;
border-inline: unset;

```
### Values



The `border-inline` is specified with one or more of the following, in any order:

  `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  [`<color>`](color_value)  The color of the border.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-inline-width`](border-inline-width): `medium`
* [`border-inline-style`](border-inline-style): `none`
* [`border-inline-color`](border-inline-color): `currentcolor`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-inline-width`](border-inline-width): absolute length; `0` if the border style is `none` or `hidden`
* [`border-inline-style`](border-inline-style): as specified
* [`border-inline-color`](border-inline-color): computed color
 |
| Animation type | discrete |

Formal syntax
-------------



```
border-inline =   
  <'border-block-start'>    
  

```
Examples
--------


### Border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-inline](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline>

border-inline-color
===================


The `border-inline-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top-color`](border-top-color) and [`border-bottom-color`](border-bottom-color), or [`border-right-color`](border-right-color) and [`border-left-color`](border-left-color) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------



 The border color in the other dimension can be set with [`border-block-color`](border-block-color) which sets [`border-block-start-color`](border-block-start-color), and [`border-block-end-color`](border-block-end-color).


Syntax
------



```
border-inline-color: yellow;
border-inline-color: #f5f6f7;

/\* Global values \*/
border-inline-color: inherit;
border-inline-color: initial;
border-inline-color: revert;
border-inline-color: revert-layer;
border-inline-color: unset;

```
### Values


 [`<color>`](color_value)  The color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | discrete |

Formal syntax
-------------



```
border-inline-color =   
  <'border-top-color'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Border color with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-inline-color](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-inline-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-color` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to the physical border properties: [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-color>

border-inline-end
=================


The `border-inline-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for setting the individual logical inline-end border property values in a single place in the style sheet.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-inline-end-color`](border-inline-end-color)
* [`border-inline-end-style`](border-inline-end-style)
* [`border-inline-end-width`](border-inline-end-width)


Syntax
------




```
border-inline-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

/\* Global values \*/
border-inline-end: inherit;
border-inline-end: initial;
border-inline-end: revert;
border-inline-end: revert-layer;
border-inline-end: unset;

```
 The physical border to which `border-inline-end` maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 Related properties are [`border-block-start`](border-block-start), [`border-block-end`](border-block-end), and [`border-inline-start`](border-inline-start), which define the other borders of the element.


### Values



The `border-inline-end` is specified with one or more of the following, in any order:

  `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  [`<color>`](color_value)  The color of the border.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-top-width`](border-top-width): `medium`
	+ [`border-right-width`](border-right-width): `medium`
	+ [`border-bottom-width`](border-bottom-width): `medium`
	+ [`border-left-width`](border-left-width): `medium`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-top-style`](border-top-style): `none`
	+ [`border-right-style`](border-right-style): `none`
	+ [`border-bottom-style`](border-bottom-style): `none`
	+ [`border-left-style`](border-left-style): `none`
* [`color`](color): `canvastext`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden`
	+ [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden`
	+ [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden`
	+ [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-bottom-style`](border-bottom-style): as specified
	+ [`border-left-style`](border-left-style): as specified
	+ [`border-right-style`](border-right-style): as specified
	+ [`border-top-style`](border-top-style): as specified
* [`border-inline-end-color`](border-inline-end-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-inline-end-color`](border-inline-end-color): a [color](color_value#interpolation)
* [`border-inline-end-style`](border-inline-end-style): discrete
* [`border-inline-end-width`](border-inline-end-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-inline-end =   
  <'border-top-width'>  [||](value_definition_syntax#double_bar)  
  <'border-top-style'>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)                 
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-end: 5px dashed blue;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-shorthands](https://w3c.github.io/csswg-drafts/css-logical/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-end` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end>

border-image
============


The `border-image` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property draws an image around a given element. It replaces the element's regular <border>.


Try it
------



  **Note:** You should specify a separate [`border-style`](border-style) in case the border image fails to load. Although the specification doesn't strictly require it, some browsers don't render the border image if [`border-style`](border-style) is `none` or [`border-width`](border-width) is `0`.

 
Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-image-outset`](border-image-outset)
* [`border-image-repeat`](border-image-repeat)
* [`border-image-slice`](border-image-slice)
* [`border-image-source`](border-image-source)
* [`border-image-width`](border-image-width)


Syntax
------




```
/\* source | slice \*/
border-image: linear-gradient(red, blue) 27;

/\* source | slice | repeat \*/
border-image: url("/images/border.png") 27 space;

/\* source | slice | width \*/
border-image: linear-gradient(red, blue) 27 / 35px;

/\* source | slice | width | outset | repeat \*/
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

/\* Global values \*/
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

```
 The `border-image` property may be specified with anywhere from one to five of the values listed below.

  **Note:** If the [computed value](computed_value) of [`border-image-source`](border-image-source) is `none`, or if the image cannot be displayed, the [`border-style`](border-style) will be displayed instead.

 
### Values


 `<'border-image-source'>`  The source image. See [`border-image-source`](border-image-source).

  `<'border-image-slice'>`  The dimensions for slicing the source image into regions. Up to four values may be specified. See [`border-image-slice`](border-image-slice).

  `<'border-image-width'>`  The width of the border image. Up to four values may be specified. See [`border-image-width`](border-image-width).

  `<'border-image-outset'>`  The distance of the border image from the element's outside edge. Up to four values may be specified. See [`border-image-outset`](border-image-outset).

  `<'border-image-repeat'>`  Defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. Up to two values may be specified. See [`border-image-repeat`](border-image-repeat).

  Accessibility concerns
----------------------



Assistive technology cannot parse border images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-image-source`](border-image-source): `none`
* [`border-image-slice`](border-image-slice): `100%`
* [`border-image-width`](border-image-width): `1`
* [`border-image-outset`](border-image-outset): `0`
* [`border-image-repeat`](border-image-repeat): `stretch`
 |
| Applies to | all elements, except internal table elements when [`border-collapse`](border-collapse) is `collapse`. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`border-image-slice`](border-image-slice): refer to the size of the border image
* [`border-image-width`](border-image-width): refer to the width or height of the border image area
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-image-outset`](border-image-outset): as specified, but with relative lengths converted into absolute lengths
* [`border-image-repeat`](border-image-repeat): as specified
* [`border-image-slice`](border-image-slice): one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* [`border-image-source`](border-image-source): `none` or the image with its URI made absolute
* [`border-image-width`](border-image-width): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | discrete |

Formal syntax
-------------



```
border-image =   
  <'border-image-source'>                             [||](value_definition_syntax#double_bar)  
  <'border-image-slice'> [[](value_definition_syntax#brackets) / <'border-image-width'> [|](value_definition_syntax#single_bar) / <'border-image-width'>[?](value_definition_syntax#question_mark) / <'border-image-outset'> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [||](value_definition_syntax#double_bar)  
  <'border-image-repeat'>                               
  

```
Examples
--------


### Bitmap



In this example, we will apply a diamond pattern to an element's borders. The source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally:

  ![an example borderimage] 

 #### HTML

 
```
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

```
 #### CSS

 To match the size of a single diamond, we will use a value of 81 divided by 3, or `27`, for slicing the image into corner and edge regions. To center the border image on the edge of the element's background, we will make the outset values equal to half of the width values. Finally, a repeat value of `round` will make the border slices fit evenly, i.e., without clipping or gaps.

 
```
#bitmap {
  width: 200px;
  background-color: #ffa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") /\* source \*/ 27 / /\* slice \*/ 36px 28px 18px
    8px / /\* width \*/ 18px 14px 9px 4px /\* outset \*/ round; /\* repeat \*/
}

```
 #### Result



### Gradient



#### HTML

 
```
<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>

```
 #### CSS

 
```
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
  padding: 20px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-image](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-image) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-image` | 167 | 1212 | 15["Small SVGs are incorrectly stretched, because percentages in [`border-image-slice`](https://developer.mozilla.org/docs/Web/CSS/border-image-slice) are computed to integers instead of floats ([bug 1284797](https://bugzil.la/1284797)).", "Until Firefox 47, SVGs without viewport were not sliced correctly ([bug 619500](https://bugzil.la/619500)).", "From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched ([bug 1264809](https://bugzil.la/1264809)).", "Until Firefox 57, an issue persisted for SVGs without viewport when [e10s](https://wiki.mozilla.org/Electrolysis) was disabled ([bug 1290782](https://bugzil.la/1290782))."]3.5Before Firefox 15, an earlier version of the specification was implemented, prefixed. | 11 | 1110.5–15 | 63 | 4.42 | 1818 | 15["Small SVGs are incorrectly stretched, because percentages in [`border-image-slice`](https://developer.mozilla.org/docs/Web/CSS/border-image-slice) are computed to integers instead of floats ([bug 1284797](https://bugzil.la/1284797)).", "Until Firefox 47, SVGs without viewport were not sliced correctly ([bug 619500](https://bugzil.la/619500)).", "From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched ([bug 1264809](https://bugzil.la/1264809)).", "Until Firefox 57, an issue persisted for SVGs without viewport when [e10s](https://wiki.mozilla.org/Electrolysis) was disabled ([bug 1290782](https://bugzil.la/1290782))."]4Before Firefox 15, an earlier version of the specification was implemented, prefixed. | 1111–14 | 63.2 | 1.01.0 |
| `fill` | 16 | 12 | 15 | 11 | 15 | 6 | ≤37 | 18 | 15 | 14 | 6 | 1.0 |
| `gradient` | 7 | 12 | 29 | 11 | 15 | 4 | ≤37 | 18 | 29 | 14 | 3.2 | 1.0 |
| `optional_border_image_slice` | 16 | 12 | 15 | 11 | 15 | 6 | ≤37 | 18 | 15 | 14 | 6 | 1.0 |


See also
--------


* [`border`](border)
* [`outline`](outline)
* [`box-shadow`](box-shadow)
* [`background-image`](background-image)
* [`url()`](url) function
* Gradient functions: [`conic-gradient()`](gradient/conic-gradient), [`repeating-conic-gradient()`](gradient/repeating-conic-gradient), [`linear-gradient()`](gradient/linear-gradient), [`repeating-linear-gradient()`](gradient/repeating-linear-gradient), [`radial-gradient()`](gradient/radial-gradient), [`repeating-radial-gradient()`](gradient/repeating-radial-gradient)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-image>

border-inline-end-width
=======================


The `border-inline-end-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), or [`border-left-width`](border-left-width) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-width'> values \*/
border-inline-end-width: 2px;
border-inline-end-width: thick;

/\* Global values \*/
border-inline-end-width: inherit;
border-inline-end-width: initial;
border-inline-end-width: revert;
border-inline-end-width: revert-layer;
border-inline-end-width: unset;

```
 Related properties are [`border-block-start-width`](border-block-start-width), [`border-block-end-width`](border-block-end-width), and [`border-inline-start-width`](border-inline-start-width), which define the other border widths of the element.


### Values


 `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-inline-end-width =   
  <'border-top-width'>    
  

```
Examples
--------


### Applying a border with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-width](https://w3c.github.io/csswg-drafts/css-logical/#border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-end-width` | 69 | 79 | 413 | No | 56 | 12.1 | 69 | 69 | 414 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-left-width`](border-left-width)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-width>

border-inline-start-color
=========================


The `border-inline-start-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
border-inline-start-color: red;
border-inline-start-color: #ee4141;

/\* Global values \*/
border-inline-start-color: inherit;
border-inline-start-color: initial;
border-inline-start-color: revert;
border-inline-start-color: revert-layer;
border-inline-start-color: unset;

```
 Related properties are [`border-block-start-color`](border-block-start-color), [`border-block-end-color`](border-block-end-color), and [`border-inline-end-color`](border-inline-end-color), which define the other border colors of the element.


### Values


 [`<color>`](color_value)  The color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-inline-start-color =   
  <'border-top-color'>    
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-start-color: red;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-color](https://w3c.github.io/csswg-drafts/css-logical/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-start-color` | 69 | 79 | 413 | No | 56 | 12.1 | 69 | 69 | 414 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), and [`border-left-color`](border-left-color)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color>

border-inline-end-color
=======================


The `border-inline-end-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

/\* Global values \*/
border-inline-end-color: inherit;
border-inline-end-color: initial;
border-inline-end-color: revert;
border-inline-end-color: revert-layer;
border-inline-end-color: unset;

```
 Related properties are [`border-block-start-color`](border-block-start-color), [`border-block-end-color`](border-block-end-color), and [`border-inline-start-color`](border-inline-start-color), which define the other border colors of the element.


### Values


 [`<color>`](color_value)  The color of the border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-inline-end-color =   
  <'border-top-color'>    
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-color](https://w3c.github.io/csswg-drafts/css-logical/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-end-color` | 69 | 79 | 413 | No | 56 | 12.1 | 69 | 69 | 414 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-color`](border-top-color), [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), or [`border-left-color`](border-left-color).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color>

border-inline-start
===================


The `border-inline-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for setting the individual logical inline-start border property values in a single place in the style sheet.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-inline-start-color`](border-inline-start-color)
* [`border-inline-start-style`](border-inline-start-style)
* [`border-inline-start-width`](border-inline-start-width)


Syntax
------




```
border-inline-start: 1px;
border-inline-start: 2px dotted;
border-inline-start: medium dashed green;

/\* Global values \*/
border-inline-start: inherit;
border-inline-start: initial;
border-inline-start: revert;
border-inline-start: revert-layer;
border-inline-start: unset;

```
 The physical border to which `border-inline-start` maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 Related properties are [`border-block-start`](border-block-start), [`border-block-end`](border-block-end), and [`border-inline-end`](border-inline-end), which define the other borders of the element.


### Values



The `border-inline-start` is specified with one or more of the following, in any order:

  `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  [`<color>`](color_value)  The color of the border.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-top-width`](border-top-width): `medium`
	+ [`border-right-width`](border-right-width): `medium`
	+ [`border-bottom-width`](border-bottom-width): `medium`
	+ [`border-left-width`](border-left-width): `medium`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-top-style`](border-top-style): `none`
	+ [`border-right-style`](border-right-style): `none`
	+ [`border-bottom-style`](border-bottom-style): `none`
	+ [`border-left-style`](border-left-style): `none`
* [`color`](color): `canvastext`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-width`](border-width): as each of the properties of the shorthand:
	+ [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden`
	+ [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden`
	+ [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden`
	+ [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
* [`border-style`](border-style): as each of the properties of the shorthand:
	+ [`border-bottom-style`](border-bottom-style): as specified
	+ [`border-left-style`](border-left-style): as specified
	+ [`border-right-style`](border-right-style): as specified
	+ [`border-top-style`](border-top-style): as specified
* [`border-inline-start-color`](border-inline-start-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-inline-start-color`](border-inline-start-color): a [color](color_value#interpolation)
* [`border-inline-start-style`](border-inline-start-style): discrete
* [`border-inline-start-width`](border-inline-start-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-inline-start =   
  <'border-top-width'>  [||](value_definition_syntax#double_bar)  
  <'border-top-style'>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)                 
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  border-inline-start: 5px dashed blue;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-shorthands](https://w3c.github.io/csswg-drafts/css-logical/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-start` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top`](border-top), [`border-right`](border-right), [`border-bottom`](border-bottom), or [`border-left`](border-left).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start>

border-inline-start-style
=========================


The `border-inline-start-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-style'> values \*/
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: groove;

/\* Global values \*/
border-inline-start-style: inherit;
border-inline-start-style: initial;
border-inline-start-style: revert;
border-inline-start-style: revert-layer;
border-inline-start-style: unset;

```
 Related properties are [`border-block-start-style`](border-block-start-style), [`border-block-end-style`](border-block-end-style), and [`border-inline-end-style`](border-inline-end-style), which define the other border styles of the element.


### Values


 `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-inline-start-style =   
  <'border-top-style'>    
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-style](https://w3c.github.io/csswg-drafts/css-logical/#border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-start-style` | 69 | 79 | 413 | No | 56 | 12.1 | 69 | 69 | 414 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-style`](border-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style>

border-inline-end-style
=======================


The `border-inline-end-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-style'> values \*/
border-inline-end-style: dashed;
border-inline-end-style: dotted;
border-inline-end-style: groove;

/\* Global values \*/
border-inline-end-style: inherit;
border-inline-end-style: initial;
border-inline-end-style: revert;
border-inline-end-style: revert-layer;
border-inline-end-style: unset;

```
 Related properties are [`border-block-start-style`](border-block-start-style), [`border-block-end-style`](border-block-end-style), and [`border-inline-start-style`](border-inline-start-style), which define the other border styles of the element.


### Values


 `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-inline-end-style =   
  <'border-top-style'>    
  

```
Examples
--------


### Setting inline-end-style



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-end-style: dashed;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-style](https://w3c.github.io/csswg-drafts/css-logical/#border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-end-style` | 69 | 79 | 413 | No | 56 | 12.1 | 69 | 69 | 414 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-style`](border-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style>

border-inline-start-width
=========================


The `border-inline-start-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/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-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), or [`border-left-width`](border-left-width) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <'border-width'> values \*/
border-inline-start-width: 5px;
border-inline-start-width: thick;

/\* Global values \*/
border-inline-start-width: inherit;
border-inline-start-width: initial;
border-inline-start-width: revert;
border-inline-start-width: revert-layer;
border-inline-start-width: unset;

```
 Related properties are [`border-block-start-width`](border-block-start-width), [`border-block-end-width`](border-block-end-width), and [`border-inline-end-width`](border-inline-end-width), which define the other border widths of the element.


### Values


 `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-inline-start-width =   
  <'border-top-width'>    
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-start-width: 5px;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-width](https://w3c.github.io/csswg-drafts/css-logical/#border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-start-width` | 69 | 79 | 41 | No | 56 | 12.1 | 69 | 69 | 41 | 48 | 12.2 | 10.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-left-width`](border-left-width)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-width>

border-inline-style
===================


The `border-inline-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top-style`](border-top-style) and [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style) and [`border-right-style`](border-right-style) properties depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------



 The border style in the other dimension can be set with [`border-block-style`](border-block-style), which sets [`border-block-start-style`](border-block-start-style), and [`border-block-end-style`](border-block-end-style).


Syntax
------



```
/\* <'border-style'> values \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: groove;

/\* Global values \*/
border-inline-style: inherit;
border-inline-style: initial;
border-inline-style: revert;
border-inline-style: revert-layer;
border-inline-style: unset;

```
### Values


 `<'border-style'>`  The line style of the border. See [`border-style`](border-style).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-inline-style =   
  <'border-top-style'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting border-inline-style



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-style: dashed;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-inline-style](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-inline-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-style` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-style`](border-top-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), or [`border-left-style`](border-left-style).
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-style>

border-inline-width
===================


The `border-inline-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`border-top-width`](border-top-width) and [`border-bottom-width`](border-bottom-width), or [`border-left-width`](border-left-width), and [`border-right-width`](border-right-width) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------



 The border width in the other dimension can be set with [`border-block-width`](border-block-width), which sets [`border-block-start-width`](border-block-start-width), and [`border-block-end-width`](border-block-end-width).


Syntax
------



```
/\* <'border-width'> values \*/
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

/\* Global values \*/
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;

```
### Values


 `<'border-width'>`  The width of the border. See [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | discrete |

Formal syntax
-------------



```
border-inline-width =   
  <'border-top-width'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### HTML



```
<div>
  <p class="exampleText">Example text</p>
</div>

```
### CSS




```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-border-inline-width](https://w3c.github.io/csswg-drafts/css-logical/#propdef-border-inline-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-inline-width` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* This property maps to one of the physical border properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-left-width`](border-left-width)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-width>

border-left
===========


The `border-left` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets all the properties of an element's left <border>.


Try it
------



 As with all shorthand properties, `border-left` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

 
```
border-left-style: dotted;
border-left: thick green;

```
 It is actually the same as this one:

 
```
border-left-style: dotted;
border-left: none thick green;

```
 The value of [`border-left-style`](border-left-style) given before `border-left` is ignored. Since the default value of [`border-left-style`](border-left-style) is `none`, not specifying the `border-style` part results in no border.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-left-color`](border-left-color)
* [`border-left-style`](border-left-style)
* [`border-left-width`](border-left-width)


Syntax
------




```
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;

/\* Global values \*/
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;

```
 The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.


### Values


 `<br-width>`  See [`border-left-width`](border-left-width).

  `<br-style>`  See [`border-left-style`](border-left-style).

  [`<color>`](color_value)  See [`border-left-color`](border-left-color).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-left-width`](border-left-width): `medium`
* [`border-left-style`](border-left-style): `none`
* [`border-left-color`](border-left-color): `currentcolor`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden`
* [`border-left-style`](border-left-style): as specified
* [`border-left-color`](border-left-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-left-color`](border-left-color): a [color](color_value#interpolation)
* [`border-left-style`](border-left-style): discrete
* [`border-left-width`](border-left-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-left =   
  <line-width>  [||](value_definition_syntax#double_bar)  
  <line-style>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)         
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Applying a left border



#### HTML

 
```
<div>This box has a border on the left side.</div>

```
 #### CSS

 
```
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-shorthands](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-left` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`border`](border)
* [`border-block`](border-block)
* [`outline`](outline)
* [Backgrounds and borders](css_backgrounds_and_borders)
* [Learn CSS: Backgrounds and borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-left>

border-left-color
=================


The `border-left-color` CSS property sets the color of an element's left <border>. It can also be set with the shorthand CSS properties [`border-color`](border-color) or [`border-left`](border-left).


Try it
------


Syntax
------




```
/\* <color> values \*/
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255 0 0);
border-left-color: hsl(100deg 50% 25% / 0.75);
border-left-color: currentcolor;
border-left-color: transparent;

/\* Global values \*/
border-left-color: inherit;
border-left-color: initial;
border-left-color: revert;
border-left-color: revert-layer;
border-left-color: unset;

```
 The `border-left-color` property is specified as a single value.


### Values


 [`<color>`](color_value)  The color of the left border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-left-color =   
  [<color>](color_value)    
  

```
Examples
--------


### A simple div with a border



#### HTML

 
```
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>

```
 #### CSS

 
```
.mybox {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}

.redtext {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-color](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-left-color` | 1 | 12 | 1Firefox also supports the non-standard `-moz-border-left-colors` CSS property that sets the bottom border to multiple colors. | 4 | 3.5 | 1 | 4.4 | 18 | 4Firefox also supports the non-standard `-moz-border-left-colors` CSS property that sets the bottom border to multiple colors. | 10.1 | 1 | 1.0 |


See also
--------


* The border-related CSS shorthand properties: [`border`](border), [`border-left`](border-left), and [`border-color`](border-color).
* The color-related CSS properties for the other borders: [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), and [`border-top-color`](border-top-color).
* The other border-related CSS properties applying to the same border: [`border-left-style`](border-left-style) and [`border-left-width`](border-left-width).
* The default [`currentcolor`](color_value#currentcolor_keyword) color value.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color>

border-left-width
=================


The `border-left-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the left border of an element.


Try it
------


Syntax
------



```
/\* Keyword values \*/
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/\* <length> values \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/\* Global keywords \*/
border-left-width: inherit;
border-left-width: initial;
border-left-width: revert;
border-left-width: revert-layer;
border-left-width: unset;

```
### Values



 `<line-width>`  Defines the width of the border, either as an explicit nonnegative [`<length>`](length) or a keyword. If it's a keyword, it must be one of the following values:

 * `thin`
* `medium`
* `thick`

    **Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-left-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Comparing border widths



#### HTML

 
```
<div>Element 1</div>
<div>Element 2</div>

```
 #### CSS

 
```
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-width](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-left-width` | 1 | 12 | 1 | 4 | 3.5 | 1 | 2.2 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* The other border-width-related CSS properties: [`border-top-width`](border-top-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-width`](border-width).
* The other border-left-related CSS properties: [`border`](border), [`border-left`](border-left), [`border-left-style`](border-left-style), and [`border-left-color`](border-left-color).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width>

border-radius
=============


The `border-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.


Try it
------



 The radius applies to the whole [`background`](background), even if the element has no border; the exact position of the clipping is defined by the [`background-clip`](background-clip) property.

 The `border-radius` property does not apply to table elements when [`border-collapse`](border-collapse) is `collapse`.

  **Note:** As with any shorthand property, individual sub-properties cannot inherit, such as in `border-radius:0 0 inherit inherit`, which would partially override existing definitions. Instead, the individual longhand properties have to be used.

 
Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-top-left-radius`](border-top-left-radius)
* [`border-top-right-radius`](border-top-right-radius)
* [`border-bottom-right-radius`](border-bottom-right-radius)
* [`border-bottom-left-radius`](border-bottom-left-radius)


Syntax
------




```
/\* The syntax of the first radius allows one to four values \*/
/\* Radius is set for all 4 sides \*/
border-radius: 10px;

/\* top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5%;

/\* top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 2px 4px 2px;

/\* top-left | top-right | bottom-right | bottom-left \*/
border-radius: 1px 0 3px 4px;

/\* The syntax of the second radius allows one to four values \*/
/\* (first radius values) / radius \*/
border-radius: 10px / 20px;

/\* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5% / 20px 30px;

/\* (first radius values) / top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 10px 5px 2em / 20px 25px 30%;

/\* (first radius values) / top-left | top-right | bottom-right | bottom-left \*/
border-radius: 10px 5% / 20px 25em 30px 35em;

/\* Global values \*/
border-radius: inherit;
border-radius: initial;
border-radius: revert;
border-radius: revert-layer;
border-radius: unset;

```
 The `border-radius` property is specified as:

 * one, two, three, or four [`<length>`](length) or [`<percentage>`](percentage) values. This is used to set a single radius for the corners.
* followed optionally by "/" and one, two, three, or four `<length>` or `<percentage>` values. This is used to set an additional radius, so you can have elliptical corners.


### Values





|  |  |  |
| --- | --- | --- |
| *radius* | A light blue rectangle with a light gray border. All 4 corners are rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.  |
| *top-left-and-bottom-right* | A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.  |
| *top-right-and-bottom-left* | A light blue rectangle with a light gray border. The 2 corners on the top right and the bottom left are rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.  |
| *top-left* | A light blue rectangle with a light gray border. The corner on the top left is rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.  |
| *top-right* | A light blue rectangle with a light gray border. The corner on the top right is rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.  |
| *bottom-right* | A light blue rectangle with a light gray border. The bottom right corner is rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.  |
| *bottom-left* | A light blue rectangle with a light gray border. The bottom left corner is rounded. |  Is a [`<length>`](length) or a [`<percentage>`](percentage) denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.  |

  [`<length>`](length)  Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

  [`<percentage>`](percentage)  Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

   For example:

 
```
border-radius: 1em/5em;

/\* It is equivalent to: \*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

```
 
```
border-radius: 4px 3px 6px / 2px 4px;

/\* It is equivalent to: \*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

```

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-top-left-radius`](border-top-left-radius): `0`
* [`border-top-right-radius`](border-top-right-radius): `0`
* [`border-bottom-right-radius`](border-bottom-right-radius): `0`
* [`border-bottom-left-radius`](border-bottom-left-radius): `0`
 |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-bottom-left-radius`](border-bottom-left-radius): two absolute [`<length>`](length)s or [`<percentage>`](percentage)s
* [`border-bottom-right-radius`](border-bottom-right-radius): two absolute [`<length>`](length)s or [`<percentage>`](percentage)s
* [`border-top-left-radius`](border-top-left-radius): two absolute [`<length>`](length)s or [`<percentage>`](percentage)s
* [`border-top-right-radius`](border-top-right-radius): two absolute [`<length>`](length)s or [`<percentage>`](percentage)s
 |
| Animation type | as each of the properties of the shorthand:* [`border-top-left-radius`](border-top-left-radius): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`border-top-right-radius`](border-top-right-radius): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`border-bottom-right-radius`](border-bottom-right-radius): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`border-bottom-left-radius`](border-bottom-left-radius): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
 |

Formal syntax
-------------



```
border-radius =   
  [<length-percentage [0,∞]>](length-percentage)[{1,4}](value_definition_syntax#curly_braces) [[](value_definition_syntax#brackets) / [<length-percentage [0,∞]>](length-percentage)[{1,4}](value_definition_syntax#curly_braces) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------




### Live Samples


* Sample 1 : <https://jsfiddle.net/Tripad/qnGKj/2/>
* Sample 2 : <https://jsfiddle.net/Tripad/qnGKj/3/>
* Sample 3 : <https://jsfiddle.net/Tripad/qnGKj/4/>
* Sample 4 : <https://jsfiddle.net/Tripad/qnGKj/5/>
* Sample 5 : <https://jsfiddle.net/Tripad/qnGKj/6/>
Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-radius](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-radius) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `4_values_for_4_corners` | 4 | 12 | 4 | 9 | 10.5 | 5 | ≤37 | 18 | 4 | 11 | 4.2 | 1.0 |
| `border-radius` | 4Chrome ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value.1 | 1212 | 4["Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-style` was `solid`. This has been fixed in Firefox 50.", "To conform to the CSS3 standard, Firefox 4 changes the handling of [`<percentage>`](https://developer.mozilla.org/docs/Web/CSS/percentage) values to match the specification. You can specify an ellipse as a border on an arbitrary sized element with `border-radius: 50%;`. Firefox 4 also makes rounded corners clip content and images if [`overflow`](https://developer.mozilla.org/docs/Web/CSS/overflow)`: visible` is not set."]1–12 | 9 | 10.5Before Opera 11.60, replaced elements with `border-radius` do not have rounded corners. | 5Safari ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value.3 | ≤372 | 18 | 4Before Firefox 50, border styles of rounded corners (with `border-radius`) were always rendered as if `border-style` was `solid`. This has been fixed in Firefox 50.4–14 | 11 | 4.2Safari ignores `border-radius` on `<select>` elements unless `-webkit-appearance` is overridden to an appropriate value.1 | 1.0 |
| `elliptical_borders` | 1Before Chrome 4, the slash `/` notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. `-webkit-border-radius: 40px 10px;` is equivalent to `border-radius: 40px / 10px;`. | 12 | 4 | 9 | 10.5 | 3Before Safari 5, the slash `/` notation is unsupported. If two values are specified, then an elliptical border is drawn on all four corners. `-webkit-border-radius: 40px 10px;` is equivalent to `border-radius: 40px / 10px;`. | ≤37 | 18 | 4 | 11 | 4.2 | 1.0 |
| `percentages` | 8 | 12 | 4Before Firefox 4, `<percentage>` values are implemented in a non-standard way. Both horizontal and vertical radii were relative to the width of the border box. | 9 | 11.5Before Opera 11.5, the implementation of `<percentage>` values was buggy. | 5.1 | ≤37 | 18 | 4 | 11.5 | 5 | 1.0 |


See also
--------


* Border-radius-related CSS properties: [`border-top-left-radius`](border-top-left-radius), [`border-top-right-radius`](border-top-right-radius), [`border-bottom-right-radius`](border-bottom-right-radius), [`border-bottom-left-radius`](border-bottom-left-radius), [`border-start-start-radius`](border-start-start-radius), [`border-start-end-radius`](border-start-end-radius), [`border-end-start-radius`](border-end-start-radius), [`border-end-end-radius`](border-end-end-radius)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius>

border-right-width
==================


The `border-right-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the right border of an element.


Try it
------


Syntax
------



```
/\* Keyword values \*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* <length> values \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

/\* Global keywords \*/
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: revert-layer;
border-right-width: unset;

```
### Values



 `<line-width>`  Defines the width of the border, either as an explicit nonnegative [`<length>`](length) or a keyword. If it's a keyword, it must be one of the following values:

 * `thin`
* `medium`
* `thick`

    **Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-right-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Comparing border widths



#### HTML

 
```
<div>Element 1</div>
<div>Element 2</div>

```
 #### CSS

 
```
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-right-width: thick;
}
div:nth-child(2) {
  border-right-width: 2em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-width](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-right-width` | 1 | 12 | 1 | 4 | 3.5 | 1 | 2.2 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* The other border-width-related CSS properties: [`border-bottom-width`](border-bottom-width), [`border-left-width`](border-left-width), [`border-top-width`](border-top-width), and [`border-width`](border-width).
* The other border-right-related CSS properties: [`border`](border), [`border-right`](border-right), [`border-right-style`](border-right-style), and [`border-right-color`](border-right-color).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width>

border-spacing
==============


The `border-spacing` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the distance between the borders of adjacent cells in a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). This property applies only when [`border-collapse`](border-collapse) is `separate`.


Try it
------



 The `border-spacing` value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) `border-spacing` and the relevant (top, right, bottom, or left) [`padding`](padding) on the table.

  **Note:** The `border-spacing` property is equivalent to the deprecated `cellspacing` attribute of the `<table>` element, except that `border-spacing` has an optional second value that can be used to set different horizontal and vertical spacing.

 
Syntax
------




```
/\* <length> \*/
border-spacing: 2px;

/\* horizontal <length> | vertical <length> \*/
border-spacing: 1cm 2em;

/\* Global values \*/
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;

```
 The `border-spacing` property may be specified as either one or two values.

 * When **one** `<length>` value is specified, it defines both the horizontal and vertical spacings between cells.
* When **two** `<length>` values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent *columns*), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent *rows*).


### Values


 [`<length>`](length)  The size of the spacing as a fixed value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | `table` and `inline-table` elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | two absolute lengths |
| Animation type | discrete |

Formal syntax
-------------



```
border-spacing =   
  [<length>](length)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Spacing and padding table cells



This example applies a spacing of `.5em` vertically and `1em` horizontally between a table's cells. Note how, along its outside edges, the table's `padding` values are added to its `border-spacing` values.

 #### HTML

 
```
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

```
 #### CSS

 
```
table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders](https://w3c.github.io/csswg-drafts/css2/#separated-borders) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-spacing` | 1 | 12 | 1 | 8 | 4 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`border-collapse`](border-collapse), [`border-style`](border-style)
* The `border-spacing` property alters the appearance of the [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) HTML element.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing>

border-start-end-radius
=======================


The `border-start-end-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a logical border radius on an element, which maps to a physical border radius depending on the element's [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). This is useful when building styles to work regardless of the [text orientation](text-orientation) and [writing mode](css_writing_modes).


Try it
------



 This property affects the corner between the block-start and the inline-end sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the [`border-top-right-radius`](border-top-right-radius) property.


Syntax
------



```
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-start-end-radius: 10px;
border-start-end-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-start-end-radius: 1em 2em;

/\* Global values \*/
border-start-end-radius: inherit;
border-start-end-radius: initial;
border-start-end-radius: revert;
border-start-end-radius: revert-layer;
border-start-end-radius: unset;

```
### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-start-end-radius =   
  <'border-top-left-radius'>    
  

```
Examples
--------


### Border radius with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example</p>
</div>

```
 #### CSS

 
```
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-end-radius: 10px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-radius-properties](https://w3c.github.io/csswg-drafts/css-logical/#border-radius-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-start-end-radius` | 89 | 89 | 66 | No | 75 | 15 | 89 | 89 | 66 | 63 | 15 | 15.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical property: [`border-bottom-left-radius`](border-bottom-left-radius)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius>

border-left-style
=================


The `border-left-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style of an element's left [`border`](border).


Try it
------



  **Note:** The specification doesn't define how borders of different styles connect in the corners.

 
Syntax
------




```
/\* Keyword values \*/
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

/\* Global values \*/
border-left-style: inherit;
border-left-style: initial;
border-left-style: revert;
border-left-style: revert-layer;
border-left-style: unset;

```
 The `border-left-style` property is specified as a single keyword chosen from those available for the [`border-style`](border-style) property.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-left-style =   
  <line-style>    
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Setting border-left-style



#### HTML

 
```
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

```
 #### CSS

 
```
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-left-style example classes \*/
.b1 {
  border-left-style: none;
}
.b2 {
  border-left-style: hidden;
}
.b3 {
  border-left-style: dotted;
}
.b4 {
  border-left-style: dashed;
}
.b5 {
  border-left-style: solid;
}
.b6 {
  border-left-style: double;
}
.b7 {
  border-left-style: groove;
}
.b8 {
  border-left-style: ridge;
}
.b9 {
  border-left-style: inset;
}
.b10 {
  border-left-style: outset;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-style](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-left-style` | 1 | 12 | 1Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50. | 5.5 | 9.2 | 1 | 2.2 | 18 | 14Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50. | 14 | 1 | 1.0 |


See also
--------


* The other style-related border properties: [`border-bottom-style`](border-bottom-style), [`border-right-style`](border-right-style), [`border-top-style`](border-top-style), and [`border-style`](border-style).
* The other left-border-related properties: [`border-left`](border-left), [`border-left-color`](border-left-color), and [`border-left-width`](border-left-width).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style>

border-right
============


The `border-right` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets all the properties of an element's right <border>.


Try it
------



 As with all shorthand properties, `border-right` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

 
```
border-right-style: dotted;
border-right: thick green;

```
 It is actually the same as this one:

 
```
border-right-style: dotted;
border-right: none thick green;

```
 The value of [`border-right-style`](border-right-style) given before `border-right` is ignored. Since the default value of [`border-right-style`](border-right-style) is `none`, not specifying the `border-style` part results in no border.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-right-color`](border-right-color)
* [`border-right-style`](border-right-style)
* [`border-right-width`](border-right-width)


Syntax
------




```
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

/\* Global values \*/
border-right: inherit;
border-right: initial;
border-right: revert;
border-right: revert-layer;
border-right: unset;

```
 The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.


### Values


 `<br-width>`  See [`border-right-width`](border-right-width).

  `<br-style>`  See [`border-right-style`](border-right-style).

  [`<color>`](color_value)  See [`border-right-color`](border-right-color).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-right-width`](border-right-width): `medium`
* [`border-right-style`](border-right-style): `none`
* [`border-right-color`](border-right-color): `currentcolor`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden`
* [`border-right-style`](border-right-style): as specified
* [`border-right-color`](border-right-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-right-color`](border-right-color): a [color](color_value#interpolation)
* [`border-right-style`](border-right-style): discrete
* [`border-right-width`](border-right-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-right =   
  <line-width>  [||](value_definition_syntax#double_bar)  
  <line-style>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)         
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Applying a right border



#### HTML

 
```
<div>This box has a border on the right side.</div>

```
 #### CSS

 
```
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-shorthands](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-right` | 1 | 12 | 1 | 5.5 | 9.2 | 1 | ≤37 | 18 | 14 | 14 | 1 | 1.0 |


See also
--------


* [`border`](border)
* [`border-block`](border-block)
* [`outline`](outline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-right>

border-right-color
==================


The `border-right-color` CSS property sets the color of an element's right <border>. It can also be set with the shorthand CSS properties [`border-color`](border-color) or [`border-right`](border-right).


Try it
------


Syntax
------




```
/\* <color> values \*/
border-right-color: red;
border-right-color: #ffbb00;
border-right-color: rgb(255 0 0);
border-right-color: hsl(100deg 50% 25% / 0.75);
border-right-color: currentcolor;
border-right-color: transparent;

/\* Global values \*/
border-right-color: inherit;
border-right-color: initial;
border-right-color: revert;
border-right-color: revert-layer;
border-right-color: unset;

```
 The `border-right-color` property is specified as a single value.


### Values


 [`<color>`](color_value)  The color of the right border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-right-color =   
  [<color>](color_value)    
  

```
Examples
--------


### A simple div with a border



#### HTML

 
```
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>

```
 #### CSS

 
```
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-color](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-right-color` | 1 | 12 | 1Firefox also supports the non-standard [`-moz-border-right-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-right-colors) CSS property that sets the right border to multiple colors. | 4 | 3.5 | 1 | 4.4 | 18 | 4Firefox also supports the non-standard [`-moz-border-right-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-right-colors) CSS property that sets the right border to multiple colors. | 10.1 | 1 | 1.0 |


See also
--------


* The border-related CSS shorthand properties: [`border`](border), [`border-right`](border-right), and [`border-color`](border-color).
* The color-related CSS properties for the other borders: [`border-left-color`](border-left-color), [`border-bottom-color`](border-bottom-color), and [`border-top-color`](border-top-color).
* The other border-related CSS properties applying to the same border: [`border-right-style`](border-right-style) and [`border-right-width`](border-right-width).
* The default [`currentcolor`](color_value#currentcolor_keyword) color value.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color>

border-right-style
==================


The `border-right-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style of an element's right [`border`](border).


Try it
------



  **Note:** The specification doesn't define how borders of different styles connect in the corners.

 
Syntax
------




```
/\* Keyword values \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

/\* Global values \*/
border-right-style: inherit;
border-right-style: initial;
border-right-style: revert;
border-right-style: revert-layer;
border-right-style: unset;

```
 The `border-right-style` property is specified as a single keyword chosen from those available for the [`border-style`](border-style) property.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-right-style =   
  <line-style>    
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Border styles



#### HTML

 
```
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

```
 #### CSS

 
```
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-right-style example classes \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-style](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-right-style` | 1 | 12 | 1Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50. | 5.5 | 9.2 | 1 | ≤37 | 18 | 14Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-bottom-style` was `solid`. This has been fixed in Firefox 50. | 14 | 1 | 1.0 |


See also
--------


* The other style-related border properties: [`border-bottom-style`](border-bottom-style), [`border-left-style`](border-left-style), [`border-top-style`](border-top-style), and [`border-style`](border-style).
* The other right-border-related properties: [`border-right`](border-right), [`border-right-color`](border-right-color), and [`border-right-width`](border-right-width).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style>

border-top-color
================


The `border-top-color` CSS property sets the color of an element's top <border>. It can also be set with the shorthand CSS properties [`border-color`](border-color) or [`border-top`](border-top).


Try it
------


Syntax
------




```
/\* <color> values \*/
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255 0 0);
border-top-color: hsl(100deg 50% 25% / 0.75);
border-top-color: currentcolor;
border-top-color: transparent;

/\* Global values \*/
border-top-color: inherit;
border-top-color: initial;
border-top-color: revert;
border-top-color: revert-layer;
border-top-color: unset;

```
 The `border-top-color` property is specified as a single value.


### Values


 [`<color>`](color_value)  The color of the top border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
border-top-color =   
  [<color>](color_value)    
  

```
Examples
--------


### A simple div with a border



#### HTML

 
```
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>

```
 #### CSS

 
```
.mybox {
  border: solid 0.3em gold;
  border-top-color: red;
  width: auto;
}

.redtext {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-color](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-top-color` | 1 | 12 | 1Firefox also supports the non-standard [`-moz-border-top-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-top-colors) CSS property that sets the top border to multiple colors. | 4 | 3.5 | 1 | 4.4 | 18 | 4Firefox also supports the non-standard [`-moz-border-top-colors`](https://developer.mozilla.org/docs/Web/CSS/-moz-border-top-colors) CSS property that sets the top border to multiple colors. | 10.1 | 1 | 1.0 |


See also
--------


* The border-related CSS shorthand properties: [`border`](border), [`border-top`](border-top), and [`border-color`](border-color).
* The color-related CSS properties for the other borders: [`border-right-color`](border-right-color), [`border-bottom-color`](border-bottom-color), and [`border-left-color`](border-left-color).
* The other border-related CSS properties applying to the same border: [`border-top-style`](border-top-style) and [`border-top-width`](border-top-width).
* The default [`currentcolor`](color_value#currentcolor_keyword) color value.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color>

border-top-left-radius
======================


The `border-top-left-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.


Try it
------



 The rounding can be a circle or an ellipse, or if one of the value is `0`, no rounding is done and the corner is square.

  ![border-radius.png] 

 A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the [`background-clip`](background-clip) property.

  **Note:** If the value of this property is not set in a [`border-radius`](border-radius) shorthand property that is applied to the element after the `border-top-left-radius` CSS property, the value of this property is then reset to its initial value by the [shorthand property](shorthand_properties).

 
Syntax
------




```
/\* the corner is a circle \*/
/\* border-top-left-radius: radius \*/
border-top-left-radius: 3px;

/\* the corner is an ellipse \*/
/\* border-top-left-radius: horizontal vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

/\* Global values \*/
border-top-left-radius: inherit;
border-top-left-radius: initial;
border-top-left-radius: revert;
border-top-left-radius: revert-layer;
border-top-left-radius: unset;

```
 With one value:

 * the value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the radius of the circle to use for the border in that corner.

 With two values:

 * the first value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the vertical semi-major axis of the ellipse to use for the border in that corner.


### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-top-left-radius =   
  [<length-percentage [0,∞]>](length-percentage)[{1,2}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Arc of a circle



A single `<length>` value produces an arc of a circle.

 
```
div {
  border-top-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Arc of an ellipse



Two different `<length>` values produce an arc of an ellipse.

 
```
div {
  border-top-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Square element with percentage radius



A square element with a single `<percentage>` value produces an arc of a circle.

 
```
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Non-square element with percentage radius



A non-square element with a single `<percentage>` value produces an arc of an ellipse.

 
```
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-radius](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-radius) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-top-left-radius` | 41 | 1212 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.1–12 | 9 | 1510.5 | 53 | ≤37≤37 | 1818 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.4–14 | 1411 | 4.21 | 1.01.0 |
| `elliptical_corners` | 1 | 12 | 3.5 | 9 | 10.5 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `percentages` | 4 | 12 | 41–4Before Firefox 4, the [`<percentage>`](https://developer.mozilla.org/docs/Web/CSS/percentage) was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value. | 9 | 10.5 | 5 | ≤37 | 18 | 4 | 14 | 4.2 | 1.0 |


See also
--------


* [`border-radius`](border-radius) shorthand property
* [`border-top-right-radius`](border-top-right-radius), [`border-bottom-right-radius`](border-bottom-right-radius), and [`border-bottom-left-radius`](border-bottom-left-radius)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius>

border-start-start-radius
=========================


The `border-start-start-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). This is useful when building styles to work regardless of the [text orientation](text-orientation) and [writing mode](css_writing_modes).


Try it
------



 This property affects the corner between the block-start and the inline-start sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the [`border-top-left-radius`](border-top-left-radius) property.


Syntax
------



```
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-start-start-radius: 1em 2em;

/\* Global values \*/
border-start-start-radius: inherit;
border-start-start-radius: initial;
border-start-start-radius: revert;
border-start-start-radius: revert-layer;
border-start-start-radius: unset;

```
### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-start-start-radius =   
  <'border-top-left-radius'>    
  

```
Examples
--------


### Border radius with vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example</p>
</div>

```
 #### CSS

 
```
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # border-radius-properties](https://w3c.github.io/csswg-drafts/css-logical/#border-radius-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-start-start-radius` | 89 | 89 | 66 | No | 75 | 15 | 89 | 89 | 66 | 63 | 15 | 15.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical property: [`border-top-left-radius`](border-top-left-radius)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius>

border-top
==========


The `border-top` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets all the properties of an element's top <border>.


Try it
------



 As with all shorthand properties, `border-top` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

 
```
border-top-style: dotted;
border-top: thick green;

```
 It is actually the same as this one:

 
```
border-top-style: dotted;
border-top: none thick green;

```
 The value of [`border-top-style`](border-top-style) given before `border-top` is ignored. Since the default value of [`border-top-style`](border-top-style) is `none`, not specifying the `border-style` part results in no border.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-top-color`](border-top-color)
* [`border-top-style`](border-top-style)
* [`border-top-width`](border-top-width)


Syntax
------




```
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

/\* Global values \*/
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: revert-layer;
border-top: unset;

```
 The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.


### Values


 `<br-width>`  See [`border-top-width`](border-top-width).

  `<br-style>`  See [`border-top-style`](border-top-style).

  [`<color>`](color_value)  See [`border-top-color`](border-top-color).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-top-width`](border-top-width): `medium`
* [`border-top-style`](border-top-style): `none`
* [`border-top-color`](border-top-color): `currentcolor`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
* [`border-top-style`](border-top-style): as specified
* [`border-top-color`](border-top-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`border-top-color`](border-top-color): a [color](color_value#interpolation)
* [`border-top-style`](border-top-style): discrete
* [`border-top-width`](border-top-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-top =   
  <line-width>  [||](value_definition_syntax#double_bar)  
  <line-style>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)         
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Applying a top border



#### HTML

 
```
<div>This box has a border on the top side.</div>

```
 #### CSS

 
```
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-shorthands](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-top` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`border`](border)
* [`border-block`](border-block)
* [`outline`](outline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-top>

border-top-right-radius
=======================


The `border-top-right-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.


Try it
------



 The rounding can be a circle or an ellipse, or if one of the value is `0` no rounding is done and the corner is square.

  ![border-top-right-radius.png] 

 A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the [`background-clip`](background-clip) property.

  **Note:** If the value of this property is not set in a [`border-radius`](border-radius) shorthand property that is applied to the element after the `border-top-right-radius` CSS property, the value of this property is then reset to its initial value by the [shorthand property](shorthand_properties).

 
Syntax
------




```
/\* the corner is a circle \*/
/\* border-top-right-radius: radius \*/
border-top-right-radius: 3px;

/\* the corner is an ellipse \*/
/\* border-top-right-radius: horizontal vertical \*/
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/\* Global values \*/
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;

```
 With one value:

 * the value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the radius of the circle to use for the border in that corner.

 With two values:

 * the first value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a [`<length>`](length) or a [`<percentage>`](percentage) denoting the vertical semi-major axis of the ellipse to use for the border in that corner.


### Values


 `<length-percentage>`  Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS [`<length>`](length) data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when [`border-collapse`](border-collapse) is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | two absolute [`<length>`](length)s or [`<percentage>`](percentage)s |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
border-top-right-radius =   
  [<length-percentage [0,∞]>](length-percentage)[{1,2}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Arc of a circle



A single `<length>` value produces an arc of a circle.

 
```
div {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Arc of an ellipse



Two different `<length>` values produce an arc of an ellipse.

 
```
div {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Square element with percentage radius



A square element with a single `<percentage>` value produces an arc of a circle.

 
```
div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

```


### Non-square element with percentage radius



A non-square element with a single `<percentage>` value produces an arc of an ellipse.

 
```
div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-radius](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-radius) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-top-right-radius` | 41 | 1212 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.1–12 | 9 | 1510.5 | 53 | ≤37≤37 | 1818 | 494Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50.4–14 | 1411 | 4.21 | 1.01.0 |
| `elliptical_corners` | 1 | 12 | 3.5 | 9 | 10.5 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `percentages` | 4 | 12 | 41–4Before Firefox 4, the [`<percentage>`](https://developer.mozilla.org/docs/Web/CSS/percentage) was relative to the width of the box even when specifying the radius for a height. This implied that `-moz-border-radius-bottomright` was always drawing an arc of circle, and never an ellipse, when followed by a single value. | 9 | 10.5 | 5 | ≤37 | 18 | 4 | 14 | 4.2 | 1.0 |


See also
--------


* [`border-radius`](border-radius) shorthand property
* [`border-bottom-right-radius`](border-bottom-right-radius), [`border-bottom-left-radius`](border-bottom-left-radius), and [`border-top-left-radius`](border-top-left-radius)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius>

border-top-width
================


The `border-top-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the top border of an element.


Try it
------


Syntax
------



```
/\* Keyword values \*/
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/\* <length> values \*/
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/\* Global keywords \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: revert-layer;
border-top-width: unset;

```
### Values



 `<line-width>`  Defines the width of the border, either as an explicit nonnegative [`<length>`](length) or a keyword. If it's a keyword, it must be one of the following values:

 * `thin`
* `medium`
* `thick`

    **Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
border-top-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### HTML



```
<div>Element 1</div>
<div>Element 2</div>

```
### CSS



```
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-width](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-top-width` | 1 | 12 | 1 | 4 | 3.5 | 1 | 2.2 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* The other border-width-related CSS properties: [`border-left-width`](border-left-width), [`border-right-width`](border-right-width), [`border-bottom-width`](border-bottom-width), and [`border-width`](border-width).
* The other border-top-related CSS properties: [`border`](border), [`border-top`](border-top), [`border-top-style`](border-top-style), and [`border-top-color`](border-top-color).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width>

border-width
============


The `border-width` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of an element's border.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-bottom-width`](border-bottom-width)
* [`border-left-width`](border-left-width)
* [`border-right-width`](border-right-width)
* [`border-top-width`](border-top-width)


Syntax
------




```
/\* Keyword values \*/
border-width: thin;
border-width: medium;
border-width: thick;

/\* <length> values \*/
border-width: 4px;
border-width: 1.2rem;

/\* top and bottom | left and right \*/
border-width: 2px 1.5em;

/\* top | left and right | bottom \*/
border-width: 1px 2em 1.5cm;

/\* top | right | bottom | left \*/
border-width: 1px 2em 0 4rem;

/\* Global values \*/
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

```
 The `border-width` property may be specified using one, two, three, or four values.

 * When **one** value is specified, it applies the same width to **all four sides**.
* When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values



 `<line-width>`  Defines the width of the border, either as an explicit nonnegative [`<length>`](length) or a keyword. If it's a keyword, it must be one of the following values:

 * `thin`
* `medium`
* `thick`

    **Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-top-width`](border-top-width): `medium`
* [`border-right-width`](border-right-width): `medium`
* [`border-bottom-width`](border-bottom-width): `medium`
* [`border-left-width`](border-left-width): `medium`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden`
* [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden`
* [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden`
* [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* [`border-bottom-width`](border-bottom-width): a [length](length#interpolation)
* [`border-left-width`](border-left-width): a [length](length#interpolation)
* [`border-right-width`](border-right-width): a [length](length#interpolation)
* [`border-top-width`](border-top-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
border-width =   
  <line-width>[{1,4}](value_definition_syntax#curly_braces)    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### A mix of values and lengths



#### HTML

 
```
<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="three-values">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>

```
 #### CSS

 
```
#one-value {
  border: ridge #ccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-width](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-width` | 1 | 12 | 1 | 4 | 3.5 | 1 | 2 | 18 | 4 | 10.1 | 3 | 1.0 |


See also
--------


* The border-related shorthand properties: [`border`](border), [`border-style`](border-style), [`border-color`](border-color)
* The border-width-related properties: [`border-bottom-width`](border-bottom-width), [`border-left-width`](border-left-width), [`border-right-width`](border-right-width), [`border-top-width`](border-top-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-width>

border-style
============


The `border-style` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style for all four sides of an element's border.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`border-bottom-style`](border-bottom-style)
* [`border-left-style`](border-left-style)
* [`border-right-style`](border-right-style)
* [`border-top-style`](border-top-style)


Syntax
------




```
/\* Keyword values \*/
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/\* top and bottom | left and right \*/
border-style: dotted solid;

/\* top | left and right | bottom \*/
border-style: hidden double dashed;

/\* top | right | bottom | left \*/
border-style: none solid dotted dashed;

/\* Global values \*/
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

```
 The `border-style` property may be specified using one, two, three, or four values.

 * When **one** value is specified, it applies the same style to **all four sides**.
* When **two** values are specified, the first style applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first style applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the styles apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).

 Each value is a keyword chosen from the list below.


### Values


 `<line-style>`  Describes the style of the border. It can have the following values:

  `none`  Like the `hidden` keyword, displays no border. Unless a [`background-image`](background-image) is set, the computed value of the same side's [`border-width`](border-width) will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the *lowest* priority: if any other conflicting border is set, it will be displayed.

  `hidden`  Like the `none` keyword, displays no border. Unless a [`background-image`](background-image) is set, the computed value of the same side's [`border-width`](border-width) will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the *highest* priority: if any other conflicting border is set, it won't be displayed.

  `dotted`  Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's [`border-width`](border-width).

  `dashed`  Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

  `solid`  Displays a single, straight, solid line.

  `double`  Displays two straight lines that add up to the pixel size defined by [`border-width`](border-width).

  `groove`  Displays a border with a carved appearance. It is the opposite of `ridge`.

  `ridge`  Displays a border with an extruded appearance. It is the opposite of `groove`.

  `inset`  Displays a border that makes the element appear embedded. It is the opposite of `outset`. When applied to a table cell with [`border-collapse`](border-collapse) set to `collapsed`, this value behaves like `groove`.

  `outset`  Displays a border that makes the element appear embossed. It is the opposite of `inset`. When applied to a table cell with [`border-collapse`](border-collapse) set to `collapsed`, this value behaves like `ridge`.

    Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`border-top-style`](border-top-style): `none`
* [`border-right-style`](border-right-style): `none`
* [`border-bottom-style`](border-bottom-style): `none`
* [`border-left-style`](border-left-style): `none`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`border-bottom-style`](border-bottom-style): as specified
* [`border-left-style`](border-left-style): as specified
* [`border-right-style`](border-right-style): as specified
* [`border-top-style`](border-top-style): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
border-style =   
  <line-style>[{1,4}](value_definition_syntax#curly_braces)    
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### All property values



Here is an example of all the property values.

 #### HTML

 
```
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

```
 #### CSS

 
```
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/\* border-style example classes \*/
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # border-style](https://w3c.github.io/csswg-drafts/css-backgrounds/#border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-style` | 1 | 12 | 1Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50. | 4 | 3.5 | 1 | 3 | 18 | 4Before Firefox 50, border styles of rounded corners were always rendered as if `border-style` was solid. This has been fixed in Firefox 50. | 14 | 3 | 1.0 |


See also
--------


* The border-related shorthand CSS properties: [`border`](border), [`border-width`](border-width), [`border-color`](border-color), [`border-radius`](border-radius)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-style>

border-top-style
================


The `border-top-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style of an element's top [`border`](border).


Try it
------



  **Note:** The specification doesn't define how borders of different styles connect in the corners.

 
Syntax
------




```
/\* Keyword values \*/
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/\* Global values \*/
border-top-style: inherit;
border-top-style: initial;
border-top-style: revert;
border-top-style: revert-layer;
border-top-style: unset;

```
 The `border-top-style` property is specified as a single keyword chosen from those available for the [`border-style`](border-style) property.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
border-top-style =   
  <line-style>    
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Setting border-top-style



#### HTML

 
```
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

```
 #### CSS

 
```
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-top-style example classes \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-style: outset;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # the-border-style](https://w3c.github.io/csswg-drafts/css-backgrounds/#the-border-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `border-top-style` | 1 | 12 | 1Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-top-style` was `solid`. This has been fixed in Firefox 50. | 5.5 | 9.2 | 1 | ≤37 | 18 | 4Before Firefox 50, border styles of rounded corners (with [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius)) were always rendered as if `border-top-style` was `solid`. This has been fixed in Firefox 50. | 14 | 1 | 1.0 |


See also
--------


* The other style-related border properties: [`border-left-style`](border-left-style), [`border-right-style`](border-right-style), [`border-bottom-style`](border-bottom-style), and [`border-style`](border-style).
* The other top-border-related properties: [`border-top`](border-top), [`border-top-color`](border-top-color), and [`border-top-width`](border-top-width).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style>

bottom
======


The `bottom` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property participates in setting the vertical position of a [positioned element](position). It has no effect on non-positioned elements.


Try it
------



 The effect of `bottom` depends on how the element is positioned (i.e., the value of the [`position`](position) property):

 * When `position` is set to `absolute` or `fixed`, the `bottom` property specifies the distance between the element's outer margin of bottom edge and the inner border of the bottom edge of its containing block.
* When `position` is set to `relative`, the `bottom` property specifies the distance the element's bottom edge is moved above its normal position.
* When `position` is set to `sticky`, the `bottom` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `bottom` property has *no effect*.

 When both [`top`](top) and `bottom` are specified, `position` is set to `absolute` or `fixed`, *and* [`height`](height) is unspecified (either `auto` or `100%`) both the `top` and `bottom` distances are respected. In all other situations, if [`height`](height) is constrained in any way or `position` is set to `relative`, the `top` property takes precedence and the `bottom` property is ignored.


Syntax
------



```
/\* <length> values \*/
bottom: 3px;
bottom: 2.4em;

/\* <percentage>s of the height of the containing block \*/
bottom: 10%;

/\* Keyword value \*/
bottom: auto;

/\* Global values \*/
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

```
### Values


 [`<length>`](length)  A negative, null, or positive [`<length>`](length) that represents:

 * for *absolutely positioned elements*, the distance to the bottom edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved above its normal position.

  [`<percentage>`](percentage)  A [`<percentage>`](percentage) of the containing block's height.

  `auto`  Specifies that:

 * for *absolutely positioned elements*, the position of the element is based on the [`top`](top) property, while `height: auto` is treated as a height based on the content; or if `top` is also `auto`, the element is positioned where it should vertically be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the [`top`](top) property; or if `top` is also `auto`, the element is not moved vertically at all.

  `inherit`  Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a [`<length>`](length), [`<percentage>`](percentage), or the `auto` keyword.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the height of the containing block |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
bottom =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Absolute and fixed positioning



This example demonstrates the difference in behavior of the `bottom` property, when [`position`](position) is `absolute` versus `fixed`.

 #### HTML

 
```
<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>

```
 #### CSS

 
```
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.2);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 3 # insets](https://w3c.github.io/csswg-drafts/css-position/#insets) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `bottom` | 1 | 12 | 1 | 5In Internet Explorer versions before 7, when both `top` and `bottom` are specified, the element position is overconstrained and the `top` property has precedence; the computed value of `bottom` is set to `-top`, while its specified value is ignored. | 6 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`inset`](inset), the shorthand for all related properties: [`top`](top), [`bottom`](bottom), [`left`](left), and [`right`](right)
* The mapped logical properties: [`inset-block-start`](inset-block-start), [`inset-block-end`](inset-block-end), [`inset-inline-start`](inset-inline-start), and [`inset-inline-end`](inset-inline-end) and the shorthands [`inset-block`](inset-block) and [`inset-inline`](inset-inline)
* [`position`](position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/bottom>

box-decoration-break
====================


The `box-decoration-break` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies how an element's [fragments](css_fragmentation) should be rendered when broken across multiple lines, columns, or pages.


Try it
------



 The specified value will impact the appearance of the following properties:

 * [`background`](background)
* [`border`](border)
* [`border-image`](border-image)
* [`box-shadow`](box-shadow)
* [`clip-path`](clip-path)
* [`margin`](margin)
* [`padding`](padding)


Syntax
------




```
/\* Keyword values \*/
box-decoration-break: slice;
box-decoration-break: clone;

/\* Global values \*/
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;

```
 The `box-decoration-break` property is specified as one of the keyword values listed below.


### Values


 `slice`  The element is initially rendered as if its box were not fragmented, after which the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.

  `clone`  Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The [`border-radius`](border-radius), [`border-image`](border-image), and [`box-shadow`](box-shadow) are applied to each fragment independently. The background is also drawn independently for each fragment, which means that a background image with [`background-repeat`](background-repeat)`: no-repeat` may nevertheless repeat multiple times.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `slice` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
box-decoration-break =   
  slice  [|](value_definition_syntax#single_bar)  
  clone    
  

```
Examples
--------


### Inline box fragments



An inline element that contains line breaks styled with:

 
```
<style>
 .example {
 background: linear-gradient(to bottom right, yellow, green);
 box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue,
 5px 5px 15px 0px yellow;
 padding: 0em 1em;
 border-radius: 16px;
 border-style: solid;
 margin-left: 10px;
 font: 24px sans-serif;
 line-height: 2;
 }
</style>
…
<span class="example">The<br />quick<br />orange fox</span>

```
 This results in:

  ![A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.] 

 Adding `box-decoration-break: clone` to the above styles:

 
```
-webkit-box-decoration-break: clone;
box-decoration-break: clone;

```
 This one results in:

  ![A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example] 

 You can [try the two inline examples above](https://media.prod.mdn.mozit.cloud/attachments/2014/07/12/8179/df096e9eb57177d8b7fdcd0c8f64ef18/box-decoration-break-inline.html) in your browser.

 Here's an example of an inline element using a large `border-radius` value. The second `"iM"` has a line-break between the `"i"` and the `"M"`. For comparison, the first `"iM"` is without line breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.

  ![A screenshot of the rendering of the second inline element example.] 

 [Try the above example](https://media.prod.mdn.mozit.cloud/attachments/2014/07/12/8191/7a067e5731355081e856ea02b978ea2e/box-decoration-break-inline-extreme.html) in your browser.


### Block box fragments



A block element with similar styles as above and no fragmentation results in:

  ![A screenshot of the rendering of the block element used in the examples without any fragmentation.] 

 Fragmenting the above block into three columns results in:

  ![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.] 

 Note that stacking these pieces vertically will result in the non-fragmented rendering.

 Now, the same example but styled with `box-decoration-break: clone` results in:

  ![A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.] 

 Note here that each fragment has an identical replicated border, box-shadow, and background.

 You can [try the block examples above](https://media.prod.mdn.mozit.cloud/attachments/2014/07/12/8187/6288bde9d276d78e203c9f8b9a26ff65/box-decoration-break-block.html) in your browser.


Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3 # break-decoration](https://w3c.github.io/csswg-drafts/css-break/#break-decoration) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `box-decoration-break` | 22This property is only supported for inline elements. | 79This property is only supported for inline elements. | 321–32 | No | 1511.5–15 | 7This property is only supported for inline elements. | ≤37This property is only supported for inline elements. | 18This property is only supported for inline elements. | 324–32 | 1411.5–14 | 7This property is only supported for inline elements. | 1.0This property is only supported for inline elements. |


See also
--------


* [`break-after`](break-after), [`break-before`](break-before), [`break-inside`](break-inside)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break>

@page
=====


The `@page` at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins. The `@page` at-rule can be used to target all pages in a print-out, or even specific ones using its various pseudo-classes.


Syntax
------



```
/\* Targets all the pages \*/
@page {
  size: 8.5in 9in;
  margin-top: 4in;
}

/\* Targets all even-numbered pages \*/
@page :left {
  margin-top: 4in;
}

/\* Targets all odd-numbered pages \*/
@page :right {
  size: 11in;
  margin-top: 4in;
}

/\* Targets all selectors with `page: wide;` set \*/
@page wide {
  size: a4 landscape;
}

```
### Descriptors


 [`page-orientation`](@page/page-orientation)  Specifies the orientation of the page. This does not affect the layout of the page; the rotation is applied after the layout in the output medium.

  [`size`](@page/size)  Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.

  Description
-----------



 **Note:** This documentation lists out features yet to be implemented across UAs, but they are stated in the official documentation. At the time of this writing, the only CSS property shown to have visible on both the at-rule and its pseudo-classes is the `margin` property.

  You can't change all CSS properties with `@page`. You can only change the margin of the document. Attempts to change any other CSS properties will be ignored.

 The `@page` at-rule can be accessed via the CSS object model interface [`CSSPageRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSPageRule).

  **Note:** The W3C is discussing how to handle viewport-related [`<length>`](length) units, `vh`, `vw`, `vmin`, and `vmax`. Meanwhile do not use them within a `@page` at-rule.

 
### Related properties



The `@page` at-rule, allows the user to assign a name to the rule, which is then called in a declaration using the `page` property.

  [`page`](page)  Allows a selector to use a user defined **named page**

  
Formal syntax
-------------




```
@page =   
  @page <page-selector-list>[?](value_definition_syntax#question_mark) { [<declaration-list>](declaration-list) }    
  
<page-selector-list> =   
  <page-selector>[#](value_definition_syntax#hash_mark)    
  
<page-selector> =   
  [[](value_definition_syntax#brackets) [<ident-token>](ident-token)[?](value_definition_syntax#question_mark) <pseudo-page>[\*](value_definition_syntax#asterisk) ]!    
  
<pseudo-page> =   
  ':' [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) first [|](value_definition_syntax#single_bar) blank []](value_definition_syntax#brackets)    
  

```
 Where the `<page-body>` includes:

 * page-properties
* page-margin properties

 and `<pseudo-selector>` represents these pseudo-classes:

 * [`:blank`](:blank)
* [`:first`](:first)
* [`:left`](:left)
* [`:right`](:right)

  **Note:** The `@page` at-rule can only contain **page-properties** and **margin at-rules**, and the **margin at-rules** can only contain **page-margin properties**

 
### page-properties




| Feature | CSS properties |
| --- | --- |
| bidi properties | direction |
| background properties | background-color |
|  | background-image |
|  | background-repeat |
|  | background-attachment |
|  | background-position |
|  | background |
| border properties | border-top-width |
|  | border-right-width |
|  | border-bottom-width |
|  | border-left-width |
|  | border-width |
|  | border-top-color |
|  | border-right-color |
|  | border-bottom-color |
|  | border-left-color |
|  | border-color |
|  | border-top-style |
|  | border-right-style |
|  | border-bottom-style |
|  | border-left-style |
|  | border-short-style |
|  | border-top |
|  | border-right |
|  | border-bottom |
|  | border-left |
|  | border |
| counter properties | counter-reset |
|  | counter-increment |
| color | color |
| font properties | font-family |
|  | font-size |
|  | font-style |
|  | font-variant |
|  | font-weight |
|  | font |
| height properties | height |
|  | min-height |
|  | max-height |
| line height | line-height |
| margin properties | margin-top |
|  | margin-right |
|  | margin-bottom |
|  | margin-left |
|  | margin |
| outline properties | outline-width |
|  | outline-style |
|  | outline-color |
|  | outline |
| padding properties | padding-top |
|  | padding-right |
|  | padding-bottom |
|  | padding-left |
|  | padding |
| quotes | quotes |
| text properties | letter-spacing |
|  | text-align |
|  | text-decoration |
|  | text-indent |
|  | text-transform |
|  | white-space |
|  | word-spacing |
| visibility | visibility |
| width properties | width |
|  | min-width |
|  | max-width |

### margin at-rules



The margin at-rules are used inside of the `@page` at-rule. They each target a different section of the document printed page and make changes based on the properties or content set in the block of code:

 
```
@page {
  @top-left {
    <page-margin-properties>
  }
}

```
 `@top-left` targets the top-left of the document and applies the changes based on the page-margin-properties set.

 Other margin-at rules include:

 
```
@top-left-corner {
  <page-margin-properties>
}
@top-left {
  <page-margin-properties>
}
@top-center {
  <page-margin-properties>
}
@top-right {
  <page-margin-properties>
}
@top-right-corner {
  <page-margin-properties>
}
@bottom-left-corner {
  <page-margin-properties>
}
@bottom-left {
  <page-margin-properties>
}
@bottom-center {
  <page-margin-properties>
}
@bottom-right {
  <page-margin-properties>
}
@bottom-right-corner {
  <page-margin-properties>
}
@left-top {
  <page-margin-properties>
}
@left-middle {
  <page-margin-properties>
}
@left-bottom {
  <page-margin-properties>
}
@right-top {
  <page-margin-properties>
}
@right-middle {
  <page-margin-properties>
}
@right-bottom {
  <page-margin-properties>
}

```
 #### page-margin properties

 The page-margin properties are the set of CSS properties can be set in any individual margin at-rule. They include:

 

| Feature | CSS properties |
| --- | --- |
| bidi properties | direction |
| background properties | background-color |
|  | background-image |
|  | background-repeat |
|  | background-attachment |
|  | background-position |
|  | background |
| border properties | border-top-width |
|  | border-right-width |
|  | border-bottom-width |
|  | border-left-width |
|  | border-width |
|  | border-top-color |
|  | border-right-color |
|  | border-bottom-color |
|  | border-left-color |
|  | border-color |
|  | border-top-style |
|  | border-right-style |
|  | border-bottom-style |
|  | border-left-style |
|  | border-short-style |
|  | border-top |
|  | border-right |
|  | border-bottom |
|  | border-left |
|  | border |
| counter properties | counter-reset |
|  | counter-increment |
| content | content |
| color | color |
| font properties | font-family |
|  | font-size |
|  | font-style |
|  | font-variant |
|  | font-weight |
|  | font |
| height properties | height |
|  | min-height |
|  | max-height |
| line height | line-height |
| margin properties | margin-top |
|  | margin-right |
|  | margin-bottom |
|  | margin-left |
|  | margin |
| outline properties | outline-width |
|  | outline-style |
|  | outline-color |
|  | outline |
| padding properties | padding-top |
|  | padding-right |
|  | padding-bottom |
|  | padding-left |
|  | padding |
| quotes | quotes |
| text properties | letter-spacing |
|  | text-align |
|  | text-decoration |
|  | text-indent |
|  | text-transform |
|  | white-space |
|  | word-spacing |
| vertical alignment | vertical-align |
| visibility | visibility |
| width properties | width |
|  | min-width |
|  | max-width |
| z-index | z-index |


Named pages
-----------



Named pages enable performing per-page layout and adding [page-breaks](css_fragmentation) in a declarative manner when printing.

 Named pages can be applied using the [`page`](page) property. This allows the user to create different page configurations for use in print layouts.

 An example of this can be found on the [`page`](page#examples) examples.


Examples
--------


### Using the size property to change the page orientation



This example shows how to split the `<section>`s into individual pages in `landscape` format with each page having a 20% margin when printed.

 #### HTML

 
```
<button>Print Webpage</button>
<article>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
  <section>
    <h2>Header</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
    </p>
  </section>
</article>

```
 #### CSS

 
```
@page {
  size: landscape;
  margin: 20%;
}

body {
  font-family: "Helvetica";
  background-color: rgb(110 110 119);
}

article {
  width: 100%;
}

section {
  display: grid;
  background-color: white;
  border-radius: 0.6rem;
  margin-block-end: 1.5rem;
  justify-items: center;
  padding: 1rem;
  width: 50%;
  page-break-after: always;
  break-after: page;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

section {
  page-break-after: always;
  break-after: page;
}

@media print {
  button {
    display: none;
  }
}

```
 #### JavaScript

 
```
const button = document.querySelector("button");

button.addEventListener("click", () => {
  window.print();
});

```
 #### Result

  Clicking the print button will launch a print dialog with the html sections split into individual pages.  


### @page pseudo-class examples



Please refer to the various <pseudo-classes> of `@page` for examples.

 * [`:blank`](:blank)
* [`:first`](:first)
* [`:left`](:left)
* [`:right`](:right)


Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # at-page-rule](https://w3c.github.io/csswg-drafts/css-page/#at-page-rule) |
| [CSS Logical Properties and Values Level 1 # page](https://w3c.github.io/csswg-drafts/css-logical/#page) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@page` | 2 | 12 | 19 | 8 | 6 | No | 37 | 18 | 19 | 14 | No | 1.0 |
| `page` | 85 | 85 | 110 | No | 71 | No | 85 | 85 | 110 | 60 | No | 14.0 |
| `page-orientation` | 85 | 85 | preview | No | 71 | No | 85 | 85 | No | 60 | No | 14.0 |
| `size` | 15 | 79 | No | No | 15 | No | 37 | 18 | No | 14 | No | 1.5 |


See also
--------


* The `@page` [`size`](@page/size) descriptor
* The [`page`](page) property
* See the [[META] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@page>

box-shadow
==========


The `box-shadow` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.


Try it
------



 The `box-shadow` property enables you to cast a drop shadow from the frame of almost any element. If a [`border-radius`](border-radius) is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple [text shadows](text-shadow) (the first specified shadow is on top).

 [Box-shadow generator](css_backgrounds_and_borders/box-shadow_generator) is an interactive tool allowing you to generate a `box-shadow`.


Syntax
------




```
/\* Keyword values \*/
box-shadow: none;

/\* offset-x | offset-y | color \*/
box-shadow: 60px -16px teal;

/\* offset-x | offset-y | blur-radius | color \*/
box-shadow: 10px 5px 5px black;

/\* offset-x | offset-y | blur-radius | spread-radius | color \*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/\* inset | offset-x | offset-y | color \*/
box-shadow: inset 5em 1em gold;

/\* Any number of shadows, separated by commas \*/
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/\* Global values \*/
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

```
 Specify a single box-shadow using:

 * Two, three, or four [`<length>`](length) values.
	+ If only two values are given, they are interpreted as `<offset-x>` and `<offset-y>` values.
	+ If a third value is given, it is interpreted as a `<blur-radius>`.
	+ If a fourth value is given, it is interpreted as a `<spread-radius>`.
* Optionally, the `inset` keyword.
* Optionally, a [`<color>`](#color) value.

 To specify multiple shadows, provide a comma-separated list of shadows.


### Values


 `inset`   If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the `inset` keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. 

  `<offset-x>`  The [`<length>`](length) value specifies the horizontal distance. Negative values place the shadow to the left of the element.

  `<offset-y>`  The [`<length>`](length) values specifies the vertical distance. Negative values place the shadow above the element.

 If both `<offset-x>` and `<offset-y>` are set to `0`, the shadow is placed behind the element (and may generate a blur effect if `<blur-radius>` and/or `<spread-radius>` is set).

  `<blur-radius>`  This is a third [`<length>`](length) value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be `0` (the shadow's edge is sharp). The specification does not include an exact algorithm for how the blur radius should be calculated, however, it does elaborate as follows:

 
>  …for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow's edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.
> 
>  

  `<spread-radius>`  This is a fourth [`<length>`](length) value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be `0` (the shadow will be the same size as the element).

  `<color>`   See [`<color>`](color_value) values for possible keywords and notations. If not specified, it defaults to [`currentcolor`](color_value#currentcolor_keyword). 

  ### Interpolation



When animating shadows, such as when multiple shadow values on a box transition to new values on hover, the values are interpolated. [Interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) determines intermediate values of properties, such as the blur radius, spread radius, and color, as shadows transition. For each shadow in a list of shadows, the color, x, y, blur, and spread transition; the color as [`<color>`](color_value), and the other values as [`<length>`](length)s.

 In interpolating multiple shadows between two comma-separated lists of multiple box shadows, the shadows are paired, in order, with interpolation occurring between paired shadows. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is `transparent`, and X, Y, and blur are `0`, with the inset, or lack of inset, being set to match. If, in any pair of shadows, one has `inset` set and the other is does not, the entire shadow list is uninterpolated; the shadows will change to the new values without an animating effect.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | any length made absolute; any specified color computed; otherwise as specified |
| Animation type | a [shadow list](box-shadow#Interpolation) |

Formal syntax
-------------



```
box-shadow =   
  none       [|](value_definition_syntax#single_bar)  
  <shadow>[#](value_definition_syntax#hash_mark)    
  
<shadow> =   
  [<color>](color_value)[?](value_definition_syntax#question_mark)                                   [&&](value_definition_syntax#double_ampersand)  
  [[](value_definition_syntax#brackets) [<length>](length)[{2}](value_definition_syntax#curly_braces) [<length [0,∞]>](length)[?](value_definition_syntax#question_mark) [<length>](length)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [&&](value_definition_syntax#double_ampersand)  
  inset[?](value_definition_syntax#question_mark)                                       
  

```
Examples
--------


### Setting three shadows



In this example, we include three shadows: an inset shadow, a regular drop shadow, and a 2px shadow that creates a border effect (we could have used an [`outline`](outline) instead for that third shadow).

 #### HTML

 
```
<blockquote>
  <q>
    You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.
  </q>
  <p>&mdash; Maya Angelou</p>
</blockquote>

```
 #### CSS

 
```
blockquote {
  padding: 20px;
  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

```
 #### Result



### Setting zero for offset and blur



When the `x-offset`, `y-offset`, and `blur` are all zero, the box shadow will be a solid-colored outline of equal-size on all sides. The shadows are drawn back to front, so the first shadow sits on top of subsequent shadows. When the `border-radius` is set to 0, as is the default, the corners of the shadow will be, well, corners. Had we put in a `border-radius` of any other value, the corners would have been rounded.

 We added a margin the size of the widest box-shadow to ensure the shadow doesn't overlap adjacent elements or go beyond the border of the containing box. A box-shadow does not impact [box model](css_box_model) dimensions.

 #### HTML

 
```
<div><p>Hello World</p></div>

```
 #### CSS

 
```
p {
  box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3 # box-shadow](https://w3c.github.io/csswg-drafts/css-backgrounds/#box-shadow) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `box-shadow` | 10Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.1 | 12 | 494Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.3.5–13 | 9["To use `box-shadow` in Internet Explorer 9 or later, you must set [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) to `separate`.", "Since version 5.5, Internet Explorer supports Microsoft's [DropShadow](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532985(v=vs.85)) and [Shadow Filter](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms533086(v=vs.85)). You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3)"] | 10.5Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar. | 5.1Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.3 | ≤37Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.≤37 | 18Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.18 | 494Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.4–14 | 14Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.14 | 5Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.1 | 1.0Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.1.0 |
| `inset` | 101 | 12 | 43.5–13 | 9["To use `box-shadow` in Internet Explorer 9 or later, you must set [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) to `separate`.", "`inset` must be the last keyword in the declaration."] | 10.5 | 5.15 | ≤37≤37 | 1818 | 44–14 | 1414 | 54.2 | 1.01.0 |
| `multiple_shadows` | 101 | 12 | 43.5–13 | 9To use `box-shadow` in Internet Explorer 9 or later, you must set [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) to `separate`. | 10.5 | 5.13 | ≤37≤37 | 1818 | 44–14 | 1414 | 51 | 1.01.0 |
| `spread_radius` | 101 | 12 | 43.5–13 | 9To use `box-shadow` in Internet Explorer 9 or later, you must set [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) to `separate`. | 10.5 | 5.15 | ≤37≤37 | 1818 | 44–14 | 1414 | 54.2 | 1.01.0 |


See also
--------


* The [`<color>`](color_value) data type (for specifying the shadow color)
* [`text-shadow`](text-shadow)
* [`drop-shadow()`](filter-function/drop-shadow)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow>

box-sizing
==========


The `box-sizing` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how the total width and height of an element is calculated.


Try it
------



 By default in the [CSS box model](css_box_model/introduction_to_the_css_box_model), the `width` and `height` you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the `width` and `height` to arrive at the size of the box that's rendered on the screen. This means that when you set `width` and `height`, you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with `width: 25%;`, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.

 The `box-sizing` property can be used to adjust this behavior:

 * `content-box` gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
* `border-box` tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. `box-sizing: border-box` is the default styling that browsers use for the [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) elements, and for [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements whose type is `[radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)`, `[checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)`, `[reset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset)`, `[button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button)`, `[submit](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)`, `[color](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color)`, or `[search](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)`.

  **Note:** It is often useful to set `box-sizing` to `border-box` to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using `position: relative` or `position: absolute`, use of `box-sizing: content-box` allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.

 
Syntax
------




```
box-sizing: border-box;
box-sizing: content-box;

/\* Global values \*/
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

```
 The `box-sizing` property is specified as a single keyword chosen from the list of values below.


### Values


 `content-box`  This is the initial and default value as specified by the CSS standard. The [`width`](width) and [`height`](height) properties include the content, but does not include the padding, border, or margin. For example, `.box {width: 350px; border: 10px solid black;}` renders a box that is 370px wide.

 Here, the dimensions of the element are calculated as: *width = width of the content*, and *height = height of the content*. (Borders and padding are not included in the calculation.)

  `border-box`  The [`width`](width) and [`height`](height) properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, `.box {width: 350px; border: 10px solid black;}` renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use `border-box` to make the element disappear.

 Here the dimensions of the element are calculated as: *width = border + padding + width of the content*, and *height = border + padding + height of the content*.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `content-box` |
| Applies to | all elements that accept width or height |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
box-sizing =   
  content-box  [|](value_definition_syntax#single_bar)  
  border-box     
  

```
Examples
--------


### Box sizes with content-box and border-box



This example shows how different `box-sizing` values alter the rendered size of two otherwise identical elements.

 #### HTML

 
```
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>

```
 #### CSS

 
```
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* Total width: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 Total height: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 Content box width: 160px
 Content box height: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* Total width: 160px
 Total height: 80px
 Content box width: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 Content box height: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # box-sizing](https://w3c.github.io/csswg-drafts/css-sizing/#box-sizing) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `box-sizing` | 10`box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle).1 | 1212 | 49291Before Firefox 23, `box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle). | 8`box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle). | 7 | 5.13 | 4`box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle).2 | 18`box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle).18 | 49294Before Firefox 23, `box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle). | 14`box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle).14 | 61 | 1.0`box-sizing` is not respected when the height is calculated from [`window.getComputedStyle()`](https://developer.mozilla.org/docs/Web/API/Window/getComputedStyle).1.0 |
| `padding-box` | No | No | 1–50 | No | No | No | No | No | 4–50 | No | No | No |


See also
--------


* [CSS box model](css_box_model/introduction_to_the_css_box_model)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>

break-before
============


The `break-before` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.


Try it
------


Syntax
------




```
/\* Generic break values \*/
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/\* Page break values \*/
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/\* Column break values \*/
break-before: avoid-column;
break-before: column;

/\* Region break values \*/
break-before: avoid-region;
break-before: region;

/\* Global values \*/
break-before: inherit;
break-before: initial;
break-before: revert;
break-before: revert-layer;
break-before: unset;

```
 Each possible break point (in other words, each element boundary) is affected by three properties: the [`break-after`](break-after) value of the previous element, the `break-before` value of the next element, and the [`break-inside`](break-inside) value of the containing element.

 To determine if a break must be done, the following rules are applied:

 1. If any of the three concerned values is a *forced break value* (`always`, `left`, `right`, `page`, `column`, or `region`), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the `break-before` value has precedence over the `break-after` value, which itself has precedence over the `break-inside` value).
2. If any of the three concerned values is an *avoid break value* (`avoid`, `avoid-page`, `avoid-region`, or `avoid-column`), no such break will be applied at that point.

 Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding `avoid` value.


### Values



#### Generic break values

  `auto`  Allows, but does not force, any break (page, column, or region) to be inserted right before the principal box.

  `avoid`  Avoids any break (page, column, or region) from being inserted right before the principal box.

  
`always`  Experimental 
  Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.

  
`all`  Experimental 
  Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.

   #### Page break values

  `avoid-page`  Avoids any page break right before the principal box.

  `page`  Forces a page break right before the principal box.

  `left`  Forces one or two page breaks right before the principal box, whichever will make the next page into a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

  `right`  Forces one or two page breaks right before the principal box, whichever will make the next page into a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

  
`recto`  Experimental 
  Forces one or two page breaks right before the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)

  
`verso`  Experimental 
  Forces one or two page breaks right before the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a right page in a right-to-left spread.)

   #### Column break values

  `avoid-column`  Avoids any column break right before the principal box.

  `column`  Forces a column break right before the principal box.

   #### Region break values

  
`avoid-region`  Experimental 
  Avoids any region break right before the principal box.

  
`region`  Experimental 
  Forces a region break right before the principal box.

  
Page break aliases
------------------



For compatibility reasons, the legacy [`page-break-before`](page-break-before) property should be treated by browsers as an alias of `break-before`. This ensures that sites using `page-break-before` continue to work as designed. A subset of values should be aliased as follows:

 

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

  **Note:** The `always` value of `page-break-*` was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to `page`, rather than the `always` value in the Level 4 spec.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
break-before =   
  auto          [|](value_definition_syntax#single_bar)  
  avoid         [|](value_definition_syntax#single_bar)  
  always        [|](value_definition_syntax#single_bar)  
  all           [|](value_definition_syntax#single_bar)  
  avoid-page    [|](value_definition_syntax#single_bar)  
  page          [|](value_definition_syntax#single_bar)  
  left          [|](value_definition_syntax#single_bar)  
  right         [|](value_definition_syntax#single_bar)  
  recto         [|](value_definition_syntax#single_bar)  
  verso         [|](value_definition_syntax#single_bar)  
  avoid-column  [|](value_definition_syntax#single_bar)  
  column        [|](value_definition_syntax#single_bar)  
  avoid-region  [|](value_definition_syntax#single_bar)  
  region          
  

```
Examples
--------


### Breaking into neat columns



In the following example we have a container that contains an `<h1>` spanning all columns (achieved using `column-span: all`) and a series of `<h2>`s and paragraphs laid out in multiple columns using `column-width: 200px`.

 By default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place. However, we used `break-before: column` on the `<h2>` elements to force a column break before each one, meaning that you end up with an `<h2>` neatly at the top of each column.

 #### HTML

 
```
<article>
  <h1>Main heading</h1>

  <h2>Subheading</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <h2>Subheading</h2>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <h2>Subheading</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>Subheading</h2>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
  break-before: column;
}

p {
  line-height: 1.5;
}

article {
  column-width: 200px;
  gap: 20px;
}

```

### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3 # break-between](https://w3c.github.io/csswg-drafts/css-break/#break-between) |
| [CSS Regions Module Level 1 # region-flow-break](https://w3c.github.io/csswg-drafts/css-regions/#region-flow-break) |
| [CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside](https://w3c.github.io/csswg-drafts/css-multicol/#break-before-break-after-break-inside) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `break-before` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |
| `multicol_context` | 50 | 12 | 65Only supported in print mode. See [bug 1675322](https://bugzil.la/1675322). | 10 | 3711.1–12.1 | No | 50 | 50 | 65Only supported in print mode. See [bug 1675322](https://bugzil.la/1675322). | 3711.1–12.1 | No | 5.0 |
| `paged_context` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/break-before>

caption-side
============


The `caption-side` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property puts the content of a table's [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) on the specified side. The values are relative to the [`writing-mode`](writing-mode) of the table.


Try it
------


Syntax
------




```
/\* Directional values \*/
caption-side: top;
caption-side: bottom;

/\* Logical values \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

/\* Global values \*/
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;

```
 The `caption-side` property is specified as one of the keyword values listed below.


### Values


 `top`  The caption box should be positioned above the table.

  `bottom`  The caption box should be positioned below the table.

  `block-start`  The caption box should be positioned at the block start edge of the table.

  `block-end`  The caption box should be positioned at the block end edge of the table.

  `inline-start`  The caption box should be positioned at the inline start edge of the table.

  `inline-end`  The caption box should be positioned at the inline end edge of the table.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `top` |
| Applies to | table-caption elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
caption-side =   
  top     [|](value_definition_syntax#single_bar)  
  bottom    
  

```
Examples
--------


### Setting captions above and below



#### HTML

 
```
<table class="top">
  <caption>
    Caption ABOVE the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    Caption BELOW the table
  </caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

```
 #### CSS

 
```
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # caption-side](https://w3c.github.io/csswg-drafts/css-logical/#caption-side) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `caption-side` | 1 | 12 | 1 | 8 | 4 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `non_standard_values` | No | No | 1–87 | No | No | preview | No | No | 4–87 | No | No | No |
| `writing-mode_relative_values` | No | No | 42 | No | No | No | No | No | 42 | No | No | No |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side>

caret-color
===========


The `caret-color` CSS property sets the color of the **insertion caret**, the visible marker where the next character typed will be inserted. This is sometimes referred to as the **text input cursor**. The caret appears in elements such as [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or those with the [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.


Try it
------



 Note that the insertion caret is only one type of caret. For example, many browsers have a "navigation caret," which acts similarly to an insertion caret but can be moved around in non-editable text. On the other hand, the mouse cursor image shown when hovering over text where the [`cursor`](cursor) property is `auto`, or when hovering over an element where the `cursor` property is `text` or `vertical-text`, though it sometimes looks like a caret, is not a caret (it's a cursor).


Syntax
------



```
/\* Keyword values \*/
caret-color: auto;
caret-color: transparent;
caret-color: currentcolor;

/\* <color> values \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0 200 0);
caret-color: hsl(228deg 4% 24% / 0.8);

/\* Global values \*/
caret-color: inherit;
caret-color: initial;
caret-color: revert;
caret-color: revert-layer;
caret-color: unset;

```
### Values


 `auto`  The user agent selects an appropriate color for the caret. This is generally [`currentcolor`](color_value#currentcolor_keyword), but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of `currentcolor`, the background, shadows, and other factors.

  **Note:** While user agents may use `currentcolor` (which is usually animatable) for the `auto` value, `auto` is not interpolated in transitions and animations.

   [`<color>`](color_value)  The color of the caret.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | `auto` is computed as specified and `<color>` values are computed as defined for the [`color`](color) property. |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
caret-color =   
  auto     [|](value_definition_syntax#single_bar)  
  [<color>](color_value)    
  

```
Examples
--------


### Setting a custom caret color



#### HTML

 
```
<input value="This field uses a default caret." size="64" />
<input class="custom" value="I have a custom caret color!" size="64" />
<p contenteditable class="custom">
  This paragraph can be edited, and its caret has a custom color as well!
</p>

```
 #### CSS

 
```
input {
  caret-color: auto;
  display: block;
  margin-bottom: 0.5em;
}

input.custom {
  caret-color: red;
}

p.custom {
  caret-color: green;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # caret-color](https://w3c.github.io/csswg-drafts/css-ui/#caret-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `caret-color` | 57 | 79 | 53 | No | 44 | 11.1 | 57 | 57 | 53 | 43 | 11.3While the property is recognized, implementation is incomplete. The color of the caret does not always match the color set for the element in focus. See [bug 177489](https://webkit.org/b/177489). | 7.0 |


See also
--------


* The [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element
* The HTML [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute, which can be used to make any element's text editable
* [Applying color to HTML elements using CSS](css_colors/applying_color)
* The [`<color>`](color_value) data type
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color>

break-after
===========


The `break-after` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.


Try it
------


Syntax
------




```
/\* Generic break values \*/
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;

/\* Page break values \*/
break-after: avoid-page;
break-after: page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;

/\* Column break values \*/
break-after: avoid-column;
break-after: column;

/\* Region break values \*/
break-after: avoid-region;
break-after: region;

/\* Global values \*/
break-after: inherit;
break-after: initial;
break-after: revert;
break-after: revert-layer;
break-after: unset;

```
 Each possible break point (in other words, each element boundary) is affected by three properties: the `break-after` value of the previous element, the [`break-before`](break-before) value of the next element, and the [`break-inside`](break-inside) value of the containing element.

 To determine if a break must be done, the following rules are applied:

 1. If any of the three concerned values is a *forced break value* (`always`, `left`, `right`, `page`, `column`, or `region`), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the `break-before` value has precedence over the `break-after` value, which itself has precedence over the `break-inside` value).
2. If any of the three concerned values is an *avoid break value* (`avoid`, `avoid-page`, `avoid-region`, or `avoid-column`), no such break will be applied at that point.

 Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding `avoid` value.


### Values



#### Generic break values

  `auto`  Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.

  `avoid`  Avoids any break (page, column, or region) from being inserted right after the principal box.

  
`always`  Experimental 
  Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.

  
`all`  Experimental 
  Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.

   #### Page break values

  `avoid-page`  Avoids any page break right after the principal box.

  `page`  Forces a page break right after the principal box.

  `left`  Forces one or two page breaks right after the principal box, whichever will make the next page into a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

  `right`  Forces one or two page breaks right after the principal box, whichever will make the next page into a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

  
`recto`  Experimental 
  Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)

  
`verso`  Experimental 
  Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a right page in a right-to-left spread.)

   #### Column break values

  `avoid-column`  Avoids any column break right after the principal box.

  `column`  Forces a column break right after the principal box.

   #### Region break values

  
`avoid-region`  Experimental 
  Avoids any region break right after the principal box.

  
`region`  Experimental 
  Forces a region break right after the principal box.

  
Page break aliases
------------------



For compatibility reasons, the legacy [`page-break-after`](page-break-after) property should be treated by browsers as an alias of `break-after`. This ensures that sites using `page-break-after` continue to work as designed. A subset of values should be aliased as follows:

 

| page-break-after | break-after |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

  **Note:** The `always` value of `page-break-*` was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to `page`, rather than the `always` value in the Level 4 spec.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
break-after =   
  auto          [|](value_definition_syntax#single_bar)  
  avoid         [|](value_definition_syntax#single_bar)  
  always        [|](value_definition_syntax#single_bar)  
  all           [|](value_definition_syntax#single_bar)  
  avoid-page    [|](value_definition_syntax#single_bar)  
  page          [|](value_definition_syntax#single_bar)  
  left          [|](value_definition_syntax#single_bar)  
  right         [|](value_definition_syntax#single_bar)  
  recto         [|](value_definition_syntax#single_bar)  
  verso         [|](value_definition_syntax#single_bar)  
  avoid-column  [|](value_definition_syntax#single_bar)  
  column        [|](value_definition_syntax#single_bar)  
  avoid-region  [|](value_definition_syntax#single_bar)  
  region          
  

```
Examples
--------


### Breaking into neat columns



In the following example we have a container that contains an `<h1>` spanning all columns (achieved using `column-span: all`) and a series of `<h2>`s and paragraphs laid out in multiple columns using `column-width: 200px`.

 By default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place. However, we used `break-after: column` on the `<p>` elements to force a column break after each one, meaning that you end up with an `<h2>` neatly at the top of each column.

 #### HTML

 
```
<article>
  <h1>Main heading</h1>

  <h2>Subheading</h2>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <h2>Subheading</h2>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <h2>Subheading</h2>

  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>

  <h2>Subheading</h2>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
}

p {
  line-height: 1.5;
  break-after: column;
}

article {
  column-width: 200px;
  gap: 20px;
}

```

### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3 # break-between](https://w3c.github.io/csswg-drafts/css-break/#break-between) |
| [CSS Regions Module Level 1 # region-flow-break](https://w3c.github.io/csswg-drafts/css-regions/#region-flow-break) |
| [CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside](https://w3c.github.io/csswg-drafts/css-multicol/#break-before-break-after-break-inside) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `break-after` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |
| `multicol_context` | 50 | 12 | 65Only supported in print mode. See [bug 1675322](https://bugzil.la/1675322). | 10 | 3711.1–12.1 | No | 50 | 50 | 65Only supported in print mode. See [bug 1675322](https://bugzil.la/1675322). | 3711.1–12.1 | No | 5.0 |
| `paged_context` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/break-after>

break-inside
============


The `break-inside` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.


Try it
------


Syntax
------




```
/\* Keyword values \*/
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

/\* Global values \*/
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: revert-layer;
break-inside: unset;

```
 Each possible break point (in other words, each element boundary) is affected by three properties: the [`break-after`](break-after) value of the previous element, the [`break-before`](break-before) value of the next element, and the `break-inside` value of the containing element.

 To determine if a break must be done, the following rules are applied:

 1. If any of the three concerned values is a *forced break value* (`always`, `left`, `right`, `page`, `column`, or `region`), it has precedence. If more than one of them are such a break, the value of the element that appears the latest in the flow is used. Thus, the `break-before` value has precedence over the `break-after` value, which in turn has precedence over the `break-inside` value.
2. If any of the three concerned values is an *avoid break value* (`avoid`, `avoid-page`, `avoid-region`, or `avoid-column`), no such break will be applied at that point.

 Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding `avoid` value.


### Values


 `auto`  Allows, but does not force, any break (page, column, or region) to be inserted within the principal box.

  `avoid`  Avoids any break (page, column, or region) from being inserted within the principal box.

  `avoid-page`  Avoids any page break within the principal box.

  `avoid-column`  Avoids any column break within the principal box.

  
`avoid-region`  Experimental 
  Avoids any region break within the principal box.

  Page break aliases
------------------



For compatibility reasons, the legacy [`page-break-inside`](page-break-inside) property should be treated by browsers as an alias of `break-inside`. This ensures that sites using `page-break-inside` continue to work as designed. A subset of values should be aliased as follows:

 

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
break-inside =   
  auto          [|](value_definition_syntax#single_bar)  
  avoid         [|](value_definition_syntax#single_bar)  
  avoid-page    [|](value_definition_syntax#single_bar)  
  avoid-column  [|](value_definition_syntax#single_bar)  
  avoid-region    
  

```
Examples
--------


### Avoiding breaking inside a figure



In the following example we have a container that contains an `<h1>` spanning all columns (achieved using `column-span: all`) and a series of paragraphs laid out in multiple columns using `column-width: 200px`. We also have a `<figure>` containing an image and a caption.

 By default, it is possible for you to get a break between the image and its caption, which is not what we want. To avoid this, we have set `break-inside: avoid` on the `<figure>`, which causes them to always stay together.

 #### HTML

 
```
<article>
  <h1>Main heading</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>

  <figure>
    <img
 src="https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png" />
    <figcaption>The Firefox logo — fox wrapped around the world</figcaption>
  </figure>

  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>

  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
}

body {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h1 + p {
  margin-top: 0;
}

p {
  line-height: 1.5;
  break-after: column;
}

figure {
  break-inside: avoid;
}

img {
  max-width: 70%;
  display: block;
  margin: 0 auto;
}

figcaption {
  font-style: italic;
  font-size: 0.8rem;
  width: 70%;
}

article {
  column-width: 200px;
  gap: 20px;
}

```

### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3 # break-within](https://w3c.github.io/csswg-drafts/css-break/#break-within) |
| [CSS Regions Module Level 1 # region-flow-break](https://w3c.github.io/csswg-drafts/css-regions/#region-flow-break) |
| [CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside](https://w3c.github.io/csswg-drafts/css-multicol/#break-before-break-after-break-inside) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `break-inside` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |
| `multicol_context` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |
| `paged_context` | 50 | 12 | 65 | 10 | 3711.1–12.1 | 10 | 50 | 50 | 65 | 3711.1–12.1 | 10 | 5.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [Breaking Boxes With CSS Fragmentation](https://www.smashingmagazine.com/2019/02/css-fragmentation/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside>

brightness()
============


The `brightness()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`<filter-function>`](../filter-function) applies a linear multiplier value on an element or an input image, making the image appear brighter or darker.


Try it
------


Syntax
------



```
brightness(amount)

```
### Values



 `amount`  Brightness specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value less than `100%` darkens the input image or element, while a value over `100%` brightens it. A value of `0%` creates a completely black image or element, while a value of `100%` leaves the input unchanged. Other values between `0%` to `100%` have a linear multiplier effect. Values greater than `100%` are allowed, providing brighter results. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `1`. Negative values are not allowed. The default value, when nothing is specified, is `1`.

   The following are pairs of equivalent values:

 
```
brightness(0) /\* Brightness is reduced to zero, so input turns black \*/
brightness(0%)

brightness(0.4) /\* Brightness of input is reduced to 40%, so input is 60% darker \*/
brightness(40%)

brightness(1) /\* Brightness of input is not changed \*/
brightness(100%)

brightness(2) /\* Brightness of input is doubled \*/
brightness(200%)

```

### Formal syntax



```
<brightness()> =   
  brightness( [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) [<percentage>](../percentage) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  

```
Examples
--------


### Applying brightness using the backdrop-filter property



This example shows how to apply the `brightness()` filter to a paragraph via the [`backdrop-filter`](../backdrop-filter) CSS property.

 #### CSS

 
```
.container {
  background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px #ffffff;
}

```
 #### Result


 In this example, the colors in the area behind the `<p>` element shift linearly. If the `backdrop-filter` property was set to `brightness(0%)`, the `<div>` area with the `<p>` element would have been black and hidden the image behind. At `brightness(100%)`, the `<div>` area color would be the same as the input `#d4d5b2`, and the image behind would be completely transparent. With the brightness set to `150%` as in this example, the colors in the image behind are getting hidden by the brightness of the `<div>` element.`


### Applying brightness using the filter property



In this example, a `brightness()` filter is applied to the entire element, including content, border, and background image via the [`filter`](../filter) CSS property. The result shows three variations of different brightness values.

 
```
p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}

```


### Applying brightness using the url() SVG brightness filter



The SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element is used to define custom filter effects that can then be referenced by [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id). The `<filter>` element's [`<feComponentTransfer>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer) primitive enables pixel-level color remapping.

 In this example, to create a filter that darkens the content on which it is applied by 25% (i.e., 75% of the original brightness), the `slope` attribute is set to `0.75`. We can then reference the filter by `id`.

 Given the following:

 
```
<svg role="none">
  <filter id="darken25" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.75" />
      <feFuncG type="linear" slope="0.75" />
      <feFuncB type="linear" slope="0.75" />
    </feComponentTransfer>
  </filter>
</svg>

```
 The following declarations produce similar effects:

 
```
filter: brightness(75%);
filter: url(#darken25); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#darken25); /\* external svg filter definition \*/

```
 In the images below, the first one has a `brightness()` filter function applied, the second one has a similar SVG brightness function applied, and the third is the original image for comparison.



Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-brightness](https://drafts.fxtf.org/filter-effects/#funcdef-filter-brightness) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `brightness` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------


* [CSS filter effects](../filter_effects) module
* The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:
	+ [`blur()`](blur)
	+ [`contrast()`](contrast)
	+ [`drop-shadow()`](drop-shadow)
	+ [`grayscale()`](grayscale)
	+ [`hue-rotate()`](hue-rotate)
	+ [`invert()`](invert)
	+ [`opacity()`](opacity)
	+ [`saturate()`](saturate)
	+ [`sepia()`](sepia)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness>

@charset
========



The `@charset` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> 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 [nested statement](syntax#nested_statements), it cannot be used inside [conditional group at-rules](at-rule#conditional_group_rules). If several `@charset` at-rules are defined, only the first one is used, and it cannot be used inside a `style` attribute on an HTML element or inside the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element where the character set of the HTML page is relevant.

 
```
@charset "utf-8";

```
 This at-rule is useful when using non-ASCII characters in some CSS properties, like [`content`](content).

 As there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :

 1. The value of the [Unicode byte-order](https://en.wikipedia.org/wiki/Byte_order_mark) character placed at the beginning of the file.
2. The value given by the `charset` attribute of the `Content-Type:` HTTP header or the equivalent in the protocol used to serve the style sheet.
3. The `@charset` CSS at-rule.
4. Use the character encoding defined by the referring document: the `charset` attribute of the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element. This method is obsolete and should not be used.
5. Assume that the document is UTF-8



Syntax
------



```
@charset "UTF-8";
@charset "iso-8859-15";

```
### Formal syntax




```
@charset "<charset>";

```
  *charset*  A [`<string>`](string) denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the [IANA-registry](https://www.iana.org/assignments/character-sets/character-sets.xhtml), and must be double-quoted, following exactly one space character (U+0020), and immediately terminated with a semicolon. If several names are associated with an encoding, only the one marked with *preferred* must be used.

  
Examples
--------


### Valid and invalid charset declarations



```
@charset "UTF-8"; /\* Set the encoding of the style sheet to Unicode UTF-8 \*/
@charset 'iso-8859-15'; /\* Invalid, wrong quoting style used \*/
@charset "UTF-8"; /\* Invalid, more than one space \*/
 @charset "UTF-8"; /\* Invalid, there is a character (a space) before the at-rule \*/
@charset UTF-8; /\* Invalid, without ' or ", the charset is not a CSS <string> \*/

```
Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset①](#) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@charset` | 2 | 12 | 1.5Firefox 1 supported an invalid syntax where the character encoding is not between single or double quotes. | 5.5From Internet Explorer 5.5 to IE 7 (inclusive), Internet Explorer supported an invalid syntax where the character encoding is not between single or double quotes. | 9 | 4 | 2 | 18 | 4 | 10.1 | 4 | 1.0 |


See also
--------


* [Character set](https://developer.mozilla.org/en-US/docs/Glossary/Character_set) glossary entry
* [Unicode](https://developer.mozilla.org/en-US/docs/Glossary/Unicode) glossary entry


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@charset>

calc()
======


The `calc()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) lets you perform calculations when specifying CSS property values. It can be used with [`<length>`](length), [`<frequency>`](frequency), [`<angle>`](angle), [`<time>`](time), [`<percentage>`](percentage), [`<number>`](number), or [`<integer>`](integer) values.


Try it
------


Syntax
------




```
/\* property: calc(expression) \*/
width: calc(100% - 80px);

```
 The `calc()` function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard [operator precedence rules](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#operator_precedence):

  `+`  Addition.

  `-`  Subtraction.

  `*`  Multiplication. At least one of the arguments must be a [`<number>`](number).

  `/`  Division. The right-hand side must be a [`<number>`](number).

   The operands in the expression may be any [`<length>`](length) syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.


### Notes


* The `+` and `-` operators **must be surrounded by [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace)**. For instance, `calc(50% -8px)` will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while `calc(50% - 8px)` is "a percentage followed by a subtraction operator and a length". Likewise, `calc(8px + -50%)` is treated as "a length followed by an addition operator and a negative percentage".
* The `*` and `/` operators do not require whitespace, but adding it for consistency is recommended.
* Division by zero results in an error being generated by the HTML parser.
* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `calc()` functions, in which case the inner ones are treated as simple parentheses.
* For lengths, you can't use `0` to mean `0px` (or another length unit); instead, you must use the version with the unit: `margin-top: calc(0px + 20px);` is valid, while `margin-top: calc(0 + 20px);` is invalid.
* The `calc()` function cannot directly substitute the numeric value for percentage types; for instance `calc(100 / 4)%` is invalid, while `calc(100% / 4)` is valid.
### Formal syntax



```
<calc()> =   
  calc( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Accessibility concerns
----------------------



When `calc()` is used for controlling text size, be sure that one of the values includes a [relative length unit](length#relative_length_units), for example:

 
```
h1 {
  font-size: calc(1.5rem + 3vw);
}

```
 This ensures that text size will scale if the page is zoomed.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Usage with integers
-------------------



When `calc()` is used where an [`<integer>`](integer) is expected, the value will be rounded to the nearest integer. For example:

 
```
.modal {
  z-index: calc(3 / 2);
}

```
 This will give `.modal` a final `z-index` value of 2.


Examples
--------


### Positioning an object on screen with a margin



`calc()` makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

 
```
.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

```
 
```
<div class="banner">This is a banner!</div>

```


### Automatically sizing form fields to fit their container



Another use case for `calc()` is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

 Let's look at some CSS:

 
```
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

```
 Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use `calc()` again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

 
```
<form>
  <div id="formbox">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

```


### Nested `calc()` with CSS Variables



You can also use `calc()` with [CSS variables](css_variables). Consider the following code:

 
```
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

```
 After all variables are expanded, `widthC`'s value will be `calc(calc(100px / 2) / 2)`, then when it's assigned to `.foo`'s width property, all inner `calc()`s (no matter how deeply nested) will be flattened to just parentheses, so the `width` property's value will be eventually `calc((100px / 2) / 2)`, i.e. `25px`. In short: a `calc()` inside of a `calc()` is identical to just parentheses.


Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # calc-func](https://w3c.github.io/csswg-drafts/css-values/#calc-func) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `calc` | 2619 | 12 | 16["Before Firefox 59 `calc()` is not supported in `rgb()` and other color functions.", "Before Firefox 57 `calc(1*2*3)` is not parsed successfully.", "Firefox 57 increased the number of places `calc()` could substitute another value. See [bug 1350857](https://bugzil.la/1350857)."]4–53 | 9 | 15 | 76 | ≤37≤37 | 28 | 16["Before Firefox 59 `calc()` is not supported in `rgb()` and other color functions.", "Before Firefox 57 `calc(1*2*3)` is not parsed successfully.", "Firefox 57 increased the number of places `calc()` could substitute another value. See [bug 1350857](https://bugzil.la/1350857)."]4–53 | 14 | 76 | 1.5 |
| `gradient_color_stops` | 19 | 12 | 19 | 9 | 15 | 6 | 37 | 28 | 19 | 15 | 6 | 1.5 |
| `nested` | 51 | 16 | 48 | No | 38 | 11 | 51 | 51 | 48 | 41 | 11 | 5.0 |
| `number_values` | 31 | 12 | 48 | 9 | 18 | 6 | 4.4.3 | 31 | 48 | 18 | 6 | 2.0 |


See also
--------


* [CSS functions](css_functions)
* [A Complete Guide to calc() in CSS](https://css-tricks.com/a-complete-guide-to-calc-in-css/) (CSS-Tricks)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/calc>

clamp()
=======


The `clamp()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.


Try it
------



 Note that using `clamp()` for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) but in one line, and without the use of media queries.


Syntax
------



```
/\* Static values \*/
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/\* Calculated values \*/
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

```
### Parameters



The `clamp(min, val, max)` function accepts three comma-separated expressions as its parameters.

  `min`  The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.

  `val`  The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.

  `max`  The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.

   The expressions can be math functions (see [`calc()`](calc) for more information), literal values, other expressions that evaluate to a valid argument type (like [`<length>`](length)), or nested [`min()`](min) and [`max()`](max) functions. For math expressions, you can use addition, subtraction, multiplication, and division without using the `calc()` function itself. You may also use parentheses to establish computation order when needed.

 You can use different units for each value in your expressions and different units in any math function making up any of the arguments.

 Keep the following aspects in mind while working with the function:

 * Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `max()` and `min()` functions as expression values, in which case the inner ones are treated as simple parentheses. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
* The expression can be values combining the addition ( `+` ), subtraction ( `-` ), multiplication ( `*` ) and division ( `/` ) operators, using standard operator precedence rules. Make sure to put a space on each side of the `+` and `-` operands. The operands in the expression may be any [`<length>`](length) syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
* Oftentimes you will want to use [`min()`](min) and [`max()`](max) within a `clamp()` function.


### Return value



`clamp(MIN, VAL, MAX)` is resolved as `[`max`](max)(MIN, [`min`](min)(VAL, MAX))`.

 Based on the provided parameters, the function returns [`<length>`](length), [`<frequency>`](frequency), [`<angle>`](angle), [`<time>`](time), [`<percentage>`](percentage), [`<number>`](number), or [`<integer>`](integer).


### Formal syntax



```
<clamp()> =   
  clamp( <calc-sum>[#](value_definition_syntax#hash_mark)[{3}](value_definition_syntax#curly_braces) )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### min(), max(), and clamp() comparison



In this example we have a web page that uses [`min()`](min), [`max()`](max), and [`clamp()`](clamp) to set sizes responsively.

 The example adjusts the sizes of page elements in three ways:

 * the lengths of the lines of text
* the font size of paragraph text
* the font size of heading text

 In all three cases, the page uses a combination of a viewport-relative units ([`vw`](length#vw) and [`<percentage>`](percentage)), to set a size that varies with the viewport width, and a value that is not viewport relative ([`rem`](length#rem) and [`px`](length#px)) to implement minimum and/or maximum sizes.

 The example is at <https://mdn.github.io/css-examples/min-max-clamp/>. Open it in a new window and try adjusting the window width.

 The **line length** (controlled by the [`width`](width) of the [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element) will increase as the window width increases, but only up to a certain point (`1000px`), and beyond that point, it won't increase anymore. We're using `min()` to set a **maximum line length**: it can go under `1000px`, but won't go over. This is helpful because long lines are harder to read, so we often want to limit how long a line can be. To achieve this we use `min(1000px, calc(70% + 100px))`: when the result of the percentage-based calculation goes above `1000px`, we switch to the fixed `1000px` value.

 The **size of the paragraph text**, controlled by the [`font-size`](font-size) of the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element, decreases as the window gets narrower, but only up to a certain point, and beyond that point (the point where `1.2vw` is less than `1.2rem`) it doesn't get any smaller: it stays at `1.2rem`. We're using `max()` to set a **minimum font size**: the font can grow above `1.2rem` but will never go below it. This is helpful because really small text is hard to read. To achieve this we use `max(1.2rem, 1.2vw)`. This means that the `font-size` will be set at `1.2rem`, unless the computed value of `1.2vw` is greater than that of `1.2rem`, in which case it will be set to `1.2vw` instead.

 The **size of the heading text**, controlled by the [`font-size`](font-size) of the [`<h1>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) element, has a viewport-relative value with both a maximum and a minimum threshold. To achieve this we use `clamp(1.8rem, 2.5vw, 2.8rem)`. The viewport-relative value is `2.5vw` but it is clamped between `1.8rem` and `2.8rem`, so:

 * if the calculated value of `2.5vw` is less than `1.8rem`, then `1.8rem` will be used
* if the calculated value of `2.5vw` is greater than `2.8rem`, then `2.8rem` will be used.

 This prevents the heading text from getting too small in a very narrow window, or too big in a very wide window.

 #### HTML

 
```
<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>

```
 #### CSS

 
```
html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # calc-notation](https://w3c.github.io/csswg-drafts/css-values/#calc-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `clamp` | 79 | 79 | 75 | No | 66 | 13.1 | 79 | 79 | 79 | 57 | 13.4 | 12.0 |


See also
--------


* [`calc()`](calc)
* [`max()`](max)
* [`min()`](min)
* [CSS Values](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/clamp>

clear
=====


The `clear` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an element must be moved below (cleared) [floating](float) elements that precede it. The `clear` property applies to floating and non-floating elements.


Try it
------



 When applied to non-floating blocks, it moves the [border edge](css_box_model/introduction_to_the_css_box_model#border_area) of the element down until it is below the [margin edge](css_box_model/introduction_to_the_css_box_model#margin_area) of all relevant floats. The non-floated block's top margin collapses.

 Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

 The floats that are relevant to be cleared are the earlier floats within the same [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).

  **Note:** If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element's [`display`](display) property to [`flow-root`](display#flow-root).

 
```
#container {
  display: flow-root;
}

```
 
Syntax
------



```
/\* Keyword values \*/
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/\* Global values \*/
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;

```
### Values


 `none`  Is a keyword indicating that the element is *not* moved down to clear past floating elements.

  `left`  Is a keyword indicating that the element is moved down to clear past *left* floats.

  `right`  Is a keyword indicating that the element is moved down to clear past *right* floats.

  `both`  Is a keyword indicating that the element is moved down to clear past *both* left and right floats.

  `inline-start`  Is a keyword indicating that the element is moved down to clear floats on *start side of its containing block*, that is the *left* floats on ltr scripts and the *right* floats on rtl scripts.

  `inline-end`  Is a keyword indicating that the element is moved down to clear floats on *end side of its containing block*, that is the *right* floats on ltr scripts and the *left* floats on rtl scripts.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | block-level elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
clear =   
  inline-start  [|](value_definition_syntax#single_bar)  
  inline-end    [|](value_definition_syntax#single_bar)  
  block-start   [|](value_definition_syntax#single_bar)  
  block-end     [|](value_definition_syntax#single_bar)  
  left          [|](value_definition_syntax#single_bar)  
  right         [|](value_definition_syntax#single_bar)  
  top           [|](value_definition_syntax#single_bar)  
  bottom        [|](value_definition_syntax#single_bar)  
  none            
  

```
Examples
--------


### clear: left



#### HTML

 
```
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

```
 #### CSS

 
```
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

```


### clear: right



#### HTML

 
```
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

```
 #### CSS

 
```
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

```


### clear: both



#### HTML

 
```
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>

```
 #### CSS

 
```
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

```


Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-clear](https://w3c.github.io/csswg-drafts/css2/#propdef-clear) |
| [CSS Logical Properties and Values Level 1 # float-clear](https://w3c.github.io/csswg-drafts/css-logical/#float-clear) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `clear` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `flow_relative_values` | 70 | 79 | 55 | No | 57 | preview | No | 70 | 55 | No | No | No |


See also
--------


* [CSS basic box model](css_box_model/introduction_to_the_css_box_model)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/clear>

clip
====



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

  **Warning:** Where possible, authors are encouraged to use the newer [`clip-path`](clip-path) property instead.

  The `clip` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a visible portion of an element. The `clip` property applies only to absolutely positioned elements — that is, elements with [`position:absolute`](position) or [`position:fixed`](position).



Syntax
------



```
/\* Keyword value \*/
clip: auto;

/\* <shape> values \*/
clip: rect(1px, 10em, 3rem, 2ch);

/\* Global values \*/
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;

```
### Values


 [`<shape>`](shape)  A rectangular [`<shape>`](shape) of the form `rect(<top>, <right>, <bottom>, <left>)`. The `<top>` and `<bottom>` values are offsets from the *inside top border edge* of the box, while `<right>` and `<left>` are offsets from the *inside left border edge* of the box — that is, the extent of the padding box.

 The `<top>`, `<right>`, `<bottom>`, and `<left>` values may be either a [`<length>`](length) or `auto`. If any side's value is `auto`, the element is clipped to that side's *inside border edge*.

  `auto`  The element does not clip (default). This is different from `rect(auto, auto, auto, auto)`, which clips to the element's inside border edges.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | absolutely positioned elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | `auto` if specified as `auto`, otherwise a rectangle with four values, each of which is `auto` if specified as `auto` or the computed length otherwise |
| Animation type | a [rectangle](shape#interpolation) |

Formal syntax
-------------



```
clip =   
  <rect()>  [|](value_definition_syntax#single_bar)  
  auto        
  
<rect()> =   
  rect( [[](value_definition_syntax#brackets) <length-percentage> [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{4}](value_definition_syntax#curly_braces) [[](value_definition_syntax#brackets) round <'border-radius'> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Clipping an image



#### HTML

 
```
<p class="dotted-border">
  <img src="macarons.png" alt="Original graphic" />
  <img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
  <img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
  <img
 id="bottom-right"
 src="macarons.png"
 alt="Graphic clipped to bottom right" />
</p>

```
 #### CSS

 
```
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

#top-left,
#middle,
#bottom-right {
  position: absolute;
  top: 0;
}

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # clip-property](https://drafts.fxtf.org/css-masking/#clip-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `clip` | 1 | 12 | 1 | 4Before Internet Explorer 7, Internet Explorer incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`. | 7 | 1Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`. | 37 | 18 | 4 | 14 | 1Safari incorrectly interprets `clip: auto` as `clip: rect(auto, auto, auto, auto)`. | 1.0 |


See also
--------


* This property is deprecated. Use [`clip-path`](clip-path) instead.
* Related CSS properties:
	+ [`text-overflow`](text-overflow)
	+ [`white-space`](white-space)
	+ [`overflow-x`](overflow-x)
	+ [`overflow-y`](overflow-y)
	+ [`overflow`](overflow)
	+ [`display`](display)
	+ [`position`](position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/clip>

color-scheme
============



The `color-scheme` CSS property allows an element to indicate which color schemes it can comfortably be rendered in.

 Common choices for operating system color schemes are "light" and "dark", or "day mode" and "night mode". When a user selects one of these color schemes, the operating system makes adjustments to the user interface. This includes form controls, scrollbars, and the used values of CSS system colors.



Try it
------


Syntax
------




```
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/\* Global values \*/
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

```
 The `color-scheme` property's value must be one of the following keywords.


### Values


 `normal`  Indicates that the element isn't aware of any color schemes, and so should be rendered using the browser's default color scheme.

  `light`  Indicates that the element can be rendered using the operating system light color scheme.

  `dark`  Indicates that the element can be rendered using the operating system dark color scheme.

  `only`  Forbids the user agent from overriding the color scheme for the element.

 Can be used to turn off color overrides caused by Chrome's [Auto Dark Theme](https://developer.chrome.com/blog/auto-dark-theme/#per-element-opt-out), by applying `color-scheme: only light;` on a specific element or `:root`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements and text |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
color-scheme =   
  normal                                       [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) light [|](value_definition_syntax#single_bar) dark [|](value_definition_syntax#single_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) [&&](value_definition_syntax#double_ampersand) only[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Adapting to color schemes



To opt the entire page into the user's color scheme preferences declare `color-scheme` on the [`:root`](:root) element.

 
```
:root {
  color-scheme: light dark;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Color Adjustment Module Level 1 # color-scheme-prop](https://w3c.github.io/csswg-drafts/css-color-adjust/#color-scheme-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color-scheme` | 81 | 81 | 96 | No | 68 | 13 | 81 | 81 | 96 | 58 | 13 | 13.0 |
| `only_dark` | No | No | No | No | No | 13 | No | No | No | No | 13 | No |
| `only_light` | 81–85 | 81–85 | No | No | 68–71 | 13 | No | 81–85 | No | 58–60 | 13 | 13.0–14.0 |


See also
--------


* [`prefers-color-scheme`](@media/prefers-color-scheme) media query to detect user preferences for color schemes.
* [Applying color to HTML elements using CSS](css_colors/applying_color)
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [`background-image`](background-image)
* [`print-color-adjust`](print-color-adjust)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme>

column-count
============


The `column-count` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property breaks an element's content into the specified number of columns.


Try it
------


Syntax
------



```
/\* Keyword value \*/
column-count: auto;

/\* <integer> value \*/
column-count: 3;

/\* Global values \*/
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: revert-layer;
column-count: unset;

```
### Values


 `auto`  The number of columns is determined by other CSS properties, such as [`column-width`](column-width).

  [`<integer>`](integer)  Is a strictly positive [`<integer>`](integer) describing the ideal number of columns into which the content of the element will be flowed. If the [`column-width`](column-width) is also set to a non-`auto` value, it merely indicates the maximum allowed number of columns.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | Block containers except table wrapper boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | an [integer](integer#interpolation) |

Formal syntax
-------------



```
column-count =   
  auto             [|](value_definition_syntax#single_bar)  
  [<integer [1,∞]>](integer)    
  

```
Examples
--------


### Splitting a paragraph across three columns



#### HTML

 
```
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `column-count`
  property. The text is equally distributed over the columns.
</p>

```
 #### CSS

 
```
.content-box {
  column-count: 3;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # cc](https://w3c.github.io/csswg-drafts/css-multicol/#cc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-count` | 501 | 1212 | 521.5–74Before version 37, multiple columns didn't work with `display: table-caption` elements. | 10 | 1511.1 | 93 | 50≤37 | 5018 | 524Before version 37, multiple columns didn't work with `display: table-caption` elements. | 1411.1 | 91 | 5.01.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) (Learn Layout)
* [Basic Concepts of Multicol](css_columns/basic_concepts_of_multicol)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-count>

:checked
========


The `:checked` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector represents any **radio** ([`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)), **checkbox** ([`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)), or **option** ([`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) in a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)) element that is checked or toggled to an `on` state.


Try it
------



 The user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.

  **Note:** Because browsers often treat `<option>`s as [replaced elements](replaced_element), the extent to which they can be styled with the `:checked` pseudo-class varies from browser to browser.

 
Syntax
------



```
:checked {
  /\* ... \*/
}

```
Examples
--------


### Basic example



#### HTML

 
```
<div>
  <input type="radio" name="my-input" id="yes" value="yes" />
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no" value="no" />
  <label for="no">No</label>
</div>

<div>
  <input type="checkbox" name="my-checkbox" id="opt-in" />
  <label for="opt-in">Check me!</label>
</div>

<select name="my-select" id="fruit">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

```
 #### CSS

 
```
div,
select {
  margin: 8px;
}

/\* Labels for checked inputs \*/
input:checked + label {
  color: red;
}

/\* Radio element, when checked \*/
input[type="radio"]:checked {
  box-shadow: 0 0 0 3px orange;
}

/\* Checkbox element, when checked \*/
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
}

/\* Option elements, when selected \*/
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

```
 #### Result



### Toggling elements with a hidden checkbox



This example utilizes the `:checked` pseudo-class to let the user toggle content based on the state of a checkbox, all without using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript).

 #### HTML

 
```
<input type="checkbox" id="expand-toggle" />

<table>
  <thead>
    <tr>
      <th>Column #1</th>
      <th>Column #2</th>
      <th>Column #3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr class="expandable">
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
  </tbody>
</table>

<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>

```
 #### CSS

 
```
/\* Hide the toggle checkbox \*/
#expand-toggle {
  display: none;
}

/\* Hide expandable content by default \*/
.expandable {
  visibility: collapse;
  background: #ddd;
}

/\* Style the button \*/
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}

/\* Show hidden content when the checkbox is checked \*/
#expand-toggle:checked ~ \* .expandable {
  visibility: visible;
}

/\* Style the button when the checkbox is checked \*/
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-checked](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-checked) |
| [Selectors Level 4 # checked](https://w3c.github.io/csswg-drafts/selectors/#checked) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:checked` | 1On macOS, styling `<option>` elements has no effect. | 12On macOS, styling `<option>` elements has no effect. | 1["From Firefox 56, `<option>` elements cannot be styled.", "On macOS, styling `<option>` elements has no effect."] | 9 | 9On macOS, styling `<option>` elements has no effect. | 3.1Styling `<option>` elements has no effect. | 2 | 18 | 4From Firefox 56, `<option>` elements cannot be styled. | 10.1 | 2Styling `<option>` elements has no effect. | 1.0 |


See also
--------


* [Web forms — working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)
* [Styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms)
* Related HTML elements: [`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), and [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)
* [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:checked>

column-rule-width
=================


The `column-rule-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the line drawn between columns in a multi-column layout.


Try it
------


Syntax
------




```
/\* Keyword values \*/
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/\* <length> values \*/
column-rule-width: 1px;
column-rule-width: 2.5em;

/\* Global values \*/
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: revert-layer;
column-rule-width: unset;

```
 The `column-rule-width` property is specified as a single `<'border-width'>` value.


### Values


 `<'border-width'>`  Is a keyword defined by [`border-width`](border-width) describing the width of the rule. It may be either a [`<length>`](length) or one of the `thin`, `medium`, or `thick` keywords.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | multicol elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length; `0` if the [`column-rule-style`](column-rule-style) is `none` or `hidden` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
column-rule-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Setting a thick column rule



#### HTML

 
```
<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

```
 #### CSS

 
```
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # crw](https://w3c.github.io/csswg-drafts/css-multicol/#crw) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-rule-width` | 501 | 1212 | 523.5–74 | 10 | 1511.1 | 93 | 50≤37 | 5018 | 524 | 1411.1 | 91 | 5.01.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [`column-rule-style`](column-rule-style)
* [`column-rule-color`](column-rule-color)
* [`column-rule`](column-rule)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width>

clip-path
=========


The `clip-path` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.


Try it
------


Syntax
------




```
/\* Keyword values \*/
clip-path: none;

/\* <clip-source> values \*/
clip-path: url(resources.svg#c1);

/\* <geometry-box> values \*/
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/\* <basic-shape> values \*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/\* Box and shape values combined \*/
clip-path: padding-box circle(50px at 0 100px);

/\* Global values \*/
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

```
 The `clip-path` property is specified as one or a combination of the values listed below.


### Values



 `<clip-source>`  A [`url()`](url) referencing an [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) [`<clipPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath) element.

  [`<basic-shape>`](basic-shape)  A shape whose size and position is defined by the `<geometry-box>` value. If no geometry box is specified, the `border-box` will be used as the reference box. One of:

  [`inset()`](basic-shape/inset)  Defines an inset rectangle.

  [`circle()`](basic-shape/circle)  Defines a circle using a radius and a position.

  [`ellipse()`](basic-shape/ellipse)  Defines an ellipse using two radii and a position.

  [`polygon()`](basic-shape/polygon)  Defines a polygon using an SVG filling rule and a set of vertices.

  [`path()`](path)  Defines a shape using an optional SVG filling rule and an SVG path definition.

    `<geometry-box>`  If specified in combination with a `<basic-shape>`, this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a [`border-radius`](border-radius)), to be the clipping path. The geometry box can be one of the following values:

  `margin-box`  Uses the [margin box](css_shapes/from_box_values#margin-box) as the reference box.

  `border-box`  Uses the [border box](css_shapes/from_box_values#border-box) as the reference box.

  `padding-box`  Uses the [padding box](css_shapes/from_box_values#padding-box) as the reference box.

  `content-box`  Uses the [content box](css_shapes/from_box_values#content-box) as the reference box.

  `fill-box`  Uses the object bounding box as the reference box.

  `stroke-box`  Uses the stroke bounding box as the reference box.

  `view-box`  Uses the nearest SVG viewport as the reference box. If a `[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)` attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the size of the reference box is set to the width and height values of the `viewBox` attribute.

    `none`  No clipping path is created.

    **Note:** A computed value other than `none` results in the creation of a new [stacking context](css_positioning/understanding_z_index/the_stacking_context) the same way that CSS [`opacity`](opacity) does for values other than `1`.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| Percentages | refer to reference box when specified, otherwise border-box |
| [Computed value](computed_value) | as specified, but with [`url()`](url) values made absolute |
| Animation type | yes, as specified for [`<basic-shape>`](basic-shape), otherwise no |

Formal syntax
-------------



```
clip-path =   
  <clip-source>                        [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<basic-shape>](basic-shape) [||](value_definition_syntax#double_bar) <geometry-box> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  none                                   
  
<clip-source> =   
  <url>    
  
<geometry-box> =   
  <shape-box>  [|](value_definition_syntax#single_bar)  
  fill-box     [|](value_definition_syntax#single_bar)  
  stroke-box   [|](value_definition_syntax#single_bar)  
  view-box       
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<shape-box> =   
  <box>       [|](value_definition_syntax#single_bar)  
  margin-box    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  

```
Examples
--------


### Comparison of HTML and SVG




```
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container::before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.view-box {
  box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset;
}

.container.view-box::after {
  content: "view-box";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}

```


### Complete example



#### HTML

 
```
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>

```
 #### CSS

 
```
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-clip-path](https://drafts.fxtf.org/css-masking/#the-clip-path) |
| [CSS Shapes Module Level 1 # supported-basic-shapes](https://w3c.github.io/csswg-drafts/css-shapes/#supported-basic-shapes) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `clip-path` | 5523 | 7912Only supports clip paths defined by `url()`. | 3.5 | 10Only supports clip paths defined by `url()`. | 4215 | 9.17 | 554.4 | 5525 | 4 | 4214 | 9.37 | 6.01.5 |
| `animations` | 55 | 79 | 49 | No | 42 | No | 55 | 55 | 49 | 42 | No | 6.0 |
| `basic_shape` | 23 | 79 | 54 | No | 15 | 7 | 4.4 | 25 | 54 | 14 | 7 | 1.5 |
| `fill_and_stroke_box` | No | No | 51This value was supported before Firefox 51, but as an alias to `border-box`. | No | No | preview | No | No | 51This value was supported before Firefox 51, but as an alias to `border-box`. | No | No | No |
| `html` | 23 | 79 | 3.5 | No | 15 | 7 | 4.4 | 25 | 4 | 14 | 7 | 1.5 |
| `path` | 88 | 88 | 71 | No | No | 13.110 | 88 | 88 | 79 | No | 1310 | 15.0 |
| `svg` | 23 | 12 | 52 | 10 | 15 | 7 | 4.4 | 25 | 52 | 14 | 7 | 1.5 |


See also
--------


* [Shapes in clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
* CSS properties: [`mask`](mask), [`filter`](filter)
* [Applying SVG effects to HTML content](https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
* SVG attributes:
	+ `[clip-path](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-path)`
	+ `[clip-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-rule)`


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>

color
=====


The `color` CSS property sets the foreground [color value](color_value) of an element's text and [text decorations](text-decoration), and sets the [`currentcolor`](color_value#currentcolor_keyword) value. `currentcolor` may be used as an indirect value on *other* properties and is the default for other color properties, such as [`border-color`](border-color).


Try it
------



 For an overview of using color in HTML, see [Applying color to HTML elements using CSS](css_colors/applying_color).


Syntax
------




```
/\* Keyword values \*/
color: currentcolor;

/\* <named-color> values \*/
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/\* <hex-color> values \*/
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/\* <rgb()> values \*/
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/\* <hsl()> values \*/
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/\* <hwb()> values \*/
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

/\* Global values \*/
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

```
 The `color` property is specified as a single [`<color>`](color_value) value.

 Note that the value must be a uniform [`color`](color). It can't be a [`<gradient>`](gradient), which is actually a type of [`<image>`](image).


### Values


 [`<color>`](color_value)  Sets the color of the textual and decorative parts of the element.

  [`currentcolor`](color_value#currentcolor_keyword)  Sets the color to the element's `color` property value. However, if set as the value of `color`, `currentcolor` is treated as `inherit`.

  Accessibility concerns
----------------------



It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

 Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](font-weight) or larger, or 24px or larger.

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `canvastext` |
| Applies to | all elements and text. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | computed color |
| Animation type | by computed value type |

Formal syntax
-------------



```
color =   
  [<color>](color_value)    
  

```
Examples
--------


### Making text red



The following are all ways to make a paragraph's text red:

 
```
p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/\* 50% translucent \*/
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # the-color-property](https://w3c.github.io/csswg-drafts/css-color/#the-color-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* The [`<color>`](color_value) data type
* Other color-related properties: [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), [`column-rule-color`](column-rule-color), and [`print-color-adjust`](print-color-adjust)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color>

column-gap
==========


The `column-gap` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the size of the gap ([gutter](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)) between an element's columns.


Try it
------



 Initially a part of [Multi-column Layout](css_columns), the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in [Box Alignment](css_box_alignment), it may be used in Multi-column, Flexible Box, and Grid layouts.

 Note that `grid-column-gap` is an alias for this property.


Syntax
------




```
/\* Keyword value \*/
column-gap: normal;

/\* <length> values \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> value \*/
column-gap: 3%;

/\* Global values \*/
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;

```
 The `column-gap` property is specified as one of the values listed below.


### Values


 `normal`  The browser's default spacing is used between columns. For multi-column layout this is specified as `1em`. For all other layout types it is 0.

  [`<length>`](length)  The size of the gap between columns, defined as a [`<length>`](length). The [`<length>`](length) property's value must be non-negative.

  [`<percentage>`](percentage)  The size of the gap between columns, defined as a [`<percentage>`](percentage). The [`<percentage>`](percentage) property's value must be non-negative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | multi-column elements, flex containers, grid containers |
| [Inherited](inheritance) | no |
| Percentages | refer to corresponding dimension of the content area |
| [Computed value](computed_value) | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
column-gap =   
  normal                     [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Flex layout



#### HTML

 
```
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

```
 #### Result



### Grid layout



#### HTML

 
```
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

```
 #### Result



### Multi-column layout



#### HTML

 
```
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>

```
 #### CSS

 
```
.content-box {
  column-count: 3;
  column-gap: 40px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # column-row-gap](https://w3c.github.io/csswg-drafts/css-align/#column-row-gap) |
| [CSS Grid Layout Module Level 2 # gutters](https://w3c.github.io/csswg-drafts/css-grid/#gutters) |
| [CSS Multi-column Layout Module Level 1 # column-gap](https://w3c.github.io/csswg-drafts/css-multicol/#column-gap) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-gap` | 1 | 12 | 1.5 | 10 | 11.1 | 3 | 4.4 | 18 | 4 | 11.1 | 2 | 1.0 |
| `flex_context` | 84 | 84 | 63 | No | 70 | 14.1 | 84 | 84 | 63 | 60 | 14.5 | 14.0 |
| `grid_context` | 6657 | 1616 | 6152 | No | 5344 | 1210.1 | 6657 | 6657 | 6152 | 4743 | 1210.3 | 9.06.0 |
| `multicol_context` | 501 | 1212 | 521.5–74Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em`. | 10 | 371511.1–15 | 103 | 50≤37 | 5018 | 524 | 371411.1–14 | 103 | 5.01.0 |


See also
--------


* Related CSS properties: [`row-gap`](row-gap), [`gap`](gap)
* Grid Layout Guide: *[Basic concepts of grid layout - Gutters](css_grid_layout/basic_concepts_of_grid_layout#gutters)*
* Multi-column Layout Guide: *[Styling Columns](css_columns/styling_columns)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap>

column-rule
===========


The `column-rule` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width, style, and color of the line drawn between columns in a multi-column layout.


Try it
------



 It is a [shorthand property](shorthand_properties) that sets the individual `column-rule-*` properties in a single, convenient declaration: [`column-rule-width`](column-rule-width), [`column-rule-style`](column-rule-style), and [`column-rule-color`](column-rule-color).

  **Note:** As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties).

 
Syntax
------



```
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/\* Global values \*/
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;

```
### Values



The `column-rule` property is specified as one, two, or three of the values listed below, in any order.

  `<'column-rule-width'>`  Is a [`<length>`](length) or one of the three keywords, `thin`, `medium`, or `thick`. See [`border-width`](border-width) for details.

  `<'column-rule-style'>`  See [`border-style`](border-style) for possible values and details.

  `<'column-rule-color'>`  Is a [`<color>`](color_value) value.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`column-rule-width`](column-rule-width): `medium`
* [`column-rule-style`](column-rule-style): `none`
* [`column-rule-color`](column-rule-color): `currentcolor`
 |
| Applies to | multicol elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`column-rule-color`](column-rule-color): computed color
* [`column-rule-style`](column-rule-style): as specified
* [`column-rule-width`](column-rule-width): the absolute length; `0` if the [`column-rule-style`](column-rule-style) is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* [`column-rule-color`](column-rule-color): a [color](color_value#interpolation)
* [`column-rule-style`](column-rule-style): discrete
* [`column-rule-width`](column-rule-width): a [length](length#interpolation)
 |

Formal syntax
-------------



```
column-rule =   
  <'column-rule-width'>  [||](value_definition_syntax#double_bar)  
  <'column-rule-style'>  [||](value_definition_syntax#double_bar)  
  <'column-rule-color'>    
  

```
Examples
--------


### Example 1



```
/\* Same as "medium dotted currentcolor" \*/
p.foo {
  column-rule: dotted;
}

/\* Same as "medium solid blue" \*/
p.bar {
  column-rule: solid blue;
}

/\* Same as "8px solid currentcolor" \*/
p.baz {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}

```
### Example 2



#### HTML

 
```
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>

```
 #### CSS

 
```
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # column-rule](https://w3c.github.io/csswg-drafts/css-multicol/#column-rule) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-rule` | 501 | 1212 | 523.5–74Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em`. | 10 | 1511.1 | 93 | 50≤37 | 5018 | 524 | 1411.1 | 91 | 5.01.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [`column-rule-style`](column-rule-style)
* [`column-rule-width`](column-rule-width)
* [`column-rule-color`](column-rule-color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule>

column-rule-color
=================


The `column-rule-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the color of the line drawn between columns in a multi-column layout.


Try it
------


Syntax
------




```
/\* <color> values \*/
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 0.6);

/\* Global values \*/
column-rule-color: inherit;
column-rule-color: initial;
column-rule-color: revert;
column-rule-color: revert-layer;
column-rule-color: unset;

```
 The `column-rule-color` property is specified as a single `<color>` value.


### Values


 [`<color>`](color_value)  The color of the rule that separates columns.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | multicol elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
column-rule-color =   
  [<color>](color_value)    
  

```
Examples
--------


### Setting a blue column rule



#### HTML

 
```
<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

```
 #### CSS

 
```
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # crc](https://w3c.github.io/csswg-drafts/css-multicol/#crc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-rule-color` | 501 | 1212 | 523.5–74 | 10 | 1511.1 | 93 | 50≤37 | 5018 | 524 | 1411.1 | 91 | 5.01.0 |


See also
--------


* The [`<color>`](color_value) data type
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), and [`caret-color`](caret-color)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color>

column-rule-style
=================


The `column-rule-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the style of the line drawn between columns in a multi-column layout.


Try it
------


Syntax
------




```
/\* <'border-style'> values \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

/\* Global values \*/
column-rule-style: inherit;
column-rule-style: initial;
column-rule-style: revert;
column-rule-style: revert-layer;
column-rule-style: unset;

```
 The `column-rule-style` property is specified as a single `<'border-style'>` value.


### Values


 `<'border-style'>`  Is a keyword defined by [`border-style`](border-style) describing the style of the rule. The styling must be interpreted as in the collapsing border model.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | multicol elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
column-rule-style =   
  <line-style>    
  
<line-style> =   
  none    [|](value_definition_syntax#single_bar)  
  hidden  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  groove  [|](value_definition_syntax#single_bar)  
  ridge   [|](value_definition_syntax#single_bar)  
  inset   [|](value_definition_syntax#single_bar)  
  outset    
  

```
Examples
--------


### Setting a dashed column rule



#### HTML

 
```
<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

```
 #### CSS

 
```
p {
  column-count: 3;
  column-rule-style: dashed;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # crs](https://w3c.github.io/csswg-drafts/css-multicol/#crs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-rule-style` | 501 | 1212 | 523.5–74 | 10 | 1511.1 | 93 | 50≤37 | 5018 | 524 | 1411.1 | 91 | 5.01.0 |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [`column-rule`](column-rule)
* [`column-rule-width`](column-rule-width)
* [`column-rule-color`](column-rule-color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style>

columns
=======


The `columns` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`column-count`](column-count)
* [`column-width`](column-width)


Syntax
------




```
/\* Column width \*/
columns: 18em;

/\* Column count \*/
columns: auto;
columns: 2;

/\* Both column width and count \*/
columns: 2 auto;
columns: auto 12em;
columns: auto auto;

/\* Global values \*/
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;

```
 The `columns` property may be specified as one or two of the values listed below, in any order.


### Values


 `<'column-width'>`  The ideal column width, defined as a [`<length>`](length) or the keyword `auto`. The actual width may be wider or narrower to fit the available space. See [`column-width`](column-width).

  `<'column-count'>`  The ideal number of columns into which the element's content should be flowed, defined as an [`<integer>`](integer) or the keyword `auto`. If neither this value nor the column's width are `auto`, it merely indicates the maximum allowable number of columns. See [`column-count`](column-count).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`column-width`](column-width): `auto`
* [`column-count`](column-count): `auto`
 |
| Applies to | Block containers except table wrapper boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`column-width`](column-width): the absolute length, zero or larger
* [`column-count`](column-count): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`column-width`](column-width): a [length](length#interpolation)
* [`column-count`](column-count): an [integer](integer#interpolation)
 |

Formal syntax
-------------



```
columns =   
  <'column-width'>  [||](value_definition_syntax#double_bar)  
  <'column-count'>    
  

```
Examples
--------


### Setting three equal columns



#### HTML

 
```
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `columns`
  property. The text is equally distributed over the columns.
</p>

```
 #### CSS

 
```
.content-box {
  columns: 3 auto;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # columns](https://w3c.github.io/csswg-drafts/css-multicol/#columns) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `columns` | 5050 | 1212 | 529–74Before version 37, multiple columns didn't work with `display: table-caption` elements. | 10 | 1511.1 | 93 | 502 | 50 | 5222Before version 37, multiple columns didn't work with `display: table-caption` elements. | 1411.1 | 93.2 | 5.0 |


See also
--------


* [`widows`](widows)
* [`orphans`](orphans)
* [Paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media)
* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/columns>

<color>
=======



 The `<color>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a color. A `<color>` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Alpha_compositing) *transparency value*, indicating how the color should [composite](https://www.w3.org/TR/compositing-1/#simplealphacompositing) with its background. 

 A `<color>` can be defined in any of the following ways:

 * For the [sRGB color space](https://en.wikipedia.org/wiki/SRGB):
	+ A predefined keyword (such as `blue` or `pink`) as described in the [`<named-color>` page](named-color).
	+ [`rgb()`](color_value/rgb) functional notation or [`#` hexadecimal](hex-color) using the [RGB cubic-coordinate](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) system.
	+ [`hsl()`](color_value/hsl) functional notation using the [HSL cylindrical-coordinate](https://en.wikipedia.org/wiki/HSL_and_HSV) system.
	+ [`hwb()`](color_value/hwb) functional notation using the [HWB cylindrical-coordinate](https://en.wikipedia.org/wiki/HWB_color_model) system.
* Any visible color with the following:
	+ [`lch()`](color_value/lch) functional notation using the [LCH cylindrical coordinate system](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC).
	+ [`oklch()`](color_value/oklch) functional notation using the [Oklch cylindrical coordinate system](https://bottosson.github.io/posts/oklab/).
	+ [`lab()`](color_value/lab) functional notation using the [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color space.
	+ [`oklab()`](color_value/oklab) functional notation using the [Oklab](https://bottosson.github.io/posts/oklab/) color space.
* The [`color()`](color_value/color) functional notation, using a variety of predefined or custom color spaces.

  **Note:** These color values can be used to [apply color to HTML elements using CSS](css_colors/applying_color).

 

Syntax
------



The `<color>` data type is specified using one of the options listed below.

  **Note:** Although `<color>` values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' [color profiles](https://en.wikipedia.org/wiki/ICC_profile).

 
### Named colors



Named colors are case-insensitive identifiers that represent a specific color, such as `red`, `blue`, `black`, or `lightseagreen`. Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the names used.

 The complete list of such keywords is described on the [`<named-color>` page](named-color).


### currentcolor keyword



The `currentcolor` keyword represents the value of an element's [`color`](color) property. This lets you use the `color` value on properties that do not receive it by default.

 If `currentcolor` is used as the value of the `color` property, it instead takes its value from the inherited value of the `color` property.

 
```
<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

```


### RGB color model



The RGB color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its red, green, and blue components. An optional alpha component represents the color's transparency.

 RGB colors can be expressed through both hexadecimal (prefixed with `#`) and functional (`rgb()`, `rgba()`) notations.

  
[Hexadecimal notation](hex-color): `#RGB[A]` or`#RRGGBB[AA]`
  `R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0–9, A–F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. The three-digit notation (`#RGB`) is a shorter version of the six-digit form (`#RRGGBB`). For example, `#f09` is the same color as `#ff0099`. Likewise, the four-digit RGB notation (`#RGBA`) is a shorter version of the eight-digit form (`#RRGGBBAA`). For example, `#0f38` is the same color as `#00ff3388`.

  
[`rgb()`](color_value/rgb) (and the legacy `rgba()`): `rgb(R G B[ / A])` (or `rgb[a](R, G, B[, A])`
  `R` (red), `G` (green), and `B` (blue) can be either [`<number>`](number)s or [`<percentage>`](percentage)s, where the number `255` corresponds to `100%`. `A` (alpha) can be a [`<number>`](number) between `0` and `1`, or a [`<percentage>`](percentage), where the number `1` corresponds to `100%` (full opacity).

  
### HSL color model



The HSL color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

  
[`hsl()`](color_value/hsl): `hsl(H S L [ / A])` (or legacy `hsl(H, S, L [, A])`)  Where the `H` is the hue, taking as a value an [`<angle>`](angle) of the [color circle](color_value/hsl#values) given in `deg`s, `rad`s, `grad`s, or `turn`s. By definition, red is `0deg`, yellow is `60deg`, green is `120deg`, cyan is `180deg`, blue is `240deg`, and magenta is `300deg`. When written as a unitless [`<number>`](number), it is interpreted as degrees. The `S` is the saturation as a `<percentage>` value where 100% is completely saturated, while 0% is completely unsaturated (gray). The `L` is the lightness as a `<percentage>` value where 100% is white, 0% is black, and 50% is "normal". The optional `A` is alpha transparency as a `<percentage>` or a `<number>` between 0 and 1, where the number 1 or 100% and means full opacity and 0 or 0% and means fully transparent.

    Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue). However, using HSL to create color variations can produce surprising results, as it is not [perceptually uniform](https://en.wikipedia.org/wiki/Color_difference#Tolerance). For example, both `hsl(240 100% 50%)` and `hsl(60 100% 50%)` have the same lightness, even though the former is much darker than the latter. 

 HSL colors are expressed through the functional [`hsl()`](color_value/hsl) notation.

  **Note:** The legacy `hsla()` syntax is an alias for [`hsl()`](color_value/hsl), accepting the same parameters and behaving in the same way.

 
### HWB color model



Similar to HSL color model, the HWB color model defines a given color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB) according to its hue, whiteness and blackness components.

 As with HSL, HWB can be more intuitive to use than RGB. A hue is specified in the same way, followed by the amount of whiteness and blackness, respectively, in percentage values. This function also accepts an alpha value.

  **Note:** There is **no** separate `hwba()` function as there is with HSL, the alpha value is an optional parameter, if it is not specified an alpha value of 1 (or 100%) is used. To specify this value a forward slash (`/`) must follow the blackness value before the alpha value is specified.

  HWB colors are expressed through the functional `hwb()` notation.

  **Note:** The HWB function does **not** use commas to separate its values as with previous color functions.

   
[`hwb()`](color_value/hwb): `hwb(H W B[ / A])`
  Same as HSL: `H` (hue) is an [`<angle>`](angle) of the color circle given in `deg`s, `rad`s, `grad`s, or `turn`s in the [CSS Color](https://drafts.csswg.org/css-color/#the-hsl-notation) specification. When written as a unitless [`<number>`](number), it is interpreted as degrees, as specified in the [CSS Color Level 3](https://drafts.csswg.org/css-color-3/#hsl-color) specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an `<angle>`, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.

 `W` (whiteness) and `B` (blackness) are percentages. These two colors mix, so you would need `0%` **whiteness** and `100%` **blackness** to produce the color black. And vice versa `100%` whiteness and `0%` blackness for the color white. `50%` of both values renders a mid-grey and any other variations a shade of the hue specified.

 `A` (alpha), optional, can be a [`<number>`](number) between `0` and `1`, or a [`<percentage>`](percentage), where the number `1` corresponds to `100%` (full opacity). When specifying an alpha value it must be preceded with a forward slash (`/`).

  
### System Colors



In *forced colors mode* (detectable with the [forced-colors](@media/forced-colors) media query), most colors are restricted into a user- and browser-defined palette. These system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers.

 The keywords in the following list are defined by the CSS Color Module Level 4 specification: `AccentColor`, `AccentColorText`, `ActiveText`, `ButtonBorder`, `ButtonFace`, `ButtonText`, `Canvas`, `CanvasText`, `Field`, `FieldText`, `GrayText`, `Highlight`, `HighlightText`, `LinkText`, `Mark`, `MarkText`, `SelectedItem`, `SelectedItemText`, `VisitedText`.

  **Note:** Note that these keywords are *case-insensitive*, but are listed here with mixed case for readability.

 
### Lab colors


 CSS Color 4 introduced Lab colors. Lab colors are specified via the [`lab()`](color_value/lab) functional notation. They are not limited to a specific color space, and can represent the entire spectrum of human vision. 

### LCH color model



 CSS Color 4 introduced LCH colors. LCH colors are specified via the [`lch()`](color_value/lch) functional notation. They are not limited to a specific color space, and can represent the entire spectrum of human vision. 

  In fact, LCH is the polar form of Lab. It is more human friendly than Lab, as its chroma and hue components specify qualities of the desired color, as opposed to mixing. It is similar to HSL in that way, although it is far more perceptually uniform. Unlike HSL which describes both `hsl(60 100% 50%)` and `hsl(240 100% 50%)` as having the same lightness, LCH (and Lab) correctly ascribes different lightness to them: the former (yellow) has an L of 97.6 and the latter (blue) an L of 29.6. Therefore, LCH can be used to create palettes across entirely different colors, with predictable results. Please note that LCH hue is not the same as HSL hue and LCH chroma is not the same as HSL saturation, although they do share some conceptual similarities. 


### color() colors


 CSS Color 4 introduced this notation. Colors specified via the [`color()`](color_value/color) function can specify a color in any of the predefined color spaces, as well as custom color spaces, defined via the [`@color-profile`](@color-profile) rule. 

Interpolation
-------------



In animations and [gradients](css_images/using_css_gradients), `<color>` values are [interpolated](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) on each of their red, green, and blue components. By default, animation occurs in an RGBA color space, with interpolation's speed being determined by the [timing function](easing-function) in transitions and animations. To prevent unexpected colors from appearing, consider using [`color-mix()`](color_value/color-mix) functional notation.

 Interpolating the [`<hue>`](hue) of two colors in functions that accept a hue angle is also possible and is described in more detail in the [`color-mix()`](color_value/color-mix) functional notation documentation.


Accessibility considerations
----------------------------


Some people have difficulty distinguishing colors. The [WCAG 2.0](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Use_of_color) recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See [color and color contrast](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast) for more information.

Formal syntax
-------------



```
<color> =   
  <absolute-color-base>  [|](value_definition_syntax#single_bar)  
  currentcolor           [|](value_definition_syntax#single_bar)  
  [<system-color>](system-color)           
  
<absolute-color-base> =   
  [<hex-color>](hex-color)                [|](value_definition_syntax#single_bar)  
  <absolute-color-function>  [|](value_definition_syntax#single_bar)  
  [<named-color>](named-color)              [|](value_definition_syntax#single_bar)  
  transparent                  
  
<absolute-color-function> =   
  <rgb()>    [|](value_definition_syntax#single_bar)  
  [<rgba()>](rgba())   [|](value_definition_syntax#single_bar)  
  <hsl()>    [|](value_definition_syntax#single_bar)  
  [<hsla()>](hsla())   [|](value_definition_syntax#single_bar)  
  <hwb()>    [|](value_definition_syntax#single_bar)  
  <lab()>    [|](value_definition_syntax#single_bar)  
  <lch()>    [|](value_definition_syntax#single_bar)  
  <oklab()>  [|](value_definition_syntax#single_bar)  
  <oklch()>  [|](value_definition_syntax#single_bar)  
  <color()>    
  
<rgb()> =   
  rgb( [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets)[{3}](value_definition_syntax#curly_braces) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )  [|](value_definition_syntax#single_bar)  
  rgb( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets)[{3}](value_definition_syntax#curly_braces) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<hsl()> =   
  hsl( [[](value_definition_syntax#brackets) <hue> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<hwb()> =   
  hwb( [[](value_definition_syntax#brackets) <hue> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<lab()> =   
  lab( [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<lch()> =   
  lch( [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) <hue> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<oklab()> =   
  oklab( [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<oklch()> =   
  oklch( [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<percentage>](percentage) [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) <hue> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<color()> =   
  color( <colorspace-params> [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) <alpha-value> [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<alpha-value> =   
  [<number>](number)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  
<hue> =   
  [<number>](number)  [|](value_definition_syntax#single_bar)  
  [<angle>](angle)     
  
<colorspace-params> =   
  <predefined-rgb-params>  [|](value_definition_syntax#single_bar)  
  <xyz-params>               
  
<predefined-rgb-params> =   
  <predefined-rgb> [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets)[{3}](value_definition_syntax#curly_braces)    
  
<xyz-params> =   
  <xyz-space> [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) [|](value_definition_syntax#single_bar) none []](value_definition_syntax#brackets)[{3}](value_definition_syntax#curly_braces)    
  
<predefined-rgb> =   
  srgb          [|](value_definition_syntax#single_bar)  
  srgb-linear   [|](value_definition_syntax#single_bar)  
  display-p3    [|](value_definition_syntax#single_bar)  
  a98-rgb       [|](value_definition_syntax#single_bar)  
  prophoto-rgb  [|](value_definition_syntax#single_bar)  
  rec2020         
  
<xyz-space> =   
  xyz      [|](value_definition_syntax#single_bar)  
  xyz-d50  [|](value_definition_syntax#single_bar)  
  xyz-d65    
  

```
Examples
--------


### Color value tester



In this example we provide a `<div>` and a text input. Entering a valid color into the input causes the `<div>` to adopt that color, allowing you to test our color values.

 #### HTML

 
```
<div></div>
<hr />
<label for="color">Enter a valid color value:</label>
<input type="text" id="color" />

```
 #### CSS

 
```
div {
  width: 100%;
  height: 200px;
}

```
 #### Result



### RGB syntax variations



This example shows the many ways in which a single color can be created with the various RGB color syntaxes.

 
```
/\* These syntax variations all specify the same color: a fully opaque hot pink. \*/

/\* Hexadecimal syntax \*/
#f09
#F09
#ff0099
#FF0099

/\* Functional syntax \*/
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /\* ERROR! Don't mix numbers and percentages. \*/
rgb(255 0 153)

/\* Hexadecimal syntax with alpha value \*/
#f09f
#F09F
#ff0099ff
#FF0099FF

/\* Functional syntax with alpha value \*/
rgb(255, 0, 153, 1)
rgb(255, 0, 153, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/\* Whitespace syntax \*/
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/\* Functional syntax with floats value \*/
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)

```

### RGB transparency variations



```
/\* Hexadecimal syntax \*/
#3a30                    /\* 0% opaque green \*/
#3a3f                    /\* full opaque green \*/
#33aa3300                /\* 0% opaque green \*/
#33aa3380                /\* 50% opaque green \*/

/\* Functional syntax \*/
rgba(51, 170, 51, 0.1)    /\* 10% opaque green \*/
rgba(51, 170, 51, 0.4)    /\* 40% opaque green \*/
rgba(51, 170, 51, 0.7)    /\* 70% opaque green \*/
rgba(51, 170, 51,   1)    /\* full opaque green \*/

/\* Whitespace syntax \*/
rgba(51 170 51 / 0.4)    /\* 40% opaque green \*/
rgba(51 170 51 / 40%)    /\* 40% opaque green \*/

/\* Functional syntax with floats value \*/
rgba(51,    170,   51.6,  1)
rgba(5.1e1, 1.7e2, 5.1e1, 1e2%)

```
### HSL syntax variations



```
/\* These examples all specify the same color: a lavender. \*/
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(0.75turn, 60%, 70%)

/\* These examples all specify the same color: a lavender that is 15% opaque. \*/
hsl(270, 60%, 50%, 0.15)
hsl(270, 60%, 50%, 0.15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / 0.15)
hsl(270 60% 50% / 15%)

```
### HWB syntax variations



```
/\* These examples all specify varying shades of a lime green. \*/
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(0.25turn 0% 40%)

/\* Same lime green but with an alpha value \*/
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

```
### Fully saturated colors




| Notation | Description | Live |
| --- | --- | --- |
| `hsl(0, 100%, 50%)` | red |  |
| `hsl(30, 100%, 50%)` | orange |  |
| `hsl(60, 100%, 50%)` | yellow |  |
| `hsl(90, 100%, 50%)` | lime green |  |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(150, 100%, 50%)` | blue-green |  |
| `hsl(180, 100%, 50%)` | cyan |  |
| `hsl(210, 100%, 50%)` | sky blue |  |
| `hsl(240, 100%, 50%)` | blue |  |
| `hsl(270, 100%, 50%)` | purple |  |
| `hsl(300, 100%, 50%)` | magenta |  |
| `hsl(330, 100%, 50%)` | pink |  |
| `hsl(360, 100%, 50%)` | red |  |

### Lighter and darker greens




| Notation | Description | Live |
| --- | --- | --- |
| `hsl(120, 100%, 0%)` | black |  |
| `hsl(120, 100%, 20%)` |  |  |
| `hsl(120, 100%, 40%)` |  |  |
| `hsl(120, 100%, 60%)` |  |  |
| `hsl(120, 100%, 80%)` |  |  |
| `hsl(120, 100%, 100%)` | white |  |

### Saturated and desaturated greens




| Notation | Description | Live |
| --- | --- | --- |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(120, 80%, 50%)` |  |  |
| `hsl(120, 60%, 50%)` |  |  |
| `hsl(120, 40%, 50%)` |  |  |
| `hsl(120, 20%, 50%)` |  |  |
| `hsl(120, 0%, 50%)` | gray |  |

### HSL transparency variations



```
hsl(240 100% 50% / 0.05)    /\* 5% opaque blue \*/
hsl(240 100% 50% / 0.4)     /\* 40% opaque blue \*/
hsl(240 100% 50% / 0.7)     /\* 70% opaque blue \*/
hsl(240 100% 50% / 1)       /\* full opaque blue \*/

/\* Comma syntax \*/
hsl(240, 100%, 50%, 0.05)     /\* 5% opaque blue \*/

/\* Percentage value for alpha \*/
hsl(240 100% 50% / 5%)       /\* 5% opaque blue \*/

```
Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # color-syntax](https://w3c.github.io/csswg-drafts/css-color/#color-syntax) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color_value` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `color` | 111 | 111 | 111 | No | 97 | 1510.1–15Only supports `display-p3` and `srgb` predefined color profiles. | 111 | 111 | No | No | 1510.3–15Only supports `display-p3` and `srgb` predefined color profiles. | No |
| `color-contrast` | No | No | No | No | No | 15 | No | No | No | No | 15 | No |
| `color-mix` | 111 | 111 | 88 | No | 97 | 16.215 | 111 | 111 | No | No | 16.215 | No |
| `currentcolor` | 1 | 12 | 1.5 | 9 | 9.5 | 4 | 37 | 18 | 4 | 14 | 3.2 | 1.0 |
| `hsl` | 1 | 12 | 1 | 9 | 9.5 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `hsla` | 1 | 12 | 3 | 9 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `hwb` | 101 | 101 | 96 | No | 87 | 15 | 101 | 101 | 96 | 70 | 15 | 19.0 |
| `lab` | 111 | 111 | 111 | No | 97 | 15 | 111 | 111 | No | No | 15 | No |
| `lch` | 111 | 111 | 111 | No | 97 | 15 | 111 | 111 | No | No | 15 | No |
| `named-color` | 1 | 12 | 1 | 3Internet Explorer 8 and later support gray color keywords spelled with an *e* (`grey`, `darkgrey`, `darkslategrey`, `dimgrey`, `lightgrey`, and `lightslategrey`). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with *a* (`gray`, `darkgray`, `darkslategray`, `dimgray`, `lightgray`, and `lightslategray`). | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `oklab` | 111 | 111 | 111 | No | 97 | 15.4 | 111 | 111 | No | No | 15.4 | No |
| `oklch` | 111 | 111 | 111 | No | 97 | 15.4 | 111 | 111 | No | No | 15.4 | No |
| `rgb` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `rgb_hexadecimal_notation` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `rgba` | 1 | 12 | 3 | 9 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `system-color` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `transparent` | 1 | 12 | 3 | 9 | 10 | 3.1 | 37 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* The [`opacity`](opacity) property lets you define transparency at the element level.
* The [`<hue>`](hue) data type represents a color by hue angle.
* Some common properties that use this data type: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`box-shadow`](box-shadow), [`outline-color`](outline-color), [`text-shadow`](text-shadow)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value>

column-fill
===========


The `column-fill` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property controls how an element's contents are balanced when broken into columns.


Try it
------


Syntax
------




```
/\* Keyword values \*/
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/\* Global values \*/
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;

```
 The `column-fill` property is specified as one of the keyword values listed below. The initial value is `balance` so the content will be balanced across the columns.


### Values


 `auto`  Columns are filled sequentially. Content takes up only the room it needs, possibly resulting in some columns remaining empty.

  `balance`  Content is equally divided between columns. In fragmented contexts, such as [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media), only the last fragment is balanced. Therefore in paged media, only the last page would be balanced.

  
`balance-all`  Experimental 
  Content is equally divided between columns. In fragmented contexts, such as [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media), all fragments are balanced.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `balance` |
| Applies to | multicol elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
column-fill =   
  auto         [|](value_definition_syntax#single_bar)  
  balance      [|](value_definition_syntax#single_bar)  
  balance-all    
  

```
Example
-------


### Balancing column content



#### HTML

 
```
<p class="fill-auto">
  This paragraph fills columns one at a time. Since all of the text can fit in
  the first column, the others are empty.
</p>

<p class="fill-balance">
  This paragraph attempts to balance the amount of content in each column.
</p>

```
 #### CSS

 
```
p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # cf](https://w3c.github.io/csswg-drafts/css-multicol/#cf) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-fill` | 50 | 12 | 5213–74 | 10 | 37 | 98 | 50 | 50 | 5214 | 37 | 98 | 5.0 |
| `balance-all` | NoSee [bug 909596](https://crbug.com/909596). | NoSee [bug 909596](https://crbug.com/909596). | No | No | NoSee [bug 909596](https://crbug.com/909596). | No | NoSee [bug 909596](https://crbug.com/909596). | NoSee [bug 909596](https://crbug.com/909596). | No | NoSee [bug 909596](https://crbug.com/909596). | No | NoSee [bug 909596](https://crbug.com/909596). |


 **Warning:** There are some interoperability issues and bugs with `column-fill` across browsers, due to unresolved issues in the specification.

 In particular, when using `column-fill: auto` to fill columns sequentially, Chrome will only consult this property if the multicol container has a size in the block dimension (e.g., height in a horizontal writing mode). Firefox will always consult this property, therefore filling the first column with all of the content in cases where there is no size.

 
See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
* [`column-count`](column-count)
* [`column-width`](column-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill>

column-span
===========


The `column-span` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property makes it possible for an element to span across all columns when its value is set to `all`.


Try it
------



 
```
/\* Keyword values \*/
column-span: none;
column-span: all;

/\* Global values \*/
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
column-span: unset;

```
 An element that spans more than one column is called a **spanning element**.


Syntax
------


The `column-span` property is specified as one of the keyword values listed below.

### Values


 `none`  The element does not span multiple columns.

  `all`  The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | in-flow block-level elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
column-span =   
  none  [|](value_definition_syntax#single_bar)  
  all     
  

```
Examples
--------


### Making a heading span columns



In this example, the heading is made to span across all the columns of the article.

 #### HTML

 
```
<article>
  <h2>Header spanning all of the columns</h2>
  <p>
    The h2 should span all the columns. The rest of the text should be
    distributed among the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>

```
 #### CSS

 
```
article {
  columns: 3;
}

h2 {
  column-span: all;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1 # column-span](https://w3c.github.io/csswg-drafts/css-multicol/#column-span) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-span` | 506 | 1212 | 71 | 10 | 1511.1 | 95.1 | 50≤37 | 5018 | 79 | 1411.1 | 95 | 5.01.0 |


See also
--------


* [Inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)
* [`HTMLSpanElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-span>

column-width
============


The `column-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the `column-width` value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.


Try it
------



 This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the [`column-count`](column-count) property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are [`width`](width), [`column-width`](column-width), [`column-gap`](column-gap), and [`column-rule-width`](column-rule-width).


Syntax
------




```
/\* Keyword value \*/
column-width: auto;

/\* <length> values \*/
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

/\* Global values \*/
column-width: inherit;
column-width: initial;
column-width: revert;
column-width: revert-layer;
column-width: unset;

```
 The `column-width` property is specified as one of the values listed below.


### Values


 [`<length>`](length)  Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.

  `auto`  The width of the column is determined by other CSS properties, such as [`column-count`](column-count).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | Block containers except table wrapper boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length, zero or larger |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
column-width =   
  auto                                [|](value_definition_syntax#single_bar)  
  [<length [0,∞]>](length)                      [|](value_definition_syntax#single_bar)  
  min-content                         [|](value_definition_syntax#single_bar)  
  max-content                         [|](value_definition_syntax#single_bar)  
  fit-content( <length-percentage> )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting column width in pixels



#### HTML

 
```
<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>

```
 #### CSS

 
```
.content-box {
  column-width: 100px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # column-sizing](https://w3c.github.io/csswg-drafts/css-sizing/#column-sizing) |
| [CSS Multi-column Layout Module Level 1 # cw](https://w3c.github.io/csswg-drafts/css-multicol/#cw) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `column-width` | 501 | 1212 | 501.5–74Before version 37, multiple columns didn't work with `display: table-caption` elements. | 10 | 1511.1 | 93 | 50≤37 | 5018 | 504Before version 37, multiple columns didn't work with `display: table-caption` elements. | 1511.1 | 91 | 5.01.0 |
| `intrinsic_sizes` | NoSee [bug 964183](https://crbug.com/964183). | NoSee [bug 964183](https://crbug.com/964183). | No | No | NoSee [bug 964183](https://crbug.com/964183). | No | NoSee [bug 964183](https://crbug.com/964183). | NoSee [bug 964183](https://crbug.com/964183). | No | NoSee [bug 964183](https://crbug.com/964183). | No | NoSee [bug 964183](https://crbug.com/964183). |


See also
--------


* [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) (Learn Layout)
* [Basic Concepts of Multicol](css_columns/basic_concepts_of_multicol)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-width>

contain-intrinsic-inline-size
=============================



The `contain-intrinsic-inline-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [logical property](css_logical_properties) defines the inline-size of an element that a browser can use for layout when the element is subject to [size containment](css_containment#size_containment).

  Inline-size is the size of the element in the dimension parallel to the flow of text within a line. In a horizontal [writing mode](writing-mode) like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical dimension. 



Syntax
------



```
/\* Keyword values \*/
contain-intrinsic-inline-size: none;

/\* <length> values \*/
contain-intrinsic-inline-size: 1000px;
contain-intrinsic-inline-size: 10rem;

/\* auto <length> \*/
contain-intrinsic-inline-size: auto 300px;

/\* Global values \*/
contain-intrinsic-inline-size: inherit;
contain-intrinsic-inline-size: initial;
contain-intrinsic-inline-size: revert;
contain-intrinsic-inline-size: revert-layer;
contain-intrinsic-inline-size: unset;

```
### Values



The following values can be specified for the intrinsic inline size of an element:

  `none`  The element has no intrinsic inline-size.

  `<length>`  The element has the specified inline-size ([`<length>`](length)).

  `auto <length>`   When the element is in size containment and skipping its contents (for example, when it is offscreen and `content-visibility: auto` is set) the inline size is remembered from the actual size of the element when it was last able to render its child elements. If the element has never rendered its child elements and hence has no remembered value for the normally rendered element size, or if it is not skipping its contents, the inline size is the specified `<length>`. 

  
Description
-----------



The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](contain) and [`content-visibility`](content-visibility).

  Size containment allows a user agent to lay out an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height. The `contain-intrinsic-inline-size` property allows authors to specify an appropriate value to be used as the inline-size for layout. 

  The `auto <length>` value allows the inline-size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified value when the element is skipping its contents. This allows offscreen elements with [`content-visibility: auto`](content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size. The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used). 


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | elements for which size containment can apply |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, with <length>s values computed |
| Animation type | by computed value type |

Formal syntax
-------------



```
contain-intrinsic-inline-size =   
  none           [|](value_definition_syntax#single_bar)  
  [<length>](length)       [|](value_definition_syntax#single_bar)  
  auto [<length>](length)    
  

```
Examples
--------


### Setting the intrinsic inline size



The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

 
```
<div id="contained\_element">
  <div class="child\_element"></div>
</div>

```
  The CSS below sets the [`content-visibility`](content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained. The intrinsic block size and inline size that are used when it is size constrained are set at the same time using `contain-intrinsic-block-size` and `contain-intrinsic-inline-size`, respectively. 

 
```
#contained\_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-inline-size](https://w3c.github.io/csswg-drafts/css-sizing-4/#propdef-contain-intrinsic-inline-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contain-intrinsic-inline-size` | 95 | 95 | 107 | No | 81 | No | 95 | 95 | 107 | 67 | No | 17.0 |


See also
--------


* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)
* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contain-intrinsic-width`](contain-intrinsic-width)
* [`contain-intrinsic-height`](contain-intrinsic-height)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-inline-size>

contain-intrinsic-width
=======================


The `contain-intrinsic-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of an element that a browser will use for layout when the element is subject to [size containment](css_containment#size_containment).


Syntax
------



```
/\* Keyword values \*/
contain-intrinsic-width: none;

/\* <length> values \*/
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;

/\* auto <length> \*/
contain-intrinsic-width: auto 300px;

/\* Global values \*/
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;

```
### Values



The following values may be specified for an element.

  `none`  The element has no intrinsic width.

  `<length>`  The element has the specified width ([`<length>`](length)).

  `auto <length>`  A remembered value of the "normally rendered" element width if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.

  
Description
-----------



The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](contain) and [`content-visibility`](content-visibility), and may also be set using the [`contain-intrinsic-size`](contain-intrinsic-size) [shorthand property](shorthand_properties).

  Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height. The `contain-intrinsic-width` property allows authors to specify an appropriate value to be used as the width for layout. 

  The `auto <length>` value allows the width of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified width when the element is skipping its contents. This allows offscreen elements with [`content-visibility: auto`](content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size. The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used). 


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | elements for which size containment can apply |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, with <length>s values computed |
| Animation type | by computed value type |

Formal syntax
-------------



```
contain-intrinsic-width =   
  none           [|](value_definition_syntax#single_bar)  
  [<length>](length)       [|](value_definition_syntax#single_bar)  
  auto [<length>](length)    
  

```
Examples
--------


In addition to the example below, the [`contain-intrinsic-size`](contain-intrinsic-size) page contains a live example that demonstrates the effect of modifying the intrinsic width and height.

### Setting the intrinsic width



The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

 
```
<div id="contained\_element">
  <div class="child\_element"></div>
</div>

```
  The CSS below sets the [`content-visibility`](content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained. The width and height that are used when it is size constrained are set at the same time using `contain-intrinsic-width` and `contain-intrinsic-height`, respectively. 

 
```
#contained\_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-width](https://w3c.github.io/csswg-drafts/css-sizing-4/#propdef-contain-intrinsic-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contain-intrinsic-width` | 83 | 83 | 107 | No | 69 | No | 83 | 83 | 107 | 59 | No | 13.0 |


See also
--------


* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contain-intrinsic-height`](contain-intrinsic-height)
* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-width>

contain
=======


 The `contain` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes. 


Try it
------



  There are four types of CSS containment: size, layout, style, and paint, which are set on the container. The property is a space-separated list of a subset of the five standard values or one of the two shorthand values. Changes to the contained properties within the container are not propagated outside of the contained element to the rest of the page. The main benefit of containment is that the browser does not have to re-render the DOM or page layout as often, leading to small performance benefits during the rendering of static pages and greater performance benefits in more dynamic applications. 

 Using the `contain` property is useful on pages with groups of elements that are supposed to be independent, as it can prevent element internals from having side effects outside of its bounding-box.

  **Note:** using `layout`, `paint`, `strict` or `content` values for this property creates:

 1. A new [containing block](containing_block) (for the descendants whose [`position`](position) property is `absolute` or `fixed`).
2. A new [stacking context](css_positioning/understanding_z_index/the_stacking_context).
3. A new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).

 
Syntax
------



```
/\* Keyword values \*/
contain: none;
contain: strict;
contain: content;
contain: size;
contain: inline-size;
contain: layout;
contain: style;
contain: paint;

/\* Multiple keywords \*/
contain: size paint;
contain: size layout paint;
contain: inline-size layout;

/\* Global values \*/
contain: inherit;
contain: initial;
contain: revert;
contain: revert-layer;
contain: unset;

```
### Values



The `contain` property can have any of the following values:

 * The keyword `none` **or**
* One or more of the space-separated keywords `size` (or `inline-size`), `layout`, `style`, and `paint` in any order **or**
* One of the shorthand values `strict` or `content`

 The keywords have the following meanings:

  `none`  The element renders as normal, with no containment applied.

  `strict`  All containment rules are applied to the element. This is equivalent to `contain: size layout paint style`.

  `content`  All containment rules except `size` are applied to the element. This is equivalent to `contain: layout paint style`.

  `size`  Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with `inline-size`.

  `inline-size`  Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with `size`.

  `layout`  The internal layout of the element is isolated from the rest of the page. This means nothing outside the element affects its internal layout, and vice versa.

  `style`  For properties that can affect more than just an element and its descendants, the effects don't escape the containing element. Counters and quotes are scoped to the element and its contents.

  `paint`  Descendants of the element don't display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. If a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
contain =   
  none                                  [|](value_definition_syntax#single_bar)  
  strict                                [|](value_definition_syntax#single_bar)  
  content                               [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) size [||](value_definition_syntax#double_bar) layout [||](value_definition_syntax#double_bar) style [||](value_definition_syntax#double_bar) paint []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Paint containment



The following example shows how to use `contain: paint` to prevent an element's descendants from painting outside of its bounds.

 
```
div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;
}

```
 
```
<div style="contain: paint">
  <p>This text will be clipped to the bounds of the box.</p>
</div>
<div>
  <p>This text will not be clipped to the bounds of the box.</p>
</div>

```


### Layout containment



Consider the example below which shows how elements behave with and without layout containment applied:

 
```
<div class="card" style="contain: layout;">
  <h2>Card 1</h2>
  <div class="fixed"><p>Fixed box 1</p></div>
  <div class="float"><p>Float box 1</p></div>
</div>
<div class="card">
  <h2>Card 2</h2>
  <div class="fixed"><p>Fixed box 2</p></div>
  <div class="float"><p>Float box 2</p></div>
</div>
<div class="card">
  <h2>Card 3</h2>
  <!-- ... -->
</div>

```
 
```
.card {
  width: 70%;
  height: 90px;
}

.fixed {
  position: fixed;
  right: 10px;
  top: 10px;
  background: coral;
}

.float {
  float: left;
  margin: 10px;
  background: aquamarine;
}

```
  The first card has layout containment applied, and its layout is isolated from the rest of the page. We can reuse this card in other places on the page without worrying about layout recalculation of the other elements. If floats overlap the card bounds, elements on the rest of the page are not affected. When the browser recalculates the containing element's subtree, only that element is recalculated. Nothing outside of the contained element needs to be recalculated. Additionally, the fixed box uses the card as a layout container to position itself. 

  The second and third cards have no containment. The layout context for the fixed box in the second card is the root element so the fixed box is positioned in the top right corner of the page. A float overlaps the second card's bounds causing the third card to have unexpected layout shift that's visible in the positioning of the `<h2>` element. When recalculation occurs, it is not limited to a container. This impacts performance and interferes with the rest of the page layout. 



### Style containment



 Style containment scopes [counters](css_counter_styles/using_css_counters) and <quotes> to the contained element. For CSS counters, the [`counter-increment`](counter-increment) and [`counter-set`](counter-set) properties are scoped to the element as if the element is at the root of the document. 

 #### Containment and counters

 The example below takes a look at how counters work when style containment is applied:

 
```
<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li class="container">Item C</li>
  <li>Item D</li>
  <li>Item E</li>
</ul>

```
 
```
body {
  counter-reset: list-items;
}

li::before {
  counter-increment: list-items;
  content: counter(list-items) ": ";
}

.container {
  contain: style;
}

```
  Without containment, the counter would increment from 1 to 5 for each list item. Style containment causes the [`counter-increment`](counter-increment) property to be scoped to the element's subtree and the counter begins again at 1: 


 #### Containment and quotes

 CSS quotes are similarly affected in that the [`content`](content) values relating to quotes are scoped to the element:

 
```
<!-- With style containment -->
<span class="open-quote">
  outer
  <span style="contain: style;">
    <span class="open-quote"> inner </span>
  </span>
</span>
<span class="close-quote"> close </span>
<br />
<!-- Without containment -->
<span class="open-quote">
  outer
  <span>
    <span class="open-quote"> inner </span>
  </span>
</span>
<span class="close-quote"> close </span>

```
 
```
body {
  quotes: "[" "]" "‹" "›";
}
.open-quote:before {
  content: open-quote;
}

.close-quote:after {
  content: close-quote;
}

```
 Because of containment, the first closing quote ignores the inner span and uses the outer span's closing quote instead:



Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 2 # contain-property](https://w3c.github.io/csswg-drafts/css-contain/#contain-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contain` | 52 | 79 | 69 | No | 39 | 15.4 | 52 | 52 | 79 | 41 | 15.4 | 6.0 |
| `inline-size` | 105 | 105 | 101 | No | 91 | 15.4 | 105 | 105 | 101 | 72 | 15.4 | 20.0 |
| `style` | 52 | 79 | 103 | No | 39 | 15.4 | 52 | 52 | 103 | 41 | 15.4 | 6.0 |


See also
--------


* [CSS containment](css_containment)
* [CSS container queries](css_container_queries)
* CSS [`content-visibility`](content-visibility) property
* CSS [`position`](position) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/contain>

contain-intrinsic-height
========================


The `contain-intrinsic-length` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the height of an element that a browser can use for layout when the element is subject to [size containment](css_containment#size_containment).


Syntax
------



```
/\* Keyword values \*/
contain-intrinsic-height: none;

/\* <length> values \*/
contain-intrinsic-height: 1000px;
contain-intrinsic-height: 10rem;

/\* auto <length> \*/
contain-intrinsic-height: auto 300px;

/\* Global values \*/
contain-intrinsic-height: inherit;
contain-intrinsic-height: initial;
contain-intrinsic-height: revert;
contain-intrinsic-height: revert-layer;
contain-intrinsic-height: unset;

```
### Values



The following values may be specified for an element.

  `none`  The element has no intrinsic height.

  `<length>`  The element has the specified height ([`<length>`](length)).

  `auto <length>`  A remembered value of the "normally rendered" element height if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.

  
Description
-----------



The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](contain) and [`content-visibility`](content-visibility), and may also be set using the [`contain-intrinsic-size`](contain-intrinsic-size) [shorthand property](shorthand_properties).

  Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no height (or width). The `contain-intrinsic-height` property allows authors to specify an appropriate value to be used as the height for layout. 

  The `auto <length>` value allows the height of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified height when the element is skipping its contents. This allows offscreen elements with [`content-visibility: auto`](content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size. The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used). 


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | elements for which size containment can apply |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, with <length>s values computed |
| Animation type | by computed value type |

Formal syntax
-------------



```
contain-intrinsic-height =   
  none           [|](value_definition_syntax#single_bar)  
  [<length>](length)       [|](value_definition_syntax#single_bar)  
  auto [<length>](length)    
  

```
Examples
--------


In addition to the example below, the [`contain-intrinsic-size`](contain-intrinsic-size) page contains a live example that demonstrates the effect of modifying the intrinsic width and height.

### Setting the intrinsic height



The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

 
```
<div id="contained\_element">
  <div class="child\_element"></div>
</div>

```
  The CSS below sets the [`content-visibility`](content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained. The width and height that are used when it is size constrained are set at the same time using `contain-intrinsic-width` and `contain-intrinsic-height`, respectively. 

 
```
#contained\_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-height](https://w3c.github.io/csswg-drafts/css-sizing-4/#propdef-contain-intrinsic-height) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contain-intrinsic-height` | 83 | 83 | 107 | No | 69 | No | 83 | 83 | 107 | 59 | No | 13.0 |


See also
--------


* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contain-intrinsic-width`](contain-intrinsic-width)
* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-height>

contain-intrinsic-size
======================


The `contain-intrinsic-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) sets the size of an element that a browser will use for layout when the element is subject to [size containment](css_containment#size_containment).


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`contain-intrinsic-width`](contain-intrinsic-width)
* [`contain-intrinsic-height`](contain-intrinsic-height)


Syntax
------



```
/\* Keyword values \*/
contain-intrinsic-width: none;

/\* <length> values \*/
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/\* width | height \*/
contain-intrinsic-size: 1000px 1.5em;

/\* auto <length> \*/
contain-intrinsic-size: auto 300px;

/\* auto width | auto height \*/
contain-intrinsic-size: auto 300px auto 4rem;

/\* Global values \*/
contain-intrinsic-size: inherit;
contain-intrinsic-size: initial;
contain-intrinsic-size: revert;
contain-intrinsic-size: revert-layer;
contain-intrinsic-size: unset;

```
### Values



 Either one or two of the following values may be specified for an element. If two values are specified, the first value applies to the width, and the second to the height. If a single value is specified, it applies to both width and height. 

  `none`  The element has no intrinsic size in the given dimension(s).

  `<length>`  The element has the specified [`<length>`](length) in the given dimension(s).

  `auto <length>`  A remembered value of the "normally rendered" element size if one exists and the element is skipping its contents (for example, when it is offscreen); otherwise the specified `<length>`.

  
Description
-----------



The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](contain) and [`content-visibility`](content-visibility).

  Size containment allows a user agent to layout an element as though it had a fixed size, preventing unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents, and may collapse the layout in the same way as if the contents had no width or height. The `contain-intrinsic-size` property allows authors to specify an appropriate value to be used as the size for layout. 

  The `auto <length>` value allows the size of the element to be stored if the element is ever "normally rendered" (with its child elements), and then used instead of the specified length when the element is skipping its contents. This allows offscreen elements with [`content-visibility: auto`](content-visibility) to benefit from size containment without developers having to be as precise in their estimates of element size. The remembered value is not used if the child elements are being rendered (if size containment is enabled, the `<length>` will be used). 


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`contain-intrinsic-width`](contain-intrinsic-width): `none`
* [`contain-intrinsic-height`](contain-intrinsic-height): `none`
 |
| Applies to | elements for which size containment can apply |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`contain-intrinsic-width`](contain-intrinsic-width): no
* [`contain-intrinsic-height`](contain-intrinsic-height): no
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`contain-intrinsic-width`](contain-intrinsic-width): as specified, with <length>s values computed
* [`contain-intrinsic-height`](contain-intrinsic-height): as specified, with <length>s values computed
 |
| Animation type | as each of the properties of the shorthand:* [`contain-intrinsic-width`](contain-intrinsic-width): by computed value type
* [`contain-intrinsic-height`](contain-intrinsic-height): by computed value type
 |

Formal syntax
-------------



```
contain-intrinsic-size =   
  [[](value_definition_syntax#brackets) none [|](value_definition_syntax#single_bar) [<length>](length) [|](value_definition_syntax#single_bar) auto [<length>](length) []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting the intrinsic size



This example provides selection lists that can be used to modify `contain-intrinsic-size`, `content-visibility` and `contain` on an element in order to observe the effect of the different settings.

 #### CSS

 
```
#contained\_element {
  border: 2px solid green;
  width: 120px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

```
 #### JavaScript

 The code below adds styles to, and removes styles from, the containing element based on the selected options.

 
```
const containedElement = document.querySelector("#contained\_element");
const intrinsicSizeSelector = document.querySelector(
  "#contain\_intrinsic\_size\_selector"
);
const containSelector = document.querySelector("#contain\_selector");
const contentVisibilitySelector = document.querySelector(
  "#content\_visibility\_selector"
);

containedElement.style["contain-intrinsic-size"] =
  intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
containedElement.style["contain"] =
  containSelector.options[containSelector.selectedIndex].text;
containedElement.style["content-visibility"] =
  contentVisibilitySelector.options[
    contentVisibilitySelector.selectedIndex
  ].text;

intrinsicSizeSelector.addEventListener("change", () => {
  containedElement.style["contain-intrinsic-size"] =
    intrinsicSizeSelector.options[intrinsicSizeSelector.selectedIndex].text;
});

containSelector.addEventListener("change", () => {
  containedElement.style["contain"] =
    containSelector.options[containSelector.selectedIndex].text;
});

contentVisibilitySelector.addEventListener("change", () => {
  containedElement.style["content-visibility"] =
    contentVisibilitySelector.options[
      contentVisibilitySelector.selectedIndex
    ].text;
});

```
 #### HTML

 The HTML defines two buttons, a container element that is subject to containment via the `content-visibility` property.

 
```
<p>
  <label for="contain\_intrinsic\_size\_selector">contain-intrinsic-size:</label>
  <select id="contain\_intrinsic\_size\_selector">
    <option>none</option>
    <option>40px 130px</option>
    <option>auto 40px auto 130px</option></select
 >;<br />

  <label for="contain\_selector">contain:</label>
  <select id="contain\_selector">
    <option>none</option>
    <option>size</option>
    <option>strict</option></select
 >;<br />

  <label for="content\_visibility\_selector">content-visibility:</label>
  <select id="content\_visibility\_selector">
    <option>visible</option>
    <option>auto</option>
    <option>hidden</option></select
 >;
</p>

<div id="contained\_element">
  <div class="child\_element"></div>
</div>

```
 #### Result

  Use the selectors to apply the given styles to the containing `div` element. Note that when `content-visibility` is `visible` or `auto`, changing `contain-intrinsic-size` makes no difference. However if the content is hidden, having a `contain-intrinsic-size` of `none` collapses the parent element as though its child element had no size. 



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-size](https://w3c.github.io/csswg-drafts/css-sizing-4/#propdef-contain-intrinsic-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contain-intrinsic-size` | 83 | 83 | 107 | No | 69 | No | 83 | 83 | 107 | 59 | No | 13.0 |


See also
--------


* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)
* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size>

conic-gradient()
================


The `conic-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and [color wheels](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel). The result of the `conic-gradient()` function is an object of the [`<gradient>`](../gradient) data type, which is a special kind of [`<image>`](../image).


Try it
------


Syntax
------



```
/\* A conic gradient rotated 45 degrees,
 starting blue and finishing red \*/
conic-gradient(from 45deg, blue, red);

/\* A bluish purple box: the gradient goes from blue to red,
 but only the bottom right quadrant is visible, as the
 center of the conic gradient is at the top left corner \*/
conic-gradient(from 90deg at 0 0, blue, red);

/\* Color wheel \*/
background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
);

```
### Values



 [`<angle>`](../angle)  Preceded by the `from` keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.

  `<position>`  Using the same length, order, and keyterm values as the [`background-position`](../background-position) property, the `position` value defines center of the gradient. If not specified, the value used for `position` by default is `center`, meaning the gradient will be centered.

  `<angular-color-stop>`  A color-stop's [`<color>`](../color_value) value, followed by one or two optional stop positions, (an [`<angle>`](../angle) along the gradient's circumference axis).

  `<color-hint>`  An [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

    **Note:** Rendering of [color stops in CSS gradients](#gradient_with_multiple_color_stops) follows the same rules as color stops in [SVG gradients](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients).

 
Description
-----------



As with any gradient, a conic gradient has [no intrinsic dimensions](../image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to, or the size of the `<image>` if it is set to something other than the element size.

 To create a conic gradient that repeats so as to fill a 360 degree rotation, use the [`repeating-conic-gradient()`](repeating-conic-gradient) function instead.

 Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `conic-gradient()` won't work on [`background-color`](../background-color) and other properties that use the [`<color>`](../color_value) data type.

  **Note:** Why is it called a "conic" gradient? If the color stops are much lighter on one side than the other, it can look like a cone from above.

 
### Composition of a conic gradient



The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions.

  ![color stops along the circumference of a conic gradient and the axis of a radial gradient.] 

 A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a [length](../length), the color-stops of a conic gradient are specified with an [angle](../angle). Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

 Similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value background-position.

 The gradient arc is the circumference of the gradient. The *starting point* of the gradient or arc is north, or 12:00pm. The gradient is then rotated by the *from* angle. The colors of the gradient are determined by the angled color stops, their starting points, ending points, and, in between, and optional angled color-stop points. The transitions between colors can be altered with color hints between adjacent colors' color stops.

 #### Customizing gradients

 By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an [`<angle>`](../angle). If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent:

 
```
conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

```
 By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.

 
```
conic-gradient(red 40grad, 80grad, blue 360grad);

```
 If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts — which is NOT the correct way to create pie charts as background images are not accessible — use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multiple position colors stops. The following two declarations are equivalent:

 
```
conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

```
 Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient:

 
```
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

```
 There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.

 
```
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;

```
 And, yes, you can mix and match different angle units, but don't. The above is hard to read.


Formal syntax
-------------



```
<conic-gradient()> =   
  conic-gradient( [[](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) from [<angle>](../angle) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) [[](../value_definition_syntax#brackets) at <position> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) []](../value_definition_syntax#brackets)  [||](../value_definition_syntax#double_bar)  
  <color-interpolation-method> , <angular-color-stop-list> )    
  
<position> =   
  [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) right []](../value_definition_syntax#brackets) [||](../value_definition_syntax#double_bar) [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) bottom []](../value_definition_syntax#brackets)  [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) right [|](../value_definition_syntax#single_bar) <length-percentage> []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) bottom [|](../value_definition_syntax#single_bar) <length-percentage> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark)  [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) right []](../value_definition_syntax#brackets) <length-percentage> []](../value_definition_syntax#brackets) [&&](../value_definition_syntax#double_ampersand) [[](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) bottom []](../value_definition_syntax#brackets) <length-percentage> []](../value_definition_syntax#brackets)    
  
<color-interpolation-method> =   
  in [[](../value_definition_syntax#brackets) <rectangular-color-space> [|](../value_definition_syntax#single_bar) <polar-color-space> <hue-interpolation-method>[?](../value_definition_syntax#question_mark) []](../value_definition_syntax#brackets)    
  
<angular-color-stop-list> =   
  <angular-color-stop> , [[](../value_definition_syntax#brackets) <angular-color-hint>[?](../value_definition_syntax#question_mark) , <angular-color-stop> []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)    
  
<length-percentage> =   
  [<length>](../length)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  
<rectangular-color-space> =   
  srgb         [|](../value_definition_syntax#single_bar)  
  srgb-linear  [|](../value_definition_syntax#single_bar)  
  lab          [|](../value_definition_syntax#single_bar)  
  oklab        [|](../value_definition_syntax#single_bar)  
  xyz          [|](../value_definition_syntax#single_bar)  
  xyz-d50      [|](../value_definition_syntax#single_bar)  
  xyz-d65        
  
<polar-color-space> =   
  hsl    [|](../value_definition_syntax#single_bar)  
  hwb    [|](../value_definition_syntax#single_bar)  
  lch    [|](../value_definition_syntax#single_bar)  
  oklch    
  
<hue-interpolation-method> =   
  [[](../value_definition_syntax#brackets) shorter [|](../value_definition_syntax#single_bar) longer [|](../value_definition_syntax#single_bar) increasing [|](../value_definition_syntax#single_bar) decreasing []](../value_definition_syntax#brackets) hue    
  
<angular-color-stop> =   
  [<color>](../color_value)              [&&](../value_definition_syntax#double_ampersand)  
  <color-stop-angle>[?](../value_definition_syntax#question_mark)    
  
<angular-color-hint> =   
  <angle-percentage>    
  
<color-stop-angle> =   
  <angle-percentage>[{1,2}](../value_definition_syntax#curly_braces)    
  
<angle-percentage> =   
  [<angle>](../angle)       [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Accessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Examples
--------


### Gradient at 40-degrees




```
div {
  background-image: conic-gradient(from 40deg, #fff, #000);
}

```


### Off-centered gradient




```
div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}

```


### Gradient pie-chart



This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

 
```
div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

```


### Checkerboard




```
div {
  background: conic-gradient(
      #fff 0.25turn,
      #000 0.25turn 0.5turn,
      #fff 0.5turn 0.75turn,
      #000 0.75turn
    ) top left / 25% 25% repeat;
  border: 1px solid;
}

```


### More conic-gradient examples


Please see [Using CSS gradients](../css_images/using_css_gradients) for more examples.

Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # conic-gradients](https://w3c.github.io/csswg-drafts/css-images-4/#conic-gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `conic-gradient` | 69 | 79 | 83 | No | 56 | 12.1 | 69 | 69 | 83 | 48 | 12.2 | 10.0 |
| `doubleposition` | 72 | 79 | 83 | No | 60 | 12.1 | 72 | 72 | 83 | 51 | 12.2 | 11.0 |
| `hue_interpolation_method` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_color_space` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)
* Other gradient functions: [`repeating-conic-gradient()`](repeating-conic-gradient), [`linear-gradient()`](linear-gradient), [`repeating-linear-gradient()`](repeating-linear-gradient), [`radial-gradient()`](radial-gradient), [`repeating-radial-gradient()`](repeating-radial-gradient)
* [`<image>`](../image)
* [`image()`](../image/image)
* [`element()`](../element())
* [`image-set()`](../image/image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient>

contain-intrinsic-block-size
============================



The `contain-intrinsic-block-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [logical property](css_logical_properties) defines the block size of an element that a browser can use for layout when the element is subject to [size containment](css_containment#size_containment).

 Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal [writing mode](writing-mode) like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension.



Syntax
------



```
/\* Keyword values \*/
contain-intrinsic-block-size: none;

/\* <length> values \*/
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

/\* auto <length> \*/
contain-intrinsic-block-size: auto 300px;

/\* Global values \*/
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;

```
### Values



The following values can be specified for the intrinsic block size of an element:

  `none`  The element has no intrinsic block size.

  `<length>`  The element has the specified block size, expressed using the ([`<length>`](length)) data type.

  `auto <length>`   When the element is in size containment and skipping its contents (for example, when it is offscreen and `content-visibility: auto` is set) the block size is remembered from the actual size of the element when it was last able to render its child elements. If the element has never rendered its child elements and hence has no remembered value for the normally rendered element size, or if it is not skipping its contents, the block size is the specified `<length>`. 

  
Description
-----------



The property is commonly applied alongside elements that can trigger size containment, such as [`contain: size`](contain) and [`content-visibility`](content-visibility).

  Size containment allows a user agent to lay out an element as though it had a fixed size. This prevents unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience). By default, size containment treats elements as though they had no contents and may collapse the layout in the same way as if the contents had no width or height. The `contain-intrinsic-block-size` property allows authors to specify an appropriate value to be used as the block-size for layout. 

  The `auto <length>` value allows the block-size of an element to be stored if the element is ever "normally rendered" (with its child elements) and then used instead of the specified value when the element does not have any content. This allows offscreen elements with [`content-visibility: auto`](content-visibility) to benefit from size containment without developers having to be precise in their estimates of element size. The remembered value is not used if the child elements are being rendered; if size containment is enabled, the `<length>` value will be used. 


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | elements for which size containment can apply |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, with <length>s values computed |
| Animation type | by computed value type |

Formal syntax
-------------



```
contain-intrinsic-block-size =   
  none           [|](value_definition_syntax#single_bar)  
  [<length>](length)       [|](value_definition_syntax#single_bar)  
  auto [<length>](length)    
  

```
Examples
--------


### Setting the intrinsic block size



The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

 
```
<div id="contained\_element">
  <div class="child\_element"></div>
</div>

```
  The CSS below sets the [`content-visibility`](content-visibility) of `contained_element` to `auto`, so if the element is hidden it will be size constrained. The intrinsic block size and inline size that are used when it is size constrained are set at the same time using `contain-intrinsic-block-size` and `contain-intrinsic-inline-size`, respectively. 

 
```
#contained\_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-block-size](https://w3c.github.io/csswg-drafts/css-sizing-4/#propdef-contain-intrinsic-block-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contain-intrinsic-block-size` | 95 | 95 | 107 | No | 81 | No | 95 | 95 | 107 | 67 | No | 17.0 |


See also
--------


* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contain-intrinsic-width`](contain-intrinsic-width)
* [`contain-intrinsic-height`](contain-intrinsic-height)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-block-size>

content
=======


The `content` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property replaces an element with a generated value. Objects inserted using the `content` property are **anonymous [replaced elements](replaced_element)**.


Try it
------


Syntax
------



```
/\* Keywords that cannot be combined with other values \*/
content: normal;
content: none;

/\* <image> values \*/
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/\* alt text for generated content, added in the Level 3 specification \*/
content: url("http://www.example.com/test.png") / "This is the alt text";

/\* <string> value \*/
content: "prefix";

/\* list of content values \*/
content: "prefix" url("http://www.example.com/test.png");
content: "prefix" url("http://www.example.com/test.png") "suffix" /
  "This is some alt text";

/\* <counter> values, optionally with <list-style-type> \*/
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);

/\* attr() value linked to the HTML attribute value \*/
content: attr(value string);

/\* Language- and position-dependent keywords \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* Except for normal and none, several values can be used simultaneously \*/
content: open-quote counter(chapter_counter);

/\* Global values \*/
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;

```
### Values


 `none`  When applied to a pseudo-element, the pseudo-element is not generated. If applied to an element, the value has no effect.

  `normal`  Computes to `none` for the `::before` and `::after` pseudo-elements.

  [`<string>`](string)  Specifies the "alt text" for the element. This value can be any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, `\000A9` represents the copyright symbol.

  `<content-list>`   A list of anonymous inline boxes that will replace the content of the selected element (in the specified order). This list can include strings, images, counters, and so on. 

  [`<image>`](image)  An [`<image>`](image), denoted by the [`url()`](url) or [`<gradient>`](gradient) data type, or part of the webpage, defined by the [`element()`](element()) function, denoting the content to display.

  [`counter()`](counter)  The value of a [CSS counter](css_counter_styles/using_css_counters), generally a number produced by computations defined by [`<counter-reset>`](counter-reset) and [`<counter-increment>`](counter-increment) properties. It can be displayed using either the [`counter()`](counter) or [`counters()`](counters) function.

 The [`counter()`](counter) function has two forms: 'counter(*name*)' or 'counter(*name*, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified [`<list-style-type>`](list-style-type) (`decimal` by default).

 The [`counters()`](counters) function also has two forms: 'counters(*name*, *string*)' or 'counters(*name*, *string*, *style*)'. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated [`<list-style-type>`](list-style-type) (`decimal` by default).

  `attr(x)`  The value of the element's attribute `x` as a string. If there is no attribute `x`, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

  
`open-quote` | `close-quote`
  These values are replaced by the appropriate string from the [`quotes`](quotes) property.

  
`no-open-quote` | `no-close-quote`
  Introduces no content, but increments (decrements) the level of nesting for quotes.

  `<content-list> / "Alternative text"`   Alternative text may be specified for an image (or list of content items) by appending a forward slash and then the text. The alternative text is intended for speech output by screen-readers, but may also be displayed in some browsers. Note that if the browser does not support alternative text, neither the content or alternative text will be used. 

  Accessibility concerns
----------------------



CSS-generated content is not included in the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction). Because of this, it will not be represented in the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.

 * [Accessibility support for CSS generated content – Tink](https://tink.uk/accessibility-support-for-css-generated-content/)
* [Explanation of WCAG, Guideline 1.3 – MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
* [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | All elements, tree-abiding pseudo-elements, and page margin boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | On elements, always computes to `normal`. On [`::before`](::before) and [`::after`](::after), if `normal` is specified, computes to `none`. Otherwise, for URI values, the absolute URI; for `attr()` values, the resulting string; for other keywords, as specified. |
| Animation type | discrete |

Formal syntax
-------------



```
content =   
  normal                                              [|](value_definition_syntax#single_bar)  
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <content-replacement> [|](value_definition_syntax#single_bar) <content-list> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) / [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <counter> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  element( )                                            
  
<content-replacement> =   
  <image>    
  
<content-list> =   
  [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) contents [|](value_definition_syntax#single_bar) <image> [|](value_definition_syntax#single_bar) <counter> [|](value_definition_syntax#single_bar) <quote> [|](value_definition_syntax#single_bar) <target> [|](value_definition_syntax#single_bar) <leader()> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)    
  
<counter> =   
  <counter()>   [|](value_definition_syntax#single_bar)  
  <counters()>    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<quote> =   
  open-quote      [|](value_definition_syntax#single_bar)  
  close-quote     [|](value_definition_syntax#single_bar)  
  no-open-quote   [|](value_definition_syntax#single_bar)  
  no-close-quote    
  
<target> =   
  <target-counter()>   [|](value_definition_syntax#single_bar)  
  <target-counters()>  [|](value_definition_syntax#single_bar)  
  <target-text()>        
  
<leader()> =   
  leader( <leader-type> )    
  
<counter()> =   
  counter( [<counter-name>](counter-name) , <counter-style>[?](value_definition_syntax#question_mark) )    
  
<counters()> =   
  counters( [<counter-name>](counter-name) , [<string>](string) , <counter-style>[?](value_definition_syntax#question_mark) )    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<target-counter()> =   
  target-counter( [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <url> []](value_definition_syntax#brackets) , [<custom-ident>](custom-ident) , <counter-style>[?](value_definition_syntax#question_mark) )    
  
<target-counters()> =   
  target-counters( [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <url> []](value_definition_syntax#brackets) , [<custom-ident>](custom-ident) , [<string>](string) , <counter-style>[?](value_definition_syntax#question_mark) )    
  
<target-text()> =   
  target-text( [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <url> []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) content [|](value_definition_syntax#single_bar) before [|](value_definition_syntax#single_bar) after [|](value_definition_syntax#single_bar) first-letter []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<leader-type> =   
  dotted    [|](value_definition_syntax#single_bar)  
  solid     [|](value_definition_syntax#single_bar)  
  space     [|](value_definition_syntax#single_bar)  
  [<string>](string)    
  
<counter-style> =   
  [<counter-style-name>](counter-style-name)  [|](value_definition_syntax#single_bar)  
  <symbols()>             
  
<symbols()> =   
  symbols( <symbols-type>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <image> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) )    
  
<symbols-type> =   
  cyclic      [|](value_definition_syntax#single_bar)  
  numeric     [|](value_definition_syntax#single_bar)  
  alphabetic  [|](value_definition_syntax#single_bar)  
  symbolic    [|](value_definition_syntax#single_bar)  
  fixed         
  

```
Examples
--------


### Headings and quotes



This example inserts quotation marks around quotes, and adds the word "Chapter" before headings.

 #### HTML

 
```
<h1>5</h1>
<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.
  </q>
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>

<h1>6</h1>
<p>
  According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">
    Individuals must have the ability to shape the Internet and their own
    experiences on the Internet.
  </q>
  Therefore, we can infer that contributing to the open web can protect our own
  individual experiences on it.
</p>

```
 #### CSS

 
```
q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before {
  content: "Chapter "; /\* The trailing space creates separation
 between the added content and the
 rest of the content \*/
}

```
 #### Result



### Image combined with alternative text



 This example inserts an image before the link and provides alternative text that a screen reader can output as speech. Some browsers may also display the alternative text. 

 #### HTML

 
```
<a href="https://www.mozilla.org/en-US/">Mozilla Home Page</a>

```
 #### CSS

  The CSS to show the image and set the alternative text is shown below. This also sets the font and color for the content. This will only be used on browsers that *display* the alternative text. 

 
```
a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font: x-small Arial, sans-serif;
  color: gray;
}

```
 #### Result

  The browser should display the icon before the link below. If using a screen reader, it should speak the word "MOZILLA" when it reaches the image. 


  Note that on a browser that does not support the alternative text syntax, the whole line is invalid. In this case neither the image or alternative text will be used! You could partially address this issue by including CSS that adds the image before the line with them both. 


### Targeting classes



This example inserts additional text after special items in a list.

 #### HTML

 
```
<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>

```
 #### CSS

 
```
.new-entry::after {
  content: " New!"; /\* The leading space creates separation
 between the added content and the
 rest of the content \*/
  color: red;
}

```
 #### Result



### Images and element attributes



This example inserts an image before each link, and adds its `id` attribute after.

 #### HTML

 
```
<ul>
  <li><a id="moz" href="https://www.mozilla.org/"> Mozilla Home Page</a></li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/">
      Mozilla Developer Network</a
 >
  </li>
</ul>

```
 #### CSS

 
```
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}

#mdn::before {
  content: url("mdn-favicon16.png");
}

li {
  margin: 1em;
}

```
 #### Result



### Element replacement



This example replaces an element's content with an image. You can replace the contents of an element with either a [`url()`](url) or an [`<image>`](image) value. Content added with `::before` or `::after` will not be generated as the contents of the element have been replaced.

 #### HTML

 
```
<div id="replaced">Mozilla</div>

```
 #### CSS

 
```
#replaced {
  content: url("mdn.svg");
}

/\* will not show if element replacement is supported \*/
#replaced::after {
  content: " (" attr(id) ")";
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Generated Content Module Level 3 # content-property](https://w3c.github.io/csswg-drafts/css-content/#content-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `content` | 1 | 12 | 1 | 8 | 4 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `alt_text` | 77 | 79 | No | No | 64 | No | 77 | 77 | No | 55 | No | 12.0 |
| `element_replacement` | 28 | 79 | 63 | No | 7 | 9 | 4.4 | 28 | 63 | 10.1 | 9 | 1.5 |
| `none_applies_to_elements` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `url` | 1 | 12 | 1 | 8 | 7 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Replaced elements](replaced_element)
* [`::after`](::after)
* [`::before`](::before)
* [`::marker`](::marker)
* [`contain`](contain)
* [`quotes`](quotes)
* [`url()`](url) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/content>

cos()
=====


The `cos()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the cosine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a [`<number>`](number) or an [`<angle>`](angle) by interpreting the result of the argument as radians. That is, `cos(45deg)`, `cos(0.125turn)`, and `cos(3.14159 / 4)` all represent the same value, approximately `0.707`.


Syntax
------



```
/\* Single <angle> values \*/
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));

/\* Single <number> values \*/
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));

/\* Other values \*/
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));

```
### Parameter



The `cos(angle)` function accepts only one value as its parameter.

  `angle`  A calculation which resolves to a [`<number>`](number) or an [`<angle>`](angle). When specifying unitless numbers they are interpreted as a number of radians, representing an [`<angle>`](angle).

  
### Return value



The cosine of an `angle` will always return a number between `−1` and `1`.

 * If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.


### Formal syntax



```
<cos()> =   
  cos( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Keep the size of a rotated box



The `cos()` function can be used to keep the size of a rotated box.

 When the element is rotated using [`rotate()`](transform-function/rotate), it goes beyond its initial size. To fix this, we will use `cos()` to update the element size.

 For example, if you rotate a `100px`/`100px` square `45deg`, the diamond it creates will be wider and taller than the original square. To shrink the diamond into the box allotted for the original square, you would have to scale down the diamond using this formula: `width = height = 100px * cos(45deg) = 100px * 0.707 = 70.7px`. You need to also adjust the [`transform-origin`](transform-origin) and add [`translate()`](transform-function/translate) to correct the position:

 #### HTML

 
```
<div class="original-square"></div>
<div class="rotated-diamond"></div>
<div class="rotated-scaled-diamond"></div>

```
 #### CSS

 
```
div.original-square {
  width: 100px;
  height: 100px;
  background-color: blue;
}
div.rotated-diamond {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
div.rotated-scaled-diamond {
  width: calc(100px * cos(45deg));
  height: calc(100px * cos(45deg));
  margin: calc(100px / 4 * cos(45deg));
  transform: rotate(45deg);
  transform-origin: center;
  background-color: green;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `cos` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`sin()`](sin)
* [`tan()`](tan)
* [`asin()`](asin)
* [`acos()`](acos)
* [`atan()`](atan)
* [`atan2()`](atan2)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/cos>

counter()
=========


 The `counter()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) returns a string representing the current value of the named counter, if there is one. It is generally used in the [`content`](content) property of <pseudo-elements>, but can theoretically be used anywhere a [`<string>`](string) value is supported. 


Try it
------


Syntax
------




```
/\* Simple usage \*/
counter(countername);

/\* changing the counter display \*/
counter(countername, upper-roman)

```
  A [counter](css_counter_styles/using_css_counters) has no visible effect by itself. The `counter()` function (and [`counters()`](counters) function) is what makes it useful by returning developer defined strings (or images). 


### Values


 [`<custom-ident>`](custom-ident)  A name identifying the counter, which is the same case-sensitive name used for the [`counter-reset`](counter-reset) and [`counter-increment`](counter-increment). The name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`.

  `<counter-style>`  A [`<list-style-type>`](list-style-type) name, [`<@counter-style>`](@counter-style) name or [`symbols()`](@counter-style/symbols) function, where a counter style name is a `numeric`, `alphabetic`, or `symbolic` simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](css_counter_styles). If omitted, the counter-style defaults to `decimal`.

  ### Formal syntax



```
<counter()> =   
  counter( [<counter-name>](counter-name) , <counter-style>[?](value_definition_syntax#question_mark) )    
  
<counter-style> =   
  [<counter-style-name>](counter-style-name)  [|](value_definition_syntax#single_bar)  
  <symbols()>             
  
<symbols()> =   
  symbols( <symbols-type>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <image> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) )    
  
<symbols-type> =   
  cyclic      [|](value_definition_syntax#single_bar)  
  numeric     [|](value_definition_syntax#single_bar)  
  alphabetic  [|](value_definition_syntax#single_bar)  
  symbolic    [|](value_definition_syntax#single_bar)  
  fixed         
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### default value compared to upper Roman



#### HTML

 
```
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

```
 #### CSS

 
```
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)
    "]";
}

```
 #### Result



### decimal-leading-zero compared to lower-alpha



#### HTML

 
```
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

```
 #### CSS

 
```
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content: "[" counter(count, decimal-leading-zero) "] == [" counter(
      count,
      lower-alpha
    )
    "]";
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # counter-functions](https://w3c.github.io/csswg-drafts/css-lists/#counter-functions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `counter` | 1 | 12 | 1 | 8 | 9.2 | 3 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using CSS Counters](css_counter_styles/using_css_counters)
* [`counter-reset`](counter-reset)
* [`counter-set`](counter-set)
* [`counter-increment`](counter-increment)
* [`@counter-style`](@counter-style)
* CSS [`counters()`](counters) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/counter>

counter-increment
=================


The `counter-increment` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property increases or decreases the value of a [CSS counter](css_counter_styles/using_css_counters) by a given value.


Try it
------



  **Note:** The counter's value can be reset to an arbitrary number using the [`counter-reset`](counter-reset) CSS property.

 
Syntax
------




```
/\* Increment "my-counter" by 1 \*/
counter-increment: my-counter;

/\* Decrement "my-counter" by 1 \*/
counter-increment: my-counter -1;

/\* Increment "counter1" by 1, and decrement "counter2" by 4 \*/
counter-increment: counter1 counter2 -4;

/\* Do not increment/decrement anything: used to override less specific rules \*/
counter-increment: none;

/\* Global values \*/
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: revert-layer;
counter-increment: unset;

```
 The `counter-increment` property is specified as either one of the following:

 * A `<custom-ident>` naming the counter, followed optionally by an `<integer>`. You may specify as many counters to increment as you want, with each name or name-number pair separated by a space.
* The keyword value `none`.


### Values


 [`<custom-ident>`](custom-ident)  The name of the counter to increment.

  [`<integer>`](integer)  The value to add to the counter. Defaults to `1` if not specified.

  `none`  No counter must be incremented. This is used as the default value, or to cancel an increment in more specific rules.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
counter-increment =   
  [[](value_definition_syntax#brackets) [<counter-name>](counter-name) [<integer>](integer)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)  [|](value_definition_syntax#single_bar)  
  none                              
  

```
Examples
--------


### Incrementing named counters



```
h1 {
  counter-increment: chapter section 2 page;
  /\* Increases the value of the chapter and page counters by 1,
 and the section counter by 2 \*/
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # increment-set](https://w3c.github.io/csswg-drafts/css-lists/#increment-set) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `counter-increment` | 2 | 12 | 1 | 8 | 9.2 | 3 | 4.4 | 18 | 25 | 10.1 | 1 | 1.0 |


See also
--------


* [Using CSS Counters](css_counter_styles/using_css_counters)
* [`counter-reset`](counter-reset)
* [`counter-set`](counter-set)
* [`@counter-style`](@counter-style)
* The [`counter()`](counter) and [`counters()`](counters) functions


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment>

counter-reset
=============



 The `counter-reset` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property resets a [CSS counter](css_counter_styles/using_css_counters) to a given value. This property will create a new counter or reversed counter with the given name on the specified element. 

  Normal counters have a default initial value of 0. Reversed counters are intended to count down, and have a default initial value set to the number of elements at the current level. The default initial values make it easy to implement the two most common numbering patterns: counting up from one to the number of elements, and counting down from the number of elements to one. 

 A counter's value is increased or decreased using the [`counter-increment`](counter-increment) CSS property, and the value of an existing counter may be set using [`counter-set`](counter-set).



Try it
------



  In addition to author-created counters, the property can also reset the `list-item` counters used by ordered lists (as created using [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) elements). These have the same behavior as author-created counters, except they are *automatically* incremented/decremented by one with each list element. This behavior can be overridden using [`counter-increment`](counter-increment). 


Syntax
------




```
/\* Set "my-counter" to 0 \*/
counter-reset: my-counter;

/\* Set "my-counter" to -3 \*/
counter-reset: my-counter -3;

/\* Set reversed "my-counter" to "the number of peer elements" \*/
counter-reset: reversed(my-counter);

/\* Set reversed "my-counter" to -1 \*/
counter-reset: reversed(my-counter) -1;

/\* Set counter2 to 9 and reversed "counter1" and "counter3" to 1 and 4, respectively\*/
counter-reset: reversed(counter1) 1 counter2 9 reversed(counter3) 4;

/\* Cancel any reset that could have been set in less specific rules \*/
counter-reset: none;

/\* Global values \*/
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: revert-layer;
counter-reset: unset;

```
 The `counter-reset` property is specified as either one of the following:

 * A `<custom-ident>` or a `reversed(<custom-ident>)` naming the counter, followed optionally by an `<integer>`. Note that the `reversed()` method is used to create a "reversed" counter. You may specify as many counters and reversed counters to reset as you want, with each counter or counter-number pair separated by a space.
* The keyword value `none`.

 The "implicit" counter named `list-item` can be used to control the numbering for ordered lists, as created using [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)


### Values


 [`<custom-ident>`](custom-ident)  The name of the counter to reset.

  [`<integer>`](integer)   The value to reset the counter to on each occurrence of the element. Defaults to `0` if not specified. 

  `none`   No counter reset is to be performed. This can be used to override a `counter-reset` defined in a less specific rule. 

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
counter-reset =   
  [[](value_definition_syntax#brackets) [<counter-name>](counter-name) [<integer>](integer)[?](value_definition_syntax#question_mark) [|](value_definition_syntax#single_bar) <reversed-counter-name> [<integer>](integer)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)  [|](value_definition_syntax#single_bar)  
  none                                                  
  
<reversed-counter-name> =   
  reversed( [<counter-name>](counter-name) )    
  

```
Examples
--------



The following examples show how to reset the counters, but not how they are incremented, decremented, and displayed.

 For more-complete examples see [Using CSS Counters](css_counter_styles/using_css_counters).


### Resetting named counters



```
h1 {
  counter-reset: chapter section 1 page;
  /\* Sets the chapter and page counters to 0,
 and the section counter to 1 \*/
}

```
### Reversing a counter



```
h1 {
  counter-reset: reversed(chapter) reversed(section) 1 page;
  /\* Sets the reversed flag on the chapter and section counters.
 Sets the chapter to the number of elements, the section counter to 1,
 and the page counters to 0\*/
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # counter-reset](https://w3c.github.io/csswg-drafts/css-lists/#counter-reset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `counter-reset` | 2 | 12 | 1 | 8 | 9.2 | 3 | 4.4 | 18 | 25 | 10.1 | 1 | 1.0 |
| `reset_does_not_affect_siblings` | No | No | 82 | No | No | No | No | No | 82 | No | No | No |
| `reversed` | No | No | 96 | No | No | No | No | No | 96 | No | No | No |


See also
--------


* [Using CSS Counters](css_counter_styles/using_css_counters)
* [`counter-increment`](counter-increment)
* [`counter-set`](counter-set)
* [`@counter-style`](@counter-style)
* [`counter()`](counter) and [`counters()`](counters) functions
* [`content`](content) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset>

counter-set
===========


The `counter-set` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets a [CSS counter](css_counter_styles/using_css_counters) to a given value. It manipulates the value of existing counters, and will only create new counters if there isn't already a counter of the given name on the element.


Try it
------



  **Note:** The counter's value can be incremented or decremented using the [`counter-increment`](counter-increment) CSS property.

 
Syntax
------




```
/\* Set "my-counter" to 0 \*/
counter-set: my-counter;

/\* Set "my-counter" to -1 \*/
counter-set: my-counter -1;

/\* Set "counter1" to 1, and "counter2" to 4 \*/
counter-set: counter1 1 counter2 4;

/\* Cancel any counter that could have been set in less specific rules \*/
counter-set: none;

/\* Global values \*/
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;

```
 The `counter-set` property is specified as either one of the following:

 * A `<custom-ident>` naming the counter, followed optionally by an `<integer>`. You may specify as many counters to reset as you want, with each name or name-number pair separated by a space.
* The keyword value `none`.


### Values


 [`<custom-ident>`](custom-ident)  The name of the counter to set.

  [`<integer>`](integer)  The value to set the counter to on each occurrence of the element. Defaults to `0` if not specified. If there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

  `none`  No counter set is to be performed. This can be used to override a `counter-set` defined in a less specific rule.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
counter-set =   
  [[](value_definition_syntax#brackets) [<counter-name>](counter-name) [<integer>](integer)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)  [|](value_definition_syntax#single_bar)  
  none                              
  

```
Examples
--------


### Setting named counters



```
h1 {
  counter-set: chapter section 1 page;
  /\* Sets the chapter and page counters to 0,
 and the section counter to 1 \*/
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # propdef-counter-set](https://w3c.github.io/csswg-drafts/css-lists/#propdef-counter-set) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `counter-set` | 85 | 85 | 68 | No | 71 | No | 85 | 85 | 68 | 60 | No | 14.0 |


See also
--------


* [Using CSS Counters](css_counter_styles/using_css_counters)
* [`counter-increment`](counter-increment)
* [`counter-reset`](counter-reset)
* [`@counter-style`](@counter-style)
* [`counter()`](counter) and [`counters()`](counters) functions
* [`content`](content) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set>

@counter-style
==============



The `@counter-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> lets you define counter styles 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.

 
```
@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

ul {
  list-style: thumbs;
}

```
 The initial version of CSS defined a set of useful counter styles. However, although more styles were added to this set of predefined styles over the years, this system proved too restrictive to fulfill the needs of worldwide typography. The `@counter-style` at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.



Syntax
------


### Descriptors



Each `@counter-style` is identified by a name and has a set of descriptors.

  [`system`](@counter-style/system)  Specifies the algorithm to be used for converting the integer value of a counter to a string representation.

  [`negative`](@counter-style/negative)  Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.

  [`prefix`](@counter-style/prefix)  Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.

  [`suffix`](@counter-style/suffix)  Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation.

  [`range`](@counter-style/range)  Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.

  [`pad`](@counter-style/pad)  Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start at 01 and go through 02, 03, 04, etc., then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.

  [`fallback`](@counter-style/fallback)  Specifies a system to fall back into if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.

  [`symbols`](@counter-style/symbols)  Specifies the symbols that are to be used for the marker representations. Symbols can contain strings, images, or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.

 The below `@counter-style` rule uses images instead of character symbols. Image values for symbols is currently an 'at risk' feature, and is not implemented in any browser.

 
```
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}

```
  [`additive-symbols`](@counter-style/additive-symbols)  While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on *additive tuples* described in this descriptor. Each additive tuple consists of a counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights.

  [`speak-as`](@counter-style/speak-as)  Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.

  
Formal syntax
-------------



```
@counter-style =   
  @counter-style [<counter-style-name>](counter-style-name) { [<declaration-list>](declaration-list) }    
  

```
Examples
--------


### Specifying symbols with counter-style




```
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

```
 The above counter style rule can be applied to lists like this:

 
```
.items {
  list-style: circled-alpha;
}

```
 Which will produce lists like this:

  Ⓐ One Ⓑ Two Ⓒ Three Ⓓ Four Ⓔ Five … Ⓨ Twenty-five Ⓩ Twenty-six 27 Twenty-seven 28 Twenty-eight 29 Twenty-nine 30 Thirty 

 See more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/).


### Ready-made counter styles



Find a collection of over 100 `counter-style` code snippets in the [Ready-made Counter Styles](https://www.w3.org/TR/predefined-counter-styles/) document. This document provides counter styles that meet the needs of languages and cultures around the world.

 The [Counter styles converter](https://r12a.github.io/app-counters/) pulls from this list to test and create copy and paste code for counter styles.


Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # the-counter-style-rule](https://w3c.github.io/csswg-drafts/css-counter-styles/#the-counter-style-rule) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@counter-style` | 91 | 91 | 33 | No | 77 | NoSee [bug 167645](https://webkit.org/b/167645). | 91 | 91 | 33 | 64 | NoSee [bug 167645](https://webkit.org/b/167645). | 16.0 |
| `additive-symbols` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `fallback` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `negative` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `pad` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `prefix` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `range` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `speak-as` | No | No | 33 | No | No | No | No | No | 33 | No | No | No |
| `suffix` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `symbols` | 91Does not support `<image>` as a value for the `symbols` descriptor. | 91Does not support `<image>` as a value for the `symbols` descriptor. | 33Does not support `<image>` as a value for the `symbols` descriptor. | No | 77Does not support `<image>` as a value for the `symbols` descriptor. | No | 91Does not support `<image>` as a value for the `symbols` descriptor. | 91Does not support `<image>` as a value for the `symbols` descriptor. | 33Does not support `<image>` as a value for the `symbols` descriptor. | 64Does not support `<image>` as a value for the `symbols` descriptor. | No | 16.0Does not support `<image>` as a value for the `symbols` descriptor. |
| `system` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](list-style), [`list-style-image`](list-style-image), [`list-style-position`](list-style-position), [`list-style-type`](list-style-type)
* [`symbols()`](@counter-style/symbols), the functional notation creating anonymous counter styles.
* CSS [`counter()`](counter) and [`counters()`](counters) functions
* [Counter style demo](https://mdn.github.io/css-examples/counter-style-demo/) ([code](https://github.com/mdn/css-examples/tree/main/counter-style-demo))


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style>

content-visibility
==================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `content-visibility` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

  **Note:** The [`contentvisibilityautostatechange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event) event fires on any element with `content-visibility: auto` set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app's code to start or stop rendering processes (e.g. drawing on a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)) when they are not needed, thereby conserving processing power.

 

Syntax
------



```
/\* Keyword values \*/
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/\* Global values \*/
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

```
### Values


 `visible`  No effect. The element's contents are laid out and rendered as normal.

  `hidden`  The element [skips its contents](css_containment#skips_its_contents). The skipped contents must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable. This is similar to giving the contents `display: none`.

  `auto`  The element turns on layout containment, style containment, and paint containment. If the element is not [relevant to the user](css_containment#relevant_to_the_user), it also skips its contents. Unlike hidden, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `visible` |
| Applies to | elementsForWhichLayoutContainmentCanApply |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
content-visibility =   
  visible  [|](value_definition_syntax#single_bar)  
  auto     [|](value_definition_syntax#single_bar)  
  hidden     
  

```
Accessibility concerns
----------------------



Off-screen content within a `content-visibility: auto` property remains in the document object model and the accessibility tree. This allows improving page performance with `content-visibility: auto` without negatively impacting accessibility.

  Since styles for off-screen content are not rendered, elements intentionally hidden with `display: none` or `visibility: hidden` *will still appear in the accessibility tree*. If you don't want an element to appear in the accessibility tree, use `aria-hidden="true"`. 


Examples
--------


### Using auto to reduce rendering cost of long pages



 The following example shows the use of `content-visibility: auto` to skip painting and rendering of off-screen sections. When a `section` is out of the viewport then the painting of the content is skipped until the section comes close to the viewport, this helps with both load and interactions on the page. 

 #### HTML

 
```
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->

```
 #### CSS

 The `contain-intrinsic-size` property adds a default size of 500px to the height and width of each `section` element. After a section is rendered, it will retain its rendered intrinsic size, even when it is scrolled out of the viewport.

 
```
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

```

### Using hidden to manage visibility



 The following example shows how to manage content visibility with JavaScript. Using `content-visibility: hidden;` instead of `display: none;` preserves the rendering state of content when hidden and rendering is faster. 

 #### HTML

 
```
<div class="hidden">
  <button class="toggle">Show</button>
  <p>
    This content is initially hidden and can be shown by clicking the button.
  </p>
</div>
<div class="visible">
  <button class="toggle">Hide</button>
  <p>
    This content is initially visible and can be hidden by clicking the button.
  </p>
</div>

```
 #### CSS

 The `content-visibility` property is set on paragraphs that are direct children of elements with the `visible` and `hidden` classes. In our example, we can show and hide content in paragraphs depending on the CSS class of parent div elements.

 The `contain-intrinsic-size` property is included to represent the content size. This helps to reduce layout shift when content is hidden.

 
```
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}

```
 #### JavaScript

 
```
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 2 # content-visibility](https://w3c.github.io/csswg-drafts/css-contain/#content-visibility) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `content-visibility` | 85 | 85 | 109 | No | 71 | No | 85 | 85 | No | 60 | No | 14.0 |


See also
--------


* [CSS Containment](css_containment)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contentvisibilityautostatechange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event)
* [content-visibility: the new CSS property that boosts your rendering performance](https://web.dev/content-visibility/) (web.dev)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility>

contrast()
==========


The `contrast()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) adjusts the contrast of the input image. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



```
contrast(amount)

```
### Values



 `amount`  The contrast of the result, specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value under `100%` decreases the contrast, while a value over `100%` increases it. A value of `0` or `0%` will create an image that is completely gray, while a value of `1` or `100%` leaves the input unchanged. Negative values are not allowed. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `1`.

   The following are pairs of equivalent values:

 
```
contrast(0) /\* Completely gray \*/
contrast(0%)

contrast(0.65) /\* 65% contrast \*/
contrast(65%)

contrast(1)     /\* No effect \*/
contrast(100%)

contrast(2)  /\* Double contrast \*/
contrast(200%)

```

### Formal syntax



```
<contrast()> =   
  contrast( [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) [<percentage>](../percentage) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  

```
Examples
--------


### With the backdrop-filter property



This example applies a `contrast()` filter via the [`backdrop-filter`](../backdrop-filter) CSS property to the paragraph and monospaced text, color shifting to the area behind the `<p>` and `<code>`.

 
```
.container {
  background: url(image.jpg) no-repeat center / contain #339;
}
p {
  backdrop-filter: contrast(0.5);
}
code {
  backdrop-filter: contrast(0.15);
}

```


### With the filter property



This example applies a `contrast()` filter via the [`filter`](../filter) CSS property, changing contrast by shifting colors of the entire element, including content, border, background, and shadows.

 
```
p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}

```


### With url() and the SVG contrast filter



The SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element is used to define custom filter effects that can then be referenced by [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id). The `<filter>`'s [`<feComponentTransfer>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer) primitive enables pixel-level color remapping. Given the following:

 
```
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.5"/>
      <feFuncB type="linear" slope="2" intercept="-0.5"/>
    </feComponentTransfer>
  </filter>

```
 These values produce the same results:

 
```
filter: contrast(200%);
filter: url(#contrast); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#contrast); /\* external svg filter definition \*/

```
 This example shows three images: the image with a `contrast()` filter function applied, the image with an equivalent `url()` filter applied, and the original images for comparison:



Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-contrast](https://drafts.fxtf.org/filter-effects/#funcdef-filter-contrast) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `contrast` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------


* [CSS filter effects](../filter_effects) module
* The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:
	+ [`blur()`](blur)
	+ [`brightness()`](brightness)
	+ [`drop-shadow()`](drop-shadow)
	+ [`grayscale()`](grayscale)
	+ [`hue-rotate()`](hue-rotate)
	+ [`invert()`](invert)
	+ [`opacity()`](opacity)
	+ [`saturate()`](saturate)
	+ [`sepia()`](sepia)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast>

::cue
=====


The `::cue` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) matches [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) cues within a selected element. This can be used to [style captions and other cues](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#styling_webvtt_cues) in media with VTT tracks.


Try it
------



 The properties are applied to the entire set of cues as if they were a single unit. The only exception is that `background` and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.


Syntax
------



```
::cue | ::cue(<selector>) {
  /\* ... \*/
}

```
Permitted properties
--------------------



Rules whose selectors include this element may only use the following CSS properties:

 * [`background`](background)
* [`background-attachment`](background-attachment)
* [`background-clip`](background-clip)
* [`background-color`](background-color)
* [`background-image`](background-image)
* [`background-origin`](background-origin)
* [`background-position`](background-position)
* [`background-repeat`](background-repeat)
* [`background-size`](background-size)
* [`color`](color)
* [`font`](font)
* [`font-family`](font-family)
* [`font-size`](font-size)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-variant`](font-variant)
* [`font-weight`](font-weight)
* [`line-height`](line-height)
* [`opacity`](opacity)
* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)
* [`ruby-position`](ruby-position)
* [`text-combine-upright`](text-combine-upright)
* [`text-decoration`](text-decoration)
* [`text-decoration-color`](text-decoration-color)
* [`text-decoration-line`](text-decoration-line)
* [`text-decoration-style`](text-decoration-style)
* [`text-decoration-thickness`](text-decoration-thickness)
* [`text-shadow`](text-shadow)
* [`visibility`](visibility)
* [`white-space`](white-space)


Examples
--------


### Styling WebVTT cues as white-on-black



The following CSS sets the cue style so that the text is white and the background is a translucent black box.

 
```
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}

```

Specifications
--------------




| Specification |
| --- |
| [WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element](https://w3c.github.io/webvtt/#the-cue-pseudo-element) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::cue` | 26 | 79 | 55From Firefox 69, only allowed properties apply to the `::cue` pseudo-element with no argument. See [Permitted properties](https://developer.mozilla.org/docs/Web/CSS/::cue#Permitted_properties) for a list of the allowed properties. | No | 15 | 7 | 4.4 | 26 | 55 | 14 | 7 | 1.5 |
| `selector_argument` | 26 | 79 | No | No | 15 | 7 | 4.4 | 26 | No | 14 | 7 | 1.5 |


See also
--------


* [Web Video Tracks Format (WebVTT)](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API)
* [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track), [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::cue>

:current
========



The `:current` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector is a time-dimensional pseudo-class that represents an element or the ancestor of an element that is currently being displayed. For example, this pseudo-class can be used to represent a video that is being displayed with captions by [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API).

 
```
:current(p, span) {
  background-color: yellow;
}

```


Syntax
------


Error: could not find syntax for this itemExamples
--------


### CSS



```
:current(p, span) {
  background-color: yellow;
}

```
### HTML



```
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="subtitles.vtt"
 default />
</video>

```
### WebVTT



```
WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption

```
Specifications
--------------



**No specification found**No specification data found for `css.selectors.current`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------


See also
--------


* [Web Video Text Tracks Format (WebVTT)](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API)
* [`:past`](:past)
* [`:future`](:future)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:current>

counters()
==========


The `counters()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The `counters()` function has two forms: `counters(name, string)` or `counters(name, string, style)`. It is generally used with <pseudo-elements>, but can be used, theoretically, anywhere a [`<string>`](string) value is supported. The generated text is the value of all counters with the given name, from outermost to innermost, separated by the specified string. The counters are rendered in the style indicated, defaulting to `decimal` if no style is specified.


Try it
------


Syntax
------




```
/\* Simple usage - style defaults to decimal \*/
counters(countername, '-');

/\* changing the counter display \*/
counters(countername, '.', upper-roman)

```
 A [counter](css_counter_styles/using_css_counters) has no visible effect by itself. The `counters()` function (and [`counter()`](counter) function) is what makes it useful by returning developer defined content.


### Values


 [`<custom-ident>`](custom-ident)  A name identifying the counters, which is the same case-sensitive name used for the [`counter-reset`](counter-reset) and [`counter-increment`](counter-increment). The name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`.

  `<counter-style>`  A counter style name or [`symbols()`](@counter-style/symbols) function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east Asian or Ethiopic predefined counter style, or other [predefined counter style](css_counter_styles). If omitted, the counter-style defaults to decimal

  [`<string>`](string)  Any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, `\000A9` represents the copyright symbol.

  ### Formal syntax



```
<counters()> =   
  counters( [<counter-name>](counter-name) , [<string>](string) , <counter-style>[?](value_definition_syntax#question_mark) )    
  
<counter-style> =   
  [<counter-style-name>](counter-style-name)  [|](value_definition_syntax#single_bar)  
  <symbols()>             
  
<symbols()> =   
  symbols( <symbols-type>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <image> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) )    
  
<symbols-type> =   
  cyclic      [|](value_definition_syntax#single_bar)  
  numeric     [|](value_definition_syntax#single_bar)  
  alphabetic  [|](value_definition_syntax#single_bar)  
  symbolic    [|](value_definition_syntax#single_bar)  
  fixed         
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### default value compared to upper Roman



#### HTML

 
```
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

```
 #### CSS

 
```
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content: counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content: counters(listCounter, ".") " == " counters(
      listCounter,
      ".",
      lower-roman
    );
}

```
 #### Result



### decimal-leading-zero compared to lower-alpha



#### HTML

 
```
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

```
 #### CSS

 
```
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content: counters(count, ".", upper-alpha) ") ";
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(
      count,
      ".",
      lower-alpha
    );
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # counter-functions](https://w3c.github.io/csswg-drafts/css-lists/#counter-functions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `counters` | 1 | 12 | 1.5 | 8 | 10 | 3 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using CSS Counters](css_counter_styles/using_css_counters)
* [`counter-set`](counter-set)
* [`counter-reset`](counter-reset)
* [`counter-increment`](counter-increment)
* [`@counter-style`](@counter-style)
* CSS [`counter()`](counter) function
* [`::marker`](::marker)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/counters>

<easing-function>
=================



The `<easing-function>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) denotes a mathematical function that describes the rate at which a numerical value changes.

 This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. It may also be used to interpolate between two colors in a color gradient. You can specify an easing function for CSS [transition](transition-timing-function) and [animation](animation-timing-function) properties.



Syntax
------



```
/\* linear function and keyword \*/
/\* linear(<list-of-points>) \*/
linear(1, -0.5, 0);
linear;

/\* cubic-bezier function and keywords \*/
/\* cubic-bezier(<x1>, <y1>, <x2>, <y2>) \*/
cubic-bezier(0.42, 0.0, 1.0, 1.0);
ease;
ease-in;
ease-out;
ease-in-out;

/\* steps function and keywords \*/
/\* steps(<number-of-steps>, <direction>) \*/
steps(4, end);
step-start;
step-end;

```
### Values



 *list-of-points*  List of linear stops

  *x1, y1, x2, y2*  [`<number>`](number) values representing the abscissas and ordinates of the [P1 and P2 points](#cubic_b%C3%A9zier_functions) defining the cubic Bézier curve. x1 and x2 must be in the range `[0, 1]`, otherwise the value is invalid.

  `ease`  Indicates that the interpolation starts slowly, accelerates sharply, and then slows gradually towards the end. This keyword represents the easing function `cubic-bezier(0.25, 0.1, 0.25, 1.0)`. It is similar to [`ease-in-out`](#ease-in-out), though it accelerates more sharply at the beginning.

    ![A 2D graph of 'Time ratio' to 'Output ratio' with a curved line quickly rising from the origin to X1 Y1.] 

  `ease-in`  Indicates that the interpolation starts slowly, then progressively speeds up until the end, at which point it stops abruptly. This keyword represents the easing function `cubic-bezier(0.42, 0.0, 1.0, 1.0)`.

    ![A 2D graph of 'Time ratio' to 'Output ratio' shows a shallow curved line from the origin that straightens out as it approaches X1 Y1.] 

  `ease-in-out`  Indicates that the interpolation starts slowly, speeds up, and then slows down towards the end. This keyword represents the easing function `cubic-bezier(0.42, 0.0, 0.58, 1.0)`. At the beginning, it behaves like the [`ease-in`](#ease-in) function; at the end, it is like the [`ease-out`](#ease-out) function.

    ![A 2D graph of 'Time ratio' to 'Output ratio' shows a symmetrical, 'S'-shaped line curving from the origin to X1 Y1.] 

  `ease-out`  Indicates that the interpolation starts abruptly and then progressively slows down towards the end. This keyword represents the easing function `cubic-bezier(0.0, 0.0, 0.58, 1.0)`.

    ![A 2D graph of 'Time ratio' to 'Output ratio' shows a straight diagonal line that slightly curves as it gets close to X1 Y1.] 

  *number-of-steps*  A strictly positive [`<integer>`](integer), representing the amount of equidistant treads composing the stepping function.

  *direction*  One of the following keywords that indicate when the jumps occur:

 * `jump-start` denotes that the first step or jump happens when the interpolation begins.
* `jump-end` denotes that the last step or jump happens when the interpolation ends.
* `jump-both` denotes that jumps occur at both the 0% and 100% marks, effectively adding a step during the interpolation iteration.
* `jump-none` denotes no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration.
* `start` is the equivalent of `jump-start`.
* `end` is the equivalent of `jump-end`. This is the default.

  `step-start`  Indicates that the interpolation jumps immediately to its final state, where it stays until the end. This keyword represents the easing function `steps(1, jump-start)` or `steps(1, start)`.

    ![A 2D graph of 'Time ratio' to 'Output ratio' with one point at X0 Y0 and another at X1 Y1. A horizontal line extends from the Y axis to X1 Y1.] 

  `step-end`  Indicates that the interpolation stays in its initial state until the end, at which point it jumps directly to its final state. This keyword represents the easing function `steps(1, jump-end)` or `steps(1, end)`.

    ![A 2D graph of 'Time ratio' to 'Output ratio' with one point at X0 Y0 and another at X1 Y1. A horizontal line extends on the X axis from the origin towards X0 Y1.] 


Description
-----------



There are three types of easing functions:

 * [Linear](#linear_easing_function)
* [Cubic Bézier](#cubic_b%C3%A9zier_easing_function)
* [Step](#step_easing_function)


### Linear easing function



The `linear()` function defines a piecewise linear function that interpolates linearly between its points, allowing you to approximate more complex animations like bounce and elastic effects. The interpolation is done at a constant rate from beginning to end. A typical use of the `linear()` function is to provide many points to create the illusion of a curve.

 When you define the `linear()` function, you specify the *linear easing points* as a list, as in, `linear(0, 0.25, 1)`. This `linear()` function produces an easing function that moves linearly from `0`, to `0.25`, then to `1`.

 Consider another example of the function: `linear(0, 0.25 75%, 1)`. This produces a linear easing function that spends 75% of the time transitioning from `0` to `.25` and the last 25% transitioning from `.25` to `1`.

 The `linear` keyword produces a `linear()` function with two points. This is equivalent to the easing function `cubic-bezier(0.0, 0.0, 1.0, 1.0)`.

  ![A 2D graph of 'Time ratio' to 'Output ratio' shows a straight diagonal line extending from the origin to X1 Y1.] 


### Cubic Bézier easing function



The `cubic-bezier()` functional notation defines a cubic [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve). The easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions because they can be used to smooth down the start and end of the [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation). They correlate an input ratio to an output ratio, both expressed as [`<number>`](number)s. For these values, `0.0` represents the initial state, and `1.0` represents the final state.

  ![A 2D graph of 'Time ratio' to 'Output ratio' shows an 'S'-shaped line curving from the origin to X1 Y1. The Bezier handle at X0 Y0 is labeled 'P₁ = (0.075, 0.75)' and at X1 Y1 is labeled 'P₂ = (0.0875, 0.36)'.] 

 A cubic Bézier curve is defined by four points: P0, P1, P2, and P3.

 * The points P0 and P3 represent the start and the end of the curve. In CSS, these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range).
* P0 is `(0, 0)` and represents the initial time or position and the initial state.
* P3 is `(1, 1)` and represents the final time or position and the final state.

 Not all cubic Bézier curves are suitable as easing functions because not all are [mathematical functions](https://en.wikipedia.org/wiki/Function_%28mathematics%29); i.e., curves that for a given abscissa have zero or one value. With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the abscissas of P1 and P2 are both in the `[0, 1]` range.

 Cubic Bézier curves with the P1 or P2 ordinate outside the `[0, 1]` range can cause the value to go farther than the final state and then return. In animations, for some properties, such as [`left`](left) or [`right`](right), this creates a kind of "bouncing" effect.

  ![Graph of the easing function showing the output ratio going above 1, to 1.5, at the transition durations midpoint.] 

 However, certain properties will restrict the output if it goes outside an allowable range. For example, a color component greater than `255` or smaller than `0` will be clipped to the closest allowed value (`255` and `0`, respectively). Some `cubic-bezier()` curves exhibit this property.

  ![Graph of the easing function showing the output ratio reaching 1, and then staying at 1 for the rest of the time.] 

 When you specify an invalid `cubic-bezier` curve, CSS ignores the whole property.

 The `cubic-bezier()` function can also be specified using these keywords, each of which represent a specific `cubic-bezier()` notation: [`ease`](#ease), [`ease-in`](#ease-in), [`ease-out`](#ease-out), and [`ease-in-out`](#ease-in-out).


### Step easing function



The `steps()` functional notation defines a [step function](https://en.wikipedia.org/wiki/Step_function) that divides the domain of output values in equidistant steps. This subclass of step functions are sometimes also called *staircase functions*.

 These are a few examples illustrating the `steps()` function:

 
```
steps(2, jump-start)
steps(2, start)

```
  ![A 2D graph of 'Time ratio' to 'Output ratio' with points at X0 Y0, X0.5 Y0.5, and X1 Y1. Horizontal lines from the second and third points extend 0.5 units towards the Y axis.] 

 
```
steps(4, jump-end)
steps(4, end)

```
  ![A 2D steps graph showing four steps, with a jump from the fourth step to the final value at the 100% mark.] 

 
```
steps(5, jump-none)

```
  ![A 2D steps graph showing five steps with no jump. Beginning 20% of the time is at the 0% mark, and the last 20% is at the 100% mark.] 

 
```
steps(3, jump-both)

```
  ![A 2D steps graph showing points at X0 Y0, X0 Y0.25, X0.25 Y0.5, X0.75 Y0.75 and X1 Y1. The second, third, and fourth points have horizontal lines extending 0.25 units away from the Y axis.] 

 The `steps()` function can also be specified using these keywords, each of which represent a specific `steps()` notation: [`step-start`](#step-start) and [`step-end`](#step-end).


Formal syntax
-------------



```
<easing-function> =   
  linear                          [|](value_definition_syntax#single_bar)  
  <linear-easing-function>        [|](value_definition_syntax#single_bar)  
  <cubic-bezier-easing-function>  [|](value_definition_syntax#single_bar)  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                [|](value_definition_syntax#single_bar)  
  ease-in                                             [|](value_definition_syntax#single_bar)  
  ease-out                                            [|](value_definition_syntax#single_bar)  
  ease-in-out                                         [|](value_definition_syntax#single_bar)  
  cubic-bezier( [<number [0,1]>](number) , [<number>](number) , [<number [0,1]>](number) , [<number>](number) )    
  
<step-easing-function> =   
  step-start                                [|](value_definition_syntax#single_bar)  
  step-end                                  [|](value_definition_syntax#single_bar)  
  steps( [<integer>](integer) [[](value_definition_syntax#brackets), <step-position> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<linear-stop-list> =   
  [[](value_definition_syntax#brackets) <linear-stop> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<step-position> =   
  jump-start  [|](value_definition_syntax#single_bar)  
  jump-end    [|](value_definition_syntax#single_bar)  
  jump-none   [|](value_definition_syntax#single_bar)  
  jump-both   [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end           
  
<linear-stop> =   
  [<number>](number)               [&&](value_definition_syntax#double_ampersand)  
  <linear-stop-length>[?](value_definition_syntax#question_mark)    
  
<linear-stop-length> =   
  [<percentage>](percentage)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Comparing the easing functions



This example provides an easy comparison between the different easing functions using an animation. From the drop-down menu, you can select an easing function – there are a couple of keywords and some `cubic-bezier()` and `steps()` options. After selecting an option, you can start and stop the animation using the provided button.

 #### HTML

 
```
<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Start animation</button>
  </li>
  <li>
    <label for="easing-select">Choose an easing function:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

```
 #### CSS

 
```
body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgba(25, 255, 255, 0.8),
    rgba(25, 255, 255, 0.4)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

```
 #### JavaScript

 
```
const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Start animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Stop animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Start animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

```
 #### Result



### Using the cubic-bezier() function



These cubic Bézier curves are valid for use in CSS:

 
```
/\* The canonical Bézier curve with four <number> in the [0,1] range. \*/
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/\* Using <integer> is valid because any <integer> is also a <number>. \*/
cubic-bezier(0, 0, 1, 1)

/\* Negative values for ordinates are valid, leading to bouncing effects.\*/
cubic-bezier(0.1, -0.6, 0.2, 0)

/\* Values greater than 1.0 for ordinates are also valid. \*/
cubic-bezier(0, 1.1, 0.8, 4)

```
 These cubic Bézier curves definitions are invalid:

 
```
/\* Though the animated output type may be a color,
 Bézier curves work with numerical ratios.\*/
cubic-bezier(0.1, red, 1.0, green)

/\* Abscissas must be in the [0, 1] range or
 the curve is not a function of time. \*/
cubic-bezier(2.45, 0.6, 4, 0.1)

/\* The two points must be defined, there is no default value. \*/
cubic-bezier(0.3, 2.1)

/\* Abscissas must be in the [0, 1] range or
 the curve is not a function of time. \*/
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

```

### Using the steps() function



These easing functions are valid:

 
```
/\* There are 5 treads, the last one happens
 right before the end of the animation. \*/
steps(5, end)

/\* A two-step staircase, the first one happening
 at the start of the animation. \*/
steps(2, start)

/\* The second parameter is optional. \*/
steps(2)

```
  **Note:** If the animation contains multiple stops, then the steps specified in the `steps()` function will apply to each section. Therefore, an animation with three segments and `steps(2)` will contain 6 steps in total, 2 per segment.

  These easing functions are invalid:

 
```
/\* The first parameter must be an <integer> and
 cannot be a real value, even if it is equal to one. \*/
steps(2.0, jump-end)

/\* The amount of steps must be non-negative. \*/
steps(-3, start)

/\* There must be at least one step.\*/
steps(0, jump-none)

```

Specifications
--------------




| Specification |
| --- |
| [CSS Easing Functions Level 1 # easing-functions](https://w3c.github.io/csswg-drafts/css-easing/#easing-functions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `easing-function` | 4 | 12 | 4 | 10 | 10.5 | 3.1 | 4 | 18 | 4 | 11 | 2 | 1.0 |
| `cubic-bezier` | 16 | 12 | 4 | 10 | 12.1 | 6 | 4.4 | 18 | 4 | 14 | 6 | 1.0 |
| `linear-function` | 113 | 113 | 112104–112 | No | No | No | 113 | 113 | 112 | No | No | No |
| `steps` | 8 | 12 | 4 | 10 | 12.1 | 5.1 | 4 | 18 | 4 | 14 | 5 | 1.0 |


See also
--------


* [CSS Animations](css_animations)
* [CSS Transitions](css_transitions)
* [cubic-bezier](https://cubic-bezier.com/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function>

::cue-region
============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `::cue-region` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) matches [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) cues within a selected element. This can be used to [style captions and other cues](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#styling_webvtt_cues) in media with VTT tracks.

 
```
::cue-region {
  color: yellow;
  font-weight: bold;
}

```
 The properties are applied to the entire set of cues as if they were a single unit. The only exception is that `background` and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.



Syntax
------



```
::cue-region | ::cue-region(<selector>) {
  /\* ... \*/
}

```
Permitted properties
--------------------



Rules whose selectors include this element may only use the following CSS properties:

 * [`background`](background)
* [`background-attachment`](background-attachment)
* [`background-clip`](background-clip)
* [`background-color`](background-color)
* [`background-image`](background-image)
* [`background-origin`](background-origin)
* [`background-position`](background-position)
* [`background-repeat`](background-repeat)
* [`background-size`](background-size)
* [`color`](color)
* [`font`](font)
* [`font-family`](font-family)
* [`font-size`](font-size)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-variant`](font-variant)
* [`font-weight`](font-weight)
* [`line-height`](line-height)
* [`opacity`](opacity)
* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)
* [`ruby-position`](ruby-position)
* [`text-combine-upright`](text-combine-upright)
* [`text-decoration`](text-decoration)
* [`text-decoration-color`](text-decoration-color)
* [`text-decoration-line`](text-decoration-line)
* [`text-decoration-style`](text-decoration-style)
* [`text-decoration-thickness`](text-decoration-thickness)
* [`text-shadow`](text-shadow)
* [`visibility`](visibility)
* [`white-space`](white-space)


Specifications
--------------



**No specification found**No specification data found for `css.selectors.cue-region`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------


See also
--------


* Other [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API) selectors:
	+ [`::cue`](::cue)
	+ [`:past`](:past)
	+ [`:future`](:future)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::cue-region>

<custom-ident>
==============


The `<custom-ident>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) denotes an arbitrary user-defined string used as an [identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier). It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.


Syntax
------



The syntax of `<custom-ident>` is similar to CSS identifiers (such as property names), except that it is [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). It consists of one or more characters, where characters can be any of the following:

 * any alphabetical character (`A` to `Z`, or `a` to `z`),
* any decimal digit (`0` to `9`),
* a hyphen (`-`),
* an underscore (`_`),
* an escaped character (preceded by a backslash, `\`),
* a [Unicode](https://en.wikipedia.org/wiki/Unicode) character (in the format of a backslash, `\`, followed by one to six hexadecimal digits, representing its Unicode code point)

 Note that `id1`, `Id1`, `iD1` and `ID1` are all different identifiers as they are [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). On the other hand, as there are several ways to escape a character, `toto\?` and `toto\3F` are the same identifiers.


### Forbidden values



A `<custom-ident>` must not be placed between single or double quotes as this would be identical to a [`<string>`](string). Moreover, the first character must not be a decimal digit, nor a hyphen (`-`) followed by a decimal digit or another hyphen.

 To prevent ambiguity, each property that uses `<custom-ident>` forbids the use of specific values:

  [`animation-name`](animation-name)  Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as `none`.

  
[`counter-reset`](counter-reset), [`counter-increment`](counter-increment)
  Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as `none`.

  
[`@counter-style`](@counter-style), [`list-style-type`](list-style-type)
  Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as the values:

 * `none`
* `inline`
* `outside`

 Also, quite a few predefined values are implemented by the different browsers:

 * `disc`
* `circle`
* `square`
* `decimal`
* `cjk-decimal`
* `decimal-leading-zero`
* `lower-roman`
* `upper-roman`
* `lower-greek`
* `lower-alpha`
* `lower-latin`
* `upper-alpha`
* `upper-latin`
* `arabic-indic`
* `armenian`
* `bengali`
* `cambodian`
* `cjk-earthly-branch`
* `cjk-heavenly-stem`
* `cjk-ideographic`
* `devanagari`
* `ethiopic-numeric`
* `georgian`
* `gujarati`
* `gurmukhi`
* `hebrew`
* `hiragana`
* `hiragana-iroha`
* `japanese-formal`
* `japanese-informal`
* `kannada`
* `katakana`
* `katakana-iroha`
* `khmer`
* `korean-hangul-formal`
* `korean-hanja-formal`
* `korean-hanja-informal`
* `lao`
* `lower-armenian`
* `malayalam`
* `mongolian`
* `myanmar`
* `oriya`
* `persian`
* `simp-chinese-formal`
* `simp-chinese-informal`
* `tamil`
* `telugu`
* `thai`
* `tibetan`
* `trad-chinese-formal`
* `trad-chinese-informal`
* `upper-armenian`
* `disclosure-open`
* `disclosure-close`

  
[`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end)
  Forbids the `span` value.

  [`view-transition-name`](view-transition-name)  Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as `none`.

  [`will-change`](will-change)  Forbids the global CSS values (`unset`, `initial`, and `inherit`), as well as the values `will-change`, `auto`, `scroll-position`, and `contents`.

  
Examples
--------


### Valid identifiers



```
nono79            A mix of alphanumeric characters and numbers
ground-level      A mix of alphanumeric characters and a dash
-test             A dash followed by alphanumeric characters
_internal         An underscore followed by alphanumeric characters
\22 toto          A Unicode character followed by a sequence of alphanumeric characters
bili\.bob         A correctly escaped period

```
### Invalid identifiers



```
34rem             It must not start with a decimal digit.
-12rad            It must not start with a dash followed by a decimal digit.
bili.bob          Only alphanumeric characters, _, and - needn't be escaped.
--toto            It must not start with two dashes. This would be a custom property.
'bilibob'         This would be a <string>.
"bilibob"         This would be a <string>.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # custom-idents](https://drafts.csswg.org/css-values/#custom-idents) |
| [CSS Will Change Module Level 1 # valdef-will-change-custom-ident](https://drafts.csswg.org/css-will-change/#valdef-will-change-custom-ident) |
| [CSS Counter Styles Level 3 # typedef-counter-style-name](https://drafts.csswg.org/css-counter-styles/#typedef-counter-style-name) |
| [CSS Lists and Counters Module Level 3 # counter-properties](https://drafts.csswg.org/css-lists/#counter-properties) |


Browser compatibility
---------------------

See also
--------


* [<ident>](ident)
* [<dashed-ident>](dashed-ident)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident>

cross-fade()
============


 The `cross-fade()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) can be used to blend two or more images at a defined transparency. It can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient. 


Syntax
------


  **Warning:** The specification and current implementations have different syntaxes. The specification syntax is explained first. 

 ### Specification syntax



The `cross-fade()` function takes a list of images with a percentage defining how much of each image is retained in terms of opacity when it is blended with the other images. The percent value must be coded without quotes, must contain the `'%'` symbol, and its value must be between 0% and 100%.

 The function can be used in CSS anywhere an ordinary image reference can be used.

 #### Cross-fade percentages

 Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

 
```
cross-fade(url(white.png) 0%, url(black.png) 100%); /\* fully black \*/
cross-fade(url(white.png) 25%, url(black.png) 75%); /\* 25% white, 75% black \*/
cross-fade(url(white.png) 50%, url(black.png) 50%); /\* 50% white, 50% black \*/
cross-fade(url(white.png) 75%, url(black.png) 25%); /\* 75% white, 25% black \*/
cross-fade(url(white.png) 100%, url(black.png) 0%); /\* fully white \*/
cross-fade(url(green.png) 75%, url(red.png) 75%); /\* both green and red at 75% \*/

```
  If any percentages are omitted, all the specified percentages are summed together and subtracted from `100%`. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages. 

  In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%. 

 The above could also have been written as:

 
```
cross-fade(url(white.png) 0%,   url(black.png)); /\* fully black \*/
cross-fade(url(white.png) 25%,  url(black.png)); /\* 25% white, 75% black \*/
cross-fade(url(white.png),      url(black.png)); /\* 50% white, 50% black \*/
cross-fade(url(white.png) 75%,  url(black.png)); /\* 75% white, 25% black \*/
cross-fade(url(white.png) 100%, url(black.png)); /\* fully white \*/
cross-fade(url(green.png) 75%, url(red.png) 75%); /\* both green and red at 75% \*/

```
  If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages. 

 In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

 If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

 
```
cross-fade(url(red.png), url(yellow.png), url(blue.png)); /\* all three will be 33.3333% opaque \*/
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

```

### Older, implemented syntax




```
cross-fade( <image>, <image>, <percentage> )

```
  The specification for the `cross-fade()` function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the `-webkit-` prefix in Chrome, Opera, and other blink-based browsers. 

 
```
cross-fade(url(white.png), url(black.png), 0%);   /\* fully black \*/
cross-fade(url(white.png), url(black.png), 25%);  /\* 25% white, 75% black \*/
cross-fade(url(white.png), url(black.png), 50%);  /\* 50% white, 50% black \*/
cross-fade(url(white.png), url(black.png), 75%);  /\* 75% white, 25% black \*/
cross-fade(url(white.png), url(black.png), 100%); /\* fully white \*/

```
  In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image. 

 The green/red example (with the percentages totaling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.


Accessibility concerns
----------------------



 Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. When using background images, make sure the contrast in color is great enough that any text is legible over the image as well as if the images are missing. 

 * [MDN Understanding WCAG, Guideline 1.1 explanations](#)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Formal syntax
-------------



```
<cross-fade()> =   
  cross-fade( <cf-image>[#](value_definition_syntax#hash_mark) )    
  
<cf-image> =   
  [<percentage [0,100]>](percentage)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  [[](value_definition_syntax#brackets) <image> [|](value_definition_syntax#single_bar) [<color>](color_value) []](value_definition_syntax#brackets)    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Older syntax for cross-fade



#### HTML

 
```
<div class="crossfade"></div>

```
 #### CSS

 
```
.crossfade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # cross-fade-function](https://w3c.github.io/csswg-drafts/css-images-4/#cross-fade-function) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `cross-fade` | 17["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 79["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | NoSee [bug 1657516](https://bugzil.la/1657516). | No | 15["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 10Supports the original dual-image with percentage implementation only.5.1Supports the original dual-image with percentage implementation only. | 4.4["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 18["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | NoSee [bug 1657516](https://bugzil.la/1657516). | 14["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 9.3Support for the original dual-image with percentage implementation only.5Supports the original dual-image with percentage implementation only. | 1.0["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] |


See also
--------


* [`<image>`](image)
* [`url()`](url)
* [`image()`](image/image)
* [`image-set()`](image/image-set)
* [`element()`](element())
* [Using CSS gradients](css_images/using_css_gradients)
* Gradient functions: [`linear-gradient()`](gradient/linear-gradient), [`radial-gradient()`](gradient/radial-gradient), [`repeating-linear-gradient()`](gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](gradient/repeating-radial-gradient), [`conic-gradient()`](gradient/conic-gradient), [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade>

cursor
======



The `cursor` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

  The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify either the *type* of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback). 



Try it
------


Syntax
------




```
/\* Keyword value \*/
cursor: auto;
cursor: pointer;
/\* … \*/
cursor: zoom-out;

/\* URL with mandatory keyword fallback \*/
cursor: url(hand.cur), pointer;

/\* URL and coordinates, with mandatory keyword fallback \*/
cursor: url(cursor\_1.png) 4 12, auto;
cursor: url(cursor\_2.png) 2 2, pointer;

/\* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback \*/
cursor: url(cursor\_1.svg) 4 5, url(cursor\_2.svg), /\* … ,\*/ url(cursor\_n.cur) 5 5,
  progress;

/\* Global values \*/
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

```
  The `cursor` property is specified as zero or more `<url>` values, separated by commas, followed by a single mandatory keyword value. Each `<url>` should point to an image file. The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified). 

 Each `<url>` may be optionally followed by a pair of space-separated numbers, which set the `<x>` and `<y>` coordinates of the cursor's hotspot relative to the top-left corner of the image.


### Values


 
`<url>` Optional
   A `url()` or a comma separated list `url(), url(), …`, pointing to an image file. More than one [`url()`](url) may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) *must* be at the end of the fallback list. 

  
`<x>`, `<y>` Optional
  Optional x- and y-coordinates indicating the cursor hotspot; the precise position within the cursor that is being pointed to.

  The numbers are in units of image pixels. They are relative to the top left corner of the image, which corresponds to "`0 0`", and are clamped within the boundaries of the cursor image. If these values are not specified, they may be read from the file itself, and will otherwise default to the top-left corner of the image. 

  `keyword`  A keyword value *must* be specified, indicating either the type of cursor to use, or the fallback cursor to use if all specified icons fail to load.

 The available keywords are listed in the table below. Other than `none`, which means no cursor, there is an image showing how the cursors used to be rendered. You can hover your mouse over the table rows to see the effect of the different cursor keyword values on your browser today.

 

| Category | Keyword | Example | Description |
| --- | --- | --- | --- |
| General | `auto` |  | The UA will determine the cursor to display based on the current context. E.g., equivalent to `text` when hovering text. |
| `default` | wide arrow pointing up and to the left | The platform-dependent default cursor. Typically an arrow. |
| `none` |  | No cursor is rendered. |
| Links & status | `context-menu` | wide arrow pointing up and to the left slightly obscuring a menu icon | A context menu is available. |
| `help` | wide arrow pointing up and to the left next to a question mark | Help information is available. |
| `pointer` | right hand with an index finger pointing up | The cursor is a pointer that indicates a link. Typically an image of a pointing hand. |
| `progress` | wide arrow and hour glass |  The program is busy in the background, but the user can still interact with the interface (in contrast to `wait`).  |
| `wait` | hour glass |  The program is busy, and the user can't interact with the interface (in contrast to `progress`). Sometimes an image of an hourglass or a watch.  |
| Selection | `cell` | wide plus symbol | The table cell or set of cells can be selected. |
| `crosshair` | plus symbol composed of two thing lines. | Cross cursor, often used to indicate selection in a bitmap. |
| `text` | vertical i-beam | The text can be selected. Typically the shape of an I-beam. |
| `vertical-text` | horizontal i-beam | The vertical text can be selected. Typically the shape of a sideways I-beam. |
| Drag & drop | `alias` | wide arrow pointing up and to the left partially obscuring a smaller folder icon with a curved arrow pointing up and to the right | An alias or shortcut is to be created. |
| `copy` | wide arrow pointing up and to the left partially obscuring a smaller folder icon with a plus sign | Something is to be copied. |
| `move` | plus sign made of two thin lines. The four points are small arrows facing out | Something is to be moved. |
| `no-drop` | pointer icon and a not allowed icon |  An item may not be dropped at the current location.[Firefox bug 275173](https://bugzil.la/275173): On Windows and macOS, `no-drop` is the same as `not-allowed`.  |
| `not-allowed` | Not allowed icon, which is a circle with a line through it | The requested action will not be carried out. |
| `grab` | fully opened hand icon | Something can be grabbed (dragged to be moved). |
| `grabbing` | closed hand icon, of the back of the hand | Something is being grabbed (dragged to be moved). |
| Resizing & scrolling | `all-scroll` | icon of a medium size dot with four triangles around it. |  Something can be scrolled in any direction (panned).[Firefox bug 275174](https://bugzil.la/275174): On Windows, `all-scroll` is the same as `move`.  |
| `col-resize` | col-resize.gif |  The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.  |
| `row-resize` | two narrow parallel horizontal lines with a small arrow pointing up and another pointing down |  The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.  |
| `n-resize` | thin long arrow pointing towards the top |  Some edge is to be moved. For example, the `se-resize` cursor is used when the movement starts from the *south-east* corner of the box.In some environments, an equivalent bidirectional resize cursor is shown. For example, `n-resize` and `s-resize` are the same as `ns-resize`.  |
| `e-resize` | thin long arrow pointing towards the right |
| `s-resize` | thin long arrow pointing down |
| `w-resize` | thin long arrow pointing towards the left |
| `ne-resize` | thin long arrow pointing top-right |
| `nw-resize` | thin long arrow pointing top-left |
| `se-resize` | thin long arrow pointing bottom-right |
| `sw-resize` | thin long arrow pointing bottom-left |
| `ew-resize` | thin long arrow pointing left and right | Bidirectional resize cursor. |
| `ns-resize` | thin long arrow pointing up and down |
| `nesw-resize` | thin long arrow pointing both to the top-right and bottom-left |
| `nwse-resize` | thin long arrow pointing both to the top-left and bottom-right |
| Zooming | `zoom-in` | magnifying glass with a plus sign | Something can be zoomed (magnified) in or out. |
| `zoom-out` | magnifying glass with a minus sign |

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified, but with [`url()`](url) values made absolute |
| Animation type | discrete |

Formal syntax
-------------



```
cursor =   
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) <url> [|](value_definition_syntax#single_bar) [<url-set>](url-set) []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<x>](x) [<y>](y) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) auto [|](value_definition_syntax#single_bar) default [|](value_definition_syntax#single_bar) none [|](value_definition_syntax#single_bar) context-menu [|](value_definition_syntax#single_bar) help [|](value_definition_syntax#single_bar) pointer [|](value_definition_syntax#single_bar) progress [|](value_definition_syntax#single_bar) wait [|](value_definition_syntax#single_bar) cell [|](value_definition_syntax#single_bar) crosshair [|](value_definition_syntax#single_bar) text [|](value_definition_syntax#single_bar) vertical-text [|](value_definition_syntax#single_bar) alias [|](value_definition_syntax#single_bar) copy [|](value_definition_syntax#single_bar) move [|](value_definition_syntax#single_bar) no-drop [|](value_definition_syntax#single_bar) not-allowed [|](value_definition_syntax#single_bar) grab [|](value_definition_syntax#single_bar) grabbing [|](value_definition_syntax#single_bar) e-resize [|](value_definition_syntax#single_bar) n-resize [|](value_definition_syntax#single_bar) ne-resize [|](value_definition_syntax#single_bar) nw-resize [|](value_definition_syntax#single_bar) s-resize [|](value_definition_syntax#single_bar) se-resize [|](value_definition_syntax#single_bar) sw-resize [|](value_definition_syntax#single_bar) w-resize [|](value_definition_syntax#single_bar) ew-resize [|](value_definition_syntax#single_bar) ns-resize [|](value_definition_syntax#single_bar) nesw-resize [|](value_definition_syntax#single_bar) nwse-resize [|](value_definition_syntax#single_bar) col-resize [|](value_definition_syntax#single_bar) row-resize [|](value_definition_syntax#single_bar) all-scroll [|](value_definition_syntax#single_bar) zoom-in [|](value_definition_syntax#single_bar) zoom-out []](value_definition_syntax#brackets)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Usage notes
-----------


### Icon size limits


 While the specification does not limit the `cursor` image size, [user agents](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels. Cursor changes using images that are larger than the user-agent maximum supported size will generally just be ignored. 

### Supported image file formats



 User agents are required by the specification to support PNG files, SVG v1.1 files in secure static mode that contain a natural size, and any other non-animated image file formats that they support for images in other properties. Desktop browsers also broadly support the `.cur` file format. 

  The specification further indicates that user agents *should* also support SVG v1.1 files in secure animated mode that contain a natural size, along with any other animated images file formats they support for images in other properties. User agents *may* support both static and animated SVG images that do not contain a natural size. 


### Other notes


Cursor changes that intersect toolbar areas are commonly blocked to avoid spoofing.

Examples
--------


### Setting cursor types



```
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/\* A fallback keyword value is required when using a URL \*/
.baz {
  cursor: url("hyper.cur"), auto;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # cursor](https://w3c.github.io/csswg-drafts/css-ui/#cursor) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `cursor` | 1 | 12 | 1Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites. | 4In Internet Explorer 11, when `cursor` is applied to an element and this element is underneath an open [`<select>`](https://developer.mozilla.org/docs/Web/HTML/Element/select) menu and the user hovers over a [`<select>`](https://developer.mozilla.org/docs/Web/HTML/Element/select) menu item that's on top of said element, the cursor for said element will be displayed rather than the [`<select>`](https://developer.mozilla.org/docs/Web/HTML/Element/select)'s normal cursor. See [bug 817822](https://developer.microsoft.com/microsoft-edge/platform/issues/817822/). | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `alias` | 1 | 12 | 1.5 | 10 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `all-scroll` | 1 | 12 | 1.5 | 6 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `auto` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `bidirectional_resize` | 1 | 12 | 1.5 | 10 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `cell` | 1 | 12 | 1.5 | 10 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `col-resize` | 1 | 12 | 1.5 | 6 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `context-menu` | 1This cursor is only supported on macOS and Linux. | 12 | 1.5This cursor is only supported on macOS and Linux. | 10 | 10.6 | 3 | No | 18This cursor is only supported on macOS and Linux. | 95 | 14This cursor is only supported on macOS and Linux. | 1 | 1.0This cursor is only supported on macOS and Linux. |
| `copy` | 1 | 12 | 1.5 | 10 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `crosshair` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `default` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `grab` | 68Chrome also continues to support the prefixed versions.1Chrome 22 added Windows support. | 14 | 271.5 | No | 55Opera also continues to support the prefixed versions.15Opera 22 added Windows support. | 114 | No | 68Chrome also continues to support the prefixed versions.18Chrome 22 added Windows support. | 95 | 48Opera also continues to support the prefixed versions.14Opera 22 added Windows support. | 1 | 10.01.0 |
| `help` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `inherit` | 1 | 12 | 1 | 8 | 9 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `move` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `no-drop` | 1 | 12 | 1.5 | 6 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `none` | 5 | 12 | 3 | 9 | 15 | 5 | No | 18 | 95 | 14 | 4.2 | 1.0 |
| `not-allowed` | 1 | 12 | 1.5 | 6 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `pointer` | 1 | 12 | 1 | 6 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `progress` | 1 | 12 | 1 | 6 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `row-resize` | 1 | 12 | 1.5 | 6 | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `text` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `unidirectional_resize` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `url` | 1 | 12 | 1.5Firefox 4 added macOS support. | 6 | 15 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `url_positioning_syntax` | 1 | 79 | 1.5Firefox 4 added macOS support. | No | 15 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `vertical-text` | 1 | 12 | 1.5 | No | 10.6 | 3 | No | 18 | 95 | 14 | 1 | 1.0 |
| `wait` | 1 | 12 | 1 | 4 | 7 | 1.2 | No | 18 | 95 | 14 | 1 | 1.0 |
| `zoom` | 371 | 12 | 241 | No | 2415–23 | 93 | No | 3718 | 95 | 2414–24 | 1 | 3.01.0 |


See also
--------


* [`pointer-events`](pointer-events)
* [`url()`](url) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/cursor>

<length>
========



The `<length>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a distance value. Lengths can be used in numerous CSS properties, such as [`width`](width), [`height`](height), [`margin`](margin), [`padding`](padding), [`border-width`](border-width), [`font-size`](font-size), and [`text-shadow`](text-shadow).

  **Note:** Although [`<percentage>`](percentage) values are usable in some of the same properties that accept `<length>` values, they are not themselves `<length>` values. See [`<length-percentage>`](length-percentage).

 

Syntax
------



The `<length>` data type consists of a [`<number>`](number) followed by one of the units listed below. As with all CSS dimensions, there is no space between the number and the unit literal. Specifying the length unit is optional if the number is `0`.

  **Note:** Some properties allow negative `<length>` values, while others do not.

  The [specified value](specified_value) of a length (*specified length*) is represented by its quantity and unit. The [computed value](computed_value) of a length (*computed length*) is the specified length resolved to an absolute length, and its unit is not distinguished.

 The `<length>` units can be relative or absolute. Relative lengths represent a measurement in terms of some other distance. Depending on the unit, this distance can be the size of a specific character, the [line height](line-height), or the size of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport). Style sheets that use relative length units can more easily scale from one output environment to another.

  **Note:** Child elements do not inherit the relative values as specified for their parent; they inherit the computed values.

  The relative length units listed here are based on font and viewport.


### Relative length units based on font



Font lengths define the `<length>` value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent.

  **Note:** These units, especially `em` and `rem`, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size.

   
`cap`  Experimental 
  Represents the "cap height" (nominal height of capital letters) of the element's [`font`](font).

  `ch`   Represents the width or more precisely the [advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure) of the glyph `0` (zero, the Unicode character U+0030) in the element's [`font`](font). In cases where it is impossible or impractical to determine the measure of the `0` glyph, it must be assumed to be `0.5em` wide by `1em` tall. 

  `em`  Represents the calculated [`font-size`](font-size) of the element. If used on the [`font-size`](font-size) property itself, it represents the *inherited* font-size of the element.

  `ex`  Represents the [x-height](https://en.wikipedia.org/wiki/X-height) of the element's [`font`](font). In fonts with the `x` letter, this is generally the height of lowercase letters in the font; `1ex ≈ 0.5em` in many fonts.

  `ic`  Equal to the used [advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure) of the "水" glyph (CJK water ideograph, U+6C34), found in the font used to render it.

  `lh`  Equal to the computed value of the [`line-height`](line-height) property of the element on which it is used, converted to an absolute length.

  `rem`  Represents the [`font-size`](font-size) of the root element (typically [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)). When used within the root element [`font-size`](font-size), it represents its initial value (a common browser default is `16px`, but user-defined preferences may modify this).

  `rlh`  Equal to the computed value of the [`line-height`](line-height) property on the root element (typically [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)), converted to an absolute length. When used on the [`font-size`](font-size) or [`line-height`](line-height) properties of the root element, it refers to the properties' initial value.

  
### Relative length units based on viewport



The viewport-percentage length units are based on four different viewport sizes: small, large, dynamic, and default. The allowance for the different viewport sizes is in response to browser interfaces expanding and retracting dynamically and hiding and showing the content underneath.

  **Small**  When you want the smallest possible viewport in response to browser interfaces expanding dynamically, you should use the small viewport size. The small viewport size allows the content you design to fill the entire viewport when browser interfaces are expanded. Choosing this size might also possibly leave empty spaces when browser interfaces retract.

 For example, an element that is sized using viewport-percentage units based on the small viewport size, the element will fill the screen perfectly without any of its content being obscured when all the dynamic browser interfaces are shown. When those browser interfaces are hidden, however, there might be extra space visible around the element. Therefore, the small viewport-percentage units are "safer" to use in general, but might not produce the most attractive layout after a user starts interacting with the page.

 The small viewport size is represented by the `sv` prefix and results in the `sv*` viewport-percentage length units. The sizes of the small viewport-percentage units are fixed, and therefore stable, unless the viewport itself is resized.

  **Large**  When you want the largest possible viewport in response to browser interfaces retracting dynamically, you should use the large viewport size. The large viewport size allows the content you design to fill the entire viewport when browser interfaces are retracting. You need to be aware though that the content might get hidden when browser interfaces expand.

 For example, on mobile phones where the screen real-estate is at a premium, browsers often hide part or all of the title and address bar after a user starts scrolling the page. When an element is sized using a viewport-percentage unit based on the large viewport size, the content of the element will fill the entire visible page when these browser interfaces are hidden. However, when these retractable browser interfaces are shown, they can hide the content that is sized or positioned using the *large* viewport-percentage units.

 The large viewport unit is represented by the `lv` prefix and results in the `lv*` viewport-percentage units. The sizes of the large viewport-percentage units are fixed, and therefore stable, unless the viewport itself is resized.

  **Dynamic**  When you want the viewport to be automatically sized in response to browser interfaces dynamically expanding or retracting, you can use the dynamic viewport size. The dynamic viewport size allows the content you design to fit exactly within the viewport, irrespective of the presence of dynamic browser interfaces.

 The dynamic viewport unit is represented by the `dv` prefix and results in the `dv*` viewport-percentage units. The sizes of the dynamic viewport-percentage units are not stable, even when the viewport itself is unchanged.

  **Note:** While the dynamic viewport size can give you more control and flexibility, using viewport-percentage units based on the dynamic viewport size can cause the content to resize while a user is scrolling a page. This can lead to degradation of the user interface and cause a performance hit.

   **Default**  The default viewport size is defined by the browser. The behavior of the resulting viewport-percentage unit could be equivalent to the viewport-percentage unit based on the small viewport size, the large viewport size, an intermediate size between the two, or the dynamic viewport size.

  **Note:** For example, a browser might implement the default viewport-percentage unit for height (`vh`) that is equivalent to the large viewport-percentage height unit (`lvh`). If so, this could obscure content on a full-page display while the browser interface is expanded.

    Viewport-percentage lengths define `<length>` values in percentage relative to the size of the initial [containing block](containing_block), which in turn is based on either the size of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) or the page area, i.e., the visible portion of the document. When the height or width of the initial containing block is changed, the elements that are sized based on them are scaled accordingly. There is a viewport-percentage length unit variant corresponding to each of the viewport sizes, as described below.

  **Note:** Viewport lengths are invalid in [`@page`](@page) declaration blocks.

   `vh`  Represents a percentage of the height of the viewport's initial [containing block](containing_block). `1vh` is 1% of the viewport height. For example, if the viewport height is `300px`, then a value of `70vh` on a property will be `210px`.

 For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svh`, `lvh`, and `dvh`. `vh` represents the viewport-percentage length unit based on the browser default viewport size.

  `vw`  Represents a percentage of the width of the viewport's initial [containing block](containing_block). `1vw` is 1% of the viewport width. For example, if the viewport width is `800px`, then a value of `50vw` on a property will be `400px`.

  For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svw`, `lvw`, and `dvw`. `vw` represents the viewport-percentage length unit based on the browser default viewport size. 

  `vmax`  Represents in percentage the largest of `vw` and `vh`.

  For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svmax`, `lvmax`, and `dvmax`. `vmax` represents the viewport-percentage length unit based on the browser default viewport size. 

  `vmin`  Represents in percentage the smallest of `vw` and `vh`.

  For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svmin`, `lvmin`, and `dvmin`. `vmin` represents the viewport-percentage length unit based on the browser default viewport size. 

  `vb`  Represents percentage of the size of the initial [containing block](containing_block), in the direction of the root element's [block axis](css_logical_properties#block_vs._inline).

  For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svb`, `lvb`, and `dvb`, respectively. `vb` represents the viewport-percentage length unit based on the browser default viewport size. 

  `vi`  Represents a percentage of the size of the initial [containing block](containing_block), in the direction of the root element's [inline axis](css_logical_properties#block_vs._inline).

  For small, large, and dynamic viewport sizes, the respective viewport-percentage units are `svi`, `lvi`, and `dvi`. `vi` represents the viewport-percentage length unit based on the browser default viewport size. 

  
### Container query length units



 When applying styles to a container using container queries, you can use container query length units. These units specify a length relative to the dimensions of a query container. Components that use units of length relative to their container are more flexible to use in different containers without having to recalculate concrete length values. For more information, see [Container queries](css_container_queries). 

  `cqw`  Represents a percentage of the width of the query container. `1cqw` is 1% of the query container's width. For example, if the query container's width is `800px`, then a value of `50cqw` on a property will be `400px`.

  `cqh`  Represents a percentage of the height of the query container. `1cqh` is 1% of the query container's height. For example, if the query container's height is `300px`, then a value of `10cqh` on a property will be `30px`.

  `cqi`  Represents a percentage of the inline size of the query container. `1cqi` is 1% of the query container's inline size. For example, if the query container's inline size is `800px`, then a value of `50cqi` on a property will be `400px`.

  `cqb`  Represents a percentage of the block size of the query container. `1cqb` is 1% of the query container's block size. For example, if the query container's block size is `300px`, then a value of `10cqb` on a property will be `30px`.

  `cqmin`  Represents a percentage of the smaller value of either the query container's inline size or block size. `1cqmin` is 1% of the smaller value of either the query container's inline size or block size. For example, if the query container's inline size is `800px` and its block size is `300px`, then a value of `50cqmin` on a property will be `150px`.

  `cqmax`  Represents a percentage of the larger value of either the query container's inline size or block size. `1cqmax` is 1% of the larger value of either the query container's inline size or block size. For example, if the query container's inline size is `800px` and its block size is `300px`, then a value of `50cqmax` on a property will be `400px`.

   #### Absolute length units

 Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit and then defining the others relative to it. The anchoring is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers.

 For low-dpi devices, the unit `px` represents the physical *reference pixel*; other units are defined relative to it. Thus, `1in` is defined as `96px`, which equals `72pt`. The consequence of this definition is that on such devices, dimensions described in inches (`in`), centimeters (`cm`), or millimeters (`mm`) don't necessarily match the size of the physical unit with the same name.

 For high-dpi devices, inches (`in`), centimeters (`cm`), and millimeters (`mm`) are the same as their physical counterparts. Therefore, the `px` unit is defined relative to them (1/96 of `1in`).

  **Note:** Many users increase their [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)'s default font size to make text more legible. Absolute lengths can cause accessibility problems because they are fixed and do not scale according to user settings. For this reason, prefer relative lengths (such as `em` or `rem`) when setting `font-size`.

   `px`  One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for *printers* and *high-resolution screens*, one CSS pixel implies multiple device pixels. `1px` = 1/96th of `1in`.

  `cm`  One centimeter. `1cm` = `96px/2.54`.

  `mm`  One millimeter. `1mm` = 1/10th of `1cm`.

  `Q`  One quarter of a millimeter. `1Q` = 1/40th of `1cm`.

  `in`  One inch. `1in` = `2.54cm` = `96px`.

  `pc`  One pica. `1pc` = `12pt` = 1/6th of `1in`.

  `pt`  One point. `1pt` = 1/72nd of `1in`.

  
Interpolation
-------------


When animated, values of the `<length>` data type are interpolated as real, floating-point numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the [timing function](easing-function) associated with the animation.

Examples
--------


### Comparing different length units



The following example provides you with an input field in which you can enter a `<length>` value (e.g. `300px`, `50%`, `30vw`) to set the width of a result bar that will appear below it once you've pressed the `Enter` or the `Return` key.

 This allows you to compare and contrast the effect of different length units.

 #### HTML

 
```
<div class="outer">
  <div class="input-container">
    <label for="length">Enter width:</label>
    <input type="text" id="length" />
  </div>
  <div class="inner"></div>
</div>
<div class="results"></div>

```
 #### CSS

 
```
html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.5), inset -3px -3px 5px
      rgba(0, 0, 0, 0.5);
}

.result {
  height: 20px;
  box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.5), inset -3px -3px 5px
      rgba(0, 0, 0, 0.5);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

```
 #### JavaScript

 
```
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");

inputElem.addEventListener("change", () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement("div");
  result.className = "result";
  result.style.width = inputElem.value;
  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = "";
  inputElem.focus();
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # lengths](https://w3c.github.io/csswg-drafts/css-values/#lengths) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Q` | 63 | 79 | 49 | No | 50 | No | 63 | 63 | 49 | 46 | No | 8.0 |
| `length` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `cap` | No | No | 97 | No | No | No | No | No | 97 | No | No | No |
| `ch` | 27 | 12 | 1["From Firefox 1 to Firefox 3, `ch` was the width of the *M* character.", "From Firefox 1 to Firefox 3, `ch` did not work with [`border-width`](https://developer.mozilla.org/docs/Web/CSS/border-width) and [`outline-width`](https://developer.mozilla.org/docs/Web/CSS/outline-width) CSS properties."] | 9 | 15 | 7 | 4.4 | 27 | 4 | 15 | 7 | 1.5 |
| `container_query_length_units` | 105 | 105 | 110 | No | 91 | 16 | 105 | 105 | 110 | 72 | 16 | 20.0 |
| `ex` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `ic` | 106 | 106 | 97 | No | 92 | 15.4 | 106 | 106 | 97 | 72 | 15.4 | 20.0 |
| `lh` | 109 | 109 | NoSee [bug 1310170](https://bugzil.la/1310170). | No | 95 | 16.4 | 109 | 109 | NoSee [bug 1310170](https://bugzil.la/1310170). | 74 | 16.4 | No |
| `rem` | 4 | 12 | 3.6 | 9 | 11.6 | 5 | 2 | 18 | 4 | 12 | 4 | 1.0 |
| `rlh` | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 1310170](https://bugzil.la/1310170). | No | NoSee [bug 937104](https://crbug.com/937104). | 16.4 | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 1310170](https://bugzil.la/1310170). | NoSee [bug 937104](https://crbug.com/937104). | 16.4 | NoSee [bug 937104](https://crbug.com/937104). |
| `vb` | 108 | 108 | 101 | No | 94 | 15.4 | 108 | 108 | 101 | 73 | 15.4 | No |
| `vh` | 20 | 12 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 9 | 20 | 6 | 4.4 | 25 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 6 | 1.5 |
| `vi` | 108 | 108 | 101 | No | 94 | 15.4 | 108 | 108 | 101 | 73 | 15.4 | No |
| `viewport_percentage_units_dynamic` | 108 | 108 | 101 | No | 94 | 15.4 | 108 | 108 | 101 | 73 | 15.4 | No |
| `viewport_percentage_units_large` | 108 | 108 | 101 | No | 94 | 15.4 | 108 | 108 | 101 | 73 | 15.4 | No |
| `viewport_percentage_units_small` | 108 | 108 | 101 | No | 94 | 15.4 | 108 | 108 | 101 | 73 | 15.4 | No |
| `vmax` | 26 | 16 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | No | 15 | 7 | 1.5 | 26 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 7 | 1.5 |
| `vmin` | 26 | 1212 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 109 | 15 | 7 | 4.4 | 26 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 7 | 1.5 |
| `vw` | 20 | 12 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 9 | 20 | 6 | 4.4 | 25 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 6 | 1.5 |


See also
--------


* [CSS values & units tutorial](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
* [CSS values & units reference](css_values_and_units)
* [Box Model](css_box_model)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/length>

:defined
========



The `:defined` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the [`CustomElementRegistry.define()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) method).

 
```
/\* Selects any defined element \*/
:defined {
  font-style: italic;
}

/\* Selects any instance of a specific custom element \*/
simple-custom:defined {
  display: block;
}

```


Syntax
------



```
:defined {
  /\* ... \*/
}

```
Examples
--------


### Hiding elements until they are defined



The following snippets are taken from our [defined-pseudo-class](https://github.com/mdn/web-components-examples/tree/main/defined-pseudo-class) demo ([see it live also](https://mdn.github.io/web-components-examples/defined-pseudo-class/)).

 In this demo we define a very simple trivial custom element:

 
```
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  }
);

```
 Then insert a copy of this element into the document, along with a standard `<p>`:

 
```
<simple-custom text="Custom element example text"></simple-custom>

<p>Standard paragraph example text</p>

```
 In the CSS we first include the following rules:

 
```
/\* Give the two elements distinctive backgrounds \*/
p {
  background: yellow;
}

simple-custom {
  background: cyan;
}

/\* Both the custom and the built-in element are given italic text \*/
:defined {
  font-style: italic;
}

```
 Then provide the following two rules to hide any instances of our custom element that are not defined, and display instances that are defined as block level elements:

 
```
simple-custom:not(:defined) {
  display: none;
}

simple-custom:defined {
  display: block;
}

```
 This is useful if you have a complex custom element that takes a while to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-defined](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-defined) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:defined` | 54 | 79 | 63 | No | 41 | 10 | 54 | 54 | 63 | 41 | 10 | 6.0 |


See also
--------


* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:defined>

descent-override
================


The `descent-override` CSS descriptor defines the descent metric for the font. The descent metric is the height below the baseline that CSS uses to lay out line boxes in an inline formatting context.


Syntax
------



```
descent-override: normal;
descent-override: 90%;

```
### Values


 `normal`  The default value. When used the metric value is obtained from the font file.

  `<percentage>`  A [`<percentage>`](../percentage) value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| Percentages | as specified |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
descent-override =   
  [[](../value_definition_syntax#brackets) normal [|](../value_definition_syntax#single_bar) [<percentage [0,∞]>](../percentage) []](../value_definition_syntax#brackets)[{1,2}](../value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Overriding metrics of a fallback font



The `descent-override` property can help when overriding the metrics of a fallback font to better match those of a primary web font.

 
```
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  descent-override: 125%;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-metrics-override-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-metrics-override-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `descent-override` | 87 | 87 | 89 | No | 73 | No | 87 | 87 | 89 | 62 | No | 14.0 |


See also
--------


* [`ascent-override`](ascent-override)
* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-weight`](font-weight)
* [`font-style`](font-style)
* [`font-stretch`](font-stretch)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`line-gap-override`](line-gap-override)
* [`src`](src)
* [`size-adjust`](size-adjust)
* [`unicode-range descriptor`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override>

:dir()
======



The `:dir()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements based on the directionality of the text contained in them.

 
```
/\* Selects any element with right-to-left text \*/
:dir(rtl) {
  background-color: red;
}

```
 The `:dir()` pseudo-class uses only the *semantic* value of the directionality, i.e., the one defined in the document itself. It doesn't account for *styling* directionality, i.e., the directionality set by CSS properties such as [`direction`](direction).

  **Note:** Be aware that the behavior of the `:dir()` pseudo-class is not equivalent to the `[dir=…]` [attribute selectors](attribute_selectors). The latter match the HTML [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#dir) attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, `[dir=rtl]` and `[dir=ltr]` won't match the `auto` value.) In contrast, `:dir()` will match the value calculated by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent), even if inherited.

   **Note:** In HTML, the direction is determined by the [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#dir) attribute. Other document types may have different methods.

 

Syntax
------



The `:dir()` pseudo-class requires one parameter, representing the text directionality you want to target.

 
```
:dir([ltr | rtl]) {
  /\* ... \*/
}

```

### Parameters


 `ltr`  Target left-to-right elements.

  `rtl`  Target right-to-left elements.

  Examples
--------


### HTML



```
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

```
### CSS



```
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-ltr](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-ltr) |
| [Selectors Level 4 # the-dir-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-dir-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:dir` | No | No | 4917–53 | No | No | 16.4 | No | No | 4917–53 | No | 16.4 | No |


See also
--------


* Language-related pseudo-classes: [`:lang`](:lang), [`:dir`](:dir)
* HTML [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang) attribute
* HTML [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#translate) attribute


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:dir>

:default
========


The `:default` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selects form elements that are the default in a group of related elements.


Try it
------



 What this selector matches is defined in [HTML Standard §4.16.3 Pseudo-classes](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default) — it may match the [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), and [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) elements:

 * A default option element is the first one with the `selected` attribute, or the first enabled option in DOM order. `multiple` [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)s can have more than one `selected` option, so all will match `:default`.
* `<input type="checkbox">` and `<input type="radio">` match if they have the `checked` attribute.
* [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) matches if it is a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)'s [default submission button](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission): the first `<button>` in DOM order that belongs to the form. This also applies to [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) types that submit forms, like `image` or `submit`.


Syntax
------



```
:default {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring" value="spring" />
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" value="summer" checked />
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall" value="fall" />
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter" value="winter" />
  <label for="winter">Winter</label>
</fieldset>

```
### CSS



```
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-default](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default) |
| [Selectors Level 4 # default-pseudo](https://w3c.github.io/csswg-drafts/selectors/#default-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:default` | 10 | 79 | 4 | No | 10 | 5 | 37 | 18 | 4 | 10.1 | 5 | 1.0 |


See also
--------


* [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)
* [Styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms)
* Related HTML elements: [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio), and [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:default>

<dimension>
===========



The `<dimension>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a [`<number>`](number) with a unit attached to it, for example `10px`.

 CSS uses dimensions to specify distances ([`<length>`](length)), durations ([`<time>`](time)), frequencies ([`<frequency>`](frequency)), resolutions ([`<resolution>`](resolution)), and other quantities.



Syntax
------


The syntax of `<dimension>` is a [`<number>`](number) immediately followed by a unit which is an identifier. Unit identifiers are case insensitive.

Examples
--------


### Valid dimensions



```
12px      12 pixels
1rem      1 rem
1.2pt     1.2 points
2200ms    2200 milliseconds
5s        5 seconds
200hz     200 Hertz
200Hz     200 Hertz (values are case insensitive)

```
### Invalid dimensions



```
12 px       The unit must come immediately after the number.
12"px"      Units are identifiers and therefore unquoted.
3sec        The seconds unit is abbreviated "s" not "sec".

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # dimensions](https://w3c.github.io/csswg-drafts/css-values/#dimensions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `dimension` | 1 | 12 | 1 | 5 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [CSS data types](css_types)
* [Learn to style HTML using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)
* CSS distances ([`<length>`](length)), durations ([`<time>`](time)), frequencies ([`<frequency>`](frequency)), and resolutions ([`<resolution>`](resolution))


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/dimension>

direction
=========


The `direction` CSS property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).


Try it
------



 Note that text direction is usually defined within a document (e.g., with [HTML's `dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)) rather than through direct use of the `direction` property.

 The property sets the base text direction of block-level elements and the direction of embeddings created by the [`unicode-bidi`](unicode-bidi) property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

 Unlike the `dir` attribute in HTML, the `direction` property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

 The `direction` and [`unicode-bidi`](unicode-bidi) properties are the two only properties which are not affected by the [`all`](all) shorthand property.


Syntax
------



```
/\* Keyword values \*/
direction: ltr;
direction: rtl;

/\* Global values \*/
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;

```
### Values



 `ltr`  Text and other elements go from left to right. This is the default value.

  `rtl`  Text and other elements go from right to left.

   For the `direction` property to have any effect on inline-level elements, the [`unicode-bidi`](unicode-bidi) property's value must be `embed` or `override`.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `ltr` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
direction =   
  ltr  [|](value_definition_syntax#single_bar)  
  rtl    
  

```
Examples
--------


### Setting right-to-left direction



In the example below are two strings of text, both which are displaying using `direction: rtl`. While the Arabic text is displayed correctly with this setting, the English text now has a full stop in an unusual location.

 
```
blockquote {
  direction: rtl;
  width: 300px;
}

```
 
```
<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
  <p></p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
  <p></p>
</blockquote>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Writing Modes Level 4 # direction](https://w3c.github.io/csswg-drafts/css-writing-modes/#direction) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `direction` | 2 | 12 | 1 | 5.5 | 9.2 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`unicode-bidi`](unicode-bidi)
* [`writing-mode`](writing-mode)
* The HTML [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#dir) global attribute


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/direction>

:disabled
=========


The `:disabled` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.


Try it
------


Syntax
------



```
:disabled {
  /\* ... \*/
}

```
Examples
--------


This example shows a basic shipping form. It uses the [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) event to let the user enable/disable the billing fields.

### HTML



```
<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>

```
### CSS



```
input[type="text"]:disabled {
  background: #ccc;
}

```
### JavaScript



```
// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  () => {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false
);

function toggleBilling() {
  // Select the billing text fields
  const billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-disabled) |
| [Selectors Level 4 # enableddisabled](https://w3c.github.io/csswg-drafts/selectors/#enableddisabled) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:disabled` | 1 | 12Edge does not recognize `:disabled` on the [`<fieldset>`](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset) element. | 1 | 9Internet Explorer does not recognize `:disabled` on the [`<fieldset>`](https://developer.mozilla.org/docs/Web/HTML/Element/fieldset) element. | 9 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:enabled`](:enabled)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled>

display
=======



The `display` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline element](css_flow_layout) and the layout used for its children, such as [flow layout](css_flow_layout), [grid](css_grid_layout) or [flex](css_flexible_box_layout).

 Formally, the `display` property sets an element's inner and outer *display types*. The outer type sets an element's participation in [flow layout](css_flow_layout); the inner type sets the layout of children. Some values of `display` are fully defined in their own individual specifications; for example the detail of what happens when `display: flex` is declared is defined in the CSS Flexible Box Model specification.



Try it
------


Syntax
------



The CSS `display` property is specified using keyword values.

 
```
/\* precomposed values \*/
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/\* box generation \*/
display: none;
display: contents;

/\* multi-keyword syntax \*/
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/\* other values \*/
display: table;
display: table-row; /\* all table elements have an equivalent CSS display value \*/
display: list-item;

/\* Global values \*/
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

```

Grouped values
--------------


The keyword values can be grouped into six value categories.

### Outside



 [`<display-outside>`](display-outside)  These keywords specify the element's outer display type, which is essentially its role in flow layout:

  `block`  The element generates a block element box, generating line breaks both before and after the element when in the normal flow.

  `inline`  The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.

       **Note:** Browsers that support the multi-keyword syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example, if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. 

 
### Inside



 [`<display-inside>`](display-inside)  These keywords specify the element's inner display type, which defines the type of formatting context that its contents are laid out in (assuming it is a non-replaced element):

  
`flow`  Experimental 
  The element lays out its contents using flow layout (block-and-inline layout).

 If its outer display type is `inline` or `run-in`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

 Depending on the value of other properties (such as [`position`](position), [`float`](float), or [`overflow`](overflow)) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.

  `flow-root`  The element generates a block element box that establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.

  `table`  These elements behave like HTML [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) elements. It defines a block-level box.

  `flex`  The element behaves like a block element and lays out its content according to the [flexbox model](css_flexible_box_layout).

  `grid`  The element behaves like a block element and lays out its content according to the [grid model](css_grid_layout/basic_concepts_of_grid_layout).

  
`ruby`  Experimental 
  The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby) elements.

       **Note:** Browsers that support the multi-keyword syntax, on finding the inner value only, such as when `display: flex` or `display: grid` is specified, will set their outer value to `block`. This will result in expected behavior; for example, if you specify an element to be `display: grid`, you would expect that the box created on the grid container would be a block-level box. 

 
### List Item



 [`<display-listitem>`](display-listitem)  The element generates a block box for the content and a separate list-item inline box.

    A single value of `list-item` will cause the element to behave like a list item. This can be used together with [`list-style-type`](list-style-type) and [`list-style-position`](list-style-position). 

 `list-item` can also be combined with any [`<display-outside>`](display-outside) keyword and the `flow` or `flow-root` [`<display-inside>`](display-inside) keywords.

   **Note:** In browsers that support the multi-keyword syntax, if no inner value is specified, it will default to `flow`. If no outer value is specified, the principal box will have an outer display type of `block`. 

 
### Internal


 [`<display-internal>`](display-internal)   Some layout models such as `table` and `ruby` have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those "internal" display values, which only have meaning within that particular layout mode. 

  `table-row-group`  These elements behave like [`<tbody>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) HTML elements.

  `table-header-group`  These elements behave like [`<thead>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) HTML elements.

  `table-footer-group`  These elements behave like [`<tfoot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) HTML elements.

  `table-row`  These elements behave like [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) HTML elements.

  `table-cell`  These elements behave like [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) HTML elements.

  `table-column-group`  These elements behave like [`<colgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup) HTML elements.

  `table-column`  These elements behave like [`<col>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col) HTML elements.

  `table-caption`  These elements behave like [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) HTML elements.

  
`ruby-base`  Experimental 
  These elements behave like [`<rb>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb) HTML elements.

  
`ruby-text`  Experimental 
  These elements behave like [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt) HTML elements.

  
`ruby-base-container`  Experimental 
  These elements are generated as anonymous boxes.

  
`ruby-text-container`  Experimental 
  These elements behave like [`<rtc>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc) HTML elements.

    ### Box


 [`<display-box>`](display-box)  These values define whether an element generates display boxes at all.

  `contents`  These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the `contents` value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements. See [Appendix B: Effects of display: contents on Unusual Elements](https://w3c.github.io/csswg-drafts/css-display/#unbox) for more details.

  `none`   Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the [`visibility`](visibility) property instead. 

    ### Precomposed


 [`<display-legacy>`](display-legacy)  CSS 2 used a single-keyword, precomposed syntax for the `display` property, requiring separate keywords for block-level and inline-level variants of the same layout mode.

  `inline-block`  The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

 It is equivalent to `inline flow-root`.

  `inline-table`  The `inline-table` value does not have a direct mapping in HTML. It behaves like an HTML [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

 It is equivalent to `inline table`.

  `inline-flex`  The element behaves like an inline element and lays out its content according to the flexbox model.

 It is equivalent to `inline flex`.

  `inline-grid`  The element behaves like an inline element and lays out its content according to the grid model.

 It is equivalent to `inline grid`.

    ### Which syntax should you use now?



The Level 3 specification details two values for the `display` property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.

 The precomposed `<display-legacy>` methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:

 
```
.container {
  display: inline flex;
}

```
 This can currently be specified using a single value.

 
```
.container {
  display: inline-flex;
}

```
 For more information on these changes to the specification, see the article [Adapting to the new multi-keyword syntax of display](display/multi-keyword_syntax_of_display).


### Global



```
/\* Global values \*/
display: inherit;
display: initial;
display: unset;

```
Description
-----------



The individual pages for the different types of value that `display` can have set on it feature multiple examples of those values in action — see the [Syntax](#syntax) section. In addition, see the following material, which covers the various values of display in depth.

 * [Adapting to the new multi-keyword syntax of display](display/multi-keyword_syntax_of_display)


### CSS Flow Layout (display: block, display: inline)


* [Block and Inline Layout in Normal Flow](css_flow_layout/block_and_inline_layout_in_normal_flow)
* [Flow Layout and Overflow](css_flow_layout/flow_layout_and_overflow)
* [Flow Layout and Writing Modes](css_flow_layout/flow_layout_and_writing_modes)
* [Formatting Contexts Explained](css_flow_layout/intro_to_formatting_contexts)
* [In Flow and Out of Flow](css_flow_layout/in_flow_and_out_of_flow)
### display: flex


* [Basic concepts of flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)
* [Aligning Items in a Flex Container](css_flexible_box_layout/aligning_items_in_a_flex_container)
* [Controlling Ratios of Flex Items Along the Main Axis](css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax)
* [Mastering Wrapping of Flex Items](css_flexible_box_layout/mastering_wrapping_of_flex_items)
* [Ordering Flex Items](css_flexible_box_layout/ordering_flex_items)
* [Relationship of flexbox to other layout methods](css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods)
* [Typical use cases of Flexbox](css_flexible_box_layout/typical_use_cases_of_flexbox)
### display: grid


* [Basic Concepts of Grid Layout](css_grid_layout/basic_concepts_of_grid_layout)
* [Relationship to other layout methods](css_grid_layout/relationship_of_grid_layout)
* [Line-based placement](css_grid_layout/line-based_placement_with_css_grid)
* [Grid template areas](css_grid_layout/grid_template_areas)
* [Layout using named grid lines](css_grid_layout/layout_using_named_grid_lines)
* [Auto-placement in grid layout](css_grid_layout/auto-placement_in_css_grid_layout)
* [Box alignment in grid layout](css_grid_layout/box_alignment_in_css_grid_layout)
* [Grids, logical values and writing modes](css_grid_layout/css_grid_logical_values_and_writing_modes)
* [CSS Grid Layout and Accessibility](css_grid_layout/css_grid_layout_and_accessibility)
* [CSS Grid Layout and Progressive Enhancement](css_grid_layout/css_grid_and_progressive_enhancement)
* [Realizing common layouts using grids](css_grid_layout/realizing_common_layouts_using_css_grid_layout)
Accessibility concerns
----------------------


### display: none



Using a `display` value of `none` on an element will remove it from the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

 If you want to visually hide the element, a more accessible alternative is to use [a combination of properties](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) to remove it visually from the screen but keep it parsable by assistive technology such as screen readers.


### display: contents



Current implementations in some browsers will remove from the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) any element with a `display` value of `contents` (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. This is incorrect behavior according to the [CSS specification](https://drafts.csswg.org/css-display/#valdef-display-contents).

 * [More accessible markup with display: contents | Hidde de Vries](https://hidde.blog/more-accessible-markup-with-display-contents/)
* [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)


### Tables



In some browsers, changing the `display` value of a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element to `block`, `grid`, or `flex` will alter its representation in the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). This will cause the table to no longer be announced properly by screen reading technology.

 * [Short note on what CSS display properties do to table semantics — The Paciello Group](https://www.tpgi.com/short-note-on-what-css-display-properties-do-to-table-semantics/)
* [Hidden content for better a11y | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
* [MDN Understanding WCAG, Guideline 1.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
* [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `inline` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
| Animation type | Not animatable |

Formal syntax
-------------



```
display =   
  [[](value_definition_syntax#brackets) <display-outside> [||](value_definition_syntax#double_bar) <display-inside> []](value_definition_syntax#brackets)         [|](value_definition_syntax#single_bar)  
  <display-listitem>                                [|](value_definition_syntax#single_bar)  
  <display-internal>                                [|](value_definition_syntax#single_bar)  
  <display-box>                                     [|](value_definition_syntax#single_bar)  
  <display-legacy>                                  [|](value_definition_syntax#single_bar)  
  <display-outside> [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) <display-inside> [|](value_definition_syntax#single_bar) math []](value_definition_syntax#brackets)    
  
<display-outside> =   
  block   [|](value_definition_syntax#single_bar)  
  inline  [|](value_definition_syntax#single_bar)  
  run-in    
  
<display-inside> =   
  flow       [|](value_definition_syntax#single_bar)  
  flow-root  [|](value_definition_syntax#single_bar)  
  table      [|](value_definition_syntax#single_bar)  
  flex       [|](value_definition_syntax#single_bar)  
  grid       [|](value_definition_syntax#single_bar)  
  ruby         
  
<display-listitem> =   
  <display-outside>[?](value_definition_syntax#question_mark)     [&&](value_definition_syntax#double_ampersand)  
  [[](value_definition_syntax#brackets) flow [|](value_definition_syntax#single_bar) flow-root []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  list-item                
  
<display-internal> =   
  table-row-group      [|](value_definition_syntax#single_bar)  
  table-header-group   [|](value_definition_syntax#single_bar)  
  table-footer-group   [|](value_definition_syntax#single_bar)  
  table-row            [|](value_definition_syntax#single_bar)  
  table-cell           [|](value_definition_syntax#single_bar)  
  table-column-group   [|](value_definition_syntax#single_bar)  
  table-column         [|](value_definition_syntax#single_bar)  
  table-caption        [|](value_definition_syntax#single_bar)  
  ruby-base            [|](value_definition_syntax#single_bar)  
  ruby-text            [|](value_definition_syntax#single_bar)  
  ruby-base-container  [|](value_definition_syntax#single_bar)  
  ruby-text-container    
  
<display-box> =   
  contents  [|](value_definition_syntax#single_bar)  
  none        
  
<display-legacy> =   
  inline-block  [|](value_definition_syntax#single_bar)  
  inline-table  [|](value_definition_syntax#single_bar)  
  inline-flex   [|](value_definition_syntax#single_bar)  
  inline-grid     
  

```
Examples
--------


### display value comparison



In this example we have two block-level container elements, each one with three inline children. Below that, we have a select menu that allows you to apply different `display` values to the containers, allowing you to compare and contrast how the different values affect the element's layout, and that of their children.

 We've included [`padding`](padding) and [`background-color`](background-color) on the containers and their children, so that it is easier to see the effect the display values are having.

  **Note:** We've not included any of the modern multi-keyword syntax, as support for that is still fairly limited.

  #### HTML

 
```
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</article>

<div>
  <label for="display">Choose a display value:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

```
 #### JavaScript

 
```
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();

```
 #### Result


  **Note:** You can find more examples in the pages for each separate display data type, linked above.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # the-display-properties](https://w3c.github.io/csswg-drafts/css-display/#the-display-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display` | 1 | 12 | 1 | 4 | 7 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `contents` | 65 | 79 | 37 | No | 52 | 11.1 | 65 | 65 | 37 | 47 | 11.3 | 9.0 |
| `display-outside` | 1 | 12 | 1 | 4 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `flex` | 2921 | 12 | 20Firefox 28 added multi-line flexbox support. | 11IE incorrectly positions inline block content inside flex containers. See the [discussion on Microsoft Answers](https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows_10/inline-block-content-in-a-flex-container-not/deea64e2-933b-4bd2-a98c-62be16d04b57).8IE incorrectly positions inline block content inside flex containers. See the [discussion on Microsoft Answers](https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows_10/inline-block-content-in-a-flex-container-not/deea64e2-933b-4bd2-a98c-62be16d04b57). | 161512.1–15 | 97 | ≤374.4 | 2925 | 20Firefox 28 added multi-line flexbox support. | 161412.1–14 | 97 | 2.01.5 |
| `flow-root` | 58 | 79 | 53 | No | 45 | 13 | 58 | 58 | 53 | 43 | 13 | 7.0 |
| `grid` | 57 | 1612 | 52 | 10Internet Explorer implements an older version of the specification. | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0Samsung Internet added this earlier than the corresponding Chrome version would indicate. |
| `inline-block` | 1 | 12 | 1 | 86Until Internet Explorer 8, `inline-block` is only for natural inline elements. | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `inline-flex` | 2921 | 12 | 20Firefox 28 added multi-line flexbox support. | 118 | 1615 | 97 | ≤374.4 | 2925 | 20Firefox 28 added multi-line flexbox support. | 1614 | 97 | 2.01.5 |
| `inline-grid` | 57 | 1612 | 52 | 10Internet Explorer implements an older version of the specification. | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0Samsung Internet added this earlier than the corresponding Chrome version would indicate. |
| `inline-table` | 1 | 12 | 3 | 8 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `list-item` | 1 | 12 | 1 | 6 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `math` | 10987 | 10987 | No | No | 9573 | No | 109 | 10987 | No | 74 | No | No |
| `multi-keyword_values` | No | No | 70 | No | No | 15 | No | No | No | No | 15 | No |
| `none` | 1Chrome 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied. | 12 | 1 | 4 | 7Opera 52 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied. | 1 | ≤37WebView 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied. | 18Chrome 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied. | 4 | 10.1Opera Android 47 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied. | 1 | 1.0Chrome 65 stopped creating layout objects for elements inside an `<iframe>` with `display:none` applied. |
| `ruby_values` | No | 12–79 | 38 | 7 | No | No | No | No | 38 | No | No | No |
| `table_values` | 1 | 12 | 1 | 8 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Block and inline layout in normal flow](css_flow_layout/block_and_inline_layout_in_normal_flow)
* [Introduction to formatting contexts](css_flow_layout/intro_to_formatting_contexts)
* [`visibility`](visibility), [`float`](float), [`position`](position)
* [`grid`](grid), [`flex`](flex)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display>

<display-box>
=============


These keywords define whether an element generates display boxes at all.


Syntax
------



Valid `<display-box>` values:

  `contents`  These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the `contents` value should affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced elements. See [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) for more details.

 *Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the [Accessibility concerns](#accessibility_concerns) section below for more details.*

  `none`   Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the [`visibility`](visibility) property instead. 

  
Accessibility concerns
----------------------



Current implementations in most browsers will remove from the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) any element with a `display` value of `contents`. This will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading technology. This is incorrect behavior according to the [CSSWG specification](https://drafts.csswg.org/css-display/#the-display-properties).

 * [More accessible markup with display: contents | Hidde de Vries](https://hidde.blog/more-accessible-markup-with-display-contents/)
* [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)


Formal syntax
-------------



```
<display-box> =   
  contents  [|](value_definition_syntax#single_bar)  
  none        
  

```
Examples
--------


In this first example, the paragraph with a class of secret is set to `display: none`; the box and any content is now not rendered.

### display: none



#### HTML

 
```
<p>Visible text</p>
<p class="secret">Invisible text</p>

```
 #### CSS

 
```
p.secret {
  display: none;
}

```
 #### Result



### display: contents



In this example the outer [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) has a 2-pixel red border and a width of 300px. However it also has `display: contents` specified therefore this `<div>` will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed.

 #### HTML

 
```
<div class="outer">
  <div>Inner div.</div>
</div>

```
 #### CSS

 
```
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}

```
 #### Result



Specifications
--------------



**No specification found**No specification data found for `css.properties.display.contents`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-box` | 65 | 79 | 37 | No | 52 | 11.1 | 65 | 65 | 37 | 47 | 11.3 | 9.0 |
| `contents_unusual` | 65 | 79 | 59 | No | 52 | No | 65 | 65 | 59 | 47 | No | 9.0 |


See also
--------


* [`display`](display)
	+ [`<display-outside>`](display-outside)
	+ [`<display-inside>`](display-inside)
	+ [`<display-listitem>`](display-listitem)
	+ [`<display-internal>`](display-internal)
	+ [`<display-legacy>`](display-legacy)
* [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
* [More accessible markup with display: contents — hiddedevries.nl](https://hidde.blog/more-accessible-markup-with-display-contents/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display-box>

<display-legacy>
================


CSS 2 used a single-keyword syntax for the `display` property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.


Syntax
------



Valid `<display-legacy>` values:

  `inline-block`  The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

 It is equivalent to `inline flow-root`.

  `inline-table`  The `inline-table` value does not have a direct mapping in HTML. It behaves like an HTML [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

 It is equivalent to `inline table`.

  `inline-flex`  The element behaves like an inline element and lays out its content according to the flexbox model.

 It is equivalent to `inline flex`.

  `inline-grid`  The element behaves like an inline element and lays out its content according to the grid model.

 It is equivalent to `inline grid`.

  
Formal syntax
-------------



```
<display-legacy> =   
  inline-block  [|](value_definition_syntax#single_bar)  
  inline-table  [|](value_definition_syntax#single_bar)  
  inline-flex   [|](value_definition_syntax#single_bar)  
  inline-grid     
  

```
Examples
--------


In the below example, we are creating an inline flex container with the legacy keyword inline-flex.

### HTML



```
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item

```
### CSS



```
.container {
  display: inline-flex;
}

```
### Result



 In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.

 
```
.container {
  display: inline flex;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # typedef-display-legacy](https://drafts.csswg.org/css-display/#typedef-display-legacy) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-legacy` | 57 | 1612 | 52 | 10Internet Explorer implements an older version of the specification. | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0Samsung Internet added this earlier than the corresponding Chrome version would indicate. |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-legacy` | 2921 | 12 | 20Firefox 28 added multi-line flexbox support. | 118 | 1615 | 97 | ≤374.4 | 2925 | 20Firefox 28 added multi-line flexbox support. | 1614 | 97 | 2.01.5 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-legacy` | 1 | 12 | 3 | 8 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-legacy` | 1 | 12 | 1 | 86Until Internet Explorer 8, `inline-block` is only for natural inline elements. | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |

### css.properties.display.inline-block


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.inline-table


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.inline-flex


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.inline-grid


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


See also
--------


* [`display`](display)
	+ [`<display-outside>`](display-outside)
	+ [`<display-inside>`](display-inside)
	+ [`<display-listitem>`](display-listitem)
	+ [`<display-internal>`](display-internal)
	+ [`<display-box>`](display-box)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display-legacy>

<display-listitem>
==================


The `list-item` keyword causes the element to generate a `::marker` pseudo-element with the content specified by its [`list-style`](list-style) properties (for example a bullet point) together with a principal box of the specified type for its own contents.


Syntax
------



A single value of `list-item` will cause the element to behave like a list item. This can be used together with [`list-style-type`](list-style-type) and [`list-style-position`](list-style-position).

 `list-item` can also be combined with any [`<display-outside>`](display-outside) keyword and the `flow` or `flow-root` [`<display-inside>`](display-inside) keywords.

  **Note:** In browsers that support the two-value syntax, if no inner value is specified it will default to `flow`. If no outer value is specified, the principal box will have an outer display type of `block`.

 
Formal syntax
-------------



```
<display-listitem> =   
  <display-outside>[?](value_definition_syntax#question_mark)     [&&](value_definition_syntax#double_ampersand)  
  [[](value_definition_syntax#brackets) flow [|](value_definition_syntax#single_bar) flow-root []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  list-item                
  
<display-outside> =   
  block   [|](value_definition_syntax#single_bar)  
  inline  [|](value_definition_syntax#single_bar)  
  run-in    
  

```
Examples
--------


### HTML



```
<div class="fake-list">I will display as a list item</div>

```
### CSS



```
.fake-list {
  display: list-item;
  list-style-position: inside;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # typedef-display-listitem](https://w3c.github.io/csswg-drafts/css-display/#typedef-display-listitem) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-listitem` | 1 | 12 | 1 | 6 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `legend-support` | 71 | 79 | 64 | No | 58 | No | 71 | 71 | 64 | 50 | No | 10.0 |


See also
--------


* [`display`](display)
	+ [`<display-outside>`](display-outside)
	+ [`<display-inside>`](display-inside)
	+ [`<display-internal>`](display-internal)
	+ [`<display-box>`](display-box)
	+ [`<display-legacy>`](display-legacy)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem>

<display-inside>
================


These keywords specify the element's inner [`display`](display) type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These keywords are used as values of the `display` property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the [`<display-outside>`](display-outside) keywords.


Syntax
------



Valid `<display-inside>` values:

  
`flow`  Experimental 
  The element lays out its contents using flow layout (block-and-inline layout).

 If its outer display type is `inline` or `run-in`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.

 Depending on the value of other properties (such as [`position`](position), [`float`](float), or [`overflow`](overflow)) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.

  `flow-root`  The element generates a block element box that establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.

  `table`  These elements behave like HTML [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) elements. It defines a block-level box.

  `flex`  The element behaves like a block element and lays out its content according to the [flexbox model](css_flexible_box_layout).

  `grid`  The element behaves like a block element and lays out its content according to the [grid model](css_grid_layout/basic_concepts_of_grid_layout).

  
`ruby`  Experimental 
  The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby) elements.

    **Note:** Browsers that support the two value syntax, on finding the inner value only, such as when `display: flex` or `display: grid` is specified, will set their outer value to `block`. This will result in expected behavior; for example if you specify an element to be `display: grid`, you would expect that the box created on the grid container would be a block level box.

 
Formal syntax
-------------



```
<display-inside> =   
  flow       [|](value_definition_syntax#single_bar)  
  flow-root  [|](value_definition_syntax#single_bar)  
  table      [|](value_definition_syntax#single_bar)  
  flex       [|](value_definition_syntax#single_bar)  
  grid       [|](value_definition_syntax#single_bar)  
  ruby         
  

```
Examples
--------


In this example the parent box has been given `display: flow-root` and so establishes a new BFC and contains the floated item.

### HTML



```
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

```
### CSS



```
.box {
  background-color: rgb(224, 206, 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # typedef-display-inside](https://drafts.csswg.org/css-display/#typedef-display-inside) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-inside` | No | 12–79 | 38 | 7 | No | No | No | No | 38 | No | No | No |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-inside` | 2921 | 12 | 20Firefox 28 added multi-line flexbox support. | 11IE incorrectly positions inline block content inside flex containers. See the [discussion on Microsoft Answers](https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows_10/inline-block-content-in-a-flex-container-not/deea64e2-933b-4bd2-a98c-62be16d04b57).8IE incorrectly positions inline block content inside flex containers. See the [discussion on Microsoft Answers](https://answers.microsoft.com/en-us/ie/forum/ie11-iewindows_10/inline-block-content-in-a-flex-container-not/deea64e2-933b-4bd2-a98c-62be16d04b57). | 161512.1–15 | 97 | ≤374.4 | 2925 | 20Firefox 28 added multi-line flexbox support. | 161412.1–14 | 97 | 2.01.5 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-inside` | 57 | 1612 | 52 | 10Internet Explorer implements an older version of the specification. | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0Samsung Internet added this earlier than the corresponding Chrome version would indicate. |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-inside` | 1 | 12 | 1 | 8 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-inside` | 58 | 79 | 53 | No | 45 | 13 | 58 | 58 | 53 | 43 | 13 | 7.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-inside` | No | No | 70 | No | No | 15 | No | No | No | No | 15 | No |

### css.properties.display.multi-keyword\_values


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.flow-root


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.table\_values


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.grid


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.flex


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.ruby\_values


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


See also
--------


* [`display`](display)
	+ [`<display-outside>`](display-outside)
	+ [`<display-listitem>`](display-listitem)
	+ [`<display-internal>`](display-internal)
	+ [`<display-box>`](display-box)
	+ [`<display-legacy>`](display-legacy)
* [Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)
* [Basic Concepts of Grid Layout](css_grid_layout/basic_concepts_of_grid_layout)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display-inside>

<display-internal>
==================


Some layout models such as `table` and `ruby` have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those "internal" display values, which only have meaning within that particular layout mode.


Syntax
------



Valid `<display-internal>` values:

  `table-row-group`  These elements behave like [`<tbody>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) HTML elements.

  `table-header-group`  These elements behave like [`<thead>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) HTML elements.

  `table-footer-group`  These elements behave like [`<tfoot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) HTML elements.

  `table-row`  These elements behave like [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) HTML elements.

  `table-cell`  These elements behave like [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) HTML elements.

  `table-column-group`  These elements behave like [`<colgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup) HTML elements.

  `table-column`  These elements behave like [`<col>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col) HTML elements.

  `table-caption`  These elements behave like [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) HTML elements.

  
`ruby-base`  Experimental 
  These elements behave like [`<rb>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rb) HTML elements.

  
`ruby-text`  Experimental 
  These elements behave like [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt) HTML elements.

  
`ruby-base-container`  Experimental 
  These elements are generated as anonymous boxes.

  
`ruby-text-container`  Experimental 
  These elements behave like [`<rtc>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc) HTML elements.

  
Formal syntax
-------------



```
<display-internal> =   
  table-row-group      [|](value_definition_syntax#single_bar)  
  table-header-group   [|](value_definition_syntax#single_bar)  
  table-footer-group   [|](value_definition_syntax#single_bar)  
  table-row            [|](value_definition_syntax#single_bar)  
  table-cell           [|](value_definition_syntax#single_bar)  
  table-column-group   [|](value_definition_syntax#single_bar)  
  table-column         [|](value_definition_syntax#single_bar)  
  table-caption        [|](value_definition_syntax#single_bar)  
  ruby-base            [|](value_definition_syntax#single_bar)  
  ruby-text            [|](value_definition_syntax#single_bar)  
  ruby-base-container  [|](value_definition_syntax#single_bar)  
  ruby-text-container    
  

```
Examples
--------


### CSS tables example



The following example demonstrates laying out a simple form using CSS table layout.

 #### HTML

 
```
<main>
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Age</label>
    <input type="text" id="age" name="age" />
  </div>
</main>

```
 #### CSS

 
```
main {
  display: table;
}

div {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin: 5px;
}

```
 #### Result



Specifications
--------------



**No specification found**No specification data found for `css.properties.display.table_values,css.properties.display.ruby_values`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-internal` | No | 12–79 | 38 | 7 | No | No | No | No | 38 | No | No | No |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-internal` | 1 | 12 | 1 | 8 | 7 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |

### css.properties.display.table\_values


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.display.ruby\_values


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


See also
--------


* [`display`](display)
	+ [`<display-outside>`](display-outside)
	+ [`<display-inside>`](display-inside)
	+ [`<display-listitem>`](display-listitem)
	+ [`<display-box>`](display-box)
	+ [`<display-legacy>`](display-legacy)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display-internal>

<display-outside>
=================


The `<display-outside>` keywords specify the element's outer [`display`](display) type, which is essentially its role in flow layout. These keywords are used as values of the `display` property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the [`<display-inside>`](display-inside) keywords.


Syntax
------



Valid `<display-outside>` values:

  `block`  The element generates a block element box, generating line breaks both before and after the element when in the normal flow.

  `inline`  The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.

    **Note:** Browsers that support the two value syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

 
Formal syntax
-------------



```
<display-outside> =   
  block   [|](value_definition_syntax#single_bar)  
  inline  [|](value_definition_syntax#single_bar)  
  run-in    
  

```
Examples
--------


In the following example, span elements (normally displayed as inline elements) are set to `display: block` and so break onto new lines and expand to fill their container in the inline dimension.

### HTML



```
<span>span 1</span> <span>span 2</span>

```
### CSS



```
span {
  display: block;
  border: 1px solid rebeccapurple;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # typedef-display-outside](https://w3c.github.io/csswg-drafts/css-display/#typedef-display-outside) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-outside` | 1 | 12 | 1 | 4 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`display`](display)
	+ [`<display-inside>`](display-inside)
	+ [`<display-listitem>`](display-listitem)
	+ [`<display-internal>`](display-internal)
	+ [`<display-box>`](display-box)
	+ [`<display-legacy>`](display-legacy)
* [Block and Inline layout in Normal Flow](css_flow_layout/block_and_inline_layout_in_normal_flow)
* [Formatting Contexts explained](css_flow_layout/intro_to_formatting_contexts)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display-outside>

drop-shadow()
=============


The `drop-shadow()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) applies a drop shadow effect to the input image. Its result is a [`<filter-function>`](../filter-function).


Try it
------



 A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.

  **Note:** This function is somewhat similar to the [`box-shadow`](../box-shadow) property. The `box-shadow` property creates a rectangular shadow behind an element's *entire box*, while the `drop-shadow()` filter function creates a shadow that conforms to the shape (alpha channel) of the *image itself*.

 
Syntax
------




```
drop-shadow(offset-x offset-y blur-radius color)

```
 The `drop-shadow()` function accepts a parameter of type `<shadow>` (defined in the [`box-shadow`](../box-shadow) property), with the exception that the `inset` keyword and `spread` parameters are not allowed.


### Parameters


 
`offset-x` (required)  The horizontal offset for the shadow, specified as a [`<length>`](../length) value. Negative values place the shadow to the left of the element.

  
`offset-y` (required)  The vertical offset for the shadow, specified as a [`<length>`](../length) value. Negative values place the shadow above the element.

  
`blur-radius` (optional)  The shadow's blur radius, specified as a [`<length>`](../length). The larger the value, the larger and more blurred the shadow becomes. If unspecified, it defaults to `0`, resulting in a sharp, unblurred edge. Negative values are not allowed.

  
`color` (optional)  The color of the shadow, specified as a [`<color>`](../color_value). If unspecified, the value of the [`color`](../color) property is used.

  Examples
--------


### Setting a drop shadow using pixel offsets and blur radius



```
/\* Black shadow with 10px blur \*/
drop-shadow(16px 16px 10px black)

```
### Setting a drop shadow using rem offsets and blur radius



```
/\* Reddish shadow with 1rem blur \*/
drop-shadow(.5rem .5rem 1rem #e23)

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-drop-shadow](https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `drop-shadow` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------



The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:

 * [`blur()`](blur)
* [`brightness()`](brightness)
* [`contrast()`](contrast)
* [`grayscale()`](grayscale)
* [`hue-rotate()`](hue-rotate)
* [`invert()`](invert)
* [`opacity()`](opacity)
* [`saturate()`](saturate)
* [`sepia()`](sepia)
* [`box-shadow`](../box-shadow) property
* [`text-shadow`](../text-shadow) property




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow>

<resolution>
============



The `<resolution>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types), used for describing [resolutions](@media/resolution) in [media queries](media_queries), denotes the pixel density of an output device, i.e., its resolution.

 On screens, the units are related to *CSS* inches, centimeters, or pixels, not physical values.



Syntax
------


The `<resolution>` data type consists of a strictly positive [`<number>`](number) followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

### Units



 `dpi`  Represents the number of [dots per inch](https://en.wikipedia.org/wiki/Dots_per_inch). Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, `1dpi ≈ 0.39dpcm`.

  `dpcm`  Represents the number of [dots per centimeter](https://en.wikipedia.org/wiki/Dots_per_inch). As 1 inch is 2.54 cm, `1dpcm ≈ 2.54dpi`.

  `dppx`  Represents the number of dots per [`px`](length#px) unit. Due to the 1:96 fixed ratio of CSS `in` to CSS `px`, `1dppx` is equivalent to `96dpi`, which corresponds to the default resolution of images displayed in CSS as defined by [`image-resolution`](image-resolution).

  `x`  Alias for `dppx`.

    **Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0dpi`, `0dpcm`, or `0dppx`.

 
Examples
--------


### Use in a media query



```
@media print and (min-resolution: 300dpi) {
  /\* … \*/
}

```
### Valid resolutions



```
96dpi
50.82dpcm
3dppx

```
### Invalid resolutions



```
72 dpi     Spaces are not allowed between the number and the unit.
ten dpi    The number must use digits only.
0          The unit is required.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # resolution](https://w3c.github.io/csswg-drafts/css-values/#resolution) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `resolution` | 29 | 12 | 83.5Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 9 | 9.5 | NoSee [bug 78087](https://webkit.org/b/78087). | 4.4 | 29 | 84Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 10.1 | NoSee [bug 78087](https://webkit.org/b/78087). | 2.0 |
| `dpcm` | 29 | 12 | 8 | 9 | 1610–15 | No | 4.4 | 29 | 8 | 1610.1–14 | No | 2.0 |
| `dpi` | 29 | 12 | 8 | 9 | 1610–15 | No | 4.4 | 29 | 8 | 1610.1–14 | No | 2.0 |
| `dppx` | 29 | 12 | 16 | No | 12.1 | No | 4.4 | 29 | 16 | 12.1 | No | 2.0 |
| `x` | 68 | 79 | 62 | No | 55 | No | 68 | 68 | 62 | 48 | No | 10.0 |


See also
--------


* [resolution](@media/resolution) media feature
* The [`image-resolution`](image-resolution) property
* [Using @media queries](media_queries/using_media_queries)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/resolution>

empty-cells
===========


The `empty-cells` CSS property sets whether borders and backgrounds appear around [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) cells that have no visible content.


Try it
------



 This property has an effect only when the [`border-collapse`](border-collapse) property is `separate`.


Syntax
------




```
/\* Keyword values \*/
empty-cells: show;
empty-cells: hide;

/\* Global values \*/
empty-cells: inherit;
empty-cells: initial;
empty-cells: revert;
empty-cells: revert-layer;
empty-cells: unset;

```
 The `empty-cells` property is specified as one of the keyword values listed below.


### Values


 `show`  Borders and backgrounds are drawn like in normal cells.

  `hide`  No borders or backgrounds are drawn.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `show` |
| Applies to | table-cell elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
empty-cells =   
  show  [|](value_definition_syntax#single_bar)  
  hide    
  

```
Example
-------


### Showing and hiding empty table cells



#### HTML

 
```
<table class="table\_1">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>
<br />
<table class="table\_2">
  <tr>
    <td>Moe</td>
    <td>Larry</td>
  </tr>
  <tr>
    <td>Curly</td>
    <td></td>
  </tr>
</table>

```
 #### CSS

 
```
.table\_1 {
  empty-cells: show;
}

.table\_2 {
  empty-cells: hide;
}

td,
th {
  border: 1px solid gray;
  padding: 0.5rem;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # empty-cells](https://w3c.github.io/csswg-drafts/css2/#empty-cells) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `empty-cells` | 1 | 12 | 1 | 8 | 4 | 1.2 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`border-collapse`](border-collapse)
* [Styling tables](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells>

element()
=========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `element()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) defines an [`<image>`](image) 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.

 A particularly useful scenario for using this would be to render an image in an HTML [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element, then use that as a background.

 On Gecko browsers, you can use the non-standard [`document.mozSetImageElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/mozSetImageElement) method to change the element being used as the background for a given CSS background element.



Syntax
------




```
element(id)

```
 where:

  *id*  The ID of an element to use as the background, specified using the HTML attribute #*id* on the element.

  
Examples
--------


These examples work in builds of Firefox that support `-moz-element()`.

### A somewhat realistic example



This example uses a hidden [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) as a background. The background element uses a gradient, but also includes text that is rendered as part of the background.

 
```
<div
 style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div
 id="myBackground1"
 style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>

```

 The [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".


### Page Preview



 This [example based on Vincent De Oliveira's](https://iamvdo.me/en/blog/css-element-function) creates a preview of the `<div id="css-source">` inside `<div id="css-result">`. 

 #### HTML

 
```
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>

```
 #### CSS

 
```
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # element-notation](https://w3c.github.io/csswg-drafts/css-images-4/#element-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `element()` | No | No | 5729–57`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`background`](https://developer.mozilla.org/docs/Web/CSS/background), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image) and [`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source).4–29`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) and [`background`](https://developer.mozilla.org/docs/Web/CSS/background). | No | No | No | No | No | 6029–60`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`background`](https://developer.mozilla.org/docs/Web/CSS/background), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image) and [`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source).4–29`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) and [`background`](https://developer.mozilla.org/docs/Web/CSS/background). | No | No | No |


See also
--------


* [`image()`](image/image)
* [`image-set()`](image/image-set)
* [`<image>`](image)
* [`<gradient>`](gradient)
* [`cross-fade()`](cross-fade)
* [`document.mozSetImageElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/mozSetImageElement)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/element()>

:empty
======


The `:empty` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS [`content`](content) do not affect whether an element is considered empty.


Try it
------



  **Note:** In [Selectors Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo), the `:empty` pseudo-class was changed to act like [`:-moz-only-whitespace`](:-moz-only-whitespace), but no browser currently supports this yet.

 
Syntax
------



```
:empty {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>

```
### CSS




```
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

```

### Result


Accessibility concerns
----------------------



Assistive technology such as screen readers cannot parse interactive content that is empty. All interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element ([anchors](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), [buttons](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), etc.). Accessible names expose the interactive control to the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis), an API that communicates information useful for assistive technologies.

 The text that provides the interactive control's accessible name can be hidden using [a combination of properties](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.

 * [What is an accessible name? | The Paciello Group](https://www.tpgi.com/what-is-an-accessible-name/)
* [Hidden content for better a11y | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
* [MDN Understanding WCAG, Guideline 2.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
* [Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html)


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-empty-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-empty-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:empty` | 1 | 12 | 1 | 9 | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |
| `matches_whitespace` | No | No | NoSee [bug 1106296](https://bugzil.la/1106296). | No | No | No | No | No | NoSee [bug 1106296](https://bugzil.la/1106296). | No | No | No |


See also
--------


* [`:-moz-only-whitespace`](:-moz-only-whitespace)  Non-standard  – The [prefixed](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) implementation of the changes in [Selectors Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo)
* [`:blank`](:blank)  Experimental


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:empty>

:enabled
========


The `:enabled` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.


Try it
------


Syntax
------



```
:enabled

```
Examples
--------


The following example makes the color of text and button [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)s green when enabled, and gray when disabled. This helps the user understand which elements can be interacted with.

### HTML



```
<form action="url\_of\_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Submit" />
</form>

```
### CSS



```
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-enabled](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-enabled) |
| [Selectors Level 4 # enableddisabled](https://w3c.github.io/csswg-drafts/selectors/#enableddisabled) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:enabled` | 1 | 12 | 1 | 9 | 9 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:disabled`](:disabled)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled>

env()
=====



The `env()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the [`var()`](var()) function and [custom properties](--*). The difference is that, as well as being user-agent defined rather than user-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared.

 In addition, unlike custom properties, which cannot be used outside of declarations, the `env()` function can be used in place of any part of a property value, or any part of a descriptor (e.g. in [Media query rules](@media)). As the spec evolves, it may also be usable in other places such as selectors.

 Originally provided by the iOS browser to allow developers to place their content in a safe area of the viewport, the `safe-area-inset-*` values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.

 For example, a common issue solved by `env()` is that of device notifications covering up some of the app user interface. By positioning fixed elements using `env()` you can ensure that they display in a safe area of the viewport.

 Another use case for `env()` variables is for desktop [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) (PWAs) that use the Window Controls Overlay feature to take advantage of the full application window surface area. Using the `titlebar-area-*` values, they can position elements where the title bar would have been and ensure that content stays clear of the window control buttons.



Syntax
------



```
/\* Using the four safe area inset values with no fallback values \*/
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);

/\* Using them with fallback values \*/
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);

```
### Values



 
`safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left`
  The `safe-area-inset-*` variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display. For rectangular viewports, like your average laptop monitor, their value is equal to zero. For non-rectangular displays — like a round watch face — the four values set by the user agent form a rectangle such that all content inside the rectangle is visible.

  
`titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height`
  The `titlebar-area-*` variables are useful for PWA installed on Desktop devices. When a desktop PWA uses the `window-controls-overlay` [display\_override](https://developer.mozilla.org/en-US/docs/Web/Manifest/display_override) value, then it can use the `titlebar-area-*` variables to make sure content doesn't overlap with the window control buttons (i.e. minimize, maximize, and close).

  
`keyboard-inset-top`, `keyboard-inset-right`, `keyboard-inset-bottom`, `keyboard-inset-left`, `keyboard-inset-width`, `keyboard-inset-height`
  The `keyboard-inset-*` variables provide information about the on-screen virtual keyboard's appearance. They define a rectangle by its top, right, bottom, and left insets from the edge of the viewport (the width and height insets are calculated from the other insets). To learn more, see the [VirtualKeyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

    **Note:** Unlike other CSS properties, user agent-defined property names are case-sensitive.

 
### Formal syntax



```
<env()> =   
  env( [<custom-ident>](custom-ident) [<integer [0,∞]>](integer)[\*](value_definition_syntax#asterisk) , [<declaration-value>](declaration-value)[?](value_definition_syntax#question_mark) )    
  

```
Usage
-----



To tell the browser to use the whole available space on the screen, and so enabling us to use the `env()` variables, we need to add a new viewport meta value:

 
```
<meta name="viewport" content="viewport-fit=cover" />

```
 You can then use `env()` in your CSS:

 
```
body {
  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
      safe-area-inset-bottom,
      20px
    ) env(safe-area-inset-left, 20px);
}

```

Examples
--------


### Using env() to ensure buttons are not obscured by device UI



In the following example `env()` is used to ensure that fixed app toolbar buttons are not obscured by device notifications appearing at the bottom of the screen. On the desktop `safe-area-inset-bottom` is `0`. However, in devices that display notifications at the bottom of the screen, such as iOS, it contains a value that leaves space for the notification to display. This can then be used in the value for [`padding-bottom`](padding-bottom) to create a gap that appears natural on that device.

 
```
<main>Main content of app here</main>
<footer>
  <button>Go here</button>
  <button>Or here</button>
</footer>

```
 
```
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font: 1em system-ui;
}

main {
  flex: 1;
  background-color: #eee;
  padding: 1em;
}

footer {
  flex: none;
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
  background: black;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
  /\* adds the safe-area-inset-bottom value to the initial 1em of padding.
 a larger black area will display for a device that has a positive value for this variable. \*/
  position: sticky;
  bottom: 0;
}

button {
  padding: 1em;
  background: white;
  color: black;
  margin: 0;
  width: 100%;
  border: none;
  font: 1em system-ui;
}

```


### Using the fallback value



The below example makes use of the optional second parameter of `env()`, which allows you to provide a fallback value in case the environment variable is not available.

 
```
<p>
  If the <code>env()</code> function is supported in your browser, this
  paragraph's text will have 50px of padding between it and the left border —
  but not the top, right and bottom. This is because the accompanying CSS is the
  equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other CSS
  properties, user agent property names are case-sensitive.
</p>

```
 
```
p {
  width: 300px;
  border: 2px solid red;
  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
      safe-area-inset-bottom,
      50px
    ) env(SAFE-AREA-INSET-LEFT, 50px);
}

```


### Example values




```
/\* zero for all rectangular user agents \*/
padding: env(safe-area-inset-bottom, 50px);

/\* 50px because UA properties are case sensitive \*/
padding: env(safe-area-inset-bottom, 50px);

/\* as if padding: '50px 20px' were set because x is not a valid environment variable \*/
padding: env(x, 50px 20px);

/\* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable \*/
padding: env(x, 50px, 20px);

```
 The syntax of the fallback, like that of custom properties, allows commas. But, if the property value doesn't support commas, the value is not valid.

  **Note:** User agent properties are not reset by the <all> property.

 
### Using env() to ensure content is not obscured by window control buttons in desktop PWAs



In the following example `env()` ensures that content displayed in a desktop Progressive Web App that uses the [Window Controls Overlay API](https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API) is not obscured by the operating system's window control buttons. The `titlebar-area-*` values define a rectangle where the title bar would normally have been displayed. On devices that do not support the Window Controls Overlay feature, such as mobile devices, the fallback values are used.

 Here is what a PWA installed on a desktop device normally looks like:

  ![Illustration of what a PWA installed on desktop normally looks like, with window control buttons, a title bar, and web content below that] 

 With the Window Controls Overlay feature, the web content covers the whole app window surface area, with the window controls and PWA buttons displayed as overlays:

  ![Illustration of what a PWA installed on desktop looks like with the Window Controls Overlay feature, with window control buttons, no title bar, and web content spanning the whole window] 

 
```
<header>Title of the app here</header>
<main>Main content of app here</main>

```
 
```
header {
  position: fixed;
  left: env(titlebar-area-x);
  top: env(titlebar-area-y);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
}

main {
  margin-top: env(titlebar-area-height);
}

```
  **Note:** Using `position:fixed` makes sure the header does not scroll with the rest of the content, and instead stays aligned with the window control buttons, even on device/browsers that support elastic overscroll (also known as rubber banding).

 
Specifications
--------------




| Specification |
| --- |
| [CSS Environment Variables Module Level 1 # env-function](https://w3c.github.io/csswg-drafts/css-env/#env-function) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `env` | 69 | 79 | 65 | No | 56 | 11.111–11.1 | 69 | 69 | 65 | 48 | 11.311–11.3 | 10.0 |
| `safe-area-inset-bottom` | 69 | 79 | 65 | No | 56 | 11 | 69 | 69 | 65 | 48 | 11 | 10.0 |
| `safe-area-inset-left` | 69 | 79 | 65 | No | 56 | 11 | 69 | 69 | 65 | 48 | 11 | 10.0 |
| `safe-area-inset-right` | 69 | 79 | 65 | No | 56 | 11 | 69 | 69 | 65 | 48 | 11 | 10.0 |
| `safe-area-inset-top` | 69 | 79 | 65 | No | 56 | 11 | 69 | 69 | 65 | 48 | 11 | 10.0 |
| `titlebar-area-height` | 9392–93Before version 93, Linux is unsupported. | 9392–93Before version 93, Linux is unsupported. | No | No | 78 | No | No | 9392–93Before version 93, Linux is unsupported. | No | 65 | No | 17.0 |
| `titlebar-area-width` | 9392–93Before version 93, Linux is unsupported. | 9392–93Before version 93, Linux is unsupported. | No | No | 78 | No | No | 9392–93Before version 93, Linux is unsupported. | No | 65 | No | 17.0 |
| `titlebar-area-x` | 9392–93Before version 93, Linux is unsupported. | 9392–93Before version 93, Linux is unsupported. | No | No | 78 | No | No | 9392–93Before version 93, Linux is unsupported. | No | 65 | No | 17.0 |
| `titlebar-area-y` | 9392–93Before version 93, Linux is unsupported. | 9392–93Before version 93, Linux is unsupported. | No | No | 78 | No | No | 9392–93Before version 93, Linux is unsupported. | No | 65 | No | 17.0 |


See also
--------


* [`var(…)`](var())
* [CSS Custom Properties for Cascading Variables](css_variables)
* [Custom Properties (--\*)](--*)
* [Using CSS custom properties (variables)](using_css_custom_properties)
* [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/)
* [Display content in the title bar](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay)
* [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/env>

exp()
=====



The `exp()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is an exponential function that takes an number as an argument and returns the mathematical constant `e` raised to the power of the given number.

 The mathematical constant [e](https://en.wikipedia.org/wiki/E_(mathematical_constant)) represents Euler's number and is the base of natural logarithms, and is approximately `2.718281828459045`.

 The `exp(number)` function contains a calculation which returns the same value as [`pow(e, number)`](pow).



Syntax
------



```
/\* A <number> value \*/
width: calc(100px * exp(-1)); /\* 100px \* 0.367879441171442 = 36px \*/
width: calc(100px * exp(0)); /\* 100px \* 1 = 100px \*/
width: calc(100px * exp(1)); /\* 100px \* 2.718281828459045 = 217px \*/

```
### Parameter



The `exp(number)` function accepts only one value as its parameter.

  `number`  A calculation which resolves to a [`<number>`](number). Representing the value to be raised by a power of `e`.

  
### Return value



Returns a non-negative [`<number>`](number) representing enumber, which is the result of calculating `e` raised to the power of `number`.

 * If `number` is `-Infinity`, the result is `0`.
* If `number` is `0`, the result is `1`.
* If `number` is `1`, the result is `e` (i.e. `2.718281828459045`).
* If `number` is `Infinity`, the result is `Infinity`.


### Formal syntax



```
<exp()> =   
  exp( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Rotate elements



The `exp()` function can be used to [`rotate`](transform-function/rotate) elements as it return a [`<number>`](number).

 #### HTML

 
```
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>

```
 #### CSS

 
```
div.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(orange, red);
}
div.box-1 {
  transform: rotate(calc(1turn * exp(-1))); // 0.3678794411714423turn
}
div.box-2 {
  transform: rotate(calc(1turn * exp(-0.75))); // 0.4723665527410147turn
}
div.box-3 {
  transform: rotate(calc(1turn * exp(-0.5))); // 0.6065306597126334turn
}
div.box-4 {
  transform: rotate(calc(1turn * exp(-0.25))); // 0.7788007830714049turn
}
div.box-5 {
  transform: rotate(calc(1turn * exp(0))); // 1turn
}

```
 #### Result



### Scale headings by fixed ratio



The `exp()` function can be useful for strategies like CSS modular scale, which relates all the font-sizes on a page to each other by a fixed ratio.

 #### HTML

 
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

```
 #### CSS

 
```
h1 {
  font-size: calc(1rem * exp(1.25)); // 3.4903429574618414rem
}
h2 {
  font-size: calc(1rem * exp(1)); // 2.718281828459045rem
}
h3 {
  font-size: calc(1rem * exp(0.75)); // 2.117000016612675rem
}
h4 {
  font-size: calc(1rem * exp(0.5)); // 1.6487212707001282rem
}
h5 {
  font-size: calc(1rem * exp(0.25)); // 1.2840254166877414rem
}
h6 {
  font-size: calc(1rem * exp(0)); // 1rem
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # exponent-funcs](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `exp` | No | No | 112 | No | No | 15.4 | No | No | 112 | No | 15.4 | No |


See also
--------


* [`pow()`](pow)
* [`sqrt()`](sqrt)
* [`hypot()`](hypot)
* [`log()`](log)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/exp>

fallback
========


The `fallback` descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.


Syntax
------



```
/\* Keyword values \*/
fallback: lower-alpha;
fallback: custom-gangnam-style;

```
Description
-----------



If the specified fallback style is also unable to construct a representation, then its fallback style will be used. If a valid fallback style is not specified, it defaults to `decimal`.

 A couple of scenarios where a fallback style will be used are:

 * When the [`range`](range) descriptor is specified for a counter style, the fallback style will be used to represent values that fall outside the range.
* When the `fixed` [`system`](system) is used and there are not enough symbols to cover all the list items, the fallback style will be used for the rest of the list items.


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `decimal` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
fallback =   
  [<counter-style-name>](../counter-style-name)    
  

```
Examples
--------


### Specifying a fallback counter style



#### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6""\24B7""\24B8";
  fallback: upper-alpha;
}

.list {
  list-style: fallback-example;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-fallback](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-fallback) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `fallback` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols): the functional notation creating anonymous counter styles


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback>

<filter-function>
=================


The `<filter-function>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a graphical effect that can change the appearance of an input image. It is used in the [`filter`](filter) and [`backdrop-filter`](backdrop-filter) properties.


Syntax
------



The `<filter-function>` data type is specified using one of the filter functions listed below. Each function requires an argument which, if invalid, results in no filter being applied.

  [`blur()`](filter-function/blur)  Blurs the image.

  [`brightness()`](filter-function/brightness)  Makes the image brighter or darker.

  [`contrast()`](filter-function/contrast)  Increases or decreases the image's contrast.

  [`drop-shadow()`](filter-function/drop-shadow)  Applies a drop shadow behind the image.

  [`grayscale()`](filter-function/grayscale)  Converts the image to grayscale.

  [`hue-rotate()`](filter-function/hue-rotate)  Changes the overall hue of the image.

  [`invert()`](filter-function/invert)  Inverts the colors of the image.

  [`opacity()`](filter-function/opacity)  Makes the image transparent.

  [`saturate()`](filter-function/saturate)  Super-saturates or desaturates the input image.

  [`sepia()`](filter-function/sepia)  Converts the image to sepia.

  
Formal syntax
-------------



```
<filter-function> =   
  <blur()>         [|](value_definition_syntax#single_bar)  
  <brightness()>   [|](value_definition_syntax#single_bar)  
  <contrast()>     [|](value_definition_syntax#single_bar)  
  <drop-shadow()>  [|](value_definition_syntax#single_bar)  
  <grayscale()>    [|](value_definition_syntax#single_bar)  
  <hue-rotate()>   [|](value_definition_syntax#single_bar)  
  <invert()>       [|](value_definition_syntax#single_bar)  
  <opacity()>      [|](value_definition_syntax#single_bar)  
  <sepia()>        [|](value_definition_syntax#single_bar)  
  <saturate()>       
  
<blur()> =   
  blur( [<length>](length)[?](value_definition_syntax#question_mark) )    
  
<brightness()> =   
  brightness( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<contrast()> =   
  contrast( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<drop-shadow()> =   
  drop-shadow( [[](value_definition_syntax#brackets) [<color>](color_value)[?](value_definition_syntax#question_mark) [&&](value_definition_syntax#double_ampersand) [<length>](length)[{2,3}](value_definition_syntax#curly_braces) []](value_definition_syntax#brackets) )    
  
<grayscale()> =   
  grayscale( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<hue-rotate()> =   
  hue-rotate( [[](value_definition_syntax#brackets) [<angle>](angle) [|](value_definition_syntax#single_bar) [<zero>](zero) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<invert()> =   
  invert( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<opacity()> =   
  opacity( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<sepia()> =   
  sepia( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<saturate()> =   
  saturate( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  

```
Examples
--------


### Filter function comparison



This example provides a simple graphic, along with a select menu to allow you to choose between the different types of filter function, and a slider to allow you to vary the values used inside the filter function. Updating the controls updates the filter effect in real time, allowing you to investigate the effects of different filters.

 
```
div {
  width: 300px;
  height: 300px;
  background: url(firefox.png) no-repeat center;
  filter: <filter-function>(<value>);
}

```
  Where the `<filter-function>` is the filter you select from the drop down and the `<value>` is the values you set with the slider: '  


Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # typedef-filter-function](https://drafts.fxtf.org/filter-effects/#typedef-filter-function) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `filter-function` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `blur` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `brightness` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `contrast` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `drop-shadow` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `grayscale` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `hue-rotate` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `invert` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `opacity` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `saturate` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |
| `sepia` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------


* Properties that use this data type: [`filter`](filter) and [`backdrop-filter`](backdrop-filter)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function>

:first
======



The `:first` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes), used with the [`@page`](@page) <at-rule>, represents the first page of a printed document. (See [`:first-child`](:first-child) for general first element of a node.)

 
```
/\* Selects the first page when printing \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

```
  **Note:** You can't change all CSS properties with this pseudo-class. You can only change the margins, [`orphans`](orphans), [`widows`](widows), and page breaks of the document. Furthermore, you may only use [absolute-length](length#absolute_length_units) units when defining the margins. All other properties will be ignored.

 

Syntax
------



```
:first {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>

```
### CSS



```
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

```
### JavaScript



```
document.querySelector("button").addEventListener("click", () => {
  window.print();
});

```
### Result



Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.



Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # left-right-first](https://w3c.github.io/csswg-drafts/css-page/#left-right-first) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:first` | 18 | 12 | No | 8 | 9.2 | 6 | 4.4 | 18 | No | 10.1 | 6 | 1.0 |


See also
--------


* [`@page`](@page)
* Other page-related pseudo-classes: [`:left`](:left), [`:right`](:right)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:first>

filter
======



The `filter` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

 Several [functions](#functions), such as `blur()` and `contrast()`, are available to help you achieve predefined effects.



Try it
------


Syntax
------




```
/\* <filter-function> values \*/
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/\* URL \*/
filter: url("filters.svg#filter-id");

/\* Multiple filters \*/
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/\* Use no filter \*/
filter: none;

/\* Global values \*/
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

```
 With a function, use the following:

 
```
filter: <filter-function> [<filter-function>]* | none;

```
 You can use `url()` to reference an [SVG filter element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter). For a reference to an SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element, use the following syntax:

 
```
filter: url(file.svg#filter-element-id);

```

Functions
---------



The `filter` property is specified as `none` or one or more of the functions listed below. If the parameter for any function is invalid, the function returns `none`. Except where noted, the functions that take a value expressed with a percent sign (as in `34%`) also accept the value expressed as decimal (as in `0.34`).

 When the `filter` property values contains multiple functions, the filters are applied in order.

  [`blur()`](filter-function/blur)  Applies a Gaussian blur to the input image.

   
```
filter: blur(5px);

```
  [`brightness()`](filter-function/brightness)  Applies a linear multiplier to the input image, making it appear more or less bright. Values are linear multipliers on the effect, with `0%` creating a completely black image, `100%` having no effect, and values over `100%` brightening the image.

   
```
filter: brightness(2);

```
  [`contrast()`](filter-function/contrast)  Adjusts the contrast of the input image. A value of `0%` makes the image grey, `100%` has no effect, and values over `100%` create a contrast.

   
```
filter: contrast(200%);

```
  [`drop-shadow()`](filter-function/drop-shadow)  Applies the parameter `<shadow>` as a drop shadow, following the contours of the image. The shadow syntax is similar to `<box-shadow>` (defined in the [CSS backgrounds and borders module](css_backgrounds_and_borders)), with the exception that the `inset` keyword and `spread` parameter are not allowed. As with all `filter` property values, any filters after the `drop-shadow()` are applied to the shadow.

   
```
filter: drop-shadow(16px 16px 10px black);

```
  [`grayscale()`](filter-function/grayscale)  Converts the image to grayscale. A value of `100%` is completely grayscale. The initial value of `0%` leaves the input unchanged. Values between `0%` and `100%` produce linear multipliers on the effect.

   
```
filter: grayscale(100%);

```
  [`hue-rotate()`](filter-function/hue-rotate)  Applies a hue rotation. The `<angle>` value defines the number of degrees around the hue color circle at which the input samples will be adjusted. A value of `0deg` leaves the input unchanged.

   
```
filter: hue-rotate(90deg);

```
  [`invert()`](filter-function/invert)  Inverts the samples in the input image. A value of `100%` completely inverts the image. A value of `0%` leaves the input unchanged. Values between `0%` and `100%` have linear multipliers on the effect.

   
```
filter: invert(100%);

```
  [`opacity()`](filter-function/opacity)  Applies transparency. `0%` makes the image completely transparent and `100%` leaves the image unchanged.

   
```
filter: opacity(50%);

```
  [`saturate()`](filter-function/saturate)  Saturates the image, with `0%` being completely unsaturated, `100%` leaving the image unchanged, and values of over `100%` increasing saturation.

   
```
filter: saturate(200%);

```
  [`sepia()`](filter-function/sepia)  Converts the image to sepia, with a value of `100%` making the image completely sepia and `0%` making no change.

   
```
filter: sepia(100%);

```

Combining functions
-------------------



You may combine any number of functions to manipulate the rendering. The filters are applied in the order declared. The following example enhances the contrast and brightness of the image:

 
```
filter: contrast(175%) brightness(103%);

```

### Interpolation



When animated, if both the beginning and end filters have a function list of the same length without [`url()`](url) in the same order, each of their filter functions is [interpolated](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) according to the filter function's specific rules.

 If the filter lists are of different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list. The added functions use their initial, no filter modification values. All the filters listed are then interpolated according to the filter function's specific rules. Otherwise, discrete interpolation is used.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | a [filter function list](filter#Interpolation) |

Formal syntax
-------------



```
filter =   
  none                 [|](value_definition_syntax#single_bar)  
  <filter-value-list>    
  
<filter-value-list> =   
  [[](value_definition_syntax#brackets) <filter-function> [|](value_definition_syntax#single_bar) <url> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)    
  
<filter-function> =   
  <blur()>         [|](value_definition_syntax#single_bar)  
  <brightness()>   [|](value_definition_syntax#single_bar)  
  <contrast()>     [|](value_definition_syntax#single_bar)  
  <drop-shadow()>  [|](value_definition_syntax#single_bar)  
  <grayscale()>    [|](value_definition_syntax#single_bar)  
  <hue-rotate()>   [|](value_definition_syntax#single_bar)  
  <invert()>       [|](value_definition_syntax#single_bar)  
  <opacity()>      [|](value_definition_syntax#single_bar)  
  <sepia()>        [|](value_definition_syntax#single_bar)  
  <saturate()>       
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<blur()> =   
  blur( [<length>](length)[?](value_definition_syntax#question_mark) )    
  
<brightness()> =   
  brightness( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<contrast()> =   
  contrast( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<drop-shadow()> =   
  drop-shadow( [[](value_definition_syntax#brackets) [<color>](color_value)[?](value_definition_syntax#question_mark) [&&](value_definition_syntax#double_ampersand) [<length>](length)[{2,3}](value_definition_syntax#curly_braces) []](value_definition_syntax#brackets) )    
  
<grayscale()> =   
  grayscale( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<hue-rotate()> =   
  hue-rotate( [[](value_definition_syntax#brackets) [<angle>](angle) [|](value_definition_syntax#single_bar) [<zero>](zero) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<invert()> =   
  invert( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<opacity()> =   
  opacity( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<sepia()> =   
  sepia( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<saturate()> =   
  saturate( [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  

```
Examples
--------


### Applying filter functions



The `filter` property is applied to the second image, greying and blurring both the image and its border.

 
```
img {
  border: 5px solid yellow;
}
/\* Gray the second image by 40% and blur by 5px \*/
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

```
 
```
<img src="pencil.jpg" alt="Original image is sharp" />
<img src="pencil.jpg" alt="The image and border are blurred and muted" />

```


### Repeating filter functions



Filter functions are applied in order of appearance. The same filter function can be repeated.

 
```
#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 red);
}

```

 The filters are applied in order. This is why the drop shadows are not the same color: the first drop shadow's hue is altered by the `hue-rotate()` function but the second one is not.


Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # FilterProperty](https://drafts.fxtf.org/filter-effects/#FilterProperty) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `filter` | 5318In Chrome 18 to 19, the `saturate()` function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed. | 1212 | 4935 | NoInternet Explorer 4 to 9 implemented a non-standard `filter` property. The syntax was completely different from this one and is not documented here. | 4015 | 9.16 | 534.4 | 53 | 4935 | 4114 | 9.36 | 6.0 |
| `svg` | No | No | 35 | No | No | No | No | No | 35 | No | No | No |


See also
--------


* CSS [`backdrop-filter`](backdrop-filter) property
* CSS [compositing and blending](compositing_and_blending) module, including the CSS [`background-blend-mode`](background-blend-mode) and [`mix-blend-mode`](mix-blend-mode) properties.
* The CSS [`mask`](mask) property
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), including the SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element and SVG `[filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter)` attribute.
* [Applying SVG effects to HTML content](https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter>

:first-child
============


The `:first-child` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents the first element among a group of sibling elements.


Try it
------


Syntax
------



```
:first-child {
  /\* ... \*/
}

```
Examples
--------


### Basic example



#### HTML

 
```
<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

```
 #### CSS

 
```
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

```
 #### Result



### Styling a list



#### HTML

 
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

```
 #### CSS

 
```
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # first-child-pseudo](https://w3c.github.io/csswg-drafts/selectors/#first-child-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:first-child` | 4 | 12 | 3 | 7["Internet Explorer 7 doesn't update `:first-child` styles when elements are added dynamically.", "In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the `:first-child` style isn't applied until the link loses focus."] | 9.5 | 3.1 | ≤37 | 18 | 4 | 10.1 | 4 | 1.0 |
| `no_parent_required` | 57 | 79 | 52 | No | 44 | No | 57 | 57 | 52 | 43 | No | 7.0 |


See also
--------


* [`:-moz-first-node`](:-moz-first-node)  Non-standard
* [`:first-of-type`](:first-of-type)
* [`:last-child`](:last-child)
* [`:nth-child()`](:nth-child)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child>

::first-letter
==============


The `::first-letter` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) applies styles to the first letter of the first line of a [block-level element](visual_formatting_model#block-level_elements_and_block_boxes), but only when not preceded by other content (such as images or inline tables).


Try it
------



 The first letter of an element is not always trivial to identify:

 * Punctuation that precedes or immediately follows the first letter is included in the match. Punctuation includes any Unicode character defined in the *open* (Ps), *close* (Pe), *initial quote* (Pi), *final quote* (Pf), and *other punctuation* (Po) classes.
* Some languages have digraphs that are always capitalized together, like the `IJ` in Dutch. In these cases, both letters of the digraph should be matched by the `::first-letter` pseudo-element.
* A combination of the [`::before`](::before) pseudo-element and the [`content`](content) property may inject some text at the beginning of the element. In that case, `::first-letter` will match the first letter of this generated content.

  **Note:** CSS introduced the `::first-letter` notation (with two colons) to distinguish <pseudo-classes> from <pseudo-elements>. For backward compatibility, browsers also accept `:first-letter`, introduced earlier.

 Browser support for digraphs such as `IJ` in Dutch is poor. Check the compatibility table below to see the current state of support.

 
Allowable properties
--------------------



Only a small subset of CSS properties can be used with the `::first-letter` pseudo-element:

 * All font properties: [`font`](font), [`font-style`](font-style), [`font-feature-settings`](font-feature-settings), [`font-kerning`](font-kerning), [`font-language-override`](font-language-override), [`font-stretch`](font-stretch), [`font-synthesis`](font-synthesis), [`font-variant`](font-variant), [`font-variant-alternates`](font-variant-alternates), [`font-variant-caps`](font-variant-caps), [`font-variant-east-asian`](font-variant-east-asian), [`font-variant-ligatures`](font-variant-ligatures), [`font-variant-numeric`](font-variant-numeric), [`font-variant-position`](font-variant-position), [`font-weight`](font-weight), [`font-size`](font-size), [`font-size-adjust`](font-size-adjust), [`line-height`](line-height) and [`font-family`](font-family)
* All background properties: [`background`](background), [`background-color`](background-color), [`background-image`](background-image), [`background-clip`](background-clip), [`background-origin`](background-origin), [`background-position`](background-position), [`background-repeat`](background-repeat), [`background-size`](background-size), [`background-attachment`](background-attachment), and [`background-blend-mode`](background-blend-mode)
* All margin properties: [`margin`](margin), [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), [`margin-left`](margin-left)
* All padding properties: [`padding`](padding), [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), [`padding-left`](padding-left)
* All border properties: the shorthands [`border`](border), [`border-style`](border-style), [`border-color`](border-color), [`border-width`](border-width), [`border-radius`](border-radius), [`border-image`](border-image), and the longhands properties
* The [`color`](color) property
* The [`text-decoration`](text-decoration), [`text-shadow`](text-shadow), [`text-transform`](text-transform), [`letter-spacing`](letter-spacing), [`word-spacing`](word-spacing) (when appropriate), [`line-height`](line-height), [`text-decoration-color`](text-decoration-color), [`text-decoration-line`](text-decoration-line), [`text-decoration-style`](text-decoration-style), [`box-shadow`](box-shadow), [`float`](float), [`vertical-align`](vertical-align) (only if `float` is `none`) CSS properties


Syntax
------



```
::first-letter {
  /\* ... \*/
}

```
Examples
--------


### Simple drop cap



In this example we will use the `::first-letter` pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the `<h2>`.

 #### HTML

 
```
<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>

```
 #### CSS

 
```
p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

```
 #### Result



### Effect on special punctuation and non-Latin characters



This example illustrates the effect of `::first-letter` on special punctuation and non-Latin characters.

 #### HTML

 
```
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>

```
 #### CSS

 
```
p::first-letter {
  color: red;
  font-size: 150%;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # first-letter-pseudo](https://w3c.github.io/csswg-drafts/css-pseudo/#first-letter-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::first-letter` | 11 | 1212 | 11 | 95.5 | 73.5 | 11 | 3737 | 1818 | 44 | 10.110.1 | 11 | 1.01.0 |
| `dutch_ij_digraph` | No | No | 87 | No | No | No | No | No | 87 | No | No | No |


See also
--------


* [`::first-line`](::first-line)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter>

::first-line
============


The `::first-line` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) applies styles to the first line of a [block-level element](visual_formatting_model#block-level_elements_and_block_boxes).


Try it
------



 The effects of `::first-line` are limited by the length and content of the first line of text in the element. The length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. `::first-line` has no effect when the first child of the element, which would be the first part of the first line, is an inline block-level element, such as an inline table.

  **Note:** [Selectors Level 3](https://drafts.csswg.org/selectors-3/#first-line) introduced the double-colon notation (`::`) to distinguish <pseudo-classes> from <pseudo-elements>, which are single-colon `:`. Browsers accept both `::first-line` and `:first-line`, which was introduced in CSS2.

  For the purposes of CSS [`background`](background), the `::first-line` pseudo-element is like an inline-level element meaning that in a left-justified first line, the background may not extend all the way to the right margin.


Allowable properties
--------------------



Only a small subset of CSS properties can be used with the `::first-line` pseudo-element:

 * All font-related properties: [`font`](font), [`font-kerning`](font-kerning), [`font-style`](font-style), [`font-variant`](font-variant), [`font-variant-numeric`](font-variant-numeric), [`font-variant-position`](font-variant-position), [`font-variant-east-asian`](font-variant-east-asian), [`font-variant-caps`](font-variant-caps), [`font-variant-alternates`](font-variant-alternates), [`font-variant-ligatures`](font-variant-ligatures), [`font-synthesis`](font-synthesis), [`font-feature-settings`](font-feature-settings), [`font-language-override`](font-language-override), [`font-weight`](font-weight), [`font-size`](font-size), [`font-size-adjust`](font-size-adjust), [`font-stretch`](font-stretch), and [`font-family`](font-family)
* All background-related properties: [`background-color`](background-color), [`background-clip`](background-clip), [`background-image`](background-image), [`background-origin`](background-origin), [`background-position`](background-position), [`background-repeat`](background-repeat), [`background-size`](background-size), [`background-attachment`](background-attachment), and [`background-blend-mode`](background-blend-mode)
* The [`color`](color) property
* [`word-spacing`](word-spacing), [`letter-spacing`](letter-spacing), [`text-decoration`](text-decoration), [`text-transform`](text-transform), and [`line-height`](line-height)
* [`text-shadow`](text-shadow), [`text-decoration`](text-decoration), [`text-decoration-color`](text-decoration-color), [`text-decoration-line`](text-decoration-line), [`text-decoration-style`](text-decoration-style), and [`vertical-align`](vertical-align).


Syntax
------



```
::first-line {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<p>
  Styles will only be applied to the first line of this paragraph. After that,
  all text will be styled like normal. See what I mean?
</p>

<span>
  The first line of this text will not receive special styling because it is not
  a block-level element.
</span>

```
### CSS



```
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* WARNING: DO NOT USE THESE \*/
  /\* Many properties are invalid in ::first-line pseudo-elements \*/
  margin-left: 20px;
  text-indent: 20px;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # first-line-pseudo](https://w3c.github.io/csswg-drafts/css-pseudo/#first-line-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::first-line` | 1Before Chrome 62, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669).1Before Chrome 62, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669). | 1212 | 11 | 95.5 | 7From Opera 15 to Opera 49 (exclusive), the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` or `:first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669).3.5From Opera 15 to Opera 49 (exclusive), the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` or `:first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669). | 1The [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work for `::first-line` or `:first-line` pseudo-elements. See [WebKit bug 3409](https://webkit.org/b/3409).1The [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work for `::first-line` or `:first-line` pseudo-elements. See [WebKit bug 3409](https://webkit.org/b/3409). | ≤37Before WebView 62, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669).≤37Before WebView 62, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669). | 18Before Chrome 62, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669).18Before Chrome 62, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669). | 44 | 10.1From Opera 15 to Opera 49 (exclusive), the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` or `:first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669).10.1From Opera 15 to Opera 49 (exclusive), the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` or `:first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669). | 1The [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work for `::first-line` or `:first-line` pseudo-elements. See [WebKit bug 3409](https://webkit.org/b/3409).1The [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work for `::first-line` or `:first-line` pseudo-elements. See [WebKit bug 3409](https://webkit.org/b/3409). | 1.0Before Samsung Internet 8.0, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669).1.0Before Samsung Internet 8.0, the [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) property does not work on `::first-line` pseudo-elements. See [Chromium bug 129669](https://crbug.com/129669). |


See also
--------


* [`::first-letter`](::first-letter)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line>

:first-of-type
==============


The `:first-of-type` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents the first element of its type among a group of sibling elements.


Try it
------


Syntax
------



```
:first-of-type {
  /\* ... \*/
}

```
Examples
--------


### Styling the first paragraph



#### HTML

 
```
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

```
 #### CSS

 
```
p:first-of-type {
  color: red;
  font-style: italic;
}

```
 #### Result



### Nested elements



This example shows how nested elements can also be targeted. Note that the [universal selector](universal_selectors) (`*`) is implied when no type selector is written.

 #### HTML

 
```
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`.</div>
</article>

```
 #### CSS

 
```
article :first-of-type {
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # first-of-type-pseudo](https://w3c.github.io/csswg-drafts/selectors/#first-of-type-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:first-of-type` | 1 | 12Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type. | 3.5 | 9Internet Explorer treats all unknown elements (such as custom elements) as the same element type. | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:first-child`](:first-child), [`:last-of-type`](:last-of-type), [`:nth-of-type`](:nth-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type>

fit-content
===========



The `fit-content` behaves as `fit-content(stretch)`. In practice this means that the box will use the available space, but never more than [`max-content`](max-content).

 When used as laid out box size for [`width`](width), [`height`](height), [`min-width`](min-width), [`min-height`](min-height), [`max-width`](max-width) and [`max-height`](max-height) the maximum and minimum sizes refer to the content size.

  **Note:** The CSS Sizing specification also defines the [`fit-content()`](fit-content_function) function. This page details the keyword.

 

Syntax
------



```
width: fit-content;
block-size: fit-content;

```
Examples
--------


### Using fit-content for box sizing



#### HTML

 
```
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item with more text in it.</div>
  <div class="item">
    Item with more text in it, hopefully we have added enough text so the text
    will start to wrap.
  </div>
</div>

```
 #### CSS

 
```
.container {
  border: 2px solid #ccc;
  padding: 10px;
  width: 20em;
}

.item {
  width: fit-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # valdef-width-fit-content](https://w3c.github.io/csswg-drafts/css-sizing-4/#valdef-width-fit-content) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `fit-content` | 46221–48 | 7979 | 943 | No | 331515–35 | 1172 | 464.44.4–48 | 462518–48 | 944 | 331414–35 | 1171 | 5.01.51.0–5.0 |


See also
--------


* Related sizing keywords: [`min-content`](min-content), [`max-content`](max-content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content>

<flex>
======


The `<flex>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) denotes a flexible length within a grid container. It is used in [`grid-template-columns`](grid-template-columns), [`grid-template-rows`](grid-template-rows) and other related properties.


Syntax
------


The `<flex>` data type is specified as a [`<number>`](number) followed by the unit `fr`. The `fr` unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.

Examples
--------


### Examples of correct values for the fr data type



```
1fr    /* Using an integer value */
2.5fr  /* Using a float value */

```
### Example of use in a tracklisting for CSS Grid layout



```
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # fr-unit](https://w3c.github.io/csswg-drafts/css-grid/#fr-unit) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex_value` | 29 | 12 | 40 | 10 | 28 | 10.1 | 57 | 29 | 40 | 28 | 10.3 | 2.0 |


See also
--------


* [CSS Grid Layout](css_grid_layout)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value>

flex-direction
==============


The `flex-direction` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).


Try it
------



 Note that the values `row` and `row-reverse` are affected by the directionality of the flex container. If its [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#dir) attribute is `ltr`, `row` represents the horizontal axis oriented from the left to the right, and `row-reverse` from the right to the left; if the `dir` attribute is `rtl`, `row` represents the axis oriented from the right to the left, and `row-reverse` from the left to the right.


Syntax
------



```
/\* The direction text is laid out in a line \*/
flex-direction: row;

/\* Like <row>, but reversed \*/
flex-direction: row-reverse;

/\* The direction in which lines of text are stacked \*/
flex-direction: column;

/\* Like <column>, but reversed \*/
flex-direction: column-reverse;

/\* Global values \*/
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;

```
### Values



The following values are accepted:

  `row`  The flex container's main-axis is defined to be the same as the text direction. The **main-start** and **main-end** points are the same as the content direction.

  `row-reverse`  Behaves the same as `row` but the **main-start** and **main-end** points are opposite to the content direction.

  `column`  The flex container's main-axis is the same as the block-axis. The **main-start** and **main-end** points are the same as the **before** and **after** points of the writing-mode.

  `column-reverse`  Behaves the same as `column` but the **main-start** and **main-end** are opposite to the content direction.

  
Accessibility concerns
----------------------



Using the `flex-direction` property with values of `row-reverse` or `column-reverse` will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.

 * [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
* [Source Order Matters | Adrian Roselli](https://adrianroselli.com/2015/09/source-order-matters.html)
* [MDN Understanding WCAG, Guideline 1.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
* [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `row` |
| Applies to | flex containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
flex-direction =   
  row             [|](value_definition_syntax#single_bar)  
  row-reverse     [|](value_definition_syntax#single_bar)  
  column          [|](value_definition_syntax#single_bar)  
  column-reverse    
  

```
Examples
--------


### Reversing flex container columns and rows



#### HTML

 
```
<h4>This is a Column-Reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>

```
 #### CSS

 
```
.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-direction-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-direction-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex-direction` | 2921 | 1212 | 814920["Since Firefox 28, multi-line flexbox is supported.", "Before Firefox 81, overflow with `*-reverse` is unsupported. See [bug 1042151](https://bugzil.la/1042151)."] | 1110 | 1512.1 | 97 | ≤374.4 | 2925 | 814920["Since Firefox 28, multi-line flexbox is supported.", "Before Firefox 81, overflow with `*-reverse` is unsupported. See [bug 1042151](https://bugzil.la/1042151)."] | 1412.1 | 97 | 2.01.5 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Ordering flex items](css_flexible_box_layout/ordering_flex_items)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction>

flex-flow
=========


The `flex-flow` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) specifies the direction of a flex container, as well as its wrapping behavior.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`flex-direction`](flex-direction)
* [`flex-wrap`](flex-wrap)


Syntax
------



```
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> and <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/\* Global values \*/
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;

```
### Values


See [`flex-direction`](flex-direction) and [`flex-wrap`](flex-wrap) for details on the values.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`flex-direction`](flex-direction): `row`
* [`flex-wrap`](flex-wrap): `nowrap`
 |
| Applies to | flex containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`flex-direction`](flex-direction): as specified
* [`flex-wrap`](flex-wrap): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
flex-flow =   
  <'flex-direction'>  [||](value_definition_syntax#double_bar)  
  <'flex-wrap'>         
  

```
Examples
--------


### Setting column-reverse and wrap



```
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-flow-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-flow-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex-flow` | 2921 | 12 | 4928 | 11 | 1512.1 | 97 | ≤374.4 | 2925 | 4928 | 1412.1 | 97 | 2.01.5 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Ordering flex items](css_flexible_box_layout/ordering_flex_items)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow>

flex-grow
=========



The `flex-grow` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's [main size](https://www.w3.org/TR/css-flexbox/#main-size).

 When the flex-container's main size is larger than the combined main size's of the flex items, the extra space is distributed among the flex items, with each item growth being their growth factor value as a proportion of the sum total of all the container's items' flex grow factors.



Try it
------


Syntax
------




```
/\* <number> values \*/
flex-grow: 3;
flex-grow: 0.6;

/\* Global values \*/
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;

```
 The `flex-grow` property is specified as a single `<number>`.


### Values


 `<number>`  See [`<number>`](number). Negative values are invalid. Defaults to 0.

  Description
-----------



This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).

 The [main size](https://www.w3.org/TR/css-flexbox/#main-size) is either width or height of the item which is dependent on the [`flex-direction`](flex-direction) value.

 The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.

 `flex-grow` is used alongside the other flex properties [`flex-shrink`](flex-shrink) and [`flex-basis`](flex-basis), and normally defined using the [`flex`](flex) shorthand to ensure all values are set.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | flex items, including in-flow pseudo-elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | a [number](number#interpolation) |

Formal syntax
-------------



```
flex-grow =   
  [<number [0,∞]>](number)    
  

```
Examples
--------


### Setting flex item grow factor



In this example, there is a total of 8 growth factors distributed among the 6 flex items, meaning each growth factor is 12.5% of the remaining space.

 #### HTML

 
```
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
  <div class="small" style="background-color:red;">A</div>
  <div class="small" style="background-color:lightblue;">B</div>
  <div class="small" style="background-color:yellow;">C</div>
  <div class="double" style="background-color:brown;">D</div>
  <div class="double" style="background-color:lightgreen;">E</div>
  <div class="small" style="background-color:brown;">F</div>
</div>

```
 #### CSS

 
```
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.small {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.double {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

```
 #### Result


 When the six flex items are distributed along the container's main axis, if the sum of the main content of those flex items is less than the size of the container's main axis, the extra space is distributed among the size flex items, with A, B, C, and F, each getting 12.5% of the remaining space and D and E each getting 25% of the extra space.


Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-grow-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-grow-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex-grow` | 2922 | 1212 | 20Since Firefox 28, multi-line flexbox is supported. | 1110 | 1512.1 | 97 | ≤374.4 | 2925 | 20Since Firefox 28, multi-line flexbox is supported. | 1412.1 | 97 | 2.01.5 |
| `less_than_zero_animate` | 49 | 79 | 32Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`. | No | 36 | No | 49 | 49 | 32Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`. | 36 | No | 5.0 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Controlling Ratios of flex items along the main axis](css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax)*
* [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow>

flex
====


The `flex` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) sets how a flex *item* will grow or shrink to fit the space available in its flex container.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`flex-grow`](flex-grow)
* [`flex-shrink`](flex-shrink)
* [`flex-basis`](flex-basis)


Syntax
------




```
/\* Keyword values \*/
flex: auto;
flex: initial;
flex: none;

/\* One value, unitless number: flex-grow
flex-basis is then equal to 0. \*/
flex: 2;

/\* One value, width/height: flex-basis \*/
flex: 10em;
flex: 30%;
flex: min-content;

/\* Two values: flex-grow | flex-basis \*/
flex: 1 30px;

/\* Two values: flex-grow | flex-shrink \*/
flex: 2 2;

/\* Three values: flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

/\* Global values \*/
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;

```
 The `flex` property may be specified using one, two, or three values.

 * **One-value syntax:** the value must be one of:
	+ a valid value for [`<flex-grow>`](flex-grow): then the shorthand expands to `flex: <flex-grow> 1 0`.
	+ a valid value for [`<flex-basis>`](flex-basis): then the shorthand expands to `flex: 1 1 <flex-basis>`.
	+ the keyword `none` or one of the global keywords.
* **Two-value syntax:**
	+ The first value must be a valid value for [`flex-grow`](flex-grow).
	+ The second value must be one of:
		- a valid value for [`flex-shrink`](flex-shrink): then the shorthand expands to `flex: <flex-grow> <flex-shrink> 0`.
		- a valid value for [`flex-basis`](flex-basis): then the shorthand expands to `flex: <flex-grow> 1 <flex-basis>`.
* **Three-value syntax:** the values must be in the following order:
	1. a valid value for [`flex-grow`](flex-grow).
	2. a valid value for [`flex-shrink`](flex-shrink).
	3. a valid value for [`flex-basis`](flex-basis).


### Values


 `initial`  The item is sized according to its `width` and `height` properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "`flex: 0 1 auto`".

  `auto`  The item is sized according to its `width` and `height` properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting "`flex: 1 1 auto`".

  `none`  The item is sized according to its `width` and `height` properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting "`flex: 0 0 auto`".

  `<'flex-grow'>`  Defines the [`flex-grow`](flex-grow) of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `0`)

  `<'flex-shrink'>`  Defines the [`flex-shrink`](flex-shrink) of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `1`)

  `<'flex-basis'>`  Defines the [`flex-basis`](flex-basis) of the flex item. A preferred size of `0` must have a unit to avoid being interpreted as a flexibility. Defaults to `0` when omitted. (initial is `auto`)

  Description
-----------



For most purposes, authors should set `flex` to one of the following values: `auto`, `initial`, `none`, or a positive unitless number. To see the effect of these values, try resizing the flex containers below:


 By default flex items don't shrink below their minimum content size. To change this, set the item's [`min-width`](min-width) or [`min-height`](min-height).


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`flex-grow`](flex-grow): `0`
* [`flex-shrink`](flex-shrink): `1`
* [`flex-basis`](flex-basis): `auto`
 |
| Applies to | flex items, including in-flow pseudo-elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`flex-grow`](flex-grow): as specified
* [`flex-shrink`](flex-shrink): as specified
* [`flex-basis`](flex-basis): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* [`flex-grow`](flex-grow): a [number](number#interpolation)
* [`flex-shrink`](flex-shrink): a [number](number#interpolation)
* [`flex-basis`](flex-basis): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
 |

Formal syntax
-------------



```
flex =   
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <'flex-grow'> <'flex-shrink'>[?](value_definition_syntax#question_mark) [||](value_definition_syntax#double_bar) <'flex-basis'> []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Setting flex: auto



This example shows how a flex item with `flex: auto` grows to absorb any free space in the container.

 #### HTML

 
```
<div id="flex-container">
  <div id="flex-auto">flex: auto (click to toggle raw box)</div>
  <div id="flex-initial">flex: initial</div>
</div>

```
 #### CSS

 
```
#flex-container {
  display: flex;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  padding: 1rem;
}

#flex-auto {
  flex: auto;
  border: 1px solid #f00;
}

#flex-initial {
  border: 1px solid #000;
}

```
 #### JavaScript

 
```
const flexAuto = document.getElementById("flex-auto");
const flexInitial = document.getElementById("flex-initial");
flexAuto.addEventListener("click", () => {
  flexInitial.style.display =
    flexInitial.style.display === "none" ? "block" : "none";
});

```
 #### Result

 The flex container contains two flex items:

 * "flex: auto" has a `flex` value of [`auto`](auto)
* "flex: initial" has a `flex` value of [`initial`](#initial)

 The "flex: initial" item takes up as much space as its width requires, but does not expand to take up any more space. All the remaining space is taken up by "flex: auto".

 When you click "flex: auto", we set "flex: initial"'s [`display`](display) property to `none`, removing it from the layout. The "flex: auto" item then expands to occupy all the available space in the container.



Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex` | 2921 | 1212 | 4920["Since Firefox 28, multi-line flexbox is supported.", "Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.", "Until Firefox 61, flex items that are sized according to their content are sized using [`fit-content`, not `max-content`](https://w3c.github.io/csswg-drafts/css-sizing-3/#column-sizing)."] | 11["Internet Explorer 11 ignores uses of [`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) in the `flex-basis` part of the `flex` syntax. This can be worked around by using the longhand properties instead of the shorthand. See [Flexbug #8](https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc) for more info.", "Internet Explorer 11 considers a unitless value in the `flex-basis` part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the `flex-basis` part of the `flex` shorthand value. See [Flexbug #4](https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored) for more info."]10["Internet Explorer 10 and 11 ignore uses of [`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) in the `flex-basis` part of the `flex` syntax. This can be worked around by using the longhand properties instead of the shorthand. See [Flexbug #8](https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc) for more info.", "Internet Explorer 10 and 11 consider a unitless value in the `flex-basis` part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the `flex-basis` part of the `flex` shorthand value. See [Flexbug #4](https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored) for more info."] | 12.1 | 97 | ≤374.4 | 2925 | 4920["Since Firefox 28, multi-line flexbox is supported.", "Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.", "Until Firefox 61, flex items that are sized according to their content are sized using [fit-content, not max-content](https://w3c.github.io/csswg-drafts/css-sizing-3/#column-sizing)."] | 12.1 | 97 | 2.01.5 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Controlling Ratios of flex items along the main axis](css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex>

flex-basis
==========


The `flex-basis` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with [`box-sizing`](box-sizing).


Try it
------



 In this example, the [`flex-grow`](flex-grow) and [`flex-shrink`](flex-shrink) properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`.

 The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at 200px but then shrink to fit the space available with the other items being at least `min-content` sized.

 The image below shows how the Firefox [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) helps you understand the size items become:

  ![The Firefox Flexbox Inspector showing the size of the item once it has shrunk.] 

  **Note:** In case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority.

 
Syntax
------




```
/\* Specify <'width'> \*/
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

/\* Intrinsic sizing keywords \*/
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/\* Automatically size based on the flex item's content \*/
flex-basis: content;

/\* Global values \*/
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;

```
 The `flex-basis` property is specified as either the keyword `content` or a `<'width'>`.


### Values


 `<'width'>`  Any of the following units:

 * [`<length>`](length) sets an absolute value
* [`<percentage>`](percentage) sets a percentage of the width or height of a containing block's content area
* `auto` uses the value of the [width](https://drafts.csswg.org/css2/#the-width-property) in horizontal writing mode, and the value of the [height](https://drafts.csswg.org/css2/#the-height-property) in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead
* `max-content` sets the intrinsic preferred width
* `min-content` sets the intrinsic minimum width
* `fit-content` sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element

  `content`  Indicates automatic sizing, based on the flex item's content.

  **Note:** This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using `auto` together with a main size ([width](https://drafts.csswg.org/css2/#the-width-property) or [height](https://drafts.csswg.org/css2/#the-height-property)) of `auto`.

 * Originally, `flex-basis:auto` meant "look at my `width` or `height` property".
* Then, `flex-basis:auto` was changed to mean automatic sizing, and "main-size" was introduced as the "look at my `width` or `height` property" keyword. It was implemented in [Firefox bug 1032922](https://bugzil.la/1032922).
* Then, that change was reverted in [Firefox bug 1093316](https://bugzil.la/1093316), so `auto` once again means "look at my `width` or `height` property"; and a new `content` keyword is being introduced to trigger automatic sizing. ([Firefox bug 1105111](https://bugzil.la/1105111) covers adding that keyword).

   Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | flex items, including in-flow pseudo-elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the flex container's inner main size |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
flex-basis =   
  content    [|](value_definition_syntax#single_bar)  
  <'width'>    
  

```
Examples
--------


### Setting flex item initial sizes



#### HTML

 
```
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>

```
 #### CSS

 
```
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 12px;
}

.flex1 {
  flex-basis: auto;
}

.flex1::after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2::after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3::after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4::after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5::after {
  content: "content";
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-basis-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-basis-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex-basis` | 2922 | 1212 | 4922Since Firefox 28, multi-line flexbox is supported. | 11When a non-`auto` `flex-basis` is specified, Internet Explorer 10 and 11 always uses a `content-box` box model to calculate the size of a flex item, even if [`box-sizing: border-box`](https://developer.mozilla.org/docs/Web/CSS/box-sizing) is applied to the element. See [Flexbug #7](https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box) for more info. | 1512.1 | 97 | ≤374.4 | 2925 | 4922Since Firefox 28, multi-line flexbox is supported. | 1412.1 | 97 | 2.01.5 |
| `auto` | 22 | 12 | 22 | 11 | 12.1 | 97 | 4.4 | 25 | 22 | 12.1 | 97 | 1.5 |
| `content` | 94 | 9412–79 | 61 | No | 80 | preview | 94 | 94 | 61 | No | No | 17.0 |
| `fit-content` | 94 | 94 | 9422 | No | 80 | 16 | 94 | 94 | 9422 | No | 16 | 17.0 |
| `max-content` | 94 | 94 | 6622 | No | 80 | 16 | 94 | 94 | 6622 | No | 16 | 17.0 |
| `min-content` | 94 | 94 | 6622 | No | 80 | 16 | 94 | 94 | 6622 | No | 16 | 17.0 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Controlling Ratios of flex items along the main axis](css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax)*
* [`width`](width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis>

flex-shrink
===========



The `flex-shrink` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`.

 In use, `flex-shrink` is used alongside the other flex properties [`flex-grow`](flex-grow) and [`flex-basis`](flex-basis), and normally defined using the [`flex`](flex) shorthand.



Try it
------


Syntax
------




```
/\* <number> values \*/
flex-shrink: 2;
flex-shrink: 0.6;

/\* Global values \*/
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: revert-layer;
flex-shrink: unset;

```
 The `flex-shrink` property is specified as a single `<number>`.


### Values


 `<number>`  See [`<number>`](number). Negative values are invalid. Defaults to 1.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `1` |
| Applies to | flex items, including in-flow pseudo-elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | a [number](number#interpolation) |

Formal syntax
-------------



```
flex-shrink =   
  [<number [0,∞]>](number)    
  

```
Examples
--------


### Setting flex item shrink factor



#### HTML

 
```
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

```
 #### CSS

 
```
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-shrink-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-shrink-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex-shrink` | 2922 | 1212 | 4920["Since Firefox 28, multi-line flexbox is supported.", "Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`."] | 10Internet Explorer 10 uses `0` instead of `1` as the initial value for the `flex-shrink` property. A workaround is to always set an explicit value for `flex-shrink`. See [Flexbug #6](https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed) for more info. | 1512.1 | 98 | ≤374.4 | 2925 | 4920["Since Firefox 28, multi-line flexbox is supported.", "Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`."] | 1412.1 | 98 | 2.01.5 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Controlling Ratios of flex items along the main axis](css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink>

:focus-visible
==============


The `:focus-visible` pseudo-class applies while an element matches the [`:focus`](:focus) pseudo-class and the UA ([User Agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)


Try it
------



 This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).


Syntax
------



```
:focus-visible {
  /\* ... \*/
}

```
Examples
--------


### Basic example



In this example, the `:focus-visible` selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with `:focus`.

 
```
<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>

```
 
```
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

```


### Providing a :focus fallback



If your code has to work in old browser versions that do not support `:focus-visible`, check supports of `:focus-visible` with [`@supports`](@supports) and repeat the same focus styling in it, but inside a `:focus` rule. Note that even if you do not specify anything at all for `:focus`, old browsers will simply display the native outline, which can be enough.

 
```
<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">
  Button without fallback
</button>

```
 
```
.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /\* Draw the focus when :focus-visible is supported \*/
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /\* Fallback for browsers without :focus-visible support \*/
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

```


Accessibility concerns
----------------------


### Low vision



Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requires that the visual focus indicator be at least 3 to 1.

 * Accessible Visual Focus Indicators: [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)


### Cognition


It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-focus-visible-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-focus-visible-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:focus-visible` | 86 | 86 | 854 | No | 72 | 15.4 | 86 | 86 | 854 | 61 | 15.4 | 14.0 |


See also
--------


* [`:focus`](:focus)
* [`:focus-within`](:focus-within)
* [A polyfill for `:focus-visible`](https://github.com/WICG/focus-visible)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible>

:focus-within
=============


The `:focus-within` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the [`:focus`](:focus) pseudo-class or has a descendant that is matched by `:focus`. (This includes descendants in [shadow trees](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).)


Try it
------



 This selector is useful, to take a common example, for highlighting an entire [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) container when the user focuses on one of its [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) fields.


Syntax
------



```
:focus-within {
  /\* ... \*/
}

```
Examples
--------


In this example, the form will receive special coloring styles when either text input receives focus.

### HTML



```
<p>Try typing into this form.</p>

<form>
  <label for="given\_name">Given Name:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Family Name:</label>
  <input id="family\_name" type="text" />
</form>

```
### CSS



```
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-focus-within-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-focus-within-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:focus-within` | 60 | 79 | 52 | No | 47 | 10.1 | 60 | 60 | 52 | 44 | 10.3 | 8.0 |


See also
--------


* [`:focus`](:focus)
* [`:focus-visible`](:focus-visible)
* [Grab your user's attention with the focus-within selector](https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within>

font-display
============


The `font-display` descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.


Syntax
------



```
/\* Keyword values \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

```
### Values



 `auto`  The font display strategy is defined by the user agent.

  `block`  Gives the font face a short block period and an infinite swap period.

  `swap`  Gives the font face an extremely small block period and an infinite swap period.

  `fallback`  Gives the font face an extremely small block period and a short swap period.

  `optional`  Gives the font face an extremely small block period and no swap period.

     **Note:** In Firefox, the preferences `gfx.downloadable_fonts.fallback_delay` and `gfx.downloadable_fonts.fallback_delay_short` provide the duration of the "short" and "extremely small" periods, respectively. 

 
Description
-----------


### The font display timeline



The font display timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face. The timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.

  Font block period  If the font face is not loaded, any element attempting to use it must render an *invisible* fallback font face. If the font face successfully loads during this period, it is used normally.

  Font swap period  If the font face is not loaded, any element attempting to use it must render a fallback font face. If the font face successfully loads during this period, it is used normally.

  Font failure period  If the font face is not loaded, the user agent treats it as a failed load causing normal font fallback.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `auto` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
font-display =   
  auto      [|](../value_definition_syntax#single_bar)  
  block     [|](../value_definition_syntax#single_bar)  
  swap      [|](../value_definition_syntax#single_bar)  
  fallback  [|](../value_definition_syntax#single_bar)  
  optional    
  

```
Examples
--------


### Specifying fallback font-display



```
@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot)
      format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-display-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-display-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-display` | 60 | 79 | 58 | No | 47 | 11.1 | 60 | 60 | 58 | 44 | 11.3 | 11.0 |


See also
--------


* [`font-family`](font-family)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`src`](src)
* [`unicode-range`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display>

flex-wrap
=========


The `flex-wrap` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.


Try it
------



 See [Using CSS flexible boxes](css_flexible_box_layout/basic_concepts_of_flexbox) for more properties and information.


Syntax
------




```
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/\* Global values \*/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

```
 The `flex-wrap` property is specified as a single keyword chosen from the list of values below.


### Values



The following values are accepted:

  `nowrap`  The flex items are laid out in a single line which may cause the flex container to overflow. The **cross-start** is either equivalent to **start** or **before** depending on the [`flex-direction`](flex-direction) value. This is the default value.

  `wrap`  The flex items break into multiple lines. The **cross-start** is either equivalent to **start** or **before** depending `flex-direction` value and the **cross-end** is the opposite of the specified **cross-start**.

  `wrap-reverse`  Behaves the same as `wrap` but **cross-start** and **cross-end** are permuted.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `nowrap` |
| Applies to | flex containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
flex-wrap =   
  nowrap        [|](value_definition_syntax#single_bar)  
  wrap          [|](value_definition_syntax#single_bar)  
  wrap-reverse    
  

```
Examples
--------


### Setting flex container wrap values



#### HTML

 
```
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

```
 #### CSS

 
```
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1 # flex-wrap-property](https://w3c.github.io/csswg-drafts/css-flexbox/#flex-wrap-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `flex-wrap` | 2921 | 12 | 28 | 11Partial support due to large number of bugs present. See [Flexbugs](https://github.com/philipwalton/flexbugs). | 17 | 97 | ≤374.4 | 2925 | 52 | 18 | 97 | 2.01.5 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Mastering wrapping of flex items](css_flexible_box_layout/mastering_wrapping_of_flex_items)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap>

float
=====


The `float` CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to [absolute positioning](position#absolute_positioning)).


Try it
------



 A *floating element* is one where the computed value of `float` is not `none`.

 As `float` implies the use of the block layout, it modifies the computed value of the [`display`](display) values, in some cases:

 

| Specified value | Computed value |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `inline-flex` | `flex` |
| `inline-grid` | `grid` |
| *other* | *unchanged* |

  **Note:** If you're referring to this property from JavaScript as a member of the [`HTMLElement.style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) object, modern browsers support `float`, but in older browsers you have to spell it as `cssFloat`. This was an exception to the rule, that the name of the DOM member is the camel-case name of the dash-separated CSS name (because "float" is a reserved word in JavaScript, as seen in the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor").

 
Syntax
------




```
/\* Keyword values \*/
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/\* Global values \*/
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

```
 The `float` property is specified as a single keyword, chosen from the list of values below.


### Values


 `left`  The element must float on the left side of its containing block.

  `right`  The element must float on the right side of its containing block.

  `none`  The element must not float.

  `inline-start`  The element must float on the start side of its containing block. That is the left side with `ltr` scripts, and the right side with `rtl` scripts.

  `inline-end`  The element must float on the end side of its containing block. That is the right side with `ltr` scripts, and the left side with `rtl` scripts.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements, but has no effect if the value of [`display`](display) is `none`. |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
float =   
  block-start      [|](value_definition_syntax#single_bar)  
  block-end        [|](value_definition_syntax#single_bar)  
  inline-start     [|](value_definition_syntax#single_bar)  
  inline-end       [|](value_definition_syntax#single_bar)  
  snap-block       [|](value_definition_syntax#single_bar)  
  <snap-block()>   [|](value_definition_syntax#single_bar)  
  snap-inline      [|](value_definition_syntax#single_bar)  
  <snap-inline()>  [|](value_definition_syntax#single_bar)  
  left             [|](value_definition_syntax#single_bar)  
  right            [|](value_definition_syntax#single_bar)  
  top              [|](value_definition_syntax#single_bar)  
  bottom           [|](value_definition_syntax#single_bar)  
  none             [|](value_definition_syntax#single_bar)  
  footnote           
  
<snap-block()> =   
  snap-block( [<length>](length) , [[](value_definition_syntax#brackets) start [|](value_definition_syntax#single_bar) end [|](value_definition_syntax#single_bar) near []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<snap-inline()> =   
  snap-inline( [<length>](length) , [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) near []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  

```
Examples
--------


### How floated elements are positioned



As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, *or another floated element*.

 In this example, there are three colored squares. Two are floated left, and one is floated right. Note that the second "left" square is placed to the right of the first. Additional squares would continue to stack to the right, until they filled the containing box, after which they would wrap to the next line.

 A floated element is at least as tall as its tallest nested floated children. We gave the parent `width: 100%` and floated it to ensure it is tall enough to encompass its floated children, and to make sure it takes up the width of the parent so we don't have to clear its adjacent sibling.

 #### HTML

 
```
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique
    sapien ac erat tincidunt, sit amet dignissim lectus vulputate. Donec id
    iaculis velit. Aliquam vel malesuada erat. Praesent non magna ac massa
    aliquet tincidunt vel in massa. Phasellus feugiat est vel leo finibus
    congue.
  </p>
</section>

```
 #### CSS

 
```
section {
  box-sizing: border-box;
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

```
 #### Result



### Clearing floats


Sometimes you may want to force an item to move below any floated elements. For instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their own line. See [`clear`](clear) for examples.

Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float](https://w3c.github.io/csswg-drafts/css2/#propdef-float) |
| [CSS Logical Properties and Values Level 1 # float-clear](https://w3c.github.io/csswg-drafts/css-logical/#float-clear) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `float` | 1 | 12 | 1 | 4 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `flow_relative_values` | 70 | 79 | 55 | No | 57 | preview | No | 70 | 55 | No | No | No |


See also
--------


* [Block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)
* Use [`clear`](clear) to force an item to move below a floated element.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/float>

:focus
======


The `:focus` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's `Tab` key.


Try it
------



  **Note:** This pseudo-class applies only to the focused element itself. Use [`:focus-within`](:focus-within) if you want to select an element that *contains* a focused element.

 
Syntax
------



```
:focus {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<div><input class="red-input" value="I'll be red when focused." /></div>
<div><input class="blue-input" value="I'll be blue when focused." /></div>

```
### CSS



```
.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

```
### Result


Accessibility concerns
----------------------



Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requires that the visual focus indicator be at least 3 to 1.

 * Accessible Visual Focus Indicators: [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)


### `:focus { outline: none; }`



Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html).

 * Quick Tip: [Never remove CSS outlines](https://www.a11yproject.com/posts/never-remove-css-outlines/)


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-focus](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-focus) |
| [Selectors Level 4 # focus-pseudo](https://w3c.github.io/csswg-drafts/selectors/#focus-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:focus` | 1 | 12 | 1 | 8 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`:focus-visible`](:focus-visible)
* [`:focus-within`](:focus-within)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:focus>

font-family
===========



The `font-family` CSS descriptor sets the font family for a font specified in an [`@font-face`](../@font-face) rule.

  The value is used for name matching against a particular `@font-face` when styling elements using the [`font-family`](../font-family) property. Any name may be used, and this overrides any name specified in the underlying font data. 



Syntax
------



```
/\* <string> values \*/
font-family: "font family";
font-family: "another font family";

/\* <custom-ident> value \*/
font-family: examplefont;

```
### Values


 `<family-name>`  Specifies the name of the font family.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `n/a (required)` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
font-family =   
  [<family-name>](../family-name)    
  

```
Examples
--------


### Setting the font family name



```
@font-face {
  font-family: "Some font family";
  src: url("some\_font\_name.ttf");
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-family-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-family-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-family` | 4 | 12 | 3.5 | 6 | 10 | 3.1 | 2.2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`font-display`](font-display)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`src`](src)
* [`unicode-range`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family>

font-feature-settings
=====================


The `font-feature-settings` CSS property controls advanced typographic features in OpenType fonts.


Try it
------


Syntax
------




```
/\* Use the default settings \*/
font-feature-settings: normal;

/\* Set values for OpenType feature tags \*/
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;

/\* Global values \*/
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;

```
 Whenever possible, Web authors should instead use the [`font-variant`](font-variant) shorthand property or an associated longhand property such as [`font-variant-ligatures`](font-variant-ligatures), [`font-variant-caps`](font-variant-caps), [`font-variant-east-asian`](font-variant-east-asian), [`font-variant-alternates`](font-variant-alternates), [`font-variant-numeric`](font-variant-numeric) or [`font-variant-position`](font-variant-position).

 These lead to more effective, predictable, understandable results than `font-feature-settings`, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, `font-feature-settings` shouldn't be used to enable small caps.


### Values


 `normal`  Text is laid out using default settings.

  `<feature-tag-value>`   When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a [`<string>`](string) of 4 ASCII characters. If it has more or less characters, or if it contains characters outside the `U+20` – `U+7E` codepoint range, the whole property is invalid. The value is a positive integer. The two keywords `on` and `off` are synonyms for `1` and `0` respectively. If no value is set, the default is `1`. For non-Boolean OpenType features (e.g. [stylistic alternates](https://docs.microsoft.com/typography/opentype/spec/features_pt)), the value implies a particular glyph to be selected; for Boolean values, it is a switch. 

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-feature-settings =   
  normal                [|](value_definition_syntax#single_bar)  
  <feature-tag-value>[#](value_definition_syntax#hash_mark)    
  
<feature-tag-value> =   
  [<string>](string) [[](value_definition_syntax#brackets) [<integer>](integer) [|](value_definition_syntax#single_bar) on [|](value_definition_syntax#single_bar) off []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Enabling various font features



```
/\* use small-cap alternate glyphs \*/
.smallcaps {
  font-feature-settings: "smcp" on;
}

/\* convert both upper and lowercase to small caps (affects punctuation also) \*/
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/\* use zeros with a slash through them to differentiate from "O" \*/
.nicezero {
  font-feature-settings: "zero";
}

/\* enable historical forms \*/
.hist {
  font-feature-settings: "hist";
}

/\* disable common ligatures, usually on by default \*/
.noligs {
  font-feature-settings: "liga" 0;
}

/\* enable tabular (monospaced) figures \*/
td.tabular {
  font-feature-settings: "tnum";
}

/\* enable automatic fractions \*/
.fractions {
  font-feature-settings: "frac";
}

/\* use the second available swash character \*/
.swash {
  font-feature-settings: "swsh" 2;
}

/\* enable stylistic set 7 \*/
.fancystyle {
  font-family: Gabriola;
  font-feature-settings: "ss07";
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-feature-settings-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-feature-settings-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-feature-settings` | 4816 | 15 | 34The [ISO/IEC CD 14496-22 3rd edition](https://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition) suggests using the `ssty` feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the [MathML](https://developer.mozilla.org/docs/Web/MathML) rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the `dtls` feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.15From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See [OpenType Font Feature support in Firefox 4](https://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/). | 10 | 3515 | 9.1 | 4.4 | 48 | 34The [ISO/IEC CD 14496-22 3rd edition](https://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition) suggests using the `ssty` feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the [MathML](https://developer.mozilla.org/docs/Web/MathML) rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the `dtls` feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.15From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See [OpenType Font Feature support in Firefox 4](https://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/). | 3514 | 9.3 | 5.0 |


See also
--------


* [`font-display`](@font-face/font-display)
* [`font-family`](@font-face/font-family)
* [`font-stretch`](@font-face/font-stretch)
* [`font-style`](@font-face/font-style)
* [`font-weight`](@font-face/font-weight)
* [`font-variation-settings`](@font-face/font-variation-settings)
* [`src`](@font-face/src)
* [`unicode-range`](@font-face/unicode-range)
* [OpenType Feature Tags](https://docs.microsoft.com/typography/opentype/spec/featurelist) list


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings>

font-kerning
============


The `font-kerning` CSS property sets the use of the kerning information stored in a font.


Try it
------



 *Kerning* defines how letters are spaced. In *well-kerned* fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be.

 In the image below, for instance, the examples on the left do not use kerning, while the ones on the right do:

  ![Example of font-kerning] 


Syntax
------



```
font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/\* Global values \*/
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;

```
### Values


 `auto`  The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.

  `normal`  Font kerning information stored in the font must be applied.

  `none`  Font kerning information stored in the font is disabled.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-kerning =   
  auto    [|](value_definition_syntax#single_bar)  
  normal  [|](value_definition_syntax#single_bar)  
  none      
  

```
Examples
--------


### Enabling and disabling kerning



#### HTML

 
```
<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>

```
 #### CSS

 
```
div {
  font-size: 2rem;
  font-family: serif;
}

#nokern {
  font-kerning: none;
}

#kern {
  font-kerning: normal;
}

```
 #### JavaScript

 
```
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const nokern = document.getElementById("nokern");

input.addEventListener("keyup", () => {
  kern.textContent = input.value; /\* Update content \*/
  nokern.textContent = input.value;
});

kern.textContent = input.value; /\* Initialize content \*/
nokern.textContent = input.value;

```


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-kerning-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-kerning-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-kerning` | 3329–33 | 79 | 32 | No | 2016–20 | 96 | 4.4.34.4–4.4.3 | 3329–33 | 32 | 2016–20 | 96 | 2.01.0–2.0 |


See also
--------


* [`font-variant`](font-variant), [`font-variant-position`](font-variant-position), [`font-variant-east-asian`](font-variant-east-asian), [`font-variant-caps`](font-variant-caps), [`font-variant-ligatures`](font-variant-ligatures), [`font-variant-numeric`](font-variant-numeric), [`font-variant-alternates`](font-variant-alternates), [`font-synthesis`](font-synthesis), [`letter-spacing`](letter-spacing)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning>

font
====


The `font` CSS [shorthand property](shorthand_properties) sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.


Try it
------



 As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by `font`, the longhands [`font-size-adjust`](font-size-adjust) and [`font-kerning`](font-kerning) are also reset to their initial values.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`font-family`](font-family)
* [`font-size`](font-size)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-variant`](font-variant)
* [`font-weight`](font-weight)
* [`line-height`](line-height)


Syntax
------



The `font` property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

 If `font` is specified as a system keyword, it must be one of: `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`.

 If `font` is specified as a shorthand for several font-related properties, then:

 * it must include values for:
	+ [`<font-size>`](font-size)
	+ [`<font-family>`](font-family)
* it may optionally include values for:
	+ [`<font-style>`](font-style)
	+ [`<font-variant>`](font-variant)
	+ [`<font-weight>`](font-weight)
	+ [`<font-stretch>`](font-stretch)
	+ [`<line-height>`](line-height)
* `font-style`, `font-variant` and `font-weight` must precede `font-size`
* `font-variant` may only specify the values defined in CSS 2.1, that is `normal` and `small-caps`
* `font-stretch` may only be a single keyword value.
* `line-height` must immediately follow `font-size`, preceded by "/", like this: "`16px/3`"
* `font-family` must be the last value specified.


### Values



 `<'font-style'>`  See the [`font-style`](font-style) CSS property.

  `<'font-variant'>`  See the [`font-variant`](font-variant) CSS property.

  `<'font-weight'>`  See the [`font-weight`](font-weight) CSS property.

  `<'font-stretch'>`  See the [`font-stretch`](font-stretch) CSS property.

  `<'font-size'>`  See the [`font-size`](font-size) CSS property.

  `<'line-height'>`  See the [`line-height`](line-height) CSS property.

  `<'font-family'>`  See the [`font-family`](font-family) CSS property.

   #### System font values

  `caption`  The system font used for captioned controls (e.g., buttons, drop-downs, etc.).

  `icon`  The system font used to label icons.

  `menu`  The system font used in menus (e.g., dropdown menus and menu lists).

  `message-box`  The system font used in dialog boxes.

  `small-caption`  The system font used for labeling small controls.

  `status-bar`  The system font used in window status bars.

  Prefixed system font keywords  Browsers often implement several more, prefixed, keywords: Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`font-style`](font-style): `normal`
* [`font-variant`](font-variant): `normal`
* [`font-weight`](font-weight): `normal`
* [`font-stretch`](font-stretch): `normal`
* [`font-size`](font-size): `medium`
* [`line-height`](line-height): `normal`
* [`font-family`](font-family): depends on user agent
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| Percentages | as each of the properties of the shorthand:* [`font-size`](font-size): refer to the parent element's font size
* [`line-height`](line-height): refer to the font size of the element itself
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`font-style`](font-style): as specified
* [`font-variant`](font-variant): as specified
* [`font-weight`](font-weight): the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value
* [`font-stretch`](font-stretch): as specified
* [`font-size`](font-size): as specified, but with relative lengths converted into absolute lengths
* [`line-height`](line-height): for percentage and length values, the absolute length, otherwise as specified
* [`font-family`](font-family): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`font-style`](font-style): discrete
* [`font-variant`](font-variant): discrete
* [`font-weight`](font-weight): a [font weight](font-weight#interpolation)
* [`font-stretch`](font-stretch): a [font stretch](font-stretch#interpolation)
* [`font-size`](font-size): a [length](length#interpolation)
* [`line-height`](line-height): either number or length
* [`font-family`](font-family): discrete
 |

Formal syntax
-------------



```
font =   
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) <'font-style'> [||](value_definition_syntax#double_bar) <font-variant-css2> [||](value_definition_syntax#double_bar) <'font-weight'> [||](value_definition_syntax#double_bar) <font-stretch-css3> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) <'font-size'> [[](value_definition_syntax#brackets) / <'line-height'> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) <'font-family'> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  caption                                             [|](value_definition_syntax#single_bar)  
  icon                                                [|](value_definition_syntax#single_bar)  
  menu                                                [|](value_definition_syntax#single_bar)  
  message-box                                         [|](value_definition_syntax#single_bar)  
  small-caption                                       [|](value_definition_syntax#single_bar)  
  status-bar                                            
  
<font-variant-css2> =   
  normal      [|](value_definition_syntax#single_bar)  
  small-caps    
  
<font-stretch-css3> =   
  normal           [|](value_definition_syntax#single_bar)  
  ultra-condensed  [|](value_definition_syntax#single_bar)  
  extra-condensed  [|](value_definition_syntax#single_bar)  
  condensed        [|](value_definition_syntax#single_bar)  
  semi-condensed   [|](value_definition_syntax#single_bar)  
  semi-expanded    [|](value_definition_syntax#single_bar)  
  expanded         [|](value_definition_syntax#single_bar)  
  extra-expanded   [|](value_definition_syntax#single_bar)  
  ultra-expanded     
  

```
Examples
--------


### Setting font properties



```
/\* Set the font size to 12px and the line height to 14px.
 Set the font family to sans-serif \*/
p {
  font: 12px/14px sans-serif;
}

/\* Set the font size to 80% of the parent element
 or default value (if no parent element present).
 Set the font family to sans-serif \*/
p {
  font: 80% sans-serif;
}

/\* Set the font weight to bold,
 the font-style to italic,
 the font size to large,
 and the font family to serif. \*/
p {
  font: bold italic large serif;
}

/\* Use the same font as the status bar of the window \*/
p {
  font: status-bar;
}

```
### Live sample




Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `font_stretch_support` | 60 | 79 | 43 | No | 47 | 11 | 60 | 60 | 43 | 44 | 11 | 8.0 |
| `system_fonts` | 1 | 12 | 1 | 4 | 6 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font>

@font-face
==========


The `@font-face` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.


Syntax
------



```
@font-face {
  font-family: "Trickster";
  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
}

```
### Descriptors


 [`ascent-override`](@font-face/ascent-override)  Defines the ascent metric for the font.

  [`descent-override`](@font-face/descent-override)  Defines the descent metric for the font.

  [`font-display`](@font-face/font-display)  Determines how a font face is displayed based on whether and when it is downloaded and ready to use.

  [`font-family`](@font-face/font-family)  Specifies a name that will be used as the font face value for font properties.

  [`font-stretch`](@font-face/font-stretch)  A [`font-stretch`](font-stretch) value. Accepts two values to specify a range that is supported by a font-face, for example `font-stretch: 50% 200%;`

  [`font-style`](@font-face/font-style)  A [`font-style`](font-style) value. Accepts two values to specify a range that is supported by a font-face, for example `font-style: oblique 20deg 50deg;`

  [`font-weight`](@font-face/font-weight)  A [`font-weight`](font-weight) value. Accepts two values to specify a range that is supported by a font-face, for example `font-weight: 100 400;`

  **Note:** The font-variant descriptor was removed from the specification in 2018. The [`font-variant`](font-variant) value property is supported, but there is no descriptor equivalent.

   `font-feature-settings`  Allows control over advanced typographic features in OpenType fonts.

  [`font-variation-settings`](@font-face/font-variation-settings)  Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.

  [`line-gap-override`](@font-face/line-gap-override)  Defines the line gap metric for the font.

  [`size-adjust`](@font-face/size-adjust)  Defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

  [`src`](@font-face/src)  Specifies references to font resources including hints about the font format and technology. It is required for the @font-face rule to be valid.

  [`unicode-range`](@font-face/unicode-range)  The range of Unicode code points to be used from the font.

  Description
-----------



It's common to use both `url()` and `local()` together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.

 If the `local()` function is provided, specifying a font name to look for on the user's device, and if the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) finds a match, that local font is used. Otherwise, the font resource specified using the `url()` function is downloaded and used.

  Browsers attempt to load resources in their list declaration order, so usually `local()` should be written before `url()`. Both functions are optional, so a rule block containing only one or more `local()` without `url()` is possible. If a more specific fonts with `format()` or `tech()` values are desired, these should be listed *before* versions that don't have these values, as the less-specific variant would otherwise be tried and used first. 

 By allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an internet connection.

  **Note:** Fallback strategies for loading fonts on older browsers are described in the [`src` descriptor page](@font-face/src#fallbacks_for_older_browsers).

  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](at-rule#conditional_group_rules).


### Font MIME Types




| Format | MIME type |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open Font Format | `font/woff` |
| Web Open Font Format 2 | `font/woff2` |

### Notes


* Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless [HTTP access controls](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) are used to relax this restriction.
* `@font-face` cannot be declared within a CSS selector. For example, the following will not work: 
```
.className {
  @font-face {
    font-family: "MyHelvetica";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url("MgOpenModernaBold.ttf");
    font-weight: bold;
  }
}

```
Formal syntax
-------------



```
@font-face =   
  @font-face { [<declaration-list>](declaration-list) }    
  

```
Examples
--------


### Specifying a downloadable font



This example specifies a downloadable font to use, applying it to the entire body of the document:

 
```
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    This is Bitstream Vera Serif Bold.
  </body>
</html>

```
 The output of this example code looks like so:



### Specifying local font alternatives



In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (both the full font name and the Postscript name are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

 
```
@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-face-rule](https://w3c.github.io/csswg-drafts/css-fonts/#font-face-rule) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `OpenType_CBDT_CBLC` | 66 | 79 | No | No | 53 | No | 66 | 66 | No | 47 | No | 9.0 |
| `OpenType_COLRv0` | 53 | 79 | 31 | No | 40 | 11.1 | 53 | 53 | 31 | 41 | 11.3 | 6.0 |
| `OpenType_COLRv1` | 98 | 98 | 105 | No | 84 | No | 98 | 98 | No | 68 | No | 18.0 |
| `OpenType_SBIX` | 66 | 79 | No | No | 53 | 9.1 | 66 | 66 | No | 47 | 9.3 | 9.0 |
| `OpenType_SVG` | No | No | 31 | No | No | 12.1 | No | No | 31 | No | 12.2 | No |
| `SVG_fonts` | 1–38 | No | No | No | 15–25 | 3.1 | ≤37–38 | 18–38 | No | 14–25 | 3 | 1.0–3.0 |
| `WOFF` | 6 | 12 | 3.5 | 9 | 11.1 | 5.1 | 4.4 | 18 | 4 | 11.1 | 5 | 1.0 |
| `WOFF_2` | 36 | 14 | 39 | No | 23 | 10Supported only on macOS 10.12 (Sierra) and later. | 37 | 36 | 39 | 24 | 10 | 3.0 |
| `@font-face` | 1 | 12 | 3.5 | 4 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `ascent-override` | 87 | 87 | 89 | No | 73 | No | 87 | 87 | 89 | 62 | No | 14.0 |
| `descent-override` | 87 | 87 | 89 | No | 73 | No | 87 | 87 | 89 | 62 | No | 14.0 |
| `font-display` | 60 | 79 | 58 | No | 47 | 11.1 | 60 | 60 | 58 | 44 | 11.3 | 11.0 |
| `font-family` | 4 | 12 | 3.5 | 6 | 10 | 3.1 | 2.2 | 18 | 4 | 10.1 | 2 | 1.0 |
| `font-feature-settings` | No | No | 34The [ISO/IEC CD 14496-22 3rd edition](https://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition) suggests using the `ssty` feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the [MathML](https://developer.mozilla.org/docs/Web/MathML) rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the `dtls` feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.15From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See [OpenType Font Feature support in Firefox 4](https://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/). | No | No | No | No | No | 34The [ISO/IEC CD 14496-22 3rd edition](https://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition) suggests using the `ssty` feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the [MathML](https://developer.mozilla.org/docs/Web/MathML) rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the `dtls` feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.15From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See [OpenType Font Feature support in Firefox 4](https://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/). | No | No | No |
| `font-stretch` | 62 | 17 | 62 | No | 49 | 10.1 | 62 | 62 | 62 | 41 | 10.3 | 6.0 |
| `font-style` | 4 | 12 | 3.5 | 4 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `font-variant` | 4 | 12 | 3.5 | 4 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `font-variation-settings` | No | No | 62 | No | No | No | No | No | 62 | No | No | No |
| `font-weight` | 4 | 12 | 3.5 | 4 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `line-gap-override` | 87 | 87 | 89 | No | 73 | No | 87 | 87 | 89 | 62 | No | 14.0 |
| `size-adjust` | 92 | 92 | 92 | No | 78 | No | 92 | 92 | 92 | No | No | 16.0 |
| `src` | 4 | 12 | 3.5 | 6 | 10 | 3.1 | 2.2 | 18 | 4 | 10.1 | 2 | 1.0 |
| `unicode-range` | 1 | 12 | 36 | 9 | 15 | 3.1 | ≤37 | 18 | 36 | 14 | 3 | 1.0 |


See also
--------


* [About WOFF](https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF)
* [FontSquirrel @font-face generator](https://www.fontsquirrel.com/tools/webfont-generator)
* [Beautiful fonts with @font-face](https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/)
* [Font Library](https://fontlibrary.org/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face>

font-language-override
======================



The `font-language-override` CSS property controls the use of language-specific glyphs in a typeface.

 
```
/\* Keyword value \*/
font-language-override: normal;

/\* <string> values \*/
font-language-override: "ENG"; /\* Use English glyphs \*/
font-language-override: "TRK"; /\* Use Turkish glyphs \*/

/\* Global values \*/
font-language-override: inherit;
font-language-override: initial;
font-language-override: revert;
font-language-override: revert-layer;
font-language-override: unset;

```
 By default, HTML's `lang` attribute tells browsers to display glyphs designed specifically for that language. For example, a lot of fonts have a special character for the digraph `fi` that merge the dot on the "i" with the "f." However, if the language is set to Turkish the typeface will likely know not to use the merged glyph; Turkish has two versions of the "i," one with a dot (`i`) and one without (`ı`), and using the ligature would incorrectly transform a dotted "i" into a dotless "i."

 The `font-language-override` property lets you override the typeface behavior for a specific language. This is useful, for example, when the typeface you're using lacks proper support for the language. For instance, if a typeface doesn't have proper rules for the Azeri language, you can force the font to use Turkish glyphs, which follow similar rules.



Syntax
------


The `font-language-override` property is specified as the keyword `normal` or a `<string>`.

### Values


 `normal`  Tells the browser to use font glyphs that are appropriate for the language specified by the `lang` attribute. This is the default value.

  [`<string>`](string)  Tells the browser to use font glyphs that are appropriate for the language specified by the string. The string must match a language tag found in the [OpenType language system](https://docs.microsoft.com/typography/opentype/spec/languagetags). For example, "ENG" is English, and "KOR" is Korean.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-language-override =   
  normal    [|](value_definition_syntax#single_bar)  
  [<string>](string)    
  

```
Examples
--------


### Using Danish glyphs



#### HTML

 
```
<p class="para1">Default language setting.</p>
<p class="para2">
  This is a string with the <code>font-language-override</code> set to Danish.
</p>

```
 #### CSS

 
```
p.para1 {
  font-language-override: normal;
}

p.para2 {
  font-language-override: "DAN";
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-language-override-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-language-override-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-language-override` | No | No | 344 | No | No | No | No | No | 344 | No | No | No |


See also
--------


* [`font-variant`](font-variant), [`font-variant-position`](font-variant-position), [`font-variant-east-asian`](font-variant-east-asian), [`font-variant-caps`](font-variant-caps), [`font-variant-ligatures`](font-variant-ligatures), [`font-variant-numeric`](font-variant-numeric), [`font-variant-alternates`](font-variant-alternates), [`font-synthesis`](font-synthesis), [`font-kerning`](font-kerning).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override>

font-optical-sizing
===================


The `font-optical-sizing` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether text rendering is optimized for viewing at different sizes.


Try it
------


Syntax
------



```
/\* keyword values \*/
font-optical-sizing: none;
font-optical-sizing: auto; /\* default \*/

/\* Global values \*/
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: revert;
font-optical-sizing: revert-layer;
font-optical-sizing: unset;

```
### Values


 none  The browser will not modify the shape of glyphs for optimal viewing.

  auto  The browser will modify the shape of glyphs for optimal viewing.

  Description
-----------



Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by `opsz` in [`font-variation-settings`](font-variation-settings).

 When optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-optical-sizing =   
  auto  [|](value_definition_syntax#single_bar)  
  none    
  

```
Examples
--------


### Disabling optical sizing




```
<p class="optical-sizing">
  This paragraph is optically sized. This is the default across browsers.
</p>

<p class="no-optical-sizing">
  This paragraph is not optically sized. You should see a difference in
  supporting browsers.
</p>

```
 
```
@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}

```
  **Note:** The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can [download it on GitHub](https://github.com/googlefonts/amstelvar/releases).

 
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-optical-sizing-def](https://w3c.github.io/csswg-drafts/css-fonts/#font-optical-sizing-def) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-optical-sizing` | 79 | 17 | 62 | No | 66 | 11 | 79 | 79 | 62 | No | 11 | 12.0 |


See also
--------


* [`font-size`](font-size)
* [`font-size-adjust`](font-size-adjust)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing>

font-family
===========


The `font-family` CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.


Try it
------



 Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a [`@font-face`](@font-face) at-rule.

 It is often convenient to use the shorthand property [`font`](font) to set `font-size` and other font related properties all at once.

 You should always include at least one generic family name in a `font-family` list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

 The `font-family` property specifies a list of fonts, from highest priority to lowest. Font selection *does not* stop at the first font in the list that is on the user's system. Rather, font selection is done *one character at a time*, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some [styles](font-style), [variants](font-variant), or [sizes](font-size), those properties may also influence which font family is chosen.


Syntax
------




```
/\* A font family name and a generic family name \*/
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/\* A generic family name only \*/
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

/\* Global values \*/
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;

```
 The `font-family` property lists one or more font families, separated by commas. Each font family is specified as either a `<family-name>` or a `<generic-name>` value.

 The example below lists two font families, the first with a `<family-name>` and the second with a `<generic-name>`:

 
```
font-family: "Gill Sans Extrabold", sans-serif;

```

### Values


 `<family-name>`  The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted. For example: "Comic Sans MS".

  `<generic-name>`  Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

  `serif`  Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.

 For example: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

  `sans-serif`  Glyphs have stroke endings that are plain.

 For example: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

  `monospace`  All glyphs have the same fixed width.

 For example: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

  `cursive`  Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work.

 For example: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.

  `fantasy`  Fantasy fonts are primarily decorative fonts that contain playful representations of characters.

 For example: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

  `system-ui`  Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

  `ui-serif`  The default user interface serif font.

  `ui-sans-serif`  The default user interface sans-serif font.

  `ui-monospace`  The default user interface monospace font.

  `ui-rounded`  The default user interface font that has rounded features.

  `math`  This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.

  `emoji`  Fonts that are specifically designed to render emoji.

  `fangsong`  A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents.

    ### Valid family names



Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

 It is a **good practice** to quote font family names that contain white space, digits, or punctuation characters other than hyphens.

 For example, the following declarations are valid:

 
```
font-family: "Goudy Bookletter 1911", sans-serif;

```
 The following declarations are **invalid**:

 
```
font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

```
 The following example is technically **valid** but is not recommended:

 
```
font-family: Gill Sans Extrabold, sans-serif;

```

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | depends on user agent |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-family =   
  [[](value_definition_syntax#brackets) [<family-name>](family-name) [|](value_definition_syntax#single_bar) [<generic-family>](generic-family) []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Some common font families




```
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # generic-font-families](https://w3c.github.io/csswg-drafts/css-fonts/#generic-font-families) |
| [CSS Fonts Module Level 4 # font-family-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-family-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-family` | 1 | 12 | 1Not supported on `option` elements. See [bug 1536148](https://bugzil.la/1536148). | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `math` | 109103 | 109103 | No | No | 9589 | No | 109 | 109103 | No | 74 | No | No |
| `system-ui` | 56 | 79 | 9243Supported on macOS only. | No | 43 | 119 | 56 | 56 | 92 | 43 | 119 | 6.0 |


See also
--------


* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

font-size-adjust
================



The `font-size-adjust` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).

 
```
/\* Use the specified font size \*/
font-size-adjust: none;

/\* Use a font size that makes lowercase
 letters half the specified font size \*/
font-size-adjust: 0.5;

/\* Two values - added in the Level 5 spec \*/
font-size-adjust: ex-height 0.5;

/\* Global values \*/
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
font-size-adjust: revert-layer;
font-size-adjust: unset;

```
 The property 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. Legibility can become an issue when the first-choice [`font-family`](font-family) is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

 To use this property in a way that is compatible with browsers that do not support `font-size-adjust`, it is specified as a number that the [`font-size`](font-size) property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, consider this style sheet:

 
```
font-size: 14px;
font-size-adjust: 0.5;

```
 It is really specifying that the lowercase letters of the font should be `7px` high (0.5 × 14px). This will still produce reasonable results in browsers that do not support `font-size-adjust`, where a `14px` font will be used.



Syntax
------


### Values


 `none`  Choose the size of the font based only on the [`font-size`](font-size) property.

  ex-height | cap-height | ch-width | ic-width | ic-height  Specifies the font metric to normalize on. Defaults to `ex-height`. One of:

  `ex-height`  Normalize the aspect value of the fonts, using the x-height divided by the font size.

  `cap-height`  Normalize the cap-height of the fonts, using the cap-height by the font size.

  `ch-width`  Normalize the horizontal narrow pitch of the fonts, using the advance width of "0" (ZERO, U+0030) divided by the font size.

  `ic-width`  Normalize the horizontal wide pitch of the font, using the advance width of "水" (CJK water ideograph, U+6C34) divided by the font size.

  `ic-height`  Normalize the vertical wide pitch of the font, using the advance height of "水" (CJK water ideograph, U+6C34) divided by the font size.

    [`<number>`](number)  Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the [`font-size`](font-size).

 The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice [`font-family`](font-family). This means that the first-choice font, when available, will appear the same size in browsers, whether or not they support `font-size-adjust`.

 `0` yields text of zero height (hidden text).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | a [number](number#interpolation) |

Formal syntax
-------------



```
font-size-adjust =   
  none            [|](value_definition_syntax#single_bar)  
  [<number [0,∞]>](number)    
  

```
Examples
--------


### Adjusting lower-case letter sizes



#### HTML

 
```
<p class="times">
  This text uses the Times font (10px), which is hard to read in small sizes.
</p>
<p class="verdana">
  This text uses the Verdana font (10px), which has relatively large lowercase
  letters.
</p>
<p class="adjtimes">
  This is the 10px Times, but now adjusted to the same aspect ratio as the
  Verdana.
</p>

```
 #### CSS

 
```
.times {
  font-family: Times, serif;
  font-size: 10px;
}

.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}

.adjtimes {
  font-family: Times, serif;
  font-size-adjust: ex-height 0.58;
  font-size: 10px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 5 # font-size-adjust-prop](https://w3c.github.io/csswg-drafts/css-fonts-5/#font-size-adjust-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-size-adjust` | No | No | 3Before Firefox 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` ([bug 1144885](https://bugzil.la/1144885)).1–3Only supported on Windows. | No | No | 16.4 | No | No | 4Before Firefox 40, `font-size-adjust: 0` was incorrectly interpreted as `font-size-adjust: none` ([bug 1144885](https://bugzil.la/1144885)). | No | 16.4 | No |
| `two-values` | No | No | 92 | No | No | No | No | No | 92 | No | No | No |


See also
--------


* [`font-size`](font-size)
* [`font-weight`](font-weight)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
* [`size-adjust`](@font-face/size-adjust) descriptor


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust>

font-synthesis
==============


The `font-synthesis` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property controls which missing typefaces, bold, italic, or small-caps, may be synthesized by the browser.


Try it
------


Syntax
------



```
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: small-caps;
font-synthesis: weight style small-caps;

/\* Global values \*/
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: revert-layer;
font-synthesis: unset;

```
### Values


 `none`  Indicates that no bold, italic, nor small-caps typeface may be synthesized.

  `weight`  Indicates that a bold typeface may be synthesized if needed.

  `style`  Indicates that an italic typeface may be synthesized if needed.

  `small-caps`  Indicates that a small-caps typeface may be synthesized if needed.

  Description
-----------


Most standard Western fonts include italic and bold variants, and some fonts include a small-caps variant. However, many fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `weight style` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-synthesis =   
  none                               [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) weight [||](value_definition_syntax#double_bar) style [||](value_definition_syntax#double_bar) small-caps []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Disabling font synthesis



#### HTML

 
```
<em class="syn">Synthesize me! 站直。</em>
<br />
<em class="no-syn">Don't synthesize me! 站直。</em>

```
 #### CSS

 
```
em {
  font-weight: bold;
}
.syn {
  font-synthesis: style weight small-caps;
}
.no-syn {
  font-synthesis: none;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-synthesis](https://w3c.github.io/csswg-drafts/css-fonts/#font-synthesis) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-synthesis` | 97 | 97 | 34 | No | 83 | 9 | 97 | 97 | 34 | No | 9 | 18.0 |
| `small-caps` | 97 | 97 | 93 | No | 83 | 10.1 | 97 | 97 | 93 | No | 10.3 | 18.0 |


See also
--------


* [`font-style`](font-style)
* [`font-weight`](font-weight)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis>

font-variant-caps
=================


The `font-variant-caps` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property controls the use of alternate glyphs for capital letters.


Try it
------



 When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.

 Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.


### Language-specific rules



This property accounts for language-specific case mapping rules. For example:

 * In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of `i` (one with the dot, one without) and two case pairings: `i`/`İ` and `ı`/`I`.
* In German (de), the `ß` may become `ẞ` (U+1E9E) in uppercase.
* In Greek (el), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (`άι`/`ΑΪ`).


Syntax
------




```
/\* Keyword values \*/
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/\* Global values \*/
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;

```
 The `font-variant-caps` property is specified using a single keyword value from the list below. In each case, if the font doesn't support the OpenType value, then it synthesizes the glyphs.


### Values


 `normal`  Deactivates of the use of alternate glyphs.

  `small-caps`  Enables display of small capitals (OpenType feature: `smcp`). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

  `all-small-caps`  Enables display of small capitals for both upper and lowercase letters (OpenType features: `c2sc`, `smcp`).

  `petite-caps`  Enables display of petite capitals (OpenType feature: `pcap`).

  `all-petite-caps`  Enables display of petite capitals for both upper and lowercase letters (OpenType features: `c2pc`, `pcap`).

  `unicase`  Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: `unic`).

  `titling-caps`  Enables display of titling capitals (OpenType feature: `titl`). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

  Accessibility concerns
----------------------



Large sections of text set with a `font-variant` value of `all-small-caps` or `all-petite-caps` may be difficult for people with cognitive concerns such as Dyslexia to read.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant-caps =   
  normal           [|](value_definition_syntax#single_bar)  
  small-caps       [|](value_definition_syntax#single_bar)  
  all-small-caps   [|](value_definition_syntax#single_bar)  
  petite-caps      [|](value_definition_syntax#single_bar)  
  all-petite-caps  [|](value_definition_syntax#single_bar)  
  unicase          [|](value_definition_syntax#single_bar)  
  titling-caps       
  

```
Examples
--------


### Setting the small-caps font variant



#### HTML

 
```
<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>

```
 #### CSS

 
```
.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-caps-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-caps-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-caps` | 52 | 79 | 34 | No | 39 | 9.1 | 52 | 52 | 34 | 41 | 9.3 | 6.0 |


See also
--------


* [`font-variant`](font-variant)
* [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps>

font-size
=========


The `font-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the size of the font. Changing the font size also updates the sizes of the font size-relative [`<length>`](length) units, such as `em`, `ex`, and so forth.


Try it
------


Syntax
------




```
/\* <absolute-size> values \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/\* <relative-size> values \*/
font-size: smaller;
font-size: larger;

/\* <length> values \*/
font-size: 12px;
font-size: 0.8em;

/\* <percentage> values \*/
font-size: 80%;

/\* math value \*/
font-size: math;

/\* Global values \*/
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

```
 The `font-size` property is specified in one of the following ways:

 * As one of the absolute-size, relative-size or `math` keywords
* As a `<length>` or a `<percentage>`, relative to the element's font size.


### Values



 
`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`
  Absolute-size keywords, based on the user's default font size (which is `medium`).

  
`larger`, `smaller`
  Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.

  [`<length>`](length)  A positive [`<length>`](length) value. For most font-relative units (such as `em` and `ex`), the font size is relative to the parent element's font size.

 For font-relative units that are root-based (such as `rem`), the font size is relative to the size of the font used by the [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) (root) element.

  [`<percentage>`](percentage)  A positive [`<percentage>`](percentage) value, relative to the parent element's font size.

    **Note:** To maximize accessibility, it is generally best to use values that are relative to the user's default font size.

  * `math`  Experimental  Special [mathematical scaling rules](https://w3c.github.io/mathml-core/#the-math-script-level-property) must be applied when determining the computed value of the `font-size` property.


Description
-----------


There are several ways to specify the font size, including keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs of the particular web page.

### Keywords


Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

### Pixels



Setting the font size in pixel values (`px`) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

 Font sizing settings can also be used in combination. For example, if a parent element is set to `16px` and its child element is set to `larger`, the child element displays larger than the parent element on the page.

  **Note:** Defining font sizes in `px` is *[not accessible](https://en.wikipedia.org/wiki/Web_accessibility)*, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.

 
### Ems



Using an `em` value creates a dynamic or computed font size (historically the `em` unit was derived from the width of a capital "M" in a given typeface.). The numeric value acts as a multiplier of the `font-size` property of the element on which it is used. Consider this example:

 
```
p {
  font-size: 2em;
}

```
 In this case, the font size of `<p>` elements will be double the computed `font-size` inherited by `<p>` elements. By extension, a `font-size` of `1em` equals the computed `font-size` of the element on which it is used.

 If a `font-size` has not been set on any of the `<p>`'s ancestors, then `1em` will equal the default browser `font-size`, which is usually `16px`. So, by default `1em` is equivalent to `16px`, and `2em` is equivalent to `32px`. If you were to set a `font-size` of 20px on the `<body>` element say, then `1em` on the `<p>` elements would instead be equivalent to `20px`, and `2em` would be equivalent to `40px`.

 In order to calculate the `em` equivalent for any pixel value required, you can use this formula:

 
```
em = desired element pixel value / parent element font-size in pixels

```
 For example, suppose the `font-size` of the `<body>` of the page is set to `16px`. If the font-size you want is `12px`, then you should specify `0.75em` (because 12/16 = 0.75). Similarly, if you want a font size of `10px`, then specify `0.625em` (10/16 = 0.625); for `22px`, specify `1.375em` (22/16).

 The `em` is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.

 One important fact to keep in mind: em values compound. Take the following HTML and CSS:

 
```
html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}

```
 
```
<div>
  <span>Outer <span>inner</span> outer</span>
</div>

```
 The result is:


 Assuming that the browser's default `font-size` is 16px, the words "outer" would be rendered at 25.6px, but the word "inner" would be rendered at 40.96px. This is because the inner [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)'s `font-size` is 1.6em which is relative to its parent's `font-size`, which is in turn relative to its parent's `font-size`. This is often called **compounding**.


### Rems



`rem` values were invented in order to sidestep the compounding problem. `rem` values are relative to the root `html` element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

 The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to `rem`.

 
```
html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}

```
 Then we apply this CSS to the same HTML, which looks like this:

 
```
<span>Outer <span>inner</span> outer</span>

```

 In this example, the words "outer inner outer" are all displayed at 25.6px (assuming that the browser's `font-size` has been left at the default value of 16px).


### Ex



Like the `em` unit, an element's `font-size` set using the `ex` unit is computed or dynamic. It behaves in exactly the same way, except that when setting the `font-size` property using `ex` units, the `font-size` equals the x-height of the [first available font](https://www.w3.org/TR/css-fonts-3/#first-available-font) used on the page. The number value multiplies the element's inherited `font-size` and the `font-size` compounds relatively.

 See the W3C Editor's Draft for a more detailed description of [font-relative length units](https://drafts.csswg.org/css-values-4/#font-relative-length) such as `ex`.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| Percentages | refer to the parent element's font size |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
font-size =   
  [<absolute-size>](absolute-size)            [|](value_definition_syntax#single_bar)  
  [<relative-size>](relative-size)            [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)  [|](value_definition_syntax#single_bar)  
  math                         
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting font sizes



#### CSS

 
```
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

```
 #### HTML

 
```
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-size-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-size-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-size` | 1 | 12 | 1 | 5.5 | 7 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `math` | 10987 | 10987 | No | No | 9573 | No | 4 | 10987 | No | 74 | No | No |
| `rem_values` | 31 | 12 | 31["Before Firefox 57, animations using em units are not affected by changes to the `font-size` of the animated element's parent ([bug 1254424](https://bugzil.la/1254424)).", "Before Firefox 57, some language settings' inherited `font-size` is smaller than expected ([bug 1391341](https://bugzil.la/1391341))."] | 9 | 28 | 7 | 4 | 42 | 31 | 28 | 7 | 4.0 |
| `xxx-large` | 79 | 79 | 70 | No | No | 16.4 | 79 | 79 | No | No | 16.4 | 12.0 |


See also
--------


* [`font-size-adjust`](font-size-adjust)
* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [`math-depth`](math-depth)
* [`math-style`](math-style)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-size>

font-stretch
============


The `font-stretch` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property selects a normal, condensed, or expanded face from a font.


Try it
------


Syntax
------




```
/\* Keyword values \*/
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/\* Percentage values \*/
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/\* Global values \*/
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

```
 This property may be specified as a single keyword value or a single [`<percentage>`](percentage) value.


### Values


 `normal`  Specifies a normal font face.

  
`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`
  Specifies a more condensed font face than normal, with `ultra-condensed` as the most condensed.

  
`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
  Specifies a more expanded font face than normal, with `ultra-expanded` as the most expanded.

  `<percentage>`  A [`<percentage>`](percentage) value between 50% and 200% (inclusive). Negative values are not allowed for this property.

  ### Keyword to numeric mapping



The table below shows the mapping between keyword values and numeric percentages:

 

| Keyword | Percentage |
| --- | --- |
| `ultra-condensed` | 50% |
| `extra-condensed` | 62.5% |
| `condensed` | 75% |
| `semi-condensed` | 87.5% |
| `normal` | 100% |
| `semi-expanded` | 112.5% |
| `expanded` | 125% |
| `extra-expanded` | 150% |
| `ultra-expanded` | 200% |


Description
-----------



Some font families offer additional faces in which the characters are narrower than the normal face (*condensed* faces) or wider than the normal face (*expanded* faces).

 You can use `font-stretch` to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.


### Font face selection



The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.

 The table below demonstrates the effect of supplying various different percentage values of `font-stretch` on two different fonts:


 * [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font.
* [Inconsolata](https://fonts.google.com/specimen/Inconsolata) is a variable font that offers a continuous range of widths from 50% to 200%.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | a [font stretch](font-stretch#Interpolation) |

Formal syntax
-------------



```
font-stretch =   
  normal              [|](value_definition_syntax#single_bar)  
  [<percentage [0,∞]>](percentage)  [|](value_definition_syntax#single_bar)  
  ultra-condensed     [|](value_definition_syntax#single_bar)  
  extra-condensed     [|](value_definition_syntax#single_bar)  
  condensed           [|](value_definition_syntax#single_bar)  
  semi-condensed      [|](value_definition_syntax#single_bar)  
  semi-expanded       [|](value_definition_syntax#single_bar)  
  expanded            [|](value_definition_syntax#single_bar)  
  extra-expanded      [|](value_definition_syntax#single_bar)  
  ultra-expanded        
  

```
Examples
--------


### Setting font stretch percentages


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-stretch-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-stretch-prop) |


 **Note:** The `font-stretch` property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.

 
Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-stretch` | 60A `font-stretch` definition must be added to the `@font-face` before this property will function. | 12 | 9 | 9 | 47A `font-stretch` definition must be added to the `@font-face` before this property will function. | 11 | 60A `font-stretch` definition must be added to the `@font-face` before this property will function. | 60A `font-stretch` definition must be added to the `@font-face` before this property will function. | 9 | 44A `font-stretch` definition must be added to the `@font-face` before this property will function. | 11 | 8.0A `font-stretch` definition must be added to the `@font-face` before this property will function. |
| `percentage` | 62 | 18 | 61 | No | 49 | 11.1 | 62 | 62 | 61 | 46 | 11.3 | 8.0 |


See also
--------


* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch>

font-stretch
============



The `font-stretch` CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the [`@font-face`](../@font-face) rule.

 For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-stretch` descriptor to explicitly specify the font face's stretch. The values for the CSS descriptor is same as that of its corresponding font property.



Syntax
------




```
/\* Single values \*/
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/\* multiple values \*/
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;

```
 The `font-stretch` property is described using any one of the values listed below.


### Values



 `normal`  Specifies a normal font face.

  
`semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`
  Specifies a more condensed font face than normal, with ultra-condensed as the most condensed.

  
`semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
  Specifies a more expanded font face than normal, with ultra-expanded as the most expanded.

  `<percentage>`  A [`<percentage>`](../percentage) value between 50% and 200% (inclusive). Negative values are not allowed for this property.

   In earlier versions of the `font-stretch` specification, the property accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `<percentage>` value as well. This enables variable fonts to offer something more like a continuum of character widths. For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying widths.

 If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.


### Keyword to numeric mapping



The table below shows the mapping between keyword values and numeric percentages:

 

| Keyword | Percentage |
| --- | --- |
| `ultra-condensed` | 50% |
| `extra-condensed` | 62.5% |
| `condensed` | 75% |
| `semi-condensed` | 87.5% |
| `normal` | 100% |
| `semi-expanded` | 112.5% |
| `expanded` | 125% |
| `extra-expanded` | 150% |
| `ultra-expanded` | 200% |


### Variable fonts



Most fonts have a particular width which corresponds to one of the keyterm values. However some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. For this, percentage ranges are useful.

 For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying glyph widths.


Accessibility concerns
----------------------



People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low contrast color ratio](../color#accessibility_concerns).

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
font-stretch =   
  auto                   [|](../value_definition_syntax#single_bar)  
  <'font-stretch'>[{1,2}](../value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting a percentage range for font-stretch



The following find a local Open Sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states.

 
```
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
      format("woff");
  font-stretch: 87.5% 112.5%;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-prop-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-prop-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-stretch` | 62 | 17 | 62 | No | 49 | 10.1 | 62 | 62 | 62 | 41 | 10.3 | 6.0 |


See also
--------


* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-weight`](font-weight)
* [`font-style`](font-style)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`src`](src)
* [`unicode-range descriptor`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch>

font-style
==========


The `font-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether a font should be styled with a normal, italic, or oblique face from its [`font-family`](font-family).


Try it
------



 **Italic** font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while **oblique** faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use [`font-synthesis`](font-synthesis) to control this behavior).


Syntax
------




```
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/\* Global values \*/
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;

```
 The `font-style` property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is `oblique`.


### Values


 `normal`  Selects a font that is classified as `normal` within a [`font-family`](font-family).

  `italic`  Selects a font that is classified as `italic`. If no italic version of the face is available, one classified as `oblique` is used instead. If neither is available, the style is artificially simulated.

  `oblique`  Selects a font that is classified as `oblique`. If no oblique version of the face is available, one classified as `italic` is used instead. If neither is available, the style is artificially simulated.

  
`oblique` [`<angle>`](angle)
  Selects a font classified as `oblique`, and additionally specifies an angle for the slant of the text. If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of `-90deg` to `90deg` inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.

 In general, for a requested angle of 14 degrees or greater, larger angles are preferred; otherwise, smaller angles are preferred (see the spec's [font matching section](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) for the precise algorithm).

  ### Variable fonts



Variable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the `<angle>` modifier for the `oblique` keyword.

 For TrueType or OpenType variable fonts, the `"slnt"` variation is used to implement varying slant angles for oblique, and the `"ital"` variation with a value of 1 is used to implement italic values. See [`font-variation-settings`](font-variation-settings).

  **Note:** For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-style: oblique` can accept an `<angle>`. The demo loads with `font-style: oblique 23deg;`. Change the value to see the slant of the text change.

 

Accessibility concerns
----------------------



Large sections of text set with a `font-style` value of `italic` may be difficult for people with cognitive concerns such as Dyslexia to read.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-style =   
  normal                           [|](value_definition_syntax#single_bar)  
  italic                           [|](value_definition_syntax#single_bar)  
  oblique [<angle [-90deg,90deg]>](angle)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Font styles




```
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-style-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-style-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-style` | 1 | 12 | 1Before Firefox 44, `oblique` was not distinguished from `italic`. | 4 | 7 | 1 | 4.4 | 18 | 4Before Firefox 44, `oblique` was not distinguished from `italic`. | 10.1 | 1 | 1.0 |
| `oblique-angle` | No | No | 61 | No | No | preview | No | No | 61 | No | No | No |


See also
--------


* [`font-family`](font-family)
* [`font-weight`](font-weight)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-style>

font-style
==========



The `font-style` CSS descriptor allows authors to specify font styles for the fonts specified in the [`@font-face`](../@font-face) rule.

 For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-style` descriptor to explicitly specify the font face's style. The values for the CSS descriptor is same as that of its corresponding font property.



Syntax
------



```
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;

```
### Values


 `normal`  Selects the normal version of the font-family.

  `italic`  Specifies that font-face is an italicized version of the normal font.

  `oblique`  Specifies that the font-face is an artificially sloped version of the normal font.

  
`oblique` with angle  Selects a font classified as `oblique`, and additionally specifies an angle for the slant of the text.

  
`oblique` with angle range  Selects a font classified as `oblique`, and additionally specifies a range of allowable angle for the slant of the text. Note that a range is only supported when the `font-style` is `oblique`; for `font-style: normal` or `italic`, no second value is allowed.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
font-style =   
  auto                       [|](../value_definition_syntax#single_bar)  
  normal                     [|](../value_definition_syntax#single_bar)  
  italic                     [|](../value_definition_syntax#single_bar)  
  oblique [[](../value_definition_syntax#brackets) [<angle>](../angle)[{1,2}](../value_definition_syntax#curly_braces) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark)    
  

```
Examples
--------


### Specifying an italic font style



As an example, consider the garamond font family, in its normal form, we get the following result:

 
```
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}

```
  ![unstyled Garamond] 

 The italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.

  ![artificially sloped garamond] 

 On the other hand, if a true italicized version of the font family exists, we can include it in the `src` descriptor and specify the font style as italic, so that it is clear that the font is italicized. True italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. These fonts are specially created by font designers and are **not** artificially sloped.

 
```
@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  font-style: italic;
}

```
  ![italic garamond] 


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-prop-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-prop-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-style` | 4 | 12 | 3.5 | 4 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-stretch`](font-stretch)
* [`font-weight`](font-weight)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`src`](src)
* [`unicode-range`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style>

font-variant
============



The `font-variant` CSS [shorthand property](shorthand_properties) allows you to set all the font variants for a font.

 You can also set the CSS Level 2 (Revision 1) values of `font-variant`, (that is, `normal` or `small-caps`), by using the [`font`](font) shorthand.



Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)


Syntax
------



```
font-variant: small-caps;
font-variant: common-ligatures small-caps;

/\* Global values \*/
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;

```
### Values


 `normal`  Specifies a normal font face. Each longhand property has an initial value of `normal`.

  `none`  Sets the value of the [`font-variant-ligatures`](font-variant-ligatures) as `none` and the values of the other longhand properties as `normal`, their initial value.

  
`<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`
  Specifies the keywords related to the [`font-variant-ligatures`](font-variant-ligatures) longhand property. The possible values are `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, and `no-contextual`.

  
`stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`
  Specifies the keywords and functions related to the [`font-variant-ligatures`](font-variant-ligatures) longhand property.

  
`small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`
  Specifies the keywords and functions related to the [`font-variant-caps`](font-variant-caps) longhand property.

  
`<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`
  Specifies the keywords related to the [`font-variant-numeric`](font-variant-numeric) longhand property. The possible values are `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, and `slashed-zero`.

  
`<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`
  Specifies the keywords related to the [`font-variant-east-asian`](font-variant-east-asian) longhand property. The possible values are `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, and `ruby`.

  
`sub`, `super`
  Specifies the keywords and functions related to the [`font-variant-position`](font-variant-position) longhand property.

  
`text`, `emoji`, `unicode`
  Specifies the keywords and functions related to the [`font-variant-emoji`](font-variant-emoji) longhand property.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant =   
  normal                                              [|](value_definition_syntax#single_bar)  
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) <common-lig-values> [||](value_definition_syntax#double_bar) <discretionary-lig-values> [||](value_definition_syntax#double_bar) <historical-lig-values> [||](value_definition_syntax#double_bar) <contextual-alt-values> []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) small-caps [|](value_definition_syntax#single_bar) all-small-caps [|](value_definition_syntax#single_bar) petite-caps [|](value_definition_syntax#single_bar) all-petite-caps [|](value_definition_syntax#single_bar) unicase [|](value_definition_syntax#single_bar) titling-caps []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) stylistic( <feature-value-name> ) [||](value_definition_syntax#double_bar) historical-forms [||](value_definition_syntax#double_bar) styleset( <feature-value-name>[#](value_definition_syntax#hash_mark) ) [||](value_definition_syntax#double_bar) character-variant( <feature-value-name>[#](value_definition_syntax#hash_mark) ) [||](value_definition_syntax#double_bar) swash( <feature-value-name> ) [||](value_definition_syntax#double_bar) ornaments( <feature-value-name> ) [||](value_definition_syntax#double_bar) annotation( <feature-value-name> ) []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) <numeric-figure-values> [||](value_definition_syntax#double_bar) <numeric-spacing-values> [||](value_definition_syntax#double_bar) <numeric-fraction-values> [||](value_definition_syntax#double_bar) ordinal [||](value_definition_syntax#double_bar) slashed-zero []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) <east-asian-variant-values> [||](value_definition_syntax#double_bar) <east-asian-width-values> [||](value_definition_syntax#double_bar) ruby []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) sub [|](value_definition_syntax#single_bar) super []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) text [|](value_definition_syntax#single_bar) emoji [|](value_definition_syntax#single_bar) unicode []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)    
  
<common-lig-values> =   
  common-ligatures     [|](value_definition_syntax#single_bar)  
  no-common-ligatures    
  
<discretionary-lig-values> =   
  discretionary-ligatures     [|](value_definition_syntax#single_bar)  
  no-discretionary-ligatures    
  
<historical-lig-values> =   
  historical-ligatures     [|](value_definition_syntax#single_bar)  
  no-historical-ligatures    
  
<contextual-alt-values> =   
  contextual     [|](value_definition_syntax#single_bar)  
  no-contextual    
  
<feature-value-name> =   
  [<ident>](ident)    
  
<numeric-figure-values> =   
  lining-nums    [|](value_definition_syntax#single_bar)  
  oldstyle-nums    
  
<numeric-spacing-values> =   
  proportional-nums  [|](value_definition_syntax#single_bar)  
  tabular-nums         
  
<numeric-fraction-values> =   
  diagonal-fractions  [|](value_definition_syntax#single_bar)  
  stacked-fractions     
  
<east-asian-variant-values> =   
  jis78        [|](value_definition_syntax#single_bar)  
  jis83        [|](value_definition_syntax#single_bar)  
  jis90        [|](value_definition_syntax#single_bar)  
  jis04        [|](value_definition_syntax#single_bar)  
  simplified   [|](value_definition_syntax#single_bar)  
  traditional    
  
<east-asian-width-values> =   
  full-width          [|](value_definition_syntax#single_bar)  
  proportional-width    
  

```
Examples
--------


### Setting the small-caps font variant



#### HTML

 
```
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

```
 #### CSS

 
```
p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 11 | 1 | 1.0 |
| `css_fonts_shorthand` | 52 | 79 | 34 | No | 39 | 9.1 | 52 | 52 | 34 | 41 | 9.3 | 6.0 |
| `font-variant-emoji` | No | No | 108 | No | No | No | No | No | 108 | No | No | No |
| `greek_accented_characters` | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | No | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | No | NoSome operating systems may correctly omit accents in all-uppercase Greek. | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | NoSome operating systems may correctly omit accents in all-uppercase Greek text. | No | NoSome operating systems may correctly omit accents in all-uppercase Greek text. |
| `turkic_is` | 31 | 12 | 14 | 4 | 18 | 8 | 4.4.3 | 31 | 14 | 18 | 8 | 2.0 |
| `uppercase_eszett` | NoSome operating systems may capitalize `ß` as `SS`. | NoSome operating systems may capitalize `ß` as `SS`. | NoSome operating systems may capitalize `ß` as `SS`. | No | NoSome operating systems may capitalize `ß` as `SS`. | No | NoSome operating systems may capitalize `ß` as `SS`. | NoSome operating systems may capitalize `ß` as `SS`. | NoSome operating systems may capitalize `ß` as `SS`. | NoSome operating systems may capitalize `ß` as `SS`. | No | NoSome operating systems may capitalize `ß` as `SS`. |


See also
--------


* [`text-transform`](text-transform)
* [`text-combine-upright`](text-combine-upright)
* [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant>

font-variant-position
=====================



The `font-variant-position` CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

 The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in [`<sub>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) and [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) elements.

 
```
/\* Keyword values \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

/\* Global values \*/
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: revert;
font-variant-position: revert-layer;
font-variant-position: unset;

```
 When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

 These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.



Syntax
------


The `font-variant-position` property is specified as one of the keyword values listed below.

### Values


 `normal`  Deactivates alternate superscript and subscript glyphs.

  `sub`  Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

  `super`  Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant-position =   
  normal  [|](value_definition_syntax#single_bar)  
  sub     [|](value_definition_syntax#single_bar)  
  super     
  

```
Examples
--------


### Setting superscript and subscript forms



#### HTML

 
```
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>

```
 #### CSS

 
```
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-position-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-position-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-position` | NoSee [bug 1212668](https://crbug.com/1212668). | NoSee [bug 1212668](https://crbug.com/1212668). | 34 | No | NoSee [bug 1212668](https://crbug.com/1212668). | 9.1 | NoSee [bug 1212668](https://crbug.com/1212668). | NoSee [bug 1212668](https://crbug.com/1212668). | 34 | NoSee [bug 1212668](https://crbug.com/1212668). | 9.3 | NoSee [bug 1212668](https://crbug.com/1212668). |


See also
--------


* [`font-variant`](font-variant)
* [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position>

font-variation-settings
=======================


The `font-variation-settings` CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the [`@font-face`](../@font-face) rule.


Syntax
------



```
/\* Use the default settings \*/
font-variation-settings: normal;

/\* Set values for OpenType axis names \*/
font-variation-settings: "xhgt" 0.7;

```
### Values


 `normal`  Text is laid out using default settings.

  `<string> <number>`  When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a [`<string>`](../string) of 4 ASCII characters, followed by a [`<number>`](../number) indicating the axis value. If the `<string>` has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The `<number>` can be fractional or negative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
font-variation-settings =   
  normal                  [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) [<string>](../string) [<number>](../number) []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Setting font weight and stretch in a @font-face rule



```
@font-face {
  font-family: "OpenTypeFont";
  src: url("open\_type\_font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wght" 400, "wdth" 300;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-rend-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-rend-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variation-settings` | No | No | 62 | No | No | No | No | No | 62 | No | No | No |


See also
--------


* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [`font-feature-settings`](../font-feature-settings)
* [`src`](src)
* [`unicode-range`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-variation-settings>

font-variant-numeric
====================


The `font-variant-numeric` CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.


Try it
------


Syntax
------




```
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums; /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums; /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions; /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions;

/\* Global values \*/
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

```
 This property can take one of two forms:

 * either the keyword value `normal`
* or one or more of the other values listed below, space-separated, in any order.


### Values


 `normal`  This keyword leads to the deactivation of the use of such alternate glyphs.

  `ordinal`  This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. It corresponds to the OpenType values `ordn`.

  `slashed-zero`  This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values `zero`.

  
*<numeric-figure-values*>  These values control the figures used for numbers. Two values are possible:

 * `lining-nums` activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values `lnum`.
* `oldstyle-nums` activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values `onum`.

  
*<numeric-spacing-values*>  These values controls the sizing of figures used for numbers. Two values are possible:

 * `proportional-nums` activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values `pnum`.
* `tabular-nums` activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values `tnum`.

  
*<numeric-fraction-values*>  These values controls the glyphs used to display fractions. Two values are possible:

 * `diagonal-fractions` activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values `frac`.
* `stacked-fractions` activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values `afrc`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant-numeric =   
  normal                                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <numeric-figure-values> [||](value_definition_syntax#double_bar) <numeric-spacing-values> [||](value_definition_syntax#double_bar) <numeric-fraction-values> [||](value_definition_syntax#double_bar) ordinal [||](value_definition_syntax#double_bar) slashed-zero []](value_definition_syntax#brackets)    
  
<numeric-figure-values> =   
  lining-nums    [|](value_definition_syntax#single_bar)  
  oldstyle-nums    
  
<numeric-spacing-values> =   
  proportional-nums  [|](value_definition_syntax#single_bar)  
  tabular-nums         
  
<numeric-fraction-values> =   
  diagonal-fractions  [|](value_definition_syntax#single_bar)  
  stacked-fractions     
  

```
Examples
--------


### Setting ordinal numeric forms


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-numeric-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-numeric-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-numeric` | 52 | 79 | 34 | No | 39 | 9.1 | 52 | 52 | 34 | 41 | 9.3 | 6.0 |


See also
--------


* [`font-variant`](font-variant)
* [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-position`](font-variant-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric>

font-variation-settings
=======================


The `font-variation-settings` CSS property provides low-level control over [variable font](css_fonts/variable_fonts_guide) characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.


Try it
------


Syntax
------



```
/\* Use the default settings \*/
font-variation-settings: normal;

/\* Set values for variable font axis names \*/
font-variation-settings: "XHGT" 0.7;

/\* Global values \*/
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: revert;
font-variation-settings: revert-layer;
font-variation-settings: unset;

```
### Values



This property's value can take one of two forms:

  `normal`  Text is laid out using default settings.

  `<string> <number>`  When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a [`<string>`](string) of 4 ASCII characters followed by a [`<number>`](number) indicating the axis value to set. If the `<string>` has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The `<number>` can be fractional or negative, depending on the value range available in your font, as defined by the font designer.

  
Description
-----------



This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. [`font-weight`](font-weight), [`font-style`](font-style)).

 Font characteristics set using `font-variation-settings` will always override those set using the corresponding basic font properties, e.g. `font-weight`, no matter where they appear in the cascade. In some browsers, this is currently only true when the `@font-face` declaration includes a `font-weight` range.


### Registered and custom axes



Variable font axes come in two types: **registered** and **custom**.

 Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

 Here are the registered axes along with their corresponding CSS properties:

 

| Axis Tag | CSS Property |
| --- | --- |
| "wght" | [`font-weight`](font-weight) |
| "wdth" | [`font-stretch`](font-stretch) |
| "slnt" (slant) | [`font-style`](font-style): `oblique + angle` |
| "ital" | [`font-style`](font-style): `italic` |
| "opsz" | [`font-optical-sizing`](font-optical-sizing) |

 Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

  **Note:** Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced to follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

  To use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS before 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | a transform |

Formal syntax
-------------



```
font-variation-settings =   
  normal                  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<string>](string) [<number>](number) []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


You can find a number of other variable fonts examples at our [Variable fonts guide](css_fonts/variable_fonts_guide), [v-fonts.com](https://v-fonts.com/), and [axis-praxis.org](https://www.axis-praxis.org/).

### Weight (wght)



The following live example's CSS can be edited to allow you to play with font weight values.



### Slant (slnt)



The following live example's CSS can be edited to allow you to play with font slant/oblique values.



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variation-settings-def](https://w3c.github.io/csswg-drafts/css-fonts/#font-variation-settings-def) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variation-settings` | 62 | 17 | 62 | No | 49 | 11Requires macOS 10.13 High Sierra or later. | 62 | 62 | 62 | 46 | 11Requires iOS 11 or later. | 8.0 |


See also
--------


* [Variable fonts guide](css_fonts/variable_fonts_guide)
* [OpenType Font Variations Overview](https://docs.microsoft.com/typography/opentype/spec/otvaroverview)
* [OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings>

font-weight
===========



The `font-weight` CSS descriptor allows authors to specify font weights for the fonts specified in the [`@font-face`](../@font-face) rule. The [`font-weight`](../font-weight) property can separately be used to set how thick or thin characters in text should be displayed.

 For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-weight` descriptor to explicitly specify the font face's weights. The values for the CSS descriptor is same as that of its corresponding font property.

 There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold are often synthesized by the user agent. To prevent this, use [`font-synthesis`](../font-synthesis) property.



Syntax
------




```
/\* Single values \*/
font-weight: normal;
font-weight: bold;
font-weight: 400;

/\* Multiple Values \*/
font-weight: normal bold;
font-weight: 300 500;

```
 The `font-weight` property is described using any one of the values listed below.


### Values



 `normal`  Normal font weight. Same as `400`.

  `bold`  Bold font weight. Same as `700`.

  `<number>`  A [`<number>`](../number) value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the [Common weight name mapping](#common_weight_name_mapping) section below.

   In earlier versions of the `font-weight` specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts.

 CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces [Variable fonts](#variable_fonts), which can make use of this much finer-grained range of font weights.


### Common weight name mapping



The numerical values `100` to `900` roughly correspond to the following common weight names:

 

| Value | Common weight name |
| --- | --- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |


### Variable fonts



Most fonts have a particular weight which corresponds to one of the numbers in [Common weight name mapping](#common_weight_name_mapping). However some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

 For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying weights.


Accessibility concerns
----------------------



People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](../color#accessibility_concerns).

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
font-weight =   
  auto                         [|](../value_definition_syntax#single_bar)  
  <font-weight-absolute>[{1,2}](../value_definition_syntax#curly_braces)    
  
<font-weight-absolute> =   
  normal             [|](../value_definition_syntax#single_bar)  
  bold               [|](../value_definition_syntax#single_bar)  
  [<number [1,1000]>](../number)    
  

```
Examples
--------


### Setting normal font weight in a @font-face rule



The following finds a local Open Sans font or imports it, and allows using the font for normal font weights.

 
```
@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
      format("woff");
  font-weight: 400;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-prop-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-prop-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-weight` | 4 | 12 | 3.5 | 4 | 10 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`src`](src)
* [`unicode-range descriptor`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight>

font-variant-east-asian
=======================


The `font-variant-east-asian` CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.


Try it
------


Syntax
------



```
font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis83; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis90; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis04; /\* <east-asian-variant-values> \*/
font-variant-east-asian: simplified; /\* <east-asian-variant-values> \*/
font-variant-east-asian: traditional; /\* <east-asian-variant-values> \*/
font-variant-east-asian: full-width; /\* <east-asian-width-values> \*/
font-variant-east-asian: proportional-width; /\* <east-asian-width-values> \*/
font-variant-east-asian: ruby full-width jis83;

/\* Global values \*/
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: revert;
font-variant-east-asian: revert-layer;
font-variant-east-asian: unset;

```
### Values


 `normal`  This keyword leads to the deactivation of the use of such alternate glyphs.

  `ruby`  This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values `ruby`.

  `<east-asian-variant-values>`  These values specify a set of logographic glyph variants which should be used for display. Possible values are:

 

| Keyword | Standard defining the glyphs | OpenType equivalent |
| --- | --- | --- |
| `jis78` | [JIS X 0208:1978](https://en.wikipedia.org/wiki/JIS_X_0208#First_standard) | `jp78` |
| `jis83` | [JIS X 0208:1983](https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard) | `jp83` |
| `jis90` | [JIS X 0208:1990](https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard) | `jp90` |
| `jis04` | [JIS X 0213:2004](https://en.wikipedia.org/wiki/JIS_X_0213) | `jp04` |
| `simplified` | None, use the simplified Chinese glyphs | `smpl` |
| `traditional` | None, use the traditional Chinese glyphs | `trad` |

  `<east-asian-width-values>`  These values control the sizing of figures used for East Asian characters. Two values are possible:

 * `proportional-width` activating the set of East Asian characters which vary in width. It corresponds to the OpenType values `pwid`.
* `full-width` activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values `fwid`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant-east-asian =   
  normal                                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <east-asian-variant-values> [||](value_definition_syntax#double_bar) <east-asian-width-values> [||](value_definition_syntax#double_bar) ruby []](value_definition_syntax#brackets)    
  
<east-asian-variant-values> =   
  jis78        [|](value_definition_syntax#single_bar)  
  jis83        [|](value_definition_syntax#single_bar)  
  jis90        [|](value_definition_syntax#single_bar)  
  jis04        [|](value_definition_syntax#single_bar)  
  simplified   [|](value_definition_syntax#single_bar)  
  traditional    
  
<east-asian-width-values> =   
  full-width          [|](value_definition_syntax#single_bar)  
  proportional-width    
  

```
Examples
--------


### Setting East Asian glyph variants



This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.

 #### HTML

 
```
<table>
  <thead></thead>
  <tbody style="border:0;">
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>

```
 #### CSS

 
```
td {
  font-family: "Yu Gothic";
  font-size: 20px;
}
th {
  color: grey;
  padding-right: 10px;
}

.ruby {
  font-variant-east-asian: ruby;
}

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional {
  font-variant-east-asian: traditional;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-east-asian-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-east-asian-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-east-asian` | 63 | 79 | 34 | No | 50 | 9.1 | 63 | 63 | 34 | 46 | 9.3 | 8.0 |


See also
--------


* [`font-variant`](font-variant)
* [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian>

font-variant-ligatures
======================


The `font-variant-ligatures` CSS property controls which [ligatures](https://developer.mozilla.org/en-US/docs/Glossary/Ligature) and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.


Try it
------


Syntax
------




```
/\* Keyword values \*/
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: no-common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: no-discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: no-historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: no-contextual; /\* <contextual-alt-values> \*/

/\* Global values \*/
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

```
 The `font-variant-ligatures` property is specified as one of the keyword values listed below.


### Values


 `normal`  This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.

  `none`  This keyword specifies that all ligatures and contextual forms are disabled, even common ones.

  *<common-lig-values>*  These values control the most common ligatures, like for `fi`, `ffi`, `th` or similar. They correspond to the OpenType values `liga` and `clig`. Two values are possible:

 * `common-ligatures` activating these ligatures. Note that the keyword `normal` activates these ligatures.
* `no-common-ligatures` deactivating these ligatures.

  *<discretionary-lig-values>*  These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values `dlig`. Two values are possible:

 * `discretionary-ligatures` activating these ligatures.
* `no-discretionary-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

  *<historical-lig-values>*  These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values `hlig`. Two values are possible:

 * `historical-ligatures` activating these ligatures.
* `no-historical-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

  *<contextual-alt-values>*  These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values `calt`. Two values are possible:

 * `contextual` specifies that the contextual alternates are to be used. Note that the keyword `normal` usually activates these ligatures too.
* `no-contextual` prevents their use.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
font-variant-ligatures =   
  normal                                              [|](value_definition_syntax#single_bar)  
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <common-lig-values> [||](value_definition_syntax#double_bar) <discretionary-lig-values> [||](value_definition_syntax#double_bar) <historical-lig-values> [||](value_definition_syntax#double_bar) <contextual-alt-values> []](value_definition_syntax#brackets)    
  
<common-lig-values> =   
  common-ligatures     [|](value_definition_syntax#single_bar)  
  no-common-ligatures    
  
<discretionary-lig-values> =   
  discretionary-ligatures     [|](value_definition_syntax#single_bar)  
  no-discretionary-ligatures    
  
<historical-lig-values> =   
  historical-ligatures     [|](value_definition_syntax#single_bar)  
  no-historical-ligatures    
  
<contextual-alt-values> =   
  contextual     [|](value_definition_syntax#single_bar)  
  no-contextual    
  

```
Examples
--------


### Setting font ligatures and contextual forms



#### HTML

 
```
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>

```
 #### CSS

 
```
p {
  font-family: Lora, serif;
}
.normal {
  font-variant-ligatures: normal;
}

.none {
  font-variant-ligatures: none;
}

.common-ligatures {
  font-variant-ligatures: common-ligatures;
}

.no-common-ligatures {
  font-variant-ligatures: no-common-ligatures;
}

.discretionary-ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

.no-discretionary-ligatures {
  font-variant-ligatures: no-discretionary-ligatures;
}

.historical-ligatures {
  font-variant-ligatures: historical-ligatures;
}

.no-historical-ligatures {
  font-variant-ligatures: no-historical-ligatures;
}

.contextual {
  font-variant-ligatures: contextual;
}

.no-contextual {
  font-variant-ligatures: no-contextual;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-ligatures-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-ligatures-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-ligatures` | 3431 | 7979 | 34 | No | 2119 | 9.17 | 374.4 | 34 | 34 | 2119 | 9.37 | 2.0 |


See also
--------


* [`font-variant`](font-variant)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-emoji`](font-variant-emoji)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures>

font-weight
===========


The `font-weight` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the weight (or boldness) of the font. The weights available depend on the [`font-family`](font-family) that is currently set.


Try it
------


Syntax
------




```
/\* Keyword values \*/
font-weight: normal;
font-weight: bold;

/\* Keyword values relative to the parent \*/
font-weight: lighter;
font-weight: bolder;

/\* Numeric keyword values \*/
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /\* normal \*/
font-weight: 500;
font-weight: 600;
font-weight: 700; /\* bold \*/
font-weight: 800;
font-weight: 900;

/\* Global values \*/
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

```
 The `font-weight` property is specified using any one of the values listed below.


### Values



 `normal`  Normal font weight. Same as `400`.

  `bold`  Bold font weight. Same as `700`.

  `lighter`  One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the [Meaning of relative weights](#meaning_of_relative_weights) section below.

  `bolder`  One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the [Meaning of relative weights](#meaning_of_relative_weights) section below.

  `<number>`  A [`<number>`](number) value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the [Common weight name mapping](#common_weight_name_mapping) section below.

   In earlier versions of the `font-weight` specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the [Fallback weights](#fallback_weights) system.

 CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces [Variable fonts](#variable_fonts), which can make use of this much finer-grained range of font weights.


### Fallback weights



If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:

 * If the target weight given is between `400` and `500` inclusive:
	+ Look for available weights between the target and `500`, in ascending order.
	+ If no match is found, look for available weights less than the target, in descending order.
	+ If no match is found, look for available weights greater than `500`, in ascending order.
* If a weight less than `400` is given, look for available weights less than the target, in descending order. If no match is found, look for available weights greater than the target, in ascending order.
* If a weight greater than `500` is given, look for available weights greater than the target, in ascending order. If no match is found, look for available weights less than the target, in descending order.


### Meaning of relative weights



When `lighter` or `bolder` is specified, the below chart shows how the absolute font weight of the element is determined.

 Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.

 

| Inherited value | `bolder` | `lighter` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |


### Common weight name mapping



The numerical values `100` to `900` roughly correspond to the following common weight names (see the [OpenType specification](https://docs.microsoft.com/typography/opentype/spec/os2#usweightclass)):

 

| Value | Common weight name |
| --- | --- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | [Extra Black (Ultra Black)](https://docs.microsoft.com/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |


### Variable fonts



Most fonts have a particular weight which corresponds to one of the numbers in [Common weight name mapping](#common_weight_name_mapping). However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

 For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying widths.

  **Note:** For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-weight` can be any number between `1` and `1000`. The demo loads with `font-weight: 500;`. Change the value to see the weight of the text change.

 

Accessibility concerns
----------------------



People experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](color#accessibility_concerns).

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a [font weight](font-weight#Interpolation) |

Formal syntax
-------------



```
font-weight =   
  <font-weight-absolute>  [|](value_definition_syntax#single_bar)  
  bolder                  [|](value_definition_syntax#single_bar)  
  lighter                   
  
<font-weight-absolute> =   
  normal             [|](value_definition_syntax#single_bar)  
  bold               [|](value_definition_syntax#single_bar)  
  [<number [1,1000]>](number)    
  

```
Examples
--------


### Setting font weights



#### HTML

 
```
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>

```
 #### CSS

 
```
/\* Set paragraph text to be bold. \*/
p {
  font-weight: bold;
}

/\* Set div text to two steps heavier than
 normal but less than a standard bold. \*/
div {
  font-weight: 600;
}

/\* Set span text to be one step lighter
 than its parent. \*/
span {
  font-weight: lighter;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-weight-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-weight-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-weight` | 2 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `number` | 62 | 17 | 61 | No | 49 | 11 | 62 | 62 | 61 | 46 | 11 | 8.0 |


See Also
--------


* [`font-family`](font-family)
* [`font-style`](font-style)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight>

forced-color-adjust
===================


The `forced-color-adjust` CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.


Syntax
------




```
forced-color-adjust: auto;
forced-color-adjust: none;

/\* Global values \*/
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;

```
 The `forced-color-adjust` property's value must be one of the following keywords.


### Values


 `auto`  The element's colors are adjusted by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) in forced colors mode. This is the default.

  `none`  The element's colors are not automatically adjusted by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) in forced colors mode.

  Usage notes
-----------


This property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. **It should not be used to prevent user choices being respected**.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements and text |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
forced-color-adjust =   
  auto                   [|](value_definition_syntax#single_bar)  
  none                   [|](value_definition_syntax#single_bar)  
  preserve-parent-color    
  

```
Examples
--------


### Preserving colors



In the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the `.box` class.

 By using the [`forced-colors`](@media/forced-colors) media feature you could add any other optimizations for forced color mode alongside the `forced-color-adjust` property.

 #### CSS

 
```
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}

```
 #### HTML

 
```
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>

```
 #### Result


 The following screenshot shows the image above in Windows High Contrast Mode:

  ![The example above in high contrast mode shows the first box with a black background the second with the grey background of the CSS.] 


Specifications
--------------




| Specification |
| --- |
| [CSS Color Adjustment Module Level 1 # forced-color-adjust-prop](https://w3c.github.io/csswg-drafts/css-color-adjust/#forced-color-adjust-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `forced-color-adjust` | 89 | 7912 | No | 10 | No | No | No | No | No | No | No | No |


See also
--------


* [Applying color to HTML elements using CSS](css_colors/applying_color)
* [Styling for Windows high contrast with standards for forced colors.](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/)
* [`print-color-adjust`](print-color-adjust)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust>

<frequency>
===========


The `<frequency>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties.


Syntax
------


The `<frequency>` data type consists of a [`<number>`](number) followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

### Units



 `Hz`  Represents a frequency in hertz. Examples: `0Hz`, `1500Hz`, `10000Hz`.

  `kHz`  Represents a frequency in kilohertz. Examples: `0kHz`, `1.5kHz`, `10kHz`.

    **Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital "H" for `Hz` and `kHz`, as specified in the [SI](https://en.wikipedia.org/wiki/International_System_of_Units).

 
Examples
--------



Valid frequency values:

 
```
12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit

```
 Invalid frequency values:

 
```
12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # frequency](https://w3c.github.io/csswg-drafts/css-values/#frequency) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `frequency` | No | No | NoSee [bug 741643](https://bugzil.la/741643). | No | No | No | No | No | NoSee [bug 741643](https://bugzil.la/741643). | No | No | No |
| `hz` | No | No | No | No | No | No | No | No | No | No | No | No |
| `khz` | No | No | No | No | No | No | No | No | No | No | No | No |


See also
--------


* [`<frequency-percentage>`](frequency-percentage)
* [CSS Values and Units](css_values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/frequency>

<frequency-percentage>
======================


The `<frequency-percentage>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a value that can be either a [`<frequency>`](frequency) or a [`<percentage>`](percentage). Frequency values, e.g. the pitch of a speaking voice, are not currently used in any CSS properties.


Syntax
------


The value of a `<frequency-percentage>` is either a [`<frequency>`](frequency) or a [`<percentage>`](percentage); see their individual reference pages for details about their syntaxes.

Description
-----------


### Use in calc()


Where a `<frequency-percentage>` is specified as an allowable type, this means that the percentage resolves to a frequency and therefore can be used in a [`calc()`](calc) expression.

Formal syntax
-------------



```
<frequency-percentage> =   
  [<frequency>](frequency)   [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Valid percentage values



```
90% Positive percentage
+90% Positive percentage with leading +
-90% Negative percentage — not valid for all properties that use percentages

```
### Invalid percentage values



```
90 % No space is allowed between the number and the unit

```
### Valid frequency values



```
12Hz     Positive integer
4.3Hz    Non-integer
14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
+0Hz     Zero, with a leading + and a unit
-0kHz    Zero, with a leading - and a unit

```
### Invalid frequency values



```
12.0     This is a <number>, not an <frequency>, because it is missing a unit.
7 Hz     No space is allowed between the number and the unit.
0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # mixed-percentages](https://w3c.github.io/csswg-drafts/css-values/#mixed-percentages) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `frequency-percentage` | No | No | NoSee [bug 741643](https://bugzil.la/741643). | No | No | No | No | No | NoSee [bug 741643](https://bugzil.la/741643). | No | No | No |


See also
--------


* [CSS data types](css_types)
* [CSS Values and Units](css_values_and_units)
* Related CSS data types:
	+ [`<frequency>`](frequency)
	+ [`<percentage>`](percentage)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/frequency-percentage>

:fullscreen
===========


The `:fullscreen` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.


Syntax
------



```
:fullscreen {
  /\* ... \*/
}

```
Usage notes
-----------


The `:fullscreen` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between fullscreen and traditional presentations.

Examples
--------


In this example, the color of a button is changed depending on whether or not the document is in fullscreen mode. This is done without needing to specifically apply style changes using JavaScript.

### HTML



The page's HTML looks like this:

 
```
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle fullscreen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>

```
 The [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) with the ID `"fs-toggle"` will change between pale red and pale green depending on whether or not the document is in fullscreen mode.


### CSS



The magic happens in the CSS. There are two rules here. The first establishes the background color of the "Toggle Fullscreen Mode" button when the element is not in a fullscreen state. The key is the use of the `:not(:fullscreen)`, which looks for the element to not have the `:fullscreen` pseudo-class applied to it.

 
```
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

```
 When the document *is* in fullscreen mode, the following CSS applies instead, setting the background color to a pale shade of red.

 
```
#fs-toggle:fullscreen {
  background-color: #faa;
}

```

Specifications
--------------




| Specification |
| --- |
| [Fullscreen API Standard # :fullscreen-pseudo-class](https://fullscreen.spec.whatwg.org/#:fullscreen-pseudo-class) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:fullscreen` | 7115 | 12 | 649 | 11 | 5815 | 6 | 7137 | 7118 | 649 | 5014 | No | 10.01.0 |
| `all_elements` | No | 12–79 | 43 | 11 | No | No | No | No | 43 | No | No | No |


See also
--------


* [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
* [Guide to the Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide)
* [`:not`](:not)
* [`::backdrop`](::backdrop)
* DOM API: [`Element.requestFullscreen()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen), [`Document.exitFullscreen()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen), [`Document.fullscreenElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement)
* [`allowfullscreen`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allowfullscreen) attribute


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen>

:future
=======



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `:future` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches [`:current`](:current). For example in a video with captions which are being displayed by [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API).

 
```
:future(p, span) {
  display: none;
}

```


Syntax
------



```
:future {
  /\* ... \*/
}

```
Examples
--------


### CSS



```
:future(p, span) {
  display: none;
}

```
### HTML



```
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="subtitles.vtt"
 default />
</video>

```
### WebVTT



```
WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption

```
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-future-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-future-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:future` | No | No | No | No | No | 7 | No | No | No | No | 7 | No |


See also
--------


* [Web Video Text Tracks Format (WebVTT)](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API)
* [`:current`](:current)
* [`:past`](:past)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:future>

src
===


The `src` CSS descriptor of the [`@font-face`](../@font-face) rule specifies the resource containing font data. It is required for the `@font-face` rule to be valid.


Syntax
------



```
/\* <url> values \*/
src: url(https://somewebsite.com/path/to/font.woff); /\* Absolute URL \*/
src: url(path/to/font.woff); /\* Relative URL \*/
src: url("path/to/font.woff"); /\* Quoted URL \*/
src: url(path/to/svgFont.svg#example); /\* Fragment identifying font \*/

/\* <font-face-name> values \*/
src: local(font); /\* Unquoted name \*/
src: local(some font); /\* Name containing space \*/
src: local("font"); /\* Quoted name \*/
src: local("some font"); /\* Quoted name containing a space \*/

/\* <tech(<font-tech>)> values \*/
src: url(path/to/fontCOLRv1.otf) tech(color-COLRv1);
src: url(path/to/fontCOLR-svg.otf) tech(color-SVG);

/\* <format(<font-format>)> values \*/
src: url(path/to/font.woff) format("woff");
src: url(path/to/font.otf) format("opentype");

/\* Multiple resources \*/
src: url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype");

/\* Multiple resources with font format and technologies \*/
src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), url("trickster-outline.otf")
    format(opentype);

```
### Values



 `url()`  Specifies an external reference consisting of a [`<url>()`](../url), followed by optional hints using the `format()` and `tech()` component values that specify the format and font technology of the resource referenced by the URL. The `format()` and `tech()` components are a comma-separated list of strings of known [font formats](#font_formats) and technologies. If a user agent doesn't support the font technology or formats, it skips downloading the font resource. If no format or technology hints are supplied, the font resource is always downloaded.

  `format()`   An optional declaration that follows the `url()` value that provides a hint for the user agent on the font format. If the value is not supported or invalid, the browser may not download the resource, potentially saving bandwidth. If omitted, the browser will download the resource and then detect the format. If including a font source for backward-compatibility that is not in the list of [defined keywords](#formal-syntax), enclose the format string in quotes. Possible values are described in the [Font formats](#font_formats) section below. 

  
`tech()`  Experimental 
   An optional declaration that follows the `url()` value that provides a hint for the user agent on the font technology. The value for `tech()` may be one of the keywords described in [Font technologies](#font-technologies). 

  `local(<font-face-name>)`   Specifies the font name should the font be available on the user's device. Enclosing the font name in quotes is optional. 

  **Note:** For OpenType and TrueType fonts, `<font-face-name>` is used to match either the Postscript name or the full font name in the name table of locally available fonts. Which type of name is used varies by platform and font, so you should include both of these names to assure proper matching across platforms. Platform substitutions for a given font name must not be used.

   `<font-face-name>`   Specifies the full name or postscript name of a locally-installed font face using the `local()` component value, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes. The font face name [is not case-sensitive](https://w3c.github.io/csswg-drafts/css-fonts-3/#font-family-casing). 

    **Note:** The [Local Font Access API](https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API) can be used to access the user's locally installed font data — this includes higher-level details such as names, styles, and families, as well as the raw bytes of the underlying font files.

 
Description
-----------



 The value of this descriptor is a prioritized, comma-separated list of external references or locally-installed font face names, where each resource is specified using `url()` or `local()`. When a font is needed, the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) iterates over the set of references listed using the first one it can successfully activate. Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list. 

  If multiple `src` descriptors are set, only the last declared rule that is able to load a resource is applied. If the last `src` descriptor can load a resource and doesn't include a `local()` font, the browser may download external font files and ignore the local version even if there is one available on the device. 

   **Note:** Values within descriptors that the browser considers invalid are ignored. Some browsers will ignore the whole descriptor if any item is invalid, even if only one item is invalid. This may affect design of fallbacks. See [Browser compatibility](#browser_compatibility) for more information. 

  As with other URLs in CSS, the URL may be relative, in which case it is resolved relative to the location of the style sheet containing the `@font-face` rule. In the case of SVG fonts, the URL points to an element within a document containing SVG font definitions. If the element reference is omitted, a reference to the first defined font is implied. Similarly, font container formats that can contain more than one font load only one of the fonts for a given `@font-face` rule. Fragment identifiers are used to indicate which font to load. If a container format lacks a defined fragment identifier scheme, a simple 1-based indexing scheme (e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.) is used.

 If the font file is a container for multiple fonts, a fragment identifier is included to indicate the sub-font that should be used, as shown below:

 
```
/\* WhichFont is the PostScript name of a font in the font file \*/
src: url(collection.otc#WhichFont);
/\* WhichFont is the element id of a font in the SVG Font file \*/
src: url(fonts.svg#WhichFont);

```

### Font formats



 The following table shows the valid font keywords and their corresponding font formats. To check if a font format is supported by a browser within CSS, use the [`@supports`](../@supports) rule. 

 

| Keyword | Font Format | Common extensions |
| --- | --- | --- |
| `collection` | OpenType Collection | .otc, .ttc |
| `embedded-opentype` | Embedded OpenType | .eot |
| `opentype` | OpenType | .otf, .ttf |
| `svg` | SVG Font (deprecated) | .svg, .svgz |
| `truetype` | TrueType | .ttf |
| `woff` | WOFF 1.0 | .woff |
| `woff2` | WOFF 2.0 | .woff2 |

  **Note:**

 * `format(svg)` stands for [SVG fonts](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts), and `tech(color-SVG)` stands for [OpenType fonts with SVG table](https://learn.microsoft.com/en-us/typography/opentype/spec/svg) (also called OpenType-SVG color fonts), which are completely different.
* The `opentype` and `truetype` values are equivalent whether the font file uses cubic bezier curves (within CFF/CFF2 table) or quadratic bezier curves (within glyph table).

  Older non-normalized `format()` values have the following equivalent syntax; provided as a string enclosed in quotes for backward-compatibility reasons:

 

| Old syntax | Equivalent syntax |
| --- | --- |
| `format("woff2-variations")` | `format(woff2) tech(variations)` |
| `format("woff-variations")` | `format(woff) tech(variations)` |
| `format("opentype-variations")` | `format(opentype) tech(variations)` |
| `format("truetype-variations")` | `format(truetype) tech(variations)` |


### Font technologies



 The following table shows valid values for the `tech()` descriptor and their corresponding font technologies. To check if a font technology is supported by a browser within CSS, use the [`@supports`](../@supports) at-rule. 

 

| Keyword | Description |
| --- | --- |
| `color-cbdt` | Color bitmap data tables |
| `color-colrv0` | Multi-colored glyphs via COLR version 0 table |
| `color-colrv1` | Multi-colored glyphs via COLR version 1 table |
| `color-sbix` | Standard bitmap graphics tables |
| `color-svg` | SVG multi-colored tables |
| `features-aat` | TrueType `morx` and `kerx` tables |
| `features-graphite` | Graphite features, namely `Silf`, `Glat` , `Gloc` , `Feat`, and `Sill` tables |
| `features-opentype` | OpenType `GSUB` and `GPOS` tables |
| `incremental` | Incremental font loading |
| `palettes` | Font palettes by means of `font-palette` to select one of many color palettes in the font |
| `variations` | Font variations in TrueType and OpenType fonts to control the font axis, weight, glyphs, etc. |


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `n/a (required)` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
<url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?  |
local( <family-name> )

<font-format> = [ <string> | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ]

<font-tech> = [ <font-features-tech> | <color-font-tech> | variations | palettes | incremental-patch | incremental-range | incremental-auto ]

<font-features-tech> = [ features-opentype | features-aat | features-graphite ]

<color-font-tech> = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

```
Examples
--------


### Specifying font resources using url() and local()



The example below shows how to define two font faces with the same font family. The `font-family` is named `MainText`. The first font face has a regular font, and the second one is a bold version of the same font family.

 
```
/\* Defining a regular font face \*/
@font-face {
  font-family: MainText;
  src: local(Futura-Medium),
    url('FuturaMedium.woff') format("woff"),
    url('FuturaMedium.otf') format("opentype");
    format("opentype");
}

/\* Defining a different bold font face for the same family \*/
@font-face {
  font-family: MainText;
  src: local(Gill Sans Bold), /\* full font name \*/
    local(GillSans-Bold), /\* postscript name \*/
    url('GillSansBold.woff') format("woff"),
    url('GillSansBold.otf') format("opentype"),
    url("GillSansBold.svg#MyFontBold"); /\* Referencing an SVG font fragment by id \*/
  font-weight: bold;
}

/\* Using the regular font face \*/
p {
  font-family: MainText;
}

/\* Font-family is inherited, but bold fonts are used \*/
p.bold {
  font-weight: bold;
}

```

### Specifying font resources using tech and format values



 The following example shows how to use the `tech()` and `format()` values to specify font resources. A font using `color-colrv1` technology and `opentype` format is specified using the `tech()` and `format()` values. A color font will be activated if the user agent supports it, and an `opentype` non-color is provided as a fallback. 

 
```
@font-face {
  font-family: "Trickster";
  src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), url("trickster-outline.otf")
      format(opentype);
}

/\* Using the font face \*/
p {
  font-family: "Trickster";
}

```

### Fallbacks for older browsers



 Browsers should use a `@font-face` with a single `src` descriptor listing possible sources for the font. Since the browser will use the first resource that it is able to load, items should be specified in the order that you'd most like them to be used. 

  Generally this means that local files should appear before remote files, and that resources with `format()` or `tech()` constraints should appear before resources that don't have them (otherwise the less-constrained version would always be selected). For example: 

 
```
@font-face {
  font-family: "MgOpenModernaBold";
  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), url("MgOpenModernaBold.otf")
      format(opentype);
}

```
 A browser that does not support `tech()` above should ignore the first item and attempt to load the second resource.

  Some browsers do not yet [ignore invalid items](#browser_compatibility), and instead fail the whole `src` descriptor if any value is invalid. If working with these browsers you can specify multiple `src` descriptors as fallbacks. Note that multiple `src` descriptors are attempted in reverse-order, so at the end we have our normal descriptor with all the items. 

 
```
@font-face {
  font-family: "MgOpenModernaBold";
  src: url("MgOpenModernaBold.otf") format(opentype);
  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);
  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), url("MgOpenModernaBold.otf")
      format(opentype);
}

```

### Checking if the user agent supports a font



 The following example shows how to check if the user agent supports a font technology using the [`@supports`](../@supports) rule. The block of CSS inside `@supports` will be applied if the user agent supports `color-COLRv1` technology. 

 
```
@supports font-tech(color-COLRv1) {
  @font-face {
    font-family: "Trickster";
    src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
  }

  .colored\_text {
    font-family: "Trickster";
  }
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # src-desc](https://w3c.github.io/csswg-drafts/css-fonts/#src-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `src` | 4 | 12 | 3.5 | 6 | 10 | 3.1 | 2.2 | 18 | 4 | 10.1 | 2 | 1.0 |
| `drop_invalid_item` | 108Chrome drops invalid item for `tech()` but not other invalid values | 108Edge drops invalid item for `tech()` but not other invalid values | 109 | No | 94Opera drops invalid item for `tech()` but not other invalid values | No | 108Chrome drops invalid item for `tech()` but not other invalid values | 108Chrome drops invalid item for `tech()` but not other invalid values | 109 | 73Opera drops invalid item for `tech()` but not other invalid values | No | NoSamsung Internet drops invalid item for `tech()` but not other invalid values |
| `format_keyword` | No | No | No | No | No | 4 | No | No | No | No | 5 | No |
| `format_variations` | 66 | 17 | 62 | No | 53 | 11 | 66 | 66 | 62 | 47 | 11 | 9.0 |
| `tech_keyword` | No | No | 105preview | No | No | No | No | No | No | No | No | No |


See also
--------


* [`@font-face`](../@font-face)
* [`@supports`](../@supports)
* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`unicode-range`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src>

gap
===


The `gap` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the gaps ([gutters](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)) between rows and columns. It is a [shorthand](shorthand_properties) for [`row-gap`](row-gap) and [`column-gap`](column-gap).


Try it
------



 Note that `grid-gap` is an alias for this property.


Syntax
------




```
/\* One <length> value \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* One <percentage> value \*/
gap: 16%;
gap: 100%;

/\* Two <length> values \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* One or two <percentage> values \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() values \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/\* Global values \*/
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;

```
 This property is specified as a value for `<'row-gap'>` followed optionally by a value for `<'column-gap'>`. If `<'column-gap'>` is omitted, it's set to the same value as `<'row-gap'>`.

 `<'row-gap'>` and `<'column-gap'>` are each specified as a `<length>` or a `<percentage>`.


### Values


 [`<length>`](length)  Is the width of the gutter separating the grid lines.

  [`<percentage>`](percentage)  Is the width of the gutter separating the grid lines, relative to the dimension of the element.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`row-gap`](row-gap): `normal`
* [`column-gap`](column-gap): `normal`
 |
| Applies to | multi-column elements, flex containers, grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`row-gap`](row-gap): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* [`column-gap`](column-gap): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* [`row-gap`](row-gap): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`column-gap`](column-gap): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
 |

Formal syntax
-------------



```
gap =   
  <'row-gap'> <'column-gap'>[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Flex layout



#### HTML

 
```
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

```
 #### Result



### Grid layout



#### HTML

 
```
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

```
 #### Result



### Multi-column layout



#### HTML

 
```
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>

```
 #### CSS

 
```
.content-box {
  column-count: 3;
  gap: 40px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # gap-shorthand](https://w3c.github.io/csswg-drafts/css-align/#gap-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `gap` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 7.0 |
| `flex_context` | 84 | 84 | 63 | No | 70 | 14.1 | 84 | 84 | 63 | 60 | 14.5 | 14.0 |
| `grid_context` | 6657 | 1616 | 6152 | No | 5344 | 1210.1 | 6657 | 6657 | 6152 | 4743 | 1210.3 | 9.07.0 |
| `multicol_context` | 66 | 16 | 61 | No | 53 | 14.1 | 66 | 66 | 61 | 47 | 14.5 | 9.0 |


See also
--------


* Related CSS properties: [`row-gap`](row-gap), [`column-gap`](column-gap)
* Grid Layout Guide: *[Basic concepts of grid layout - Gutters](css_grid_layout/basic_concepts_of_grid_layout#gutters)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gap>

<gradient>
==========


The `<gradient>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) is a special type of [`<image>`](image) that consists of a progressive transition between two or more colors.


Try it
------



 A CSS gradient has [no intrinsic dimensions](image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.


Syntax
------


The `<gradient>` data type is defined with one of the function types listed below.

### Linear gradient


Linear gradients transition colors progressively along an imaginary line. They are generated with the [`linear-gradient()`](gradient/linear-gradient) function.

### Radial gradient


Radial gradients transition colors progressively from a center point (origin). They are generated with the [`radial-gradient()`](gradient/radial-gradient) function.

### Repeating gradient


Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the [`repeating-linear-gradient()`](gradient/repeating-linear-gradient) and [`repeating-radial-gradient()`](gradient/repeating-radial-gradient) functions.

### Conic gradient


Conic gradients transition colors progressively around a circle. They are generated with the [`conic-gradient()`](gradient/conic-gradient) function.

Interpolation
-------------


As with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the [transparent keyword](named-color#transparent).)

Formal syntax
-------------



```
<gradient> =   
  <linear-gradient()>            [|](value_definition_syntax#single_bar)  
  [<repeating-linear-gradient()>](gradient/repeating-linear-gradient)  [|](value_definition_syntax#single_bar)  
  <radial-gradient()>            [|](value_definition_syntax#single_bar)  
  [<repeating-radial-gradient()>](gradient/repeating-radial-gradient)    
  
<linear-gradient()> =   
  linear-gradient( [[](value_definition_syntax#brackets) [<angle>](angle) [|](value_definition_syntax#single_bar) to <side-or-corner> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) , <color-stop-list> )    
  
<radial-gradient()> =   
  radial-gradient( [[](value_definition_syntax#brackets) [<ending-shape>](ending-shape) [||](value_definition_syntax#double_bar) <size> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) at <position> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) , <color-stop-list> )    
  
<side-or-corner> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets)  [||](value_definition_syntax#double_bar)  
  [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)    
  
<color-stop-list> =   
  <linear-color-stop> , [[](value_definition_syntax#brackets) <linear-color-hint>[?](value_definition_syntax#question_mark) , <linear-color-stop> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<size> =   
  <extent-keyword>              [|](value_definition_syntax#single_bar)  
  [<length [0,∞]>](length)                [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)[{2}](value_definition_syntax#curly_braces)    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<linear-color-stop> =   
  [<color>](color_value)               [&&](value_definition_syntax#double_ampersand)  
  <length-percentage>[?](value_definition_syntax#question_mark)    
  
<linear-color-hint> =   
  <length-percentage>    
  
<extent-keyword> =   
  closest-corner   [|](value_definition_syntax#single_bar)  
  closest-side     [|](value_definition_syntax#single_bar)  
  farthest-corner  [|](value_definition_syntax#single_bar)  
  farthest-side      
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Linear gradient example



A simple linear gradient.

 
```
.linear-gradient {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

```


### Radial gradient example



A simple radial gradient.

 
```
.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

```


### Repeating gradient examples



Simple repeating linear and radial gradient examples.

 
```
.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}

```


### Conic gradient example



A simple conic gradient example. Note that this isn't supported widely across browser as of yet.

 
```
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # gradients](https://w3c.github.io/csswg-drafts/css-images-4/#gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `gradient` | 2610 | 12 | 3.6Gradients are limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image), and [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image). | 10 | 1512.111–15 | 75.1 | ≤37≤37 | 2618 | 4Gradients are limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image), and [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image). | 1412.111–14 | 75 | 1.51.0 |
| `conic-gradient` | 69 | 79 | 83 | No | 56 | 12.1 | 69 | 69 | 83 | 48 | 12.2 | 10.0 |
| `linear-gradient` | 2610 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 10Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `[-ms-filter: progid:DXImageTransform.Microsoft.Gradient()](https://developer.mozilla.org/docs/Web/CSS/-ms-filter#Gradient)`. | 15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75.1["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | ≤37≤37 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.4["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 1.51.0 |
| `radial-gradient` | 2613 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 10Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `[-ms-filter: progid:DXImageTransform.Microsoft.Gradient()](https://developer.mozilla.org/docs/Web/CSS/-ms-filter#Gradient)`. | 1512.111.6–15 | 75.1Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | ≤37≤37 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.4Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 1412.112–14 | 75Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | 1.51.0 |
| `repeating-conic-gradient` | 69 | 79 | 83 | No | 56 | 12.1 | 69 | 69 | 83 | 48 | 12.2 | 10.0 |
| `repeating-linear-gradient` | 2610 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 10Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `[-ms-filter: progid:DXImageTransform.Microsoft.Gradient()](https://developer.mozilla.org/docs/Web/CSS/-ms-filter#Gradient)`. | 15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75.1["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | ≤37≤37 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.4["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 1.51.0 |
| `repeating-radial-gradient` | 2610 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 10 | 1512.112–15 | 75.1Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | ≤374.4 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.10Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 1412.112–14 | 75Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | 1.51.0 |


See also
--------


* [Using CSS gradients](css_images/using_css_gradients)
* Gradient functions: [`linear-gradient()`](gradient/linear-gradient), [`repeating-linear-gradient()`](gradient/repeating-linear-gradient), [`radial-gradient()`](gradient/radial-gradient), [`repeating-radial-gradient()`](gradient/repeating-radial-gradient), [`conic-gradient()`](gradient/conic-gradient), [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)
* [CSS Basic Data Types](css_types)
* [CSS Units and Values](css_values_and_units)
* [Introduction to CSS: Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient>

::grammar-error
===============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `::grammar-error` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents a text segment which the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) has flagged as grammatically incorrect.



Allowable properties
--------------------



Only a small subset of CSS properties can be used in a rule with `::grammar-error` in its selector:

 * [`color`](color)
* [`background-color`](background-color)
* [`cursor`](cursor)
* [`caret-color`](caret-color)
* [`outline`](outline) and its longhands
* [`text-decoration`](text-decoration) and its associated properties
* [`text-emphasis-color`](text-emphasis-color)
* [`text-shadow`](text-shadow)


Syntax
------



```
::grammar-error {
  /\* ... \*/
}

```
Examples
--------


### Simple document grammar check



In this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.

 #### HTML

 
```
<p>My friends is coming to the party tonight.</p>

```
 #### CSS

 
```
::grammar-error {
  text-decoration: underline red;
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error](https://w3c.github.io/csswg-drafts/css-pseudo/#selectordef-grammar-error) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::grammar-error` | No | No | No | No | No | NoSee [bug 175784](https://webkit.org/b/175784). | No | No | No | No | NoSee [bug 175784](https://webkit.org/b/175784). | No |


See also
--------


* [`::spelling-error`](::spelling-error)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::grammar-error>

grayscale()
===========


The `grayscale()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) converts the input image to grayscale. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



```
grayscale(amount)

```
### Parameters


 `amount`  Amount of the input image that is converted to grayscale. It is specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value of `100%` changes the input completely to grayscale, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` have linear multipliers on the effect. The default value when omitted is `0`. The initial value used for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `0`.

  Examples
--------


### Examples of correct values for grayscale()



```
grayscale(0)     /\* No effect \*/
grayscale(.7)    /\* 70% grayscale \*/
grayscale(100%)  /\* Completely grayscale \*/

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-grayscale](https://drafts.fxtf.org/filter-effects/#funcdef-filter-grayscale) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grayscale` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------



The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:

 * [`blur()`](blur)
* [`brightness()`](brightness)
* [`contrast()`](contrast)
* [`drop-shadow()`](drop-shadow)
* [`hue-rotate()`](hue-rotate)
* [`invert()`](invert)
* [`opacity()`](opacity)
* [`saturate()`](saturate)
* [`sepia()`](sepia)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale>

grid-area
=========


The `grid-area` CSS [shorthand property](shorthand_properties) specifies a grid item's size and location within a [grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid) by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------



 If four `<grid-line>` values are specified, `grid-row-start` is set to the first value, `grid-column-start` is set to the second value, `grid-row-end` is set to the third value, and `grid-column-end` is set to the fourth value.

 When `grid-column-end` is omitted, if `grid-column-start` is a [`<custom-ident>`](custom-ident), `grid-column-end` is set to that `<custom-ident>`; otherwise, it is set to `auto`.

 When `grid-row-end` is omitted, if `grid-row-start` is a `<custom-ident>`, `grid-row-end` is set to that `<custom-ident>`; otherwise, it is set to `auto`.

 When `grid-column-start` is omitted, if `grid-row-start` is a `<custom-ident>`, all four longhands are set to that value. Otherwise, it is set to `auto`.

 The grid-area property can also be set to a [`<custom-ident>`](custom-ident) which acts as a name for the area, which can then be placed using [`grid-template-areas`](grid-template-areas).


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`grid-row-start`](grid-row-start)
* [`grid-column-start`](grid-column-start)
* [`grid-row-end`](grid-row-end)
* [`grid-column-end`](grid-column-end)


Syntax
------



```
/\* Keyword values \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> values \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? values \*/
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] values \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/\* Global values \*/
grid-area: inherit;
grid-area: initial;
grid-area: revert;
grid-area: revert-layer;
grid-area: unset;

```
### Values


 `auto`  Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name '`<custom-ident>-start`'/'`<custom-ident>-end`', it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-area: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

  `<integer> && <custom-ident>?`  Contributes the n-th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a [`<custom-ident>`](custom-ident), only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is *n* lines from the opposite edge.

 If a name is given as a [`<custom-ident>`](custom-ident), only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 If the [`<integer>`](integer) is omitted, it defaults to `1`. Negative integers or 0 are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`grid-row-start`](grid-row-start): `auto`
* [`grid-column-start`](grid-column-start): `auto`
* [`grid-row-end`](grid-row-end): `auto`
* [`grid-column-end`](grid-column-end): `auto`
 |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`grid-row-start`](grid-row-start): as specified
* [`grid-column-start`](grid-column-start): as specified
* [`grid-row-end`](grid-row-end): as specified
* [`grid-column-end`](grid-column-end): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
grid-area =   
  <grid-line> [[](value_definition_syntax#brackets) / <grid-line> []](value_definition_syntax#brackets)[{0,3}](value_definition_syntax#curly_braces)    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting grid areas



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # propdef-grid-area](https://w3c.github.io/csswg-drafts/css-grid/#propdef-grid-area) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-area` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-row`](grid-row), [`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-column`](grid-column), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end), [`grid-template-areas`](grid-template-areas)
* Grid Layout Guide: *[Grid template areas](css_grid_layout/grid_template_areas)*
* Video tutorial: *[Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area>

grid-auto-flow
==============


The `grid-auto-flow` CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.


Try it
------


Syntax
------




```
/\* Keyword values \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/\* Global values \*/
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;

```
 This property may take one of two forms:

 * a single keyword: one of `row`, `column`, or `dense`.
* two keywords: `row dense` or `column dense`.


### Values


 `row`  Items are placed by filling each row in turn, adding new rows as necessary. If neither `row` nor `column` is provided, `row` is assumed.

  `column`  Items are placed by filling each column in turn, adding new columns as necessary.

  `dense`  "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

 If it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `row` |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
grid-auto-flow =   
  [[](value_definition_syntax#brackets) row [|](value_definition_syntax#single_bar) column []](value_definition_syntax#brackets)  [||](value_definition_syntax#double_bar)  
  dense               
  

```
Examples
--------


### Setting grid auto-placement



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>

```
 #### CSS

 
```
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # grid-auto-flow-property](https://w3c.github.io/csswg-drafts/css-grid/#grid-auto-flow-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-auto-flow` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-auto-rows`](grid-auto-rows), [`grid-auto-columns`](grid-auto-columns), [`grid`](grid)
* Grid Layout Guide: *[Auto-placement in grid layout](css_grid_layout/auto-placement_in_css_grid_layout)*
* Video tutorial: *[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow>

grid-auto-columns
=================


The `grid-auto-columns` CSS property specifies the size of an implicitly-created grid column [track](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks) or pattern of tracks.


Try it
------



 If a grid item is positioned into a column that is not explicitly sized by [`grid-template-columns`](grid-template-columns), implicit [grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid) tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.


Syntax
------



```
/\* Keyword values \*/
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/\* <length> values \*/
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/\* <percentage> values \*/
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/\* <flex> values \*/
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/\* minmax() values \*/
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/\* fit-content() values \*/
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/\* multiple track-size values \*/
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/\* Global values \*/
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;

```
### Values


 [`<length>`](length)  Is a non-negative length.

  [`<percentage>`](percentage)  Is a non-negative [`<percentage>`](percentage) value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like `auto`.

  [`<flex>`](flex_value)  Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

 When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

  [`max-content`](max-content)  Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

  [`min-content`](min-content)  Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

  [`minmax(min, max)`](minmax)  Is a functional notation that defines a size range greater than or equal to *min* and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).

  [`fit-content( [ <length> | <percentage> ] )`](fit-content_function)  Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

  `auto`  As a maximum represents the largest [`max-content`](max-content) size of the items in that track.

 As a minimum represents the largest minimum size of items in that track (specified by the [`min-width`](min-width)/[`min-height`](min-height) of the items). This is often, though not always, the [`min-content`](min-content) size.

 If used outside of [`minmax()`](minmax) notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.

  **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the [`align-content`](align-content) and [`justify-content`](justify-content) properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.

   Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| Percentages | refer to corresponding dimension of the content area |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | discrete |

Formal syntax
-------------



```
grid-auto-columns =   
  <track-size>[+](value_definition_syntax#plus)    
  
<track-size> =   
  <track-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <track-breadth> )  [|](value_definition_syntax#single_bar)  
  fit-content( <length-percentage> )                  
  
<track-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  [<flex>](flex)               [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<inflexible-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting grid column size



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

```
 #### CSS

 
```
#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # auto-tracks](https://w3c.github.io/csswg-drafts/css-grid/#auto-tracks) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-auto-columns` | 57 | 1612–79 | 7052–70Does not accept multiple track-size values. See [bug 1339672](https://bugzil.la/1339672). | 10 | 44 | 10.1 | 57 | 57 | 7952–79Does not accept multiple track-size values. See [bug 1339672](https://bugzil.la/1339672). | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-auto-rows`](grid-auto-rows), [`grid-auto-flow`](grid-auto-flow), [`grid`](grid)
* Grid Layout Guide: *[Auto-placement in grid layout - sizing rows in the implicit grid](css_grid_layout/auto-placement_in_css_grid_layout#sizing_rows_in_the_implicit_grid)*
* Video tutorial: *[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns>

grid-auto-rows
==============


The `grid-auto-rows` CSS property specifies the size of an implicitly-created grid row [track](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks) or pattern of tracks.


Try it
------



 If a grid item is positioned into a row that is not explicitly sized by [`grid-template-rows`](grid-template-rows), implicit [grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid) tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.


Syntax
------



```
/\* Keyword values \*/
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/\* <length> values \*/
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/\* <percentage> values \*/
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/\* <flex> values \*/
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/\* minmax() values \*/
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/\* fit-content() values \*/
grid-auto-rows: fit-content(400px);
grid-auto-rows: fit-content(5cm);
grid-auto-rows: fit-content(20%);

/\* multiple track-size values \*/
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/\* Global values \*/
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: revert;
grid-auto-rows: revert-layer;
grid-auto-rows: unset;

```
### Values


 [`<length>`](length)  Is a non-negative length.

  [`<percentage>`](percentage)  Is a non-negative [`<percentage>`](percentage) value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like `auto`.

  [`<flex>`](flex_value)  Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

 When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

  [`max-content`](max-content)  Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

  [`min-content`](min-content)  Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

  [`minmax(min, max)`](minmax)  Is a functional notation that defines a size range greater than or equal to *min* and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).

  [`fit-content( [ <length> | <percentage> ] )`](fit-content_function)  Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

  `auto`  As a maximum represents the largest [`max-content`](max-content) size of the items in that track.

 As a minimum represents the largest minimum size of items in that track (specified by the [`min-width`](min-width)/[`min-height`](min-height) of the items). This is often, though not always, the [`min-content`](min-content) size.

 If used outside of [`minmax()`](minmax) notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.

  **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the [`align-content`](align-content) and [`justify-content`](justify-content) properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.

   Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| Percentages | refer to corresponding dimension of the content area |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | discrete |

Formal syntax
-------------



```
grid-auto-rows =   
  <track-size>[+](value_definition_syntax#plus)    
  
<track-size> =   
  <track-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <track-breadth> )  [|](value_definition_syntax#single_bar)  
  fit-content( <length-percentage> )                  
  
<track-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  [<flex>](flex)               [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<inflexible-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting grid row size



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

```
 #### CSS

 
```
#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-rows: 100px;
}

#grid > div {
  background-color: lime;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # auto-tracks](https://w3c.github.io/csswg-drafts/css-grid/#auto-tracks) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-auto-rows` | 57 | 1612–79 | 7052–70Does not accept multiple track-size values. See [bug 1339672](https://bugzil.la/1339672). | 10 | 44 | 10.1 | 57 | 57 | 7952–79Does not accept multiple track-size values. See [bug 1339672](https://bugzil.la/1339672). | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-auto-columns`](grid-auto-columns), [`grid-auto-flow`](grid-auto-flow), [`grid`](grid)
* Grid Layout Guide: *[Auto-placement in grid layout - sizing rows in the implicit grid](css_grid_layout/auto-placement_in_css_grid_layout#sizing_rows_in_the_implicit_grid)*
* Video tutorial: *[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows>

grid-column
===========


The `grid-column` CSS [shorthand property](shorthand_properties) specifies a grid item's size and location within a [grid column](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column) by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`grid-column-end`](grid-column-end)
* [`grid-column-start`](grid-column-start)


Syntax
------




```
/\* Keyword values \*/
grid-column: auto;
grid-column: auto / auto;

/\* <custom-ident> values \*/
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

/\* <integer> + <custom-ident> values \*/
grid-column: somegridarea 4;
grid-column: 4 somegridarea / 6;

/\* span + <integer> + <custom-ident> values \*/
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

/\* Global values \*/
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

```
 This property is specified as one or two `<grid-line>` values.

  If two `<grid-line>` values are given, they are separated by `/`. The `grid-column-start` longhand is set to the value before the slash, and the `grid-column-end` longhand is set to the value after the slash. 

 Each `<grid-line>` value can be specified as:

 * either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.


### Values


 `auto`  Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name `<custom-ident>-start`/`<custom-ident>-end`, it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

  `<integer> && <custom-ident>?`  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is n lines from the opposite edge.

 If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`grid-column-start`](grid-column-start): `auto`
* [`grid-column-end`](grid-column-end): `auto`
 |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`grid-column-start`](grid-column-start): as specified
* [`grid-column-end`](grid-column-end): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
grid-column =   
  <grid-line> [[](value_definition_syntax#brackets) / <grid-line> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting grid column size and location



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # placement-shorthands](https://w3c.github.io/csswg-drafts/css-grid/#placement-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-column` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-row`](grid-row), [`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Video tutorial: *[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column>

grid-column-end
===============


The `grid-column-end` CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Syntax
------



```
/\* Keyword value \*/
grid-column-end: auto;

/\* <custom-ident> values \*/
grid-column-end: somegridarea;

/\* <integer> + <custom-ident> values \*/
grid-column-end: 2;
grid-column-end: somegridarea 4;

/\* span + <integer> + <custom-ident> values \*/
grid-column-end: span 3;
grid-column-end: span somegridarea;
grid-column-end: 5 somegridarea span;

/\* Global values \*/
grid-column-end: inherit;
grid-column-end: initial;
grid-column-end: revert;
grid-column-end: revert-layer;
grid-column-end: unset;

```
### Values


 `auto`  Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name '<custom-ident>-end', it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column-end: foo;` will choose the end edge of that named grid area (unless another line named `foo-end` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

  `<integer> && <custom-ident>?`  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement such that the column end edge of the grid item's grid area is n lines from the start edge.

 If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 If the <integer> is omitted, it defaults to `1`. Negative integers or 0 are invalid.

 The `<custom-ident>` cannot take the `span` value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
grid-column-end =   
  <grid-line>    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting column end for a grid item



#### HTML

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

```
 #### CSS

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # line-placement](https://w3c.github.io/csswg-drafts/css-grid/#line-placement) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-column-end` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-column-start`](grid-column-start), [`grid-column`](grid-column), [`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-row`](grid-row)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Video tutorial: *[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end>

grid-template-areas
===================


The `grid-template-areas` CSS property specifies named [grid areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas), establishing the cells in the grid and assigning them names.


Try it
------



 Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties [`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end), and their shorthands [`grid-row`](grid-row), [`grid-column`](grid-column), and [`grid-area`](grid-area).


Syntax
------



```
/\* Keyword value \*/
grid-template-areas: none;

/\* <string> values \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/\* Global values \*/
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;

```
### Values


 `none`  The grid container doesn't define any named grid areas.

  `[`<string>`](string)+`  A row is created for every separate string listed, and a column is created for each cell in the string. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
grid-template-areas =   
  none       [|](value_definition_syntax#single_bar)  
  [<string>](string)[+](value_definition_syntax#plus)    
  

```
Examples
--------


### Specifying named grid areas



#### HTML

 
```
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

```
 #### CSS

 
```
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # grid-template-areas-property](https://w3c.github.io/csswg-drafts/css-grid/#grid-template-areas-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-template-areas` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-template-rows`](grid-template-rows), [`grid-template-columns`](grid-template-columns), [`grid-template`](grid-template)
* Grid Layout Guide: *[Grid template areas](css_grid_layout/grid_template_areas)*
* Video tutorial: *[Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas>

grid
====



The `grid` CSS property is a [shorthand property](shorthand_properties) that sets all of the explicit and implicit grid properties in a single declaration.

 Using `grid` you specify one axis using [`grid-template-rows`](grid-template-rows) or [`grid-template-columns`](grid-template-columns), you then specify how content should auto-repeat in the other axis using the implicit grid properties: [`grid-auto-rows`](grid-auto-rows), [`grid-auto-columns`](grid-auto-columns), and [`grid-auto-flow`](grid-auto-flow).



Try it
------



  **Note:** The sub-properties you don't specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

 
Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`grid-auto-columns`](grid-auto-columns)
* [`grid-auto-flow`](grid-auto-flow)
* [`grid-auto-rows`](grid-auto-rows)
* [`grid-template-areas`](grid-template-areas)
* [`grid-template-columns`](grid-template-columns)
* [`grid-template-rows`](grid-template-rows)


Syntax
------



```
/\* <'grid-template'> values \*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? values \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> values \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/\* Global values \*/
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

```
### Values


 `<'grid-template'>`  Defines the [`grid-template`](grid-template) including [`grid-template-columns`](grid-template-columns), [`grid-template-rows`](grid-template-rows) and [`grid-template-areas`](grid-template-areas).

  `<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`  Sets up an auto-flow by setting the row tracks explicitly via the [`grid-template-rows`](grid-template-rows) property (and the [`grid-template-columns`](grid-template-columns) property to `none`) and specifying how to auto-repeat the column tracks via [`grid-auto-columns`](grid-auto-columns) (and setting [`grid-auto-rows`](grid-auto-rows) to `auto`). [`grid-auto-flow`](grid-auto-flow) is also set to `column` accordingly, with `dense` if it's specified.

 All other `grid` sub-properties are reset to their initial values.

  `[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`  Sets up an auto-flow by setting the column tracks explicitly via the [`grid-template-columns`](grid-template-columns) property (and the [`grid-template-rows`](grid-template-rows) property to `none`) and specifying how to auto-repeat the row tracks via [`grid-auto-rows`](grid-auto-rows) (and setting [`grid-auto-columns`](grid-auto-columns) to `auto`). [`grid-auto-flow`](grid-auto-flow) is also set to `row` accordingly, with `dense` if it's specified.

 All other `grid` sub-properties are reset to their initial values.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`grid-template-rows`](grid-template-rows): `none`
* [`grid-template-columns`](grid-template-columns): `none`
* [`grid-template-areas`](grid-template-areas): `none`
* [`grid-auto-rows`](grid-auto-rows): `auto`
* [`grid-auto-columns`](grid-auto-columns): `auto`
* [`grid-auto-flow`](grid-auto-flow): `row`
* [`grid-column-gap`](column-gap): `0`
* [`grid-row-gap`](row-gap): `0`
* [`column-gap`](column-gap): `normal`
* [`row-gap`](row-gap): `normal`
 |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`grid-template-rows`](grid-template-rows): refer to corresponding dimension of the content area
* [`grid-template-columns`](grid-template-columns): refer to corresponding dimension of the content area
* [`grid-auto-rows`](grid-auto-rows): refer to corresponding dimension of the content area
* [`grid-auto-columns`](grid-auto-columns): refer to corresponding dimension of the content area
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`grid-template-rows`](grid-template-rows): as specified, but with relative lengths converted into absolute lengths
* [`grid-template-columns`](grid-template-columns): as specified, but with relative lengths converted into absolute lengths
* [`grid-template-areas`](grid-template-areas): as specified
* [`grid-auto-rows`](grid-auto-rows): the percentage as specified or the absolute length
* [`grid-auto-columns`](grid-auto-columns): the percentage as specified or the absolute length
* [`grid-auto-flow`](grid-auto-flow): as specified
* [`grid-column-gap`](column-gap): the percentage as specified or the absolute length
* [`grid-row-gap`](row-gap): the percentage as specified or the absolute length
* [`column-gap`](column-gap): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* [`row-gap`](row-gap): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | discrete |

Formal syntax
-------------



```
grid =   
  <'grid-template'>                                   [|](value_definition_syntax#single_bar)  
  <'grid-template-rows'> / [[](value_definition_syntax#brackets) auto-flow [&&](value_definition_syntax#double_ampersand) dense[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets) <'grid-auto-columns'>[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) auto-flow [&&](value_definition_syntax#double_ampersand) dense[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets) <'grid-auto-rows'>[?](value_definition_syntax#question_mark) / <'grid-template-columns'>    
  

```
Examples
--------


### Creating a grid layout



#### HTML

 
```
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # grid-shorthand](https://w3c.github.io/csswg-drafts/css-grid/#grid-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0This was added early so is out of sync with the equivalent Chromium version. |


See also
--------


* Related CSS properties: [`grid-template`](grid-template), [`grid-template-rows`](grid-template-rows), [`grid-template-columns`](grid-template-columns), [`grid-template-areas`](grid-template-areas), [`grid-auto-columns`](grid-auto-columns), [`grid-auto-rows`](grid-auto-rows), [`grid-auto-flow`](grid-auto-flow)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Grid Layout Guide: *[Grid template areas - Grid definition shorthands](css_grid_layout/grid_template_areas#grid_definition_shorthands)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid>

grid-row-end
============


The `grid-row-end` CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Syntax
------



```
/\* Keyword value \*/
grid-row-end: auto;

/\* <custom-ident> values \*/
grid-row-end: somegridarea;

/\* <integer> + <custom-ident> values \*/
grid-row-end: 2;
grid-row-end: somegridarea 4;

/\* span + <integer> + <custom-ident> values \*/
grid-row-end: span 3;
grid-row-end: span somegridarea;
grid-row-end: 5 somegridarea span;

/\* Global values \*/
grid-row-end: inherit;
grid-row-end: initial;
grid-row-end: revert;
grid-row-end: revert-layer;
grid-row-end: unset;

```
### Values


 `auto`  Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name '<custom-ident>-end', it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-end: foo;` will choose the end edge of that named grid area (unless another line named `foo-end` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

 The `<custom-ident>` cannot take the `span` value.

  `<integer> && <custom-ident>?`  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement such that the row end edge of the grid item's grid area is n lines from the start edge.

 If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 If the <integer> is omitted, it defaults to `1`. Negative integers or 0 are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
grid-row-end =   
  <grid-line>    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting row end for a grid item



#### HTML

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

```
 #### CSS

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # line-placement](https://w3c.github.io/csswg-drafts/css-grid/#line-placement) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-row-end` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-row-start`](grid-row-start), [`grid-row`](grid-row), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end), [`grid-column`](grid-column)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Video tutorial: *[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end>

grid-template
=============


The `grid-template` CSS property is a [shorthand property](shorthand_properties) for defining [grid columns](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column), [grid rows](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row), and [grid areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`grid-template-areas`](grid-template-areas)
* [`grid-template-columns`](grid-template-columns)
* [`grid-template-rows`](grid-template-rows)


Syntax
------



```
/\* Keyword value \*/
grid-template: none;

/\* grid-template-rows / grid-template-columns values \*/
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/\* grid-template-areas grid-template-rows / grid-template-column values \*/
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom]
  / auto 1fr auto;

/\* Global values \*/
grid-template: inherit;
grid-template: initial;
grid-template: revert;
grid-template: revert-layer;
grid-template: unset;

```
### Values



 `none`  Is a keyword that sets all three longhand properties to `none`, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the [`grid-auto-rows`](grid-auto-rows) and [`grid-auto-columns`](grid-auto-columns) properties.

  `<'grid-template-rows'> / <'grid-template-columns'>`  Sets [`grid-template-rows`](grid-template-rows) and [`grid-template-columns`](grid-template-columns) to the specified values, and sets [`grid-template-areas`](grid-template-areas) to `none`.

  `[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`  Sets [`grid-template-areas`](grid-template-areas) to the strings listed, [`grid-template-rows`](grid-template-rows) to the track sizes following each string (filling in `auto` for any missing sizes), and splicing in the named lines defined before/after each size, and [`grid-template-columns`](grid-template-columns) to the track listing specified after the slash (or `none`, if not specified).

  **Note:** The [`repeat()`](repeat) function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the "ASCII art".

     **Note:** The [`grid`](grid) shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use `grid` (as opposed to `grid-template`) to prevent these values from cascading in separately.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`grid-template-columns`](grid-template-columns): `none`
* [`grid-template-rows`](grid-template-rows): `none`
* [`grid-template-areas`](grid-template-areas): `none`
 |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`grid-template-columns`](grid-template-columns): refer to corresponding dimension of the content area
* [`grid-template-rows`](grid-template-rows): refer to corresponding dimension of the content area
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`grid-template-columns`](grid-template-columns): as specified, but with relative lengths converted into absolute lengths
* [`grid-template-rows`](grid-template-rows): as specified, but with relative lengths converted into absolute lengths
* [`grid-template-areas`](grid-template-areas): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
grid-template =   
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <'grid-template-rows'> / <'grid-template-columns'> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [<string>](string) <track-size>[?](value_definition_syntax#question_mark) <line-names>[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) [[](value_definition_syntax#brackets) / <explicit-track-list> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  
<line-names> =   
  '[' [<custom-ident>](custom-ident)[\*](value_definition_syntax#asterisk) ']'    
  
<track-size> =   
  <track-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <track-breadth> )  [|](value_definition_syntax#single_bar)  
  fit-content( <length-percentage> )                  
  
<explicit-track-list> =   
  [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <track-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark)    
  
<track-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  [<flex>](flex)               [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<inflexible-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Defining a grid template



#### CSS

 
```
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-area: foot;
}

```
 #### HTML

 
```
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # explicit-grid-shorthand](https://w3c.github.io/csswg-drafts/css-grid/#explicit-grid-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-template` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-template-rows`](grid-template-rows), [`grid-template-columns`](grid-template-columns), [`grid-template-areas`](grid-template-areas)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Grid Layout Guide: *[Grid template areas - Grid definition shorthands](css_grid_layout/grid_template_areas#grid_definition_shorthands)*
* Video tutorial: *[Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template>

grid-column-start
=================


The `grid-column-start` CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Syntax
------




```
/\* Keyword value \*/
grid-column-start: auto;

/\* <custom-ident> value \*/
grid-column-start: somegridarea;

/\* <integer> + <custom-ident> values \*/
grid-column-start: 2;
grid-column-start: somegridarea 4;

/\* span + <integer> + <custom-ident> values \*/
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: span somegridarea 5;

/\* Global values \*/
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: revert;
grid-column-start: revert-layer;
grid-column-start: unset;

```
 This property is specified as a single `<grid-line>` value. A `<grid-line>` value can be specified as:

 * either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.


### Values


 `auto`  A keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name `<custom-ident>-start`, it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

  `<integer> && <custom-ident>?`  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement, such that the column start edge of the grid item's grid area is n lines from the end edge.

 If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 If the <integer> is omitted, it defaults to `1`. Negative integers and `0` are invalid.

 The `<custom-ident>` cannot take the `span` value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
grid-column-start =   
  <grid-line>    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting column start for a grid item



#### HTML

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

```
 #### CSS

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # line-placement](https://w3c.github.io/csswg-drafts/css-grid/#line-placement) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-column-start` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-column-end`](grid-column-end), [`grid-column`](grid-column), [`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-row`](grid-row)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Video tutorial: *[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start>

grid-row
========


The `grid-row` CSS [shorthand property](shorthand_properties) specifies a grid item's size and location within a [grid row](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row) by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`grid-row-end`](grid-row-end)
* [`grid-row-start`](grid-row-start)


Syntax
------




```
/\* Keyword values \*/
grid-row: auto;
grid-row: auto / auto;

/\* <custom-ident> values \*/
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/\* <integer> + <custom-ident> values \*/
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/\* span + <integer> + <custom-ident> values \*/
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

/\* Global values \*/
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

```
 This property is specified as one or two `<grid-line>` values.

 If two `<grid-line>` values are given, they are separated by `/`. The `grid-row-start` longhand is set to the value before the slash, and the `grid-row-end` longhand is set to the value after the slash.

 Each `<grid-line>` value can be specified as:

 * either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.


### Values


 `auto`  Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name `<custom-ident>-start`/`<custom-ident>-end`, it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

  `<integer> && <custom-ident>?`  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is n lines from the opposite edge.

 If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`grid-row-start`](grid-row-start): `auto`
* [`grid-row-end`](grid-row-end): `auto`
 |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`grid-row-start`](grid-row-start): as specified
* [`grid-row-end`](grid-row-end): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
grid-row =   
  <grid-line> [[](value_definition_syntax#brackets) / <grid-line> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting grid row size and location



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(6, 1fr);
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-row: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-row: span 2 / 7;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # placement-shorthands](https://w3c.github.io/csswg-drafts/css-grid/#placement-shorthands) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-row` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-row-start`](grid-row-start), [`grid-row-end`](grid-row-end), [`grid-column`](grid-column), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Video tutorial: *[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row>

grid-row-start
==============


The `grid-row-start` CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its [grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas).


Try it
------


Syntax
------




```
/\* Keyword value \*/
grid-row-start: auto;

/\* <custom-ident> values \*/
grid-row-start: somegridarea;

/\* <integer> + <custom-ident> values \*/
grid-row-start: 2;
grid-row-start: somegridarea 4;

/\* span + <integer> + <custom-ident> values \*/
grid-row-start: span 3;
grid-row-start: span somegridarea;
grid-row-start: 5 somegridarea span;

/\* Global values \*/
grid-row-start: inherit;
grid-row-start: initial;
grid-row-start: revert;
grid-row-start: revert-layer;
grid-row-start: unset;

```
 This property is specified as a single `<grid-line>` value. A `<grid-line>` value can be specified as:

 * either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.


### Values


 `auto`  Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.

  `<custom-ident>`  If there is a named line with the name '<custom-ident>-start', it contributes the first such line to the grid item's placement.

  **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).

  Otherwise, this is treated as if the integer `1` had been specified along with the `<custom-ident>`.

  `<integer> && <custom-ident>?`  Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

 If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

 An [`<integer>`](integer) value of `0` is invalid.

  `span && [ <integer> || <custom-ident> ]`  Contributes a grid span to the grid item's placement; such that the row start edge of the grid item's grid area is n lines from the end edge.

 If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.

 If the <integer> is omitted, it defaults to `1`. Negative integers or 0 are invalid.

 The `<custom-ident>` cannot take the `span` value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
grid-row-start =   
  <grid-line>    
  
<grid-line> =   
  auto                                                [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)                                      [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) [<integer [-∞,-1]>](integer) [|](value_definition_syntax#single_bar) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<custom-ident>](custom-ident)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) span [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [||](value_definition_syntax#double_bar) [<custom-ident>](custom-ident) []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)     
  

```
Examples
--------


### Setting row start for a grid item



#### HTML

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

```
 #### CSS

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # line-placement](https://w3c.github.io/csswg-drafts/css-grid/#line-placement) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-row-start` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-row-end`](grid-row-end), [`grid-row`](grid-row), [`grid-column-start`](grid-column-start), [`grid-column-end`](grid-column-end), [`grid-column`](grid-column)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Video tutorial: *[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start>

grid-template-columns
=====================


The `grid-template-columns` CSS property defines the line names and track sizing functions of the [grid columns](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column).


Try it
------


Syntax
------



```
/\* Keyword value \*/
grid-template-columns: none;

/\* <track-list> values \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/\* <auto-track-list> values \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Global values \*/
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

```
### Values



 `none`  Indicates that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the [`grid-auto-columns`](grid-auto-columns) property.

  `[linename]`  A [`<custom-ident>`](custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.

  [`<length>`](length)  A non-negative length, giving the width of the column.

  [`<percentage>`](percentage)   Is a non-negative [`<percentage>`](percentage) value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto`. The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage. 

  [`<flex>`](flex_value)  Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

 When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

  [`max-content`](max-content)  Is a keyword representing the largest [maximal content contribution](https://www.w3.org/TR/css-sizing-3/#max-content) of the grid items occupying the grid track. For example, if the first element of the grid track contains the sentence *"Repetitio est mater studiorum"* and the second element contains the sentence *"Dum spiro, spero"*, maximal content contribution will be defined by the size of the largest sentence among all of the grid elements - *"Repetitio est mater studiorum"*.

  [`min-content`](min-content)  Is a keyword representing the largest [minimal content contribution](https://www.w3.org/TR/css-sizing-3/#min-content) of the grid items occupying the grid track. For example, if the first element of the grid track contains the sentence *"Repetitio est mater studiorum"* and the second element contains the sentence *"Dum spiro, spero"*, minimal content contribution will be defined by the size of the largest word among all of the sentences in the grid elements - *"studiorum"*.

  [`minmax(min, max)`](minmax)  Is a functional notation that defines a size range greater than or equal to *min* and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.

  `auto`  As a maximum represents the largest [`max-content`](max-content) size of the items in that track.

 As a minimum represents the largest minimum size of items in that track (specified by the [`min-width`](min-width)/[`min-height`](min-height) of the items). This is often, though not always, the [`min-content`](min-content) size.

 If used outside of [`minmax()`](minmax) notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.

  **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the [`align-content`](align-content) and [`justify-content`](justify-content) properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.

   `[`fit-content( [ <length> | <percentage> ] )`](fit-content_function)`  Represents the formula `max(minimum, min(limit, max-content))`, where *minimum* represents an `auto` minimum (which is often, but not always, equal to a [`min-content`](min-content) minimum), and *limit* is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of `minmax(auto, max-content)` and `minmax(auto, limit)`.

  [`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`](repeat)  Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.

  
[`masonry`](css_grid_layout/masonry_layout)  Experimental 
  The masonry value indicates that this axis should be laid out according to the masonry algorithm.

  [`subgrid`](css_grid_layout/subgrid)  The `subgrid` value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.

    **Warning:** The `masonry` value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.

 The `subgrid` value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| Percentages | refer to corresponding dimension of the content area |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

Formal syntax
-------------



```
grid-template-columns =   
  none                       [|](value_definition_syntax#single_bar)  
  <track-list>               [|](value_definition_syntax#single_bar)  
  <auto-track-list>          [|](value_definition_syntax#single_bar)  
  subgrid <line-name-list>[?](value_definition_syntax#question_mark)    
  
<track-list> =   
  [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <track-size> [|](value_definition_syntax#single_bar) <track-repeat> []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark)    
  
<auto-track-list> =   
  [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <fixed-size> [|](value_definition_syntax#single_bar) <fixed-repeat> []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk) <line-names>[?](value_definition_syntax#question_mark) <auto-repeat> [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <fixed-size> [|](value_definition_syntax#single_bar) <fixed-repeat> []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk) <line-names>[?](value_definition_syntax#question_mark)    
  
<line-name-list> =   
  [[](value_definition_syntax#brackets) <line-names> [|](value_definition_syntax#single_bar) <name-repeat> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)    
  
<line-names> =   
  '[' [<custom-ident>](custom-ident)[\*](value_definition_syntax#asterisk) ']'    
  
<track-size> =   
  <track-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <track-breadth> )  [|](value_definition_syntax#single_bar)  
  fit-content( <length-percentage> )                  
  
<track-repeat> =   
  repeat( [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <track-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark) )    
  
<fixed-size> =   
  <fixed-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <fixed-breadth> , <track-breadth> )       [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <fixed-breadth> )    
  
<fixed-repeat> =   
  repeat( [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <fixed-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark) )    
  
<auto-repeat> =   
  repeat( [[](value_definition_syntax#brackets) auto-fill [|](value_definition_syntax#single_bar) auto-fit []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <fixed-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark) )    
  
<name-repeat> =   
  repeat( [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [|](value_definition_syntax#single_bar) auto-fill []](value_definition_syntax#brackets) , <line-names>[+](value_definition_syntax#plus) )    
  
<track-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  [<flex>](flex)               [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<inflexible-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  
<fixed-breadth> =   
  <length-percentage>    
  

```
Examples
--------


### Specifying grid column sizes



#### HTML

 
```
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # track-sizing](https://w3c.github.io/csswg-drafts/css-grid/#track-sizing) |
| [CSS Grid Layout Module Level 2 # subgrids](https://w3c.github.io/csswg-drafts/css-grid/#subgrids) |
| [CSS Grid Layout Module Level 3 # masonry-layout](https://w3c.github.io/csswg-drafts/css-grid-3/#masonry-layout) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-template-columns` | 57 | 1612–79 | 52 | 10 | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |
| `animation` | 107 | 107 | 66 | No | 93 | 16 | 107 | 107 | 66 | 73 | 16 | No |
| `fit-content` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |
| `masonry` | No | No | 77 | No | No | No | No | No | No | No | No | No |
| `minmax` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |
| `repeat` | 57 | 16 | 7657–76`repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see [bug 1341507](https://bugzil.la/1341507)).52–57[`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) doesn't work in `repeat()` (see [bug 1350069](https://bugzil.la/1350069)). | No | 44 | 10.1 | 57 | 57 | 7957–79`repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see [bug 1341507](https://bugzil.la/1341507)).52–57[`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) doesn't work in `repeat()` (see [bug 1350069](https://bugzil.la/1350069)). | 43 | 10.3 | 6.0 |
| `subgrid` | NoSee [bug 618969](https://crbug.com/618969). | NoSee [bug 618969](https://crbug.com/618969). | 71 | No | NoSee [bug 618969](https://crbug.com/618969). | 16 | NoSee [bug 618969](https://crbug.com/618969). | NoSee [bug 618969](https://crbug.com/618969). | No | NoSee [bug 618969](https://crbug.com/618969). | 16 | NoSee [bug 618969](https://crbug.com/618969). |


See also
--------


* Related CSS properties: [`grid-template-rows`](grid-template-rows), [`grid-template-areas`](grid-template-areas), [`grid-template`](grid-template)
* Grid Layout Guide: *[Basic concepts of grid layout - Grid Tracks](css_grid_layout/basic_concepts_of_grid_layout#grid_tracks)*
* Video tutorial: *[Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)*
* [Subgrid](css_grid_layout/subgrid)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns>

grid-template-rows
==================


The `grid-template-rows` CSS property defines the line names and track sizing functions of the [grid rows](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row).


Try it
------


Syntax
------




```
/\* Keyword value \*/
grid-template-rows: none;

/\* <track-list> values \*/
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/\* <auto-track-list> values \*/
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Global values \*/
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;

```
 This property may be specified as:

 * either the keyword value `none`
* or a `<track-list>` value
* or an `<auto-track-list>` value.


### Values



 `none`  Is a keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the [`grid-auto-rows`](grid-auto-rows) property.

  `[linename]`  A [`<custom-ident>`](custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.

  [`<length>`](length)  Is a non-negative length.

  [`<percentage>`](percentage)  Is a non-negative [`<percentage>`](percentage) value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto` for the purpose of calculating the intrinsic size of the grid container. It must then be resolved against the resulting grid container size for the purpose of laying out the grid and its items. The intrinsic size contributions of the track may be adjusted to the size of the grid container and may increase the final size of the track by the minimum amount that would result in honoring the percentage.

  [`<flex>`](flex_value)  Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

  [`max-content`](max-content)  Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

  [`min-content`](min-content)  Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

  [`minmax(min, max)`](minmax)  Is a functional notation that defines a size range, greater than or equal to *min*, and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.

  `auto`  As a maximum represents the largest [`max-content`](max-content) size of the items in that track.

 As a minimum represents the largest minimum size of items in that track (specified by the [`min-width`](min-width)/[`min-height`](min-height) of the items). This is often, though not always, the [`min-content`](min-content) size.

 If used outside of [`minmax()`](minmax) notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.

  **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the [`align-content`](align-content) and [`justify-content`](justify-content) properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.

   [`fit-content( [ <length> | <percentage> ] )`](fit-content_function)  Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

  [`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`](repeat)  Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.

  
[`masonry`](css_grid_layout/masonry_layout)  Experimental 
  The masonry value indicates that this axis should be laid out according to the masonry algorithm.

  [`subgrid`](css_grid_layout/subgrid)  The `subgrid` value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.

    **Warning:** The `masonry` value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.

 The `subgrid` value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | grid containers |
| [Inherited](inheritance) | no |
| Percentages | refer to corresponding dimension of the content area |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

Formal syntax
-------------



```
grid-template-rows =   
  none                       [|](value_definition_syntax#single_bar)  
  <track-list>               [|](value_definition_syntax#single_bar)  
  <auto-track-list>          [|](value_definition_syntax#single_bar)  
  subgrid <line-name-list>[?](value_definition_syntax#question_mark)    
  
<track-list> =   
  [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <track-size> [|](value_definition_syntax#single_bar) <track-repeat> []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark)    
  
<auto-track-list> =   
  [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <fixed-size> [|](value_definition_syntax#single_bar) <fixed-repeat> []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk) <line-names>[?](value_definition_syntax#question_mark) <auto-repeat> [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <fixed-size> [|](value_definition_syntax#single_bar) <fixed-repeat> []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk) <line-names>[?](value_definition_syntax#question_mark)    
  
<line-name-list> =   
  [[](value_definition_syntax#brackets) <line-names> [|](value_definition_syntax#single_bar) <name-repeat> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)    
  
<line-names> =   
  '[' [<custom-ident>](custom-ident)[\*](value_definition_syntax#asterisk) ']'    
  
<track-size> =   
  <track-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <track-breadth> )  [|](value_definition_syntax#single_bar)  
  fit-content( <length-percentage> )                  
  
<track-repeat> =   
  repeat( [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <track-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark) )    
  
<fixed-size> =   
  <fixed-breadth>                                   [|](value_definition_syntax#single_bar)  
  minmax( <fixed-breadth> , <track-breadth> )       [|](value_definition_syntax#single_bar)  
  minmax( <inflexible-breadth> , <fixed-breadth> )    
  
<fixed-repeat> =   
  repeat( [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <fixed-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark) )    
  
<auto-repeat> =   
  repeat( [[](value_definition_syntax#brackets) auto-fill [|](value_definition_syntax#single_bar) auto-fit []](value_definition_syntax#brackets) , [[](value_definition_syntax#brackets) <line-names>[?](value_definition_syntax#question_mark) <fixed-size> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) <line-names>[?](value_definition_syntax#question_mark) )    
  
<name-repeat> =   
  repeat( [[](value_definition_syntax#brackets) [<integer [1,∞]>](integer) [|](value_definition_syntax#single_bar) auto-fill []](value_definition_syntax#brackets) , <line-names>[+](value_definition_syntax#plus) )    
  
<track-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  [<flex>](flex)               [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<inflexible-breadth> =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  min-content          [|](value_definition_syntax#single_bar)  
  max-content          [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  
<fixed-breadth> =   
  <length-percentage>    
  

```
Examples
--------


### Specifying grid row sizes



#### HTML

 
```
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # track-sizing](https://w3c.github.io/csswg-drafts/css-grid/#track-sizing) |
| [CSS Grid Layout Module Level 2 # subgrids](https://w3c.github.io/csswg-drafts/css-grid/#subgrids) |
| [CSS Grid Layout Module Level 3 # masonry-layout](https://w3c.github.io/csswg-drafts/css-grid-3/#masonry-layout) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid-template-rows` | 57 | 1612–79 | 52 | 10 | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |
| `animation` | 107 | 107 | 66 | No | 93 | 16 | 107 | 107 | 66 | 73 | 16 | No |
| `fit-content` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |
| `masonry` | No | No | 77 | No | No | No | No | No | No | No | No | No |
| `minmax` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |
| `repeat` | 57 | 16 | 7657–76`repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see [bug 1341507](https://bugzil.la/1341507)).52–57[`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) doesn't work in `repeat()` (see [bug 1350069](https://bugzil.la/1350069)). | No | 44 | 10.1 | 57 | 57 | 7957–79`repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see [bug 1341507](https://bugzil.la/1341507)).52–57[`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) doesn't work in `repeat()` (see [bug 1350069](https://bugzil.la/1350069)). | 43 | 10.3 | 6.0 |
| `subgrid` | NoSee [bug 618969](https://crbug.com/618969). | NoSee [bug 618969](https://crbug.com/618969). | 71 | No | NoSee [bug 618969](https://crbug.com/618969). | 16 | NoSee [bug 618969](https://crbug.com/618969). | NoSee [bug 618969](https://crbug.com/618969). | No | NoSee [bug 618969](https://crbug.com/618969). | 16 | NoSee [bug 618969](https://crbug.com/618969). |


See also
--------


* Related CSS properties: [`grid-template-columns`](grid-template-columns), [`grid-template-areas`](grid-template-areas), [`grid-template`](grid-template)
* Grid Layout Guide: *[Basic concepts of grid layout - Grid Tracks](css_grid_layout/basic_concepts_of_grid_layout#grid_tracks)*
* Video tutorial: *[Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)*
* [Subgrid](css_grid_layout/subgrid)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows>

hanging-punctuation
===================



The `hanging-punctuation` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

 
```
/\* Keyword values \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* Two keywords \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* Three keywords \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/\* Global values \*/
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: revert-layer;
hanging-punctuation: unset;

```


Syntax
------



The `hanging-punctuation` property may be specified with one, two, or three space-separated values.

 * **One-value** syntax uses any one of the keyword values in the list below.
* **Two-value** syntax uses one of the following:
	+ `first` together with any one of `last`, `allow-end`, or `force-end`
	+ `last` together with any one of `first`, `allow-end`, or `force-end`
* **Three-value** syntax uses one of the following:
	+ `first`, `allow-end`, and `last`
	+ `first`, `force-end`, and `last`


### Values



 `none`  No character hangs.

  `first`  An opening bracket or quote at the start of the first formatted line of an element hangs. This applies to:

 * all characters in the Unicode categories [Ps](https://unicodeplus.com/category/Ps), [Pf](https://unicodeplus.com/category/Pf), [Pi](https://unicodeplus.com/category/Pi)
* the quote marks `U+0027` APOSTROPHE (`'`) and `U+0022` QUOTATION MARK (`"`).

  `last`  A closing bracket or quote at the end of the last formatted line of an element hangs. This applies to:

 * all characters in the Unicode categories [Pe](https://unicodeplus.com/category/Pe), [Pf](https://unicodeplus.com/category/Pf), [Pi](https://unicodeplus.com/category/Pi)
* the quote marks `U+0027` APOSTROPHE (`'`) and `U+0022` QUOTATION MARK (`"`).

  `force-end`  A stop or comma at the end of a line hangs.

  `allow-end`  A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.

   Stops and commas that are allowed to hang include:

 * `U+002C`, COMMA
* `U+002E`, FULL STOP
* `U+060C`, ARABIC COMMA
* `U+06D4`, ARABIC FULL STOP
* `U+3001`, IDEOGRAPHIC COMMA
* `U+3002`, IDEOGRAPHIC FULL STOP
* `U+FF0C`, FULLWIDTH COMMA
* `U+FF0E`, FULLWIDTH FULL STOP
* `U+FE50`, SMALL COMMA
* `U+FE51`, SMALL IDEOGRAPHIC COMMA
* `U+FE52`, SMALL FULL STOP
* `U+FF61`, HALFWIDTH IDEOGRAPHIC FULL STOP
* `U+FF64`, HALFWIDTH IDEOGRAPHIC COMMA

 User agents may include additional characters.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
hanging-punctuation =   
  none                                            [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) first [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) force-end [|](value_definition_syntax#single_bar) allow-end []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) last []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Setting opening and closing quotes to hang



#### HTML

 
```
<p>
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

<p class="hanging right">
  «For a moment, nothing happened. Then, after a second or so, nothing continued
  to happen.»
</p>

```
 #### CSS

 
```
p {
  width: 15em;
  border: 1px solid #cccccc;
  font-size: 2rem;
  font-style: italic;
  margin: 1em;
}

p.hanging {
  hanging-punctuation: first last;
}

p.right {
  text-align: right;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # hanging-punctuation-property](https://w3c.github.io/csswg-drafts/css-text/#hanging-punctuation-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hanging-punctuation` | No | No | No | No | No | 10["The `force-end` keyword is recognized but has no effect.", "The characters `U+0027` and `U+0022` are not supported by the `first` and `last` keywords."] | No | No | No | No | 10["The `force-end` keyword is recognized but has no effect.", "The characters `U+0027` and `U+0022` are not supported by the `first` and `last` keywords."] | No |


See also
--------


* [`text-indent`](text-indent)
* [CSS Tricks: Hanging punctuation](https://css-tricks.com/almanac/properties/h/hanging-punctuation/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation>

:host()
=======



The `:host()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) function selects the shadow host of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.

 The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of [`:host-context()`](:host-context).

  **Note:** This has no effect when used outside a shadow DOM.

  
```
/\* Selects a shadow root host, only if it is
 matched by the selector argument \*/
:host(.special-custom-element) {
  font-weight: bold;
}

```


Syntax
------



```
:host(<compound-selector>) {
  /\* ... \*/
}

```
Examples
--------


### Selectively styling shadow hosts



The following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/main/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).

 In this example we have a simple custom element — `<context-span>` — that you can wrap around text:

 
```
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

```
 Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:

 
```
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

```
 The `:host(.footer) { color : red; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) a special color.


Specifications
--------------




| Specification |
| --- |
| [CSS Scoping Module Level 1 # host-selector](https://w3c.github.io/csswg-drafts/css-scoping/#host-selector) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:host_function` | 54 | 79 | 63 | No | 41 | 10Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy. | 54 | 54 | 63 | 41 | 10Certain CSS selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy. | 6.0 |


See also
--------


* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
* [`:host`](:host)
* [`:host-context()`](:host-context)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function>

:hover
======


The `:hover` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).


Try it
------



 Styles defined by the `:hover` pseudo-class will be overridden by any subsequent link-related pseudo-class ([`:link`](:link), [`:visited`](:visited), or [`:active`](:active)) that has at least equal specificity. To style links appropriately, 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`.

  **Note:** The `:hover` pseudo-class is problematic on touchscreens. Depending on the browser, the `:hover` pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

 
Syntax
------



```
:hover {
  /\* ... \*/
}

```
Examples
--------


### Basic example



#### HTML

 
```
<a href="#">Try hovering over this link.</a>

```
 #### CSS

 
```
a {
  background-color: powderblue;
  transition: background-color 0.5s;
}

a:hover {
  background-color: gold;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-hover](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-hover) |
| [Selectors Level 4 # the-hover-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-hover-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:hover` | 1 | 12 | 1 | 4 | 4 | 2 | 4.4 | 18 | 4 | 10.1 | 1As of Safari for iOS 7.1.2, tapping a [clickable element](https://developer.mozilla.org/docs/Web/Events/click#Safari_Mobile) causes the element to enter the `:hover` state. The element will remain in the `:hover` state until a different element has entered the `:hover` state. | 1.0 |
| `a_elements` | 1 | 12 | 1 | 4 | 4 | 2 | 37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `all_elements` | 1 | 12In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved. See [bug 5381673](https://developer.microsoft.com/microsoft-edge/platform/issues/5381673/). | 1 | 7["In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the `:hover` state until the pointer is moved. See [bug 926665](https://connect.microsoft.com/IE/feedbackdetail/view/926665).", "In Internet Explorer 9 (and possibly earlier), if a [`<table>`](https://developer.mozilla.org/docs/Web/HTML/Element/table) has a parent with a non-`auto` [`width`](https://developer.mozilla.org/docs/Web/CSS/width), [`overflow-x`](https://developer.mozilla.org/docs/Web/CSS/overflow-x)`: auto;`, the [`<table>`](https://developer.mozilla.org/docs/Web/HTML/Element/table) has enough content to horizontally overflow its parent, and there are [`:hover`](https://developer.mozilla.org/docs/Web/CSS/:hover) styles set on elements within the table, then hovering over said elements will cause the [`<table>`](https://developer.mozilla.org/docs/Web/HTML/Element/table)'s height to increase. See [a live demo that triggers the bug](https://output.jsbin.com/diwiqe). One workaround for the bug is to set `min-height: 0%;` (the `%` unit must be specified, since unitless and `px` don't work) on the `<table>`'s parent element."] | 7 | 2 | 37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `pseudo_elements` | 1 | 12 | 28 | 11 | 15 | 2 | ≤37 | 18 | 28 | 14 | 1 | 1.0 |


See also
--------


* [Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport](https://crbug.com/370155)
* [Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.](https://crbug.com/306581)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>

hyphenate-character
===================



The `hyphenate-character` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the character (or string) used at the end of a line before a hyphenation break.

 Both automatic and soft hyphens are displayed according to the specified hyphenate-character value.



Try it
------


Syntax
------



The value either sets the string to use instead of a hyphen, or indicates that the user agent should select an appropriate string based on the current typographic conventions (default).

 
```
hyphenate-character: <string>;
hyphenate-character: auto;

```

### Values


 `<string>`   The [`<string>`](string) to use at the end of the line before a hyphenation break. The user agent may truncate this value if too many characters are used. 

  `auto`   The user-agent selects an appropriate string based on the content language's typographic conventions. This is the default property value, and only needs to be explicitly set in order to override a different inherited value. 

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
hyphenate-character =   
  auto      [|](value_definition_syntax#single_bar)  
  [<string>](string)    
  

```
Examples
--------


 This example shows two identical blocks of text that have [`hyphens`](hyphens) set to ensure that they break wherever needed, and on soft hyphen breaks (created using `&shy;`). The first block has the value of the hyphen changed to the equals symbol ("`=`"). The second block has no hyphenate-character set, which is equivalent to `hyphenate-character: auto` for user agents that support this property. 

### HTML



```
<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character is not set</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

```
### CSS



```
dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 4 # propdef-hyphenate-character](https://w3c.github.io/csswg-drafts/css-text-4/#propdef-hyphenate-character) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hyphenate-character` | 1066 | 10679 | 98 | No | 9215 | 5.1 | 1064.4 | 10618 | 98 | 7214 | 5 | 20.01.0 |


See also
--------


* Related CSS properties: [`hyphens`](hyphens), [`overflow-wrap`](overflow-wrap).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-character>

:has()
======



The functional `:has()` CSS [pseudo-class](pseudo-classes) represents an element if any of the [relative selectors](css_selectors#relative_selector) that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a [relative selector list](selector_list#relative_selector_list) as an argument.

 
```
/\* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 \*/
h1:has(+ p) {
  margin-bottom: 0;
}

```
 The `:has()` pseudo-class takes on the <specificity> of the most specific selector in its arguments the same way as [`:is()`](:is) and [`:not()`](:not) do.



Syntax
------




```
:has(<relative-selector-list>) {
  /\* ... \*/
}

```
 If the `:has()` pseudo-class itself is not supported in a browser, the entire selector block will fail unless `:has()` is in a forgiving selector list, such as in [`:is()`](:is) and [`:where()`](:where)).

 The `:has()` pseudo-class cannot be nested within another `:has()`. This is because many pseudo-elements exist conditionally based on the styling of their ancestors and allowing these to be queried by `:has()` can introduce cyclic querying.

 Pseudo-elements are also not valid selectors within `:has()` and pseudo-elements are not valid anchors for `:has()`.


Examples
--------


### With the sibling combinator



The `:has()` style declaration in the following example adjusts the spacing after `<h1>` headings if they are immediately followed by an `<h2>` heading.

 #### HTML

 
```
<section>
  <article>
    <h1>Morning Times</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>

```
 #### CSS

 
```
h1,
h2 {
  margin: 0 0 1rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}

```
 #### Result


 This example shows two similar texts side-by-side for comparison – the left one with an `H1` heading followed by a paragraph and the right one with an `H1` heading followed by an `H2` heading and then a paragraph. In the example on the right, `:has()` helps to select the `H1` element that is immediately followed by an `H2` element (indicated by the adjacent sibling combinator[`+`](adjacent_sibling_combinator)) and the CSS rule reduces the spacing after such an `H1` element. Without the `:has()` pseudo-class, you cannot use CSS selectors to select a preceding sibling of a different type or a parent element.


### With the :is() pseudo-class



This example builds on the previous example to show how to select multiple elements with `:has()`.

 #### HTML

 
```
<section>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <h3>8:00 am</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>

```
 #### CSS

 
```
h1,
h2,
h3 {
  margin: 0 0 1rem 0;
}

:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}

```
 #### Result


 Here, the first [`:is()`](:is) pseudo-class is used to select any of the heading elements in the list. The second `:is()` pseudo-class is used to pass a list of adjacent sibling selectors as an argument to `:has()`. The `:has()` pseudo-class helps to select any `H1`, `H2`, or `H3` element that is immediately followed by (indicated by [`+`](adjacent_sibling_combinator)) an `H2`, `H3`, or `H4` element and the CSS rule reduces the spacing after such `H1`, `H2`, or `H3` elements.

 This selector could have also been written as:

 
```
:is(h1, h2, h3):has(+ h2, + h3, + h4) {
  margin: 0 0 0.25rem 0;
}

```

### Logical operations



The `:has()` relational selector can be used to check if one of the multiple features is true or if all the features are true.

 By using comma-separated values inside the `:has()` relational selector, you are checking to see if any of the parameters exist. `x:has(a, b)` will style `x` if descendant `a` OR `b` exists.

 By chaining together multiple `:has()` relational selectors together, you are checking to see if all of the parameters exist. `x:has(a):has(b)` will style `x` if descendant `a` AND `b` exist.

 
```
body:has(video, audio) {
  /\* styles to apply if the content contains audio OR video \*/
}
body:has(video):has(audio) {
  /\* styles to apply if the content contains both audio AND video \*/
}

```

Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # relational](https://w3c.github.io/csswg-drafts/selectors/#relational) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:has` | 105 | 105 | 103 | No | 91 | 15.4 | 105 | 105 | No | 72 | 15.4 | 20.0 |


See also
--------


* [`:is()`](:is), [`:where()`](:where), [`:not()`](:not)
* [CSS selectors](css_selectors)
* [CSS combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
* [Selector list](selector_list)
* [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:has>

height
======


The `height` CSS property specifies the height of an element. By default, the property defines the height of the [content area](css_box_model/introduction_to_the_css_box_model#content_area). If [`box-sizing`](box-sizing) is set to `border-box`, however, it instead determines the height of the [border area](css_box_model/introduction_to_the_css_box_model#border_area).


Try it
------



 The [`min-height`](min-height) and [`max-height`](max-height) properties override `height`.


Syntax
------



```
/\* <length> values \*/
height: 120px;
height: 10em;
height: 100vh;

/\* <percentage> value \*/
height: 75%;

/\* Keyword values \*/
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

/\* Global values \*/
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

```
### Values


 [`<length>`](length)  Defines the height as an absolute value.

  [`<percentage>`](percentage)  Defines the height as a percentage of the containing block's height.

  `auto`  The browser will calculate and select a height for the specified element.

  `max-content`  The intrinsic preferred height.

  `min-content`  The intrinsic minimum height.

  `fit-content`  Box will use the available space, but never more than `max-content`

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`

  [`clamp()`](clamp)  Enables selecting a middle value within a range of values between a defined minimum and maximum

  Accessibility concerns
----------------------



Ensure that elements set with a `height` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| [Inherited](inheritance) | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to `auto`. A percentage height on the root element is relative to the initial containing block. |
| [Computed value](computed_value) | a percentage or `auto` or the absolute length |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
height =   
  auto                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting height using pixels and percentages



#### HTML

 
```
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
  <div id="child">I'm half the height of my parent.</div>
</div>

```
 #### CSS

 
```
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # preferred-size-properties](https://w3c.github.io/csswg-drafts/css-sizing/#preferred-size-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `height` | 1 | 12 | 1 | 4 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `fit-content` | 46 | 79 | No | No | 33 | 119 | 46 | 46 | No | 33 | 119 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 46 | 79 | 663 | No | 44 | 11 | 46 | 46 | 664 | 43 | 11 | 5.0 |
| `min-content` | 46 | 79 | 663 | No | 44 | 11 | 46 | 46 | 664 | 43 | 11 | 5.0 |
| `stretch` | 28 | 79 | No | No | 15 | 9 | 4.4 | 28 | No | 15 | 9 | 5.0 |


See also
--------


* [The box model](css_box_model/introduction_to_the_css_box_model)
* [`width`](width)
* [`box-sizing`](box-sizing)
* [`min-height`](min-height), [`max-height`](max-height)
* The mapped logical properties: [`block-size`](block-size), [`inline-size`](inline-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/height>

hue-rotate()
============


The `hue-rotate()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) rotates the [hue](https://en.wikipedia.org/wiki/Hue) of an element and its contents. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



The `hue-rotate()` function applies a color rotation to the elements on which it is applied.

 
```
hue-rotate(angle)

```

### Values



 `angle`  The relative change in hue of the input sample, specified as an [`<angle>`](../angle). A value of `0deg` leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `0`. There is no minimum or maximum value. The effect of values above `360deg` are, given `hue-rotate(Ndeg)`, evaluates to `N` modulo 360.

   The `<angle>` CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. The following are equivalent:

 
```
hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)

```

### Formal syntax



```
<hue-rotate()> =   
  hue-rotate( [[](../value_definition_syntax#brackets) [<angle>](../angle) [|](../value_definition_syntax#single_bar) [<zero>](../zero) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  

```
Examples
--------


### With the backdrop-filter property



This example applies a `hue-rotate()` filter via the `backdrop-filter` CSS property to the paragraph, color shifting to the area behind the `<p>`.

 
```
.container {
  background: url(image.jpg) no-repeat left / contain #011296;
}
p {
  backdrop-filter: hue-rotate(240deg);
  text-shadow: 2px 2px #011296;
}

```


### With the filter property



This example applies a `hue-rotate()` filter via the `filter` CSS property adding the color shift to to the entire element, including content, border, and background image.

 
```
p {
  filter: hue-rotate(-60deg);
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: goldenrod;
  border: 1em solid rebeccapurple;
  box-shadow: inset -5px -5px red, 5px 5px yellow;
}

```


### With url() and the SVG hue-rotate filter



The SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element is used to define custom filter effects that can then be referenced by [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id). The `<filter>`'s [`<feColorMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix) primitive `hueRotate` type provides the same effect. Given the following:

 
```
<filter id="filterID">
  <feColorMatrix type="hueRotate" values="90" />
</filter>

```
 These values produce the same results:

 
```
filter: hue-rotate(90deg); /\* 90deg rotation \*/
filter: url(#filterID); /\* with embedded SVG \*/
filter: url(folder/fileName.svg#filterID); /\* external svg filter definition \*/

```
 This example shows three images: the image with a `hue-rotate()` filter function applied, the image with an equivalent `url()` filter applied, and the original images for comparison:



Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-hue-rotate](https://drafts.fxtf.org/filter-effects/#funcdef-filter-hue-rotate) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hue-rotate` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------


* [CSS filter effects](../filter_effects) module
* The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:
	+ [`blur()`](blur)
	+ [`brightness()`](brightness)
	+ [`contrast()`](contrast)
	+ [`drop-shadow()`](drop-shadow)
	+ [`grayscale()`](grayscale)
	+ [`invert()`](invert)
	+ [`opacity()`](opacity)
	+ [`saturate()`](saturate)
	+ [`sepia()`](sepia)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate>

hyphenate-limit-chars
=====================



The `hyphenate-limit-chars` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.

 This property provides you with fine-grained control over hyphenation in text. This control enables you to avoid awkward hyphenations and set appropriate hyphenation for different languages, which, in turn, allows for better typography.

 In the interactive example above, the default minimum word length setting of `hyphenate-limit-chars` is too large for either of the long words to be hyphenated, and so the output looks untidy. However, by choosing the other value option, the minimum word length limit is reduced. This allows both the long words to be hyphenated, making for a neater layout.



Syntax
------




```
/\* Numeric values \*/
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4;
hyphenate-limit-chars: 10;

/\* Keyword values \*/
hyphenate-limit-chars: auto auto auto;
hyphenate-limit-chars: auto auto;
hyphenate-limit-chars: auto;

/\* Mix of numeric and keyword values \*/
hyphenate-limit-chars: 10 auto 4;
hyphenate-limit-chars: 10 auto;
hyphenate-limit-chars: auto 3;

/\* Global values \*/
hyphenate-limit-chars: inherit;
hyphenate-limit-chars: initial;
hyphenate-limit-chars: revert;
hyphenate-limit-chars: revert-layer;
hyphenate-limit-chars: unset;

```
 The `hyphenate-limit-chars` property takes 1–3 values that can be numeric or `auto`, as explained below.


### Values



 `x y z`  The first value is the minimum word length before words should be hyphenated. The second value is the minimum number of characters before the hyphen. The third value is the minimum number of characters after the hyphen.

  `x y`  The first value is the minimum word length before words should be hyphenated. The second value is the minimum number of characters before the hyphen. The minimum number of characters after the hyphen will be set equal to the second value.

  `x`  The value is the minimum word length before words should be hyphenated. The minimum number of characters before and after the hyphen will be set to `auto`.

   If `auto` is set for any of the values, the user agent will choose an appropriate value for the current layout. Unless the user agent can calculate a better value, the following default values will be used:

 * Minimum word length to allow hyphenation: 5
* Minimum number of characters before the hyphen: 2
* Minimum number of characters after the hyphen: 2

  **Note:** If a word is shorter than any of the provided values, it will not be hyphenated.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
hyphenate-limit-chars =   
  [[](value_definition_syntax#brackets) auto [|](value_definition_syntax#single_bar) [<integer>](integer) []](value_definition_syntax#brackets)[{1,3}](value_definition_syntax#curly_braces)    
  

```
Examples
--------



```
p {
  hyphens: auto;
  hyphenate-limit-chars: 10 3 4;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 4 # propdef-hyphenate-limit-chars](https://w3c.github.io/csswg-drafts/css-text-4/#propdef-hyphenate-limit-chars) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hyphenate-limit-chars` | 109 | 109 | No | No | 95 | No | 109 | 109 | No | 74 | No | No |


See also
--------


* [`hyphens`](hyphens)
* [CSS Text module](css_text)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars>

hyphens
=======


The `hyphens` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.


Try it
------



  **Note:** In the above demo, the string "An extraordinarily long English word!" contains the hidden `&shy;` (soft hyphen) character: `An extra&shy;ordinarily long English word!`. This character is used to indicate a potential place to insert a hyphen when `hyphens: manual;` is specified.

  Hyphenation rules are language-specific. In HTML, the language is determined by the [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. In XML, the [`xml:lang`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xml:lang) attribute must be used.

  **Note:** The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

  If supported, [`hyphenate-character`](hyphenate-character) may be used to specify an alternative hyphenation character to use at the end of the line being broken.


Syntax
------




```
/\* Keyword values \*/
hyphens: none;
hyphens: manual;
hyphens: auto;

/\* Global values \*/
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

```
 The `hyphens` property is specified as a single keyword value chosen from the list below.


### Values



 `none`  Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.

  `manual`  Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See [Suggesting line break opportunities](#suggesting_line_break_opportunities) below for details.

  `auto`  The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see [Suggesting line break opportunities](#suggesting_line_break_opportunities) below) will override automatic break point selection when present.

    **Note:** The `auto` setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the `lang` HTML attribute to guarantee that automatic hyphenation is applied in that language.

 
Suggesting line break opportunities
-----------------------------------



There are two Unicode characters used to manually specify potential line break points within text:

  U+2010 (HYPHEN)  The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.

  U+00AD (SHY)  An invisible, "**s**oft" **hy**phen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary. In HTML, use `&shy;` to insert a soft hyphen.

    **Note:** When the HTML [`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) element leads to a line break, no hyphen is added.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `manual` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
hyphens =   
  none    [|](value_definition_syntax#single_bar)  
  manual  [|](value_definition_syntax#single_bar)  
  auto      
  

```
Examples
--------


### Specifying text hyphenation



This example uses three classes, one for each possible configuration of the `hyphens` property.

 #### HTML

 
```
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

```
 #### CSS

 
```
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # hyphens-property](https://w3c.github.io/csswg-drafts/css-text/#hyphens-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hyphens` | 5513 | 797912–79Only works if the specified language is the same as the language of the underlying OS. | 436 | 10Only works if the specified language is the same as the language of the underlying OS. | 4215 | 5.1 | 554.4 | 5518 | 436 | 4214 | 4.2 | 6.01.0 |
| `auto_value` | 8855Only supported on macOS. | 8879Only supported on macOS. | 6 | No | 7442Only supported on macOS. | 5.1 | 55 | 55 | 6 | 42 | 4.2 | 6.0 |
| `language_afrikaans` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_bosnian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_bulgarian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_catalan` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_croatian` | No | No | 8 | No | No | 9.1 | No | No | 8 | No | 9.3 | No |
| `language_czech` | No | No | No | No | No | 9.1 | No | No | No | No | 9.3 | No |
| `language_danish` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_dutch` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_english` | 55 | 12 | 6For English, Firefox uses an en-US dictionary | 10 | 44 | 5.1For English, Safari uses different en-GB and en-US dictionaries. | 55 | 55 | 6For English, Firefox uses an en-US dictionary | 43 | 5For English, Safari uses different en-GB and en-US dictionaries. | 6.0 |
| `language_esperanto` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_estonian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_finish` | No | No | 8 | No | No | 9.1 | No | No | 8 | No | 9.3 | No |
| `language_french` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_galician` | No | No | 9 | No | No | No | No | No | 9 | No | No | No |
| `language_german_reformed_orthography` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_german_swiss_orthography` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_german_traditional_orthography` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_hungarian` | No | No | 9 | No | No | 9.1 | No | No | 9 | No | 9.3 | No |
| `language_icelandic` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_interlingua` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_italian` | No | No | 9 | No | No | 5.1 | No | No | 9 | No | 5 | No |
| `language_kurmanji` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_latin` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_lithuanian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_mongolian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_norwegian_nn` | No | No | 8 | No | No | No | No | No | 8 | No | 5 | No |
| `language_norwegian_no` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_polish` | No | No | 31 | No | No | 9.1 | No | No | 31 | No | 9.3 | No |
| `language_portuguese` | No | No | 8 | No | No | 9.1 | No | No | 8 | No | 9.3 | No |
| `language_portuguese_brazilian` | No | No | 8For Brazilian Portuguese, Firefox uses a Portuguese dictionary. | No | No | No | No | No | 8For Brazilian Portuguese, Firefox uses a Portuguese dictionary. | No | No | No |
| `language_russian` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_slovenian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_spanish` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_swedish` | No | No | 8 | No | No | 5.1 | No | No | 8 | No | 5 | No |
| `language_turkish` | No | No | 9 | No | No | 5.1 | No | No | 9 | No | 5 | No |
| `language_ukrainian` | No | No | 9 | No | No | 9.1 | No | No | 9 | No | 9.3 | No |
| `language_upper_sorbian` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |
| `language_welsh` | No | No | 8 | No | No | No | No | No | 8 | No | No | No |


See also
--------


* [`content`](content)
* [`overflow-wrap`](overflow-wrap) (formerly `word-wrap`)
* [`word-break`](word-break)
* [Guide to wrapping and breaking text](css_text/wrapping_text)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens>

hypot()
=======



The `hypot()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is an exponential function that returns the [square root](https://en.wikipedia.org/wiki/Square_root) of the sum of squares of its parameters.

 While [`pow()`](pow) and [`sqrt()`](sqrt) only work on unitless numbers, `hypot()` accepts values with units, but they all must have the same [type](css_types).



Syntax
------



```
/\* A <number> value \*/
width: hypot(2em); /\* 2em \*/
width: hypot(3em, 4em); /\* 5em \*/
width: hypot(30px, 40px); /\* 50px \*/
width: hypot(48px, 64px); /\* 80px \*/
width: hypot(3px, 4px, 5px); /\* 7.0710678118654755px \*/

```
### Parameters



The `hypot(x [, ...]#)` function accepts one or more comma-separated calculations as its parameters.

  
`x`, `x2`, ..., `xN`
  A calculation that resolves to a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage).

  
### Return value



Returns a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) (based on the inputs), which is the square root of the sum of squares of its parameters.

 * If any of the inputs is `infinite`, the result is `+∞`.
* If a single parameter is provided, the result is the absolute value of its input. `hypot(2em)` and `hypot(-2em)` both resolve to `2em`.


### Formal syntax



```
<hypot()> =   
  hypot( <calc-sum>[#](value_definition_syntax#hash_mark) )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # exponent-funcs](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hypot` | No | No | 112 | No | No | 15.4 | No | No | 112 | No | 15.4 | No |


See also
--------


* [`pow()`](pow)
* [`sqrt()`](sqrt)
* [`log()`](log)
* [`exp()`](exp)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hypot>

<ident>
=======


The `<ident>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) denotes an arbitrary string used as an [identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier).


Syntax
------



The syntax of `<custom-ident>` is similar to CSS identifiers (such as property names), except that it is [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). It consists of one or more characters, where characters can be any of the following:

 * any alphabetical character (`A` to `Z`, or `a` to `z`),
* any decimal digit (`0` to `9`),
* a hyphen (`-`),
* an underscore (`_`),
* an escaped character (preceded by a backslash, `\`),
* a [Unicode](https://en.wikipedia.org/wiki/Unicode) character (in the format of a backslash, `\`, followed by one to six hexadecimal digits, representing its Unicode code point)

 Note that `id1`, `Id1`, `iD1` and `ID1` are all different identifiers as they are [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). On the other hand, as there are several ways to escape a character, `toto\?` and `toto\3F` are the same identifiers.


Examples
--------


### Valid identifiers



```
nono79        A mix of alphanumeric characters and numbers
ground-level  A mix of alphanumeric characters and a dash
-test         A dash followed by alphanumeric characters
--toto        A custom-property like identifier
_internal     An underscore followed by alphanumeric characters
\22 toto      A Unicode character followed by a sequence of alphanumeric characters
bili\.bob     A correctly escaped period

```
### Invalid identifiers



```
34rem     It must not start with a decimal digit.
-12rad    It must not start with a dash followed by a decimal digit.
bili.bob  Only alphanumeric characters, _, and - needn't be escaped.
'bilibob' This would be a [<string>](string).
"bilibob" This would be a [<string>](string).

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # css-identifier](https://drafts.csswg.org/css-values/#css-identifier) |


Browser compatibility
---------------------

See also
--------


* [<custom-ident>](custom-ident)
* [<dashed-ident>](dashed-ident)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/ident>

<image>
=======


The `<image>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a two-dimensional image.


Syntax
------



The `<image>` data type can be represented with any of the following:

 * An image denoted by the [`url()`](url) data type
* A [`<gradient>`](gradient) data type
* A part of the webpage, defined by the [`element()`](element()) function
* An image, image fragment or solid patch of color, defined by the [`image()`](image/image) function
* A blending of two or more images defined by the [`cross-fade()`](cross-fade) function.
* A selection of images chosen based on resolution defined by the [`image-set()`](image/image-set) function.


Description
-----------



CSS can handle the following kinds of images:

 * Images with *intrinsic dimensions* (a natural size), like a JPEG, PNG, or other [raster format](https://en.wikipedia.org/wiki/Raster_graphics).
* Images with *multiple intrinsic dimensions*, existing in multiple versions inside a single file, like some .ico formats. (In this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.)
* Images with no intrinsic dimensions but with *an intrinsic aspect ratio* between its width and height, like an SVG or other [vector format](https://en.wikipedia.org/wiki/Vector_graphics).
* Images with *neither intrinsic dimensions, nor an intrinsic aspect ratio*, like a CSS gradient.

 CSS determines an object's *concrete size* using (1) its *intrinsic dimensions*; (2) its *specified size*, defined by CSS properties like [`width`](width), [`height`](height), or [`background-size`](background-size); and (3) its *default size*, determined by the kind of property the image is used with:

 

| Kind of Object (CSS Property) | Default object size |
| --- | --- |
| [`background-image`](background-image) | The size of the element's background positioning area |
| [`list-style-image`](list-style-image) | The size of a `1em` character |
| [`border-image-source`](border-image-source) | The size of the element's border image area |
| [`cursor`](cursor) | The browser-defined size matching the usual cursor size on the client's system |
| [`mask-image`](mask-image) | ? |
| [`shape-outside`](shape-outside) | ? |
| [`mask-border-source`](mask-border-source) | ? |
| [`symbols()`](@counter-style/symbols) for @counter-style | At risk feature. If supported, the browser-defined size matching the usual cursor size on the client's system |
| [`content`](content) for a pseudo-element ([`::after`](::after)/[`::before`](::before)) | A 300px × 150px rectangle |

 The concrete object size is calculated using the following algorithm:

 * If the specified size defines *both the width and the height*, these values are used as the concrete object size.
* If the specified size defines *only the width or only the height*, the missing value is determined using the intrinsic ratio, if there is any, the intrinsic dimensions if the specified value matches, or the default object size for that missing value.
* If the specified size defines *neither the width nor the height*, the concrete object size is calculated so that it matches the intrinsic aspect ratio of the image but without exceeding the default object size in any dimension. If the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used; if this object has none, the missing width or height are taken from the default object size.

  **Note:** Not all browsers support every type of image on every property. See the [browser compatibility section](#browser_compatibility) for details.

 
Accessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Formal syntax
-------------



```
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Valid images



```
url(test.jpg)               /\* A <url>, as long as test.jpg is an actual image \*/
linear-gradient(blue, red)  /\* A <gradient> \*/
element(#realid)            /\* A part of the webpage, referenced with the element() function,
 if "realid" is an existing ID on the page \*/
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /\* A section 16x16 section of <url>, starting from the top, left of the original
 image as long as arrow.png is a supported image, otherwise a solid
 red swatch. If language is rtl, the image will be horizontally flipped. \*/
cross-fade(20% url(twenty.png), url(eighty.png))
                            /\* cross faded images, with twenty being 20% opaque
 and eighty being 80% opaque. \*/
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /\* a selection of images with varying resolutions \*/

```
### Invalid images



```
nourl.jpg            /\* An image file must be defined using the url() function. \*/
url(report.pdf)      /\* A file pointed to by the url() function must be an image. \*/
element(#fakeid)     /\* An element ID must be an existing ID on the page. \*/
image(z.jpg#xy=0,0)  /\* The spatial fragment must be written in the format of xywh=#,#,#,# \*/
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /\* every image in an image set must have a different resolutions \*/

```
Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # image-values](https://w3c.github.io/csswg-drafts/css-images/#image-values) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `image` | 1 | 12 | 1 | 10 | 2 | 1 | 4.4 | 18 | 4 | 11 | 1 | 1.0 |
| `cross-fade` | 17["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 79["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | NoSee [bug 1657516](https://bugzil.la/1657516). | No | 15["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 10Supports the original dual-image with percentage implementation only.5.1Supports the original dual-image with percentage implementation only. | 4.4["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 18["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | NoSee [bug 1657516](https://bugzil.la/1657516). | 14["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] | 9.3Support for the original dual-image with percentage implementation only.5Supports the original dual-image with percentage implementation only. | 1.0["Supports the original dual-image with percentage implementation only.", "See [bug 614906](https://crbug.com/614906) for supporting the unprefixed `cross-fade()` function."] |
| `element` | No | No | 5729–57`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`background`](https://developer.mozilla.org/docs/Web/CSS/background), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image) and [`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source).4–29`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) and [`background`](https://developer.mozilla.org/docs/Web/CSS/background). | No | No | No | No | No | 6029–60`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`background`](https://developer.mozilla.org/docs/Web/CSS/background), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image) and [`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source).4–29`-moz-element()` is limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) and [`background`](https://developer.mozilla.org/docs/Web/CSS/background). | No | No | No |
| `gradient` | 2610 | 12 | 3.6Gradients are limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image), and [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image). | 10 | 1512.111–15 | 75.1 | ≤37≤37 | 2618 | 4Gradients are limited to [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image), [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image), and [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image). | 1412.111–14 | 75 | 1.51.0 |
| `image` | No | No | No["See [bug 703217](https://bugzil.la/703217).", "The [`-moz-image-rect()`](https://developer.mozilla.org/docs/Web/CSS/-moz-image-rect) function supports fragments as of Firefox 4."] | No | No | No | No | No | NoThe [`-moz-image-rect()`](https://developer.mozilla.org/docs/Web/CSS/-moz-image-rect) function supports fragments as of Firefox 4. | No | No | No |
| `image-set` | 11321 | 11379 | 9088["In `cursor` and `content` properties, gradients are not supported as arguments to `image-set()`. See [bug 1696314](https://bugzil.la/1696314).", "Before Firefox 89, the `type()` function is not supported as an argument to `image-set()`."] | No | 15 | 6Support for `url` images only and `x` is the only supported resolution unit. See [bug 160934](https://webkit.org/b/160934). | 1134.4 | 11325 | 9088["In `cursor` and `content` properties, gradients are not supported as arguments to `image-set()`. See [bug 1696314](https://bugzil.la/1696314).", "Before Firefox 89, the `type()` function is not supported as an argument to `image-set()`."] | 14 | 6Support for `url` images only and `x` is the only supported resolution unit. See [bug 160934](https://webkit.org/b/160934). | 1.5 |
| `paint` | 65 | 79 | No | No | 52 | No | 65 | 65 | No | 47 | No | 9.2 |


See also
--------


* [`<gradient>`](gradient)
* [`element()`](element())  Experimental
* [`image()`](image/image)
* [`image-set()`](image/image-set)
* [`cross-fade()`](cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image>

image-rendering
===============


The `image-rendering` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.


Try it
------



 The [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is `100×100px`*,* but its actual dimensions are `200×200px` (or `50×50px`), then the image will be upscaled (or downscaled) using the algorithm specified by `image-rendering`. This property has no effect on non-scaled images.


Syntax
------



```
/\* Keyword values \*/
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/\* Global values \*/
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

```
### Values



 `auto`  The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses *bilinear* resampling (high quality).

  
`smooth`  Experimental 
  The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.

  
`high-quality`  Experimental 
  Identical to `smooth`, but with a preference for higher-quality scaling. If system resources are constrained, images with `high-quality` should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.

  `crisp-edges`  The image is scaled with the nearest-neighbor algorithm.

  `pixelated`  Using the nearest-neighbor algorithm, the image is scaled up to the next integer multiple that is greater than or equal to its original size, then scaled down to the target size, as for `smooth`. When scaling up to integer multiples of the original size, this will have the same effect as `crisp-edges`.

    **Note:** The values `optimizeQuality` and `optimizeSpeed` present in an early draft (and coming from its SVG counterpart `[image-rendering](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/image-rendering)`) are defined as synonyms for the `smooth` and `pixelated` values respectively.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
image-rendering =   
  auto          [|](value_definition_syntax#single_bar)  
  smooth        [|](value_definition_syntax#single_bar)  
  high-quality  [|](value_definition_syntax#single_bar)  
  pixelated     [|](value_definition_syntax#single_bar)  
  crisp-edges     
  

```
Examples
--------


### Setting image scaling algorithms



In practical use, the `pixelated` and `crisp-edges` rules can be combined to provide some fallback for each other. (Just prepend the actual rules with the fallback.) The [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) can provide a [fallback solution for `pixelated`](http://phrogz.net/tmp/canvas_image_zoom.html) through manual image data manipulation or with [`imageSmoothingEnabled`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled).

 #### CSS

 
```
.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # the-image-rendering](https://w3c.github.io/csswg-drafts/css-images/#the-image-rendering) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `image-rendering` | 13 | 79 | 3.6 | No | 15 | 6 | 3 | 18 | 4 | 14 | 6 | 1.0 |
| `crisp-edges` | 13 | 79 | 653.6 | No | 15 | 76 | ≤37 | 18 | 654 | 14 | 76 | 1.0 |
| `optimizeQuality` | 28 | 79 | 3.6 | No | 15 | 7 | 4.4 | 28 | 4 | 14 | 7 | 1.5 |
| `optimizeSpeed` | 28 | 79 | 3.6 | No | 15 | 7 | 4.4 | 28 | 4 | 14 | 7 | 1.5 |
| `pixelated` | 41 | 79 | 93 | No | 26 | 10 | 41 | 41 | 93 | 26 | 10 | 4.0 |


 **Note:** Although `crisp-edges` is supposed to use a pixel-art scaler like in the specification example, in practice no browsers (as of January 2020) do so. [In Firefox](https://searchfox.org/mozilla-central/rev/1061fae5e225a99ef5e43dbdf560a91a0c0d00d1/gfx/wr/webrender/src/resource_cache.rs#1356), `crisp-edges` is interpreted as nearest-neighbor, `pixelated` is not supported, and `auto` is interpolated as trilinear or linear.

 For behavior on Chromium and Safari (WebKit), see the [`GetInterpolationQuality`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/style/computed_style.cc;l=1160) function and [`CSSPrimitiveValue::operator ImageRendering()`](https://github.com/WebKit/WebKit/blob/9b26fc6081e0db8a1304cf4b4f8f1c67efb9bc0c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4045) respectively.

 
See also
--------


* Other image-related CSS properties: [`object-fit`](object-fit), [`object-position`](object-position), [`image-orientation`](image-orientation), [`image-rendering`](image-rendering), [`image-resolution`](image-resolution).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering>

image-orientation
=================


The `image-orientation` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies a layout-independent correction to the orientation of an image.


Try it
------


Syntax
------



```
/\* keyword values \*/
image-orientation: none;
image-orientation: from-image; /\* Use EXIF data from the image \*/

/\* Global values \*/
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;

```
### Values



 `none`  Does not apply any additional image rotation; the image is oriented as encoded or as other CSS property values dictate.

  `from-image`  Default initial value. The [EXIF](https://en.wikipedia.org/wiki/EXIF) information contained in the image is used to rotate the image appropriately.

    **Warning:** `image-orientation: none;` **does not** override the orientation of non-secure-origin images as encoded by their [EXIF](https://en.wikipedia.org/wiki/EXIF) information, due to security concerns. Find out more from [the CSS working group draft issue](https://github.com/w3c/csswg-drafts/issues/5165).

 
Description
-----------



This property is intended *only* to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. It should *not* be used for arbitrary rotations. For any purpose other than correcting an image's orientation due to how it was shot or scanned, use a [`transform`](transform) property with the `rotate` keyword to specify rotation. This includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation.

 If used in conjunction with other CSS properties, such as a [`<transform-function>`](transform-function), any `image-orientation` rotation is applied before any other transformations.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `from-image` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | an [`<angle>`](angle), rounded to the next quarter turn from `0deg` and normalized, that is moduloing the value by `1turn` |
| Animation type | discrete |

Formal syntax
-------------



```
image-orientation =   
  from-image           [|](value_definition_syntax#single_bar)  
  none                 [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<angle>](angle) [||](value_definition_syntax#double_bar) flip []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Orienting image from image data



The following image has been rotated through 180 degrees, and the `image-orientation` property is used to correct its orientation based on the EXIF data in the image. By changing the `image-orientation` to `none` you can see the effect of the property.

 #### CSS

 
```
#image {
  image-orientation: from-image; /\* Can be changed in the live sample \*/
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # the-image-orientation](https://w3c.github.io/csswg-drafts/css-images/#the-image-orientation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `image-orientation` | 81 | 81 | 26 | No | 67 | 13.1 | 81 | 81 | 26 | No | 13.4 | 13.0 |
| `flip_and_angle` | No | No | 26–63 | No | No | No | No | No | 26–63 | No | No | No |


See also
--------


* Other image-related CSS properties: [`object-fit`](object-fit), [`object-position`](object-position), [`image-orientation`](image-orientation), [`image-rendering`](image-rendering), [`image-resolution`](image-resolution).
* [`transform`](transform) and [`rotate`](rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation>

image-resolution
================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `image-resolution` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as `background-image` images.

 The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the `image-resolution` property allows a different resolution to be specified.



Syntax
------



```
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;

/\* Global values \*/
image-resolution: inherit;
image-resolution: initial;
image-resolution: revert;
image-resolution: revert-layer;
image-resolution: unset;

```
### Values



 `[`<resolution>`](resolution)`  Specifies the intrinsic resolution explicitly.

  `from-image`  Uses the intrinsic resolution as specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to `1dppx` (1 image pixel per CSS px unit).

  `snap`  If the `snap` keyword is provided, the computed resolution is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted.

    **Note:** As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `1dppx` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified, except with <resolution> possibly altered by computed for 'snap' value |
| Animation type | discrete |

Formal syntax
-------------



```
image-resolution =   
  [[](value_definition_syntax#brackets) from-image [||](value_definition_syntax#double_bar) [<resolution>](resolution) []](value_definition_syntax#brackets)  [&&](value_definition_syntax#double_ampersand)  
  snap[?](value_definition_syntax#question_mark)                             
  

```
Examples
--------


### Setting a high dpi for print



When printing the document, use a higher resolution.

 
```
@media print {
  .myimage {
    image-resolution: 300dpi;
  }
}

```

### Use image resolution with fallback



Uses the resolution from the image. If the image does not have a resolution, use 300dpi rather than the default 1dppx.

 
```
.myimage {
  image-resolution: from-image 300dpi;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # the-image-resolution](https://drafts.csswg.org/css-images-4/#the-image-resolution) |


Browser compatibility
---------------------

See also
--------


* Other image-related CSS properties: [`object-fit`](object-fit), [`object-position`](object-position), [`image-orientation`](image-orientation), [`image-rendering`](image-rendering).
* [Chromium bug: 1086473](https://crbug.com/1086473).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution>

image-set()
===========



The `image-set()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [functional](../css_functions) notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.

 Resolution and bandwidth differ by device and network access. The `image-set()` function delivers the most appropriate image resolution for a user's device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. Resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.

 `image-set()` allows the author to provide options rather than determining what each individual user needs.



Syntax
------



```
/\* Select image based on resolution \*/
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/\* Select gradient based on resolution \*/
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/\* Select image based on supported formats \*/
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

```
### Values


 `<image>`  The [`<image>`](../image) can be any image type except for an image set. The `image-set()` function may not be nested inside another `image-set()` function.

  `<string>`  A URL to an image.

  
`<resolution>` Optional
  [`<resolution>`](../resolution) units include `x` or `dppx`, for dots per pixel unit, `dpi`, for dots per inch, and `dpcm` for dots per centimeter. Every image within an `image-set()` must have a unique resolution.

  
`type(<string>)` Optional
  A valid MIME type string, for example "image/jpeg".

  ### Formal syntax



```
<image-set()> =   
  image-set( <image-set-option>[#](../value_definition_syntax#hash_mark) )    
  
<image-set-option> =   
  [[](../value_definition_syntax#brackets) <image> [|](../value_definition_syntax#single_bar) [<string>](../string) []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<resolution>](../resolution) [||](../value_definition_syntax#double_bar) type( [<string>](../string) ) []](../value_definition_syntax#brackets)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Using image-set() to provide alternative background-image options



This example shows how to use [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) to provide two alternative [`background-image`](../background-image) options, chosen depending on the resolution needed: a normal version and a high-resolution version.


  **Note:** In the above example, the `-webkit` prefixed version is also used to support Chrome and Safari. In Firefox 90, support was added for `-webkit-image-set()` as an alias to `image-set()` (in order to provide compat where developers had not added the standard property).

 
### Using image-set() to provide alternative image formats



In the next example the `type()` function is used to serve the image in AVIF and JPEG formats. If the browser supports avif, it will choose that version. Otherwise it will use the jpeg version.


 #### Providing a fallback

 There is no inbuilt fallback for `image-set()`; therefore to include a [`background-image`](../background-image) for those browsers that do not support the function, a separate declaration is required before the line using `image-set()`.

 
```
.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}

```

Accessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # image-set-notation](https://w3c.github.io/csswg-drafts/css-images-4/#image-set-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `image-set` | 11321 | 11379 | 9088["In `cursor` and `content` properties, gradients are not supported as arguments to `image-set()`. See [bug 1696314](https://bugzil.la/1696314).", "Before Firefox 89, the `type()` function is not supported as an argument to `image-set()`."] | No | 15 | 6Support for `url` images only and `x` is the only supported resolution unit. See [bug 160934](https://webkit.org/b/160934). | 1134.4 | 11325 | 9088["In `cursor` and `content` properties, gradients are not supported as arguments to `image-set()`. See [bug 1696314](https://bugzil.la/1696314).", "Before Firefox 89, the `type()` function is not supported as an argument to `image-set()`."] | 14 | 6Support for `url` images only and `x` is the only supported resolution unit. See [bug 160934](https://webkit.org/b/160934). | 1.5 |


See also
--------


* [`<image>`](../image)
* [`image()`](image)
* [`element()`](../element())
* [`url()`](../url)
* [`<gradient>`](../gradient)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set>

:in-range
=========


The `:in-range` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element whose current value is within the range limits specified by the [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) and [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) attributes.


Try it
------



 This pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.

  **Note:** This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

 
Syntax
------



```
:in-range {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<form action="" id="form1">
  <ul>
    Values between 1 and 10 are valid.
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12"
 required />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

```
### CSS



```
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}

```
### Result



  **Note:** An empty `<input>` does not count as out of range, and will not be selected using the `:out-of-range` pseudo-class selector. The [`:blank`](:blank) pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the `required` attribute and the [`:invalid`](:invalid) pseudo-class to provide more general logic and styling for making inputs mandatory (`:invalid` will style blank *and* out-of-range inputs).

 
Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-in-range](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-in-range) |
| [Selectors Level 4 # in-range-pseudo](https://w3c.github.io/csswg-drafts/selectors/#in-range-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:in-range` | 10Before Chrome 52, `:in-range` matched disabled and read-only inputs (see [Chromium bug 602568](https://crbug.com/602568)). In Chrome 52, it was changed to only match enabled read-write inputs. | 13 | 29Before Firefox 50, `:in-range` matched disabled and read-only inputs (see [bug 1264157](https://bugzil.la/1264157)). In Firefox 50, it was changed to only match enabled read-write inputs. | No | 11Before Opera 39, `:in-range` matched disabled and read-only inputs (see [Chromium bug 602568](https://crbug.com/602568)). In Opera 39, it was changed to only match enabled read-write inputs. | 5.1In Safari, `:in-range` matched disabled and read-only inputs (see [bug 156530](https://webkit.org/b/156530)). It was later changed to only match enabled read-write inputs. | 2.2Before version 52, `:in-range` matched disabled and read-only inputs (see [Chromium bug 602568](https://crbug.com/602568)). In version 52, it was changed to only match enabled read-write inputs. | 18Before Chrome 52, `:in-range` matched disabled and read-only inputs (see [Chromium bug 602568](https://crbug.com/602568)). In Chrome 52, it was changed to only match enabled read-write inputs. | 16 | 11Before Opera 39, `:in-range` matched disabled and read-only inputs (see [Chromium bug 602568](https://crbug.com/602568)). In Opera 39, it was changed to only match enabled read-write inputs. | 5In Safari, `:in-range` matched disabled and read-only inputs (see [bug 156530](https://webkit.org/b/156530)). It was later changed to only match enabled read-write inputs. | 1.0Before version 6.0, `:in-range` matched disabled and read-only inputs (see [Chromium bug 602568](https://crbug.com/602568)). In version 6.0, it was changed to only match enabled read-write inputs. |


See also
--------


* [`:out-of-range`](:out-of-range)
* [Form data validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range>

:indeterminate
==============



The `:indeterminate` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any form element whose state is indeterminate, such as checkboxes which have their HTML [`indeterminate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate) attribute set to `true`, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) elements.

 
```
/\* Selects any <input> whose state is indeterminate \*/
input:indeterminate {
  background: lime;
}

```
 Elements targeted by this selector are:

 * [`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) elements whose `indeterminate` property is set to `true` by [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
* [`<input type="radio">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) elements, when all radio buttons with the same `name` value in the form are unchecked
* [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) elements in an indeterminate state



Syntax
------



```
:indeterminate

```
Examples
--------


### Checkbox & radio button



This example applies special styles to the labels associated with indeterminate form fields.

 #### HTML

 
```
<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>

```
 #### CSS

 
```
input:indeterminate + label {
  background: lime;
}

```
 #### JavaScript

 
```
const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

```
 #### Result



### Progress bar



#### HTML

 
```
<progress></progress>

```
 #### CSS

 
```
progress {
  margin: 4px;
}

progress:indeterminate {
  width: 80vw;
  height: 20px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-indeterminate](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-indeterminate) |
| [Selectors Level 4 # indeterminate](https://w3c.github.io/csswg-drafts/selectors/#indeterminate) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:indeterminate` | 1 | 12 | 2 | 10 | 9 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `checkbox` | 1 | 12 | 3.6 | 10 | 10.6 | 3 | ≤37 | 18 | 4 | 11 | 1 | 1.0 |
| `progress` | 6 | 12 | 6 | 10 | 15 | 5.1 | 37 | 18 | 6 | 14 | 5 | 1.0 |
| `radio` | 39 | 79 | 51 | No | 26 | NoSee [WebKit bug 156270](https://webkit.org/b/156270). | 39 | 39 | 51 | 26 | NoSee [WebKit bug 156270](https://webkit.org/b/156270). | 4.0 |


See also
--------


* [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)
* [Styling web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms)
* The [`<input type="checkbox">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) element's [`indeterminate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate) attribute
* [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) and the [`HTMLInputElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) interface which implements it.
* The [`:checked`](:checked) CSS selector lets you style checkboxes based on whether they're checked or not


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate>

inherit
=======



The `inherit` CSS keyword causes the element to take the [computed value](computed_value) of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property [`all`](all).

 For [inherited properties](inheritance#inherited_properties), this reinforces the default behavior, and is only needed to override another rule.

  **Note:** Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.

 

Examples
--------


### Exclude selected elements from a rule




```
/\* Make second-level headers green \*/
h2 {
  color: green;
}

/\* Leave those in the sidebar alone so they use their parent's color \*/
#sidebar h2 {
  color: inherit;
}

```
 In this example, the `h2` elements inside the sidebar might be different colors. For example, consider one of them that would by the child of a `div` matched by the rule:

 
```
div#current {
  color: blue;
}

```
 Then, it would be blue.


Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 4 # inherit](https://w3c.github.io/csswg-drafts/css-cascade/#inherit) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inherit` | 1 | 12 | 1 | 8 | 4 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Inheritance](inheritance)
* Use the [`initial`](initial) keyword to set a property to its initial value.
* Use the [`revert`](revert) keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use the [`revert-layer`](revert-layer) keyword to reset a property to the value established in a previous cascade layer.
* Use the [`unset`](unset) keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The [`all`](all) property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inherit>

inherits
========


The `inherits` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) descriptor is required when using the [`@property`](../@property) [at-rule](../at-rule) and controls whether the custom property registration specified by `@property` inherits by default.


Syntax
------



```
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}

```
Values
------


 `true`  The property inherits by default.

  `false`  The property does not inherit by default.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@property`](../@property) |
| [Initial value](../initial_value) | `auto` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
inherits =   
  true   [|](../value_definition_syntax#single_bar)  
  false    
  

```
Examples
--------



Add type checking to `--my-color` [`custom property`](../--*), as a color, a default value, and not allow it to inherit its value:

 Using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`@property`](../@property) [at-rule](../at-rule):

 
```
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

```
 Using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [`CSS.registerProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty):

 
```
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

```

Specifications
--------------




| Specification |
| --- |
| [CSS Properties and Values API Level 1 # inherits-descriptor](https://drafts.css-houdini.org/css-properties-values-api/#inherits-descriptor) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inherits` | 85 | 85 | No | No | 71 | 16.4 | 85 | 85 | No | 60 | 16.4 | 14.0 |


See also
--------


* [CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API)
* [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API)
* [CSS Typed Object Model](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API)
* [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@property/inherits>

initial
=======



The `initial` CSS keyword applies the [initial (or default) value](initial_value) of a property to an element. It can be applied to any CSS property, including the CSS shorthand property [`all`](all). With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately.

 On [inherited properties](inheritance#inherited_properties), the initial value may be unexpected. You should consider using the [`inherit`](inherit), [`unset`](unset), [`revert`](revert), or [`revert-layer`](revert-layer) keywords instead.



Examples
--------


### Using initial to reset color for an element



#### HTML

 
```
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>

```
 #### CSS

 
```
p {
  color: red;
}

em {
  color: initial;
}

```
 #### Result


 With the `initial` keyword in this example, `color` value on the `em` element is restored to the initial value of [`color`](color#formal_definition), as defined in the specification.


Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 4 # initial](https://w3c.github.io/csswg-drafts/css-cascade/#initial) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `initial` | 1 | 13 | 191–24 | No | 15 | 1.2 | 4.4 | 18 | 194–24 | 14 | 1 | 1.0 |


See also
--------


* Use the [`inherit`](inherit) keyword to make an element's property the same as its parent.
* Use the [`revert`](revert) keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use the [`revert-layer`](revert-layer) keyword to reset a property to the value established in a previous cascade layer.
* Use the [`unset`](unset) keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The [`all`](all) property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/initial>

initial-letter
==============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `initial-letter` CSS property sets styling for dropped, raised, and sunken initial letters.

 
```
/\* Keyword values \*/
initial-letter: normal;

/\* Numeric values \*/
initial-letter: 1.5; /\* Initial letter occupies 1.5 lines \*/
initial-letter: 3; /\* Initial letter occupies 3 lines \*/
initial-letter: 3 2; /\* Initial letter occupies 3 lines and
 sinks 2 lines \*/

/\* Global values \*/
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

```


Syntax
------


The keyword value `normal`, or a `<number>` optionally followed by an `<integer>`.

### Values


 `normal`  No special initial-letter effect. Text behaves as normal.

  `<number>`  Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.

  `<integer>`  Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | [`::first-letter`](::first-letter) pseudo-elements and inline-level first child of a block container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
initial-letter =   
  normal                               [|](value_definition_syntax#single_bar)  
  [<number [1,∞]>](number) [<integer [1,∞]>](integer)       [|](value_definition_syntax#single_bar)  
  [<number [1,∞]>](number) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) drop [|](value_definition_syntax#single_bar) raise []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Setting initial letter size



#### HTML

 
```
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>

```
 #### CSS

 
```
.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Inline Layout Module Level 3 # sizing-drop-initials](https://w3c.github.io/csswg-drafts/css-inline/#sizing-drop-initials) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `initial-letter` | 110 | 110 | NoSee [bug 1223880](https://bugzil.la/1223880). | No | 96 | 9See [bug 229090](https://webkit.org/b/229090) for the unprefixed property. | 110 | 110 | NoSee [bug 1223880](https://bugzil.la/1223880). | 74 | 9See [bug 229090](https://webkit.org/b/229090) for the unprefixed property. | No |


See also
--------


* [`initial-letter-align`](initial-letter-align)
* [Drop caps in CSS](https://www.oddbird.net/2017/01/03/initial-letter/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter>

initial-letter-align
====================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `initial-letter-align` CSS property specifies the alignment of initial letters within a paragraph.

 
```
/\* Keyword values \*/
initial-letter-align: auto;
initial-letter-align: alphabetic;
initial-letter-align: hanging;
initial-letter-align: ideographic;

/\* Global values \*/
initial-letter-align: inherit;
initial-letter-align: initial;
initial-letter-align: revert;
initial-letter-align: revert-layer;
initial-letter-align: unset;

```


Syntax
------


One of the keyword values listed below.

### Values


 `auto`  The user agent selects the value which corresponds to the language of the text. Western languages would default to alphabetic, CJK languages to ideographic, and some Indic languages to hanging.

  `alphabetic`  As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.

  `hanging`  The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text.

  `ideographic`  The initial letter is centered in the N-line area.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | [`::first-letter`](::first-letter) pseudo-elements and inline-level first child of a block container |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
initial-letter-align =   
  [[](value_definition_syntax#brackets) border-box[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) alphabetic [|](value_definition_syntax#single_bar) ideographic [|](value_definition_syntax#single_bar) hanging [|](value_definition_syntax#single_bar) leading []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) ]!    
  

```
Examples
--------


### Aligning initial letter



#### HTML

 
```
<p class="auto ">Initial letter - auto</p>
<p class="alphabetic">Initial letter - alphabetic</p>
<p class="hanging">Initial letter - hanging</p>
<p class="ideographic">Initial letter - ideographic</p>

```
 #### CSS

 
```
.auto::first-letter {
  -webkit-initial-letter-align: auto;
  initial-letter-align: auto;
}

.alphabetic::first-letter {
  -webkit-initial-letter-align: alphabetic;
  initial-letter-align: alphabetic;
}

.hanging::first-letter {
  -webkit-initial-letter-align: hanging;
  initial-letter-align: hanging;
}

.ideographic::first-letter {
  -webkit-initial-letter-align: ideographic;
  initial-letter-align: ideographic;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Inline Layout Module Level 3 # aligning-initial-letter](https://w3c.github.io/csswg-drafts/css-inline/#aligning-initial-letter) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `initial-letter-align` | No | No | NoSee [bug 1273021](https://bugzil.la/1273021). | No | No | No | No | No | NoSee [bug 1273021](https://bugzil.la/1273021). | No | No | No |


See also
--------


* [`initial-letter`](initial-letter)
* [Drop caps in CSS](https://www.oddbird.net/2017/01/03/initial-letter/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter-align>

@import
=======


The `@import` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> is used to import style rules from other valid stylesheets. An `@import` rule *must* be defined at the top of stylesheet, before any other at-rule (except <@charset> and <@layer>) and style declaration, else it will be ignored.


Syntax
------




```
@import url;
@import url list-of-media-queries;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) list-of-media-queries;

```
 where:

  *url*  Is a [`<string>`](string), a `<url>`, or a [`url()`](url) function representing the location of the resource to import. The URL may be absolute or relative.

  *list-of-media-queries*  Is a comma-separated list of [media queries](media_queries/using_media_queries), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.

  *layer-name*  Is the name of a [cascade layer](@layer) into which the contents of the linked resource are imported.

  
Description
-----------



Imported rules must come before all other types of rules, except [`@charset`](@charset) rules and layer creating [`@layer`](@layer) statements. The `@import` rule is not a [nested statement](syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](at-rule#conditional_group_rules).

 So that [user agents](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](media_queries/using_media_queries) after the URL. In the absence of any media query, the import is unconditional. Specifying `all` for the `list-of-media-queries` has the same effect.

 The `@import` rule can also be used to create a [cascade layer](@layer) by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.


Formal syntax
-------------



```
@import =   
  @import [[](value_definition_syntax#brackets) <url> [|](value_definition_syntax#single_bar) [<string>](string) []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) layer [|](value_definition_syntax#single_bar) layer( <layer-name> ) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) <import-conditions> ;    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<layer-name> =   
  [<ident>](ident) [[](value_definition_syntax#brackets) '.' [<ident>](ident) []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<import-conditions> =   
  [[](value_definition_syntax#brackets) supports( [[](value_definition_syntax#brackets) <supports-condition> [|](value_definition_syntax#single_bar) [<declaration>](declaration) []](value_definition_syntax#brackets) ) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) [<media-query-list>](media-query-list)[?](value_definition_syntax#question_mark)    
  
<supports-condition> =   
  not <supports-in-parens>                            [|](value_definition_syntax#single_bar)  
  <supports-in-parens> [[](value_definition_syntax#brackets) and <supports-in-parens> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)  [|](value_definition_syntax#single_bar)  
  <supports-in-parens> [[](value_definition_syntax#brackets) or <supports-in-parens> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)     
  
<supports-in-parens> =   
  ( <supports-condition> )  [|](value_definition_syntax#single_bar)  
  <supports-feature>        [|](value_definition_syntax#single_bar)  
  <general-enclosed>          
  
<supports-feature> =   
  <supports-decl>    
  
<general-enclosed> =   
  [[](value_definition_syntax#brackets) [<function-token>](function-token) [<any-value>](any-value)[?](value_definition_syntax#question_mark) ) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) ( [<any-value>](any-value)[?](value_definition_syntax#question_mark) ) []](value_definition_syntax#brackets)                   
  
<supports-decl> =   
  ( [<declaration>](declaration) )    
  

```
Examples
--------


### Importing CSS rules




```
@import "custom.css";
@import url("chrome://communicator/skin/");

```
 The two examples above show how to specify the *url* as a `<string>` and as a `url()` function.


### Importing CSS rules conditionally




```
@import url("fineprint.css") print;
@import url("bluish.css") print, screen;
@import "common.css" screen;
@import url("landscape.css") screen and (orientation: landscape);

```
 The `@import` rules in the above examples show media-dependent conditions that will need to be true before the linked CSS rules are applied. So for instance, the last `@import` rule will load the `landscape.css` stylesheet only on a screen device in landscape orientation.


### Importing CSS rules into a cascade layer




```
@import "theme.css" layer(utilities);

```
 In the above example, a cascade layer named `utilities` is created and it will include rules from the imported stylesheet `theme`.

 
```
@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

```
 In the above example, the rules in `headings.css` and `links.css` stylesheets cascade within the same layer as the `audio[controls]` rule.

 
```
@import "theme.css" layer();
@import "style.css" layer;

```
 This is an example of creating two separate unnamed cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an unnamed cascade layer. Unnamed cascade layers are finalized when created: they do not provide any means for re-arranging or adding styles and they cannot be referenced from outside.


Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 5 # at-import](https://w3c.github.io/csswg-drafts/css-cascade-5/#at-import) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@import` | 1 | 12 | 1 | 5.5 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `layer` | 99 | 99 | 97 | No | 85 | 15.4 | 99 | 99 | 97 | 68 | 15.4 | 18.0 |


See also
--------


* [`@media`](@media)
* [`@supports`](@supports)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@import>

inline-size
===========



The `inline-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the [`width`](width) or the [`height`](height) property, depending on the value of [`writing-mode`](writing-mode).

 If the writing mode is vertically oriented, the value of `inline-size` relates to the height of the element; otherwise, it relates to the width of the element. A related property is [`block-size`](block-size), which defines the other dimension of the element.



Try it
------


Syntax
------



```
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;

/\* Global values \*/
inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset;

```
### Values


The `inline-size` property takes the same values as the [`width`](width) and [`height`](height) properties.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | same as [`width`](width) and [`height`](height) |
| [Inherited](inheritance) | no |
| Percentages | inline-size of containing block |
| [Computed value](computed_value) | same as [`width`](width) and [`height`](height) |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inline-size =   
  <'width'>    
  

```
Examples
--------


### Setting inline size in pixels



#### HTML

 
```
<p class="exampleText">Example text</p>

```
 #### CSS

 
```
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # dimension-properties](https://w3c.github.io/csswg-drafts/css-logical/#dimension-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inline-size` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 5.0 |
| `fit-content` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 5.0 |
| `min-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 5.0 |


See also
--------


* The mapped physical properties: [`width`](width) and [`height`](height)
* [`writing-mode`](writing-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size>

inset-block-end
===============


The `inset-block-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`top`](top), [`right`](right), [`bottom`](bottom), or [`left`](left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------



```
/\* <length> values \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-block-end: 10%;

/\* Keyword value \*/
inset-block-end: auto;

/\* Global values \*/
inset-block-end: inherit;
inset-block-end: initial;
inset-block-end: revert;
inset-block-end: revert-layer;
inset-block-end: unset;

```
### Values


The `inset-block-end` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | logical-height of containing block |
| [Computed value](computed_value) | same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset-block-end =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting block end offset



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # position-properties](https://w3c.github.io/csswg-drafts/css-logical/#position-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset-block-end` | 87 | 87 | 6341–63 | No | 73 | 14.1 | 87 | 87 | 6341–63 | 62 | 14.5 | 14.0 |


See also
--------


* The properties which defines other insets: [`inset-block-start`](inset-block-start), [`inset-inline-start`](inset-inline-start), and [`inset-inline-end`](inset-inline-end)
* The mapped physical properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end>

initial-value
=============



The `initial-value` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) descriptor is required when using the [`@property`](../@property) [at-rule](../at-rule) unless the syntax accepts any valid token stream. It sets the initial-value for the property.

 The value chosen as the `initial-value` must parse correctly according to the syntax definition. Therefore, if syntax is `<color>` then the initial-value must be a valid [`color`](../color) value.



Syntax
------



```
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "<color>";
  inherits: true;
  initial-value: #c0ffee;
}

```
Values
------


A string with a value which is a correct value for the chosen `syntax`.

Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@property`](../@property) |
| [Initial value](../initial_value) | `n/a (required)` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
initial-value =   
  [<declaration-value>](../declaration-value)    
  

```
Examples
--------



Add type checking to `--my-color` [`custom property`](../--*), as a color, the initial-value being a valid color:

 Using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`@property`](../@property) [at-rule](../at-rule):

 
```
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

```
 Using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [`CSS.registerProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty):

 
```
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

```

Specifications
--------------




| Specification |
| --- |
| [CSS Properties and Values API Level 1 # initial-value-descriptor](https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `initial-value` | 85 | 85 | No | No | 71 | 16.4 | 85 | 85 | No | 60 | 16.4 | 14.0 |


See also
--------


* [CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API)
* [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API)
* [CSS Typed Object Model](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API)
* [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@property/initial-value>

inset
=====


The `inset` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a shorthand that corresponds to the [`top`](top), [`right`](right), [`bottom`](bottom), and/or [`left`](left) properties. It has the same multi-value syntax of the [`margin`](margin) shorthand.


Try it
------



 While part of the *CSS Logical Properties* specification, it does not define *logical* offsets. It defines *physical* offsets, regardless of the element's writing mode, directionality, and text orientation.


Syntax
------



```
/\* <length> values \*/
inset: 10px; /\* value applied to all edges \*/
inset: 4px 8px; /\* top/bottom left/right \*/
inset: 5px 15px 10px; /\* top left/right bottom \*/
inset: 2.4em 3em 3em 3em; /\* top right bottom left \*/

/\* <percentage>s of the width (left/right) or height (top/bottom) of the containing block \*/
inset: 10% 5% 5% 5%;

/\* Keyword value \*/
inset: auto;

/\* Global values \*/
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

```
### Values


The `inset` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`top`](top): `auto`
* [`bottom`](bottom): `auto`
* [`left`](left): `auto`
* [`right`](right): `auto`
 |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`top`](top): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* [`bottom`](bottom): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* [`left`](left): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* [`right`](right): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset =   
  [<top>](top)[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting offsets for an element



#### HTML

 
```
<div>
  <span class="exampleText">Example text</span>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 150px;
  height: 120px;
  position: relative;
}

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-inset](https://w3c.github.io/csswg-drafts/css-logical/#propdef-inset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* The longhand box offset properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left).
* The mapped logical shorthands: [`inset-block`](inset-block) and [`inset-inline`](inset-inline)
* The [`margin`](margin) shorthand multi-value syntax.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset>

inset-block
===========


The `inset-block` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`top`](top) and [`bottom`](bottom), or [`right`](right) and [`left`](left) properties depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`inset-block-end`](inset-block-end)
* [`inset-block-start`](inset-block-start)


Syntax
------



```
/\* <length> values \*/
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /\* value applied to start and end \*/

/\* <percentage>s of the width or height of the containing block \*/
inset-block: 10% 5%;

/\* Keyword value \*/
inset-block: auto;

/\* Global values \*/
inset-block: inherit;
inset-block: initial;
inset-block: revert;
inset-block: revert-layer;
inset-block: unset;

```
### Values


The `inset-block` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`inset-block-start`](inset-block-start): `auto`
* [`inset-block-end`](inset-block-end): `auto`
 |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | logical-height of containing block |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`inset-block-start`](inset-block-start): same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical
* [`inset-block-end`](inset-block-end): same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical
 |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset-block =   
  [<top>](top)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting block start and end offsets



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-inset-block](https://w3c.github.io/csswg-drafts/css-logical/#propdef-inset-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset-block` | 87 | 87 | 6341–63 | No | 73 | 14.1 | 87 | 87 | 6341–63 | 62 | 14.5 | 14.0 |


See also
--------


* The mapped physical properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left)
* The mapped physical shortcut: [`inset`](inset)
* The mapped inline shortcut: [`inset-inline`](inset-inline)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block>

inset-block-start
=================


The `inset-block-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`top`](top), [`right`](right), [`bottom`](bottom), or [`left`](left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------



```
/\* <length> values \*/
inset-block-start: 3px;
inset-block-start: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-block-start: 10%;

/\* Keyword value \*/
inset-block-start: auto;

/\* Global values \*/
inset-block-start: inherit;
inset-block-start: initial;
inset-block-start: revert;
inset-block-start: revert-layer;
inset-block-start: unset;

```
### Values


The `inset-block-start` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | logical-height of containing block |
| [Computed value](computed_value) | same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset-block-start =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting block start offset



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # position-properties](https://w3c.github.io/csswg-drafts/css-logical/#position-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset-block-start` | 87 | 87 | 6341–63 | No | 73 | 14.1 | 87 | 87 | 6341–63 | 62 | 14.5 | 14.0 |


See also
--------


* The properties which defines other insets: [`inset-block-end`](inset-block-end), [`inset-inline-start`](inset-inline-start), and [`inset-inline-end`](inset-inline-end)
* The mapped physical properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start>

inset-inline
============


The `inset-inline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`top`](top) and [`bottom`](bottom), or [`right`](right) and [`left`](left) properties depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`inset-inline-end`](inset-inline-end)
* [`inset-inline-start`](inset-inline-start)


Syntax
------



```
/\* <length> values \*/
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /\* value applied to start and end \*/

/\* <percentage>s of the width or height of the containing block \*/
inset-inline: 10% 5%;

/\* Keyword value \*/
inset-inline: auto;

/\* Global values \*/
inset-inline: inherit;
inset-inline: initial;
inset-inline: revert;
inset-inline: revert-layer;
inset-inline: unset;

```
### Values


The `inset-inline` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`inset-inline-start`](inset-inline-start): `auto`
* [`inset-inline-end`](inset-inline-end): `auto`
 |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`inset-inline-start`](inset-inline-start): same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical
* [`inset-inline-end`](inset-inline-end): same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical
 |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset-inline =   
  [<top>](top)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting inline start and end offsets



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-inset-inline](https://w3c.github.io/csswg-drafts/css-logical/#propdef-inset-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset-inline` | 87 | 87 | 6341–63 | No | 73 | 14.1 | 87 | 87 | 6341–63 | 62 | 14.5 | 14.0 |


See also
--------


* The mapped physical properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left)
* The mapped physical shortcut: [`inset`](inset)
* The mapped block shortcut: [`inset-block`](inset-block)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline>

inset-inline-end
================


The `inset-inline-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`top`](top), [`right`](right), [`bottom`](bottom), or [`left`](left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <length> values \*/
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-inline-end: 10%;

/\* Keyword value \*/
inset-inline-end: auto;

/\* Global values \*/
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: revert;
inset-inline-end: revert-layer;
inset-inline-end: unset;

```
 The shorthand for [`inset-inline-start`](inset-inline-start) and `inset-inline-end` is [`inset-inline`](inset-inline).


### Values


The `inset-inline-end` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset-inline-end =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting inline end offset



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # position-properties](https://w3c.github.io/csswg-drafts/css-logical/#position-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset-inline-end` | 87 | 87 | 6341–63 | No | 73 | 14.1 | 87 | 87 | 6341–63 | 62 | 14.5 | 14.0 |


See also
--------


* The properties which defines other insets: [`inset-block-start`](inset-block-start), [`inset-block-end`](inset-block-end), and [`inset-inline-start`](inset-inline-start)
* The mapped physical properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end>

<integer>
=========


The `<integer>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) is a special type of [`<number>`](number) that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as [`column-count`](column-count), [`counter-increment`](counter-increment), [`grid-column`](grid-column), [`grid-row`](grid-row), and [`z-index`](z-index).


Syntax
------



The `<integer>` data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single `+` or `-` sign. There is no unit associated with integers.

  **Note:** There is no official range of valid `<integer>` values and the specification do not specify a range.

 
Interpolation
-------------


When animated, values of the `<integer>` data type are [interpolated](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the [floor function](https://en.wikipedia.org/wiki/Floor_function). The speed of the interpolation is determined by the [timing function](easing-function) associated with the animation.

Examples
--------


### Valid integers



```
12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading -

```
### Invalid integers



```
12.0        This is a <number>, not an <integer>, though it represents an integer.
12.         Decimal points are not allowed.
+---12      Only one leading +/- is allowed.
ten         Letters are not allowed.
_5          Special characters are not allowed.
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
3e4         Scientific notation is not allowed.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # integers](https://w3c.github.io/csswg-drafts/css-values/#integers) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `integer` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`<number>`](number)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/integer>

inset-inline-start
==================


The `inset-inline-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the [`top`](top), [`right`](right), [`bottom`](bottom), or [`left`](left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <length> values \*/
inset-inline-start: 3px;
inset-inline-start: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-inline-start: 10%;

/\* Keyword value \*/
inset-inline-start: auto;

/\* Global values \*/
inset-inline-start: inherit;
inset-inline-start: initial;
inset-inline-start: revert;
inset-inline-start: revert-layer;
inset-inline-start: unset;

```
 The shorthand for `inset-inline-start` and [`inset-inline-end`](inset-inline-end) is [`inset-inline`](inset-inline).


### Values


The `inset-inline-start` property takes the same values as the [`left`](left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | same as box offsets: [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left) properties except that directions are logical |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
inset-inline-start =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting inline start offset



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline-start: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # position-properties](https://w3c.github.io/csswg-drafts/css-logical/#position-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset-inline-start` | 87 | 87 | 6341–63 | No | 73 | 14.1 | 87 | 87 | 6341–63 | 62 | 14.5 | 14.0 |


See also
--------


* The properties which defines other insets: [`inset-block-start`](inset-block-start), [`inset-block-end`](inset-block-end), and [`inset-inline-end`](inset-inline-end)
* The mapped physical properties: [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start>

:invalid
========


The `:invalid` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form), [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset), [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or other [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element whose contents fail to [validate](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation).


Try it
------



 This pseudo-class is useful for highlighting field errors for the user.


Syntax
------



```
:invalid {
  /\* ... \*/
}

```
Examples
--------


### Coloring elements to show validation



#### HTML

 
```
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>

```
 #### CSS

 
```
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

```
 #### Result



### Showing sections in stages



In this example we use `:invalid` along with `~`, the [general sibling combinator](general_sibling_combinator), to make a form appear in stages, so the form initially shows the first item to complete, and when the user completes each item the form displays the next one. When the whole form is complete the user can submit it.

 #### HTML

 
```
<form>
  <fieldset>
    <label for="form-name">Name</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">Email Address</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">Message</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">Submit</button>
</form>

```
 #### CSS

 
```
/\* Hide the fieldset after an invalid fieldset \*/
fieldset:invalid ~ fieldset {
  display: none;
}

/\* Dim and disable the button while the form is invalid \*/
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}

```
 #### Result



Accessibility concerns
----------------------



The color red is commonly used to indicate invalid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)


Notes
-----


### Radio buttons


If any one of the radio buttons in a group is `required`, the `:invalid` pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their `name` attribute.)

### Gecko defaults


By default, Gecko does not apply a style to the `:invalid` pseudo-class. However, it does apply a style (a red "glow" using the [`box-shadow`](box-shadow) property) to the [`:user-invalid`](:user-invalid) pseudo-class, which applies in a subset of cases for `:invalid`.

Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-invalid](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-invalid) |
| [Selectors Level 4 # validity-pseudos](https://w3c.github.io/csswg-drafts/selectors/#validity-pseudos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:invalid` | 10 | 12 | 4 | 10 | 10 | 5 | 37 | 18 | 4 | 10.1 | 5 | 1.0 |
| `form` | 40 | 79 | 13 | No | 27 | 9 | 40 | 40 | 14 | 27 | 9 | 4.0 |


See also
--------


* Other validation-related pseudo-classes: [`:required`](:required), [`:optional`](:optional), [`:valid`](:valid)
* Related Mozilla pseudo-classes: [`:user-invalid`](:user-invalid), [`:-moz-submit-invalid`](:-moz-submit-invalid)
* [Form data validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
* Accessing the [validity state](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) from JavaScript


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid>

invert()
========


The `invert()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) inverts the color samples in the input image. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



```
invert(amount)

```
### Parameters


 `amount`  The amount of the conversion, specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `0`.

  Examples
--------


### Examples of correct values for invert()



```
invert(0)     /\* No effect \*/
invert(.6)    /\* 60% inversion \*/
invert(100%)  /\* Completely inverted \*/

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-invert](https://drafts.fxtf.org/filter-effects/#funcdef-filter-invert) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `invert` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------



The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:

 * [`blur()`](blur)
* [`brightness()`](brightness)
* [`contrast()`](contrast)
* [`drop-shadow()`](drop-shadow)
* [`grayscale()`](grayscale)
* [`hue-rotate()`](hue-rotate)
* [`opacity()`](opacity)
* [`saturate()`](saturate)
* [`sepia()`](sepia)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert>

:is()
=====



The `:is()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

  **Note:** Originally named `:matches()` (and `:any()`), this selector was renamed to `:is()` in [CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258).

 

Try it
------



 Pseudo-elements are not valid in the selector list for `:is()`.


### Difference between :is() and :where()


The difference between the two is that `:is()` counts towards the specificity of the overall selector (it takes the specificity of its most specific argument), whereas [`:where()`](:where) has a specificity value of 0. This is demonstrated by the [example on the `:where()` reference page](:where#examples).

### Forgiving Selector Parsing



The specification defines `:is()` and `:where()` as accepting a [forgiving selector list](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list).

 In CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using `:is()` or `:where()` instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.

 
```
:is(:valid, :unsupported) {
  /\* … \*/
}

```
 Will still parse correctly and match `:valid` even in browsers which don't support `:unsupported`, whereas:

 
```
:valid,
:unsupported {
  /\* … \*/
}

```
 Will be ignored in browsers which don't support `:unsupported` even if they support `:valid`.


Examples
--------


### Simplifying list selectors



The `:is()` pseudo-class can greatly simplify your CSS selectors. For example, take the following CSS:

 
```
/\* 3-deep (or more) unordered lists use a square \*/
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

```
 You can replace it with:

 
```
/\* 3-deep (or more) unordered lists use a square \*/
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

```

### Simplifying section selectors



The `:is()` pseudo-class is particularly useful when dealing with HTML [sections and headings](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements). Since [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section), [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside), and [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) are commonly nested together, without `:is()`, styling them to match one another can be tricky.

 For example, without `:is()`, styling all the [h1](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) elements at different depths could be very complicated:

 
```
/\* Level 0 \*/
h1 {
  font-size: 30px;
}

/\* Level 1 \*/
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/\* Level 2 \*/
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/\* Level 3 \*/
/\* don't even think about it! \*/

```
 Using `:is()`, though, it's much easier:

 
```
/\* Level 0 \*/
h1 {
  font-size: 30px;
}
/\* Level 1 \*/
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/\* Level 2 \*/
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/\* Level 3 \*/
:is(section, article, aside, nav)
 :is(section, article, aside, nav)
 :is(section, article, aside, nav)
 h1 {
  font-size: 15px;
}

```

### :is() does not select pseudo-elements



The `:is()` pseudo-class does not match pseudo-elements. So rather than this:

 
```
some-element:is(::before, ::after) {
  display: block;
}

```
 or this:

 
```
:is(some-element::before, some-element::after) {
  display: block;
}

```
 instead do:

 
```
some-element::before,
some-element::after {
  display: block;
}

```

Syntax
------



```
:is(<forgiving-selector-list>) {
  /\* ... \*/
}

```
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # matches-pseudo](https://w3c.github.io/csswg-drafts/selectors/#matches-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:is` | 8812Doesn't support combinators. | 8879Doesn't support combinators. | 784["Doesn't support combinators.", "See [bug 906353](https://bugzil.la/906353)."] | No | 7415Doesn't support combinators. | 1495Doesn't support combinators. | 88≤37Doesn't support combinators. | 8818Doesn't support combinators. | 794["Doesn't support combinators.", "See [bug 906353](https://bugzil.la/906353)."] | 6314Doesn't support combinators. | 1495Doesn't support combinators. | 15.09.0–10.01.0 |
| `forgiving_selector_list` | 88 | 88 | 82 | No | 74 | 14 | 88 | 88 | 82 | 63 | 14 | 15.0 |


See also
--------


* [`:where()`](:where) - Like `:is()`, but with 0 <specificity>.
* [Selector list](selector_list)
* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:is>

isolation
=========


The `isolation` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property determines whether an element must create a new [stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context).


Try it
------



 This property is especially helpful when used in conjunction with [`mix-blend-mode`](mix-blend-mode) and [`z-index`](z-index).


Syntax
------




```
/\* Keyword values \*/
isolation: auto;
isolation: isolate;

/\* Global values \*/
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

```
 The `isolation` property is specified as one of the keyword values listed below.


### Values


 `auto`  A new stacking context is created only if one of the properties applied to the element requires it.

  `isolate`  A new stacking context must be created.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     [|](value_definition_syntax#single_bar)  
  isolate    
  

```
Examples
--------


### Forcing a new stacking context for an element



#### HTML

 
```
<div class="big-square ">
  <div class="isolation-auto">
    <div class="small-square">auto</div>
  </div>
  <div class="isolation-isolate">
    <div class="small-square">isolate</div>
  </div>
</div>

```
 #### CSS

 
```
.isolation-auto {
  isolation: auto;
}

.isolation-isolate {
  isolation: isolate;
}

.big-square {
  background-color: rgb(0, 255, 0);
  width: 200px;
  height: 210px;
}

.small-square {
  background-color: rgb(0, 255, 0);
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Compositing and Blending Level 2 # isolation](https://drafts.fxtf.org/compositing/#isolation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `isolation` | 41 | 79 | 36 | No | 30 | 8 | 41 | 41 | 36 | 30 | 8 | 4.0 |


See also
--------


* [`<blend-mode>`](blend-mode)
* [`mix-blend-mode`](mix-blend-mode), [`background-blend-mode`](background-blend-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/isolation>

justify-self
============


The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `justify-self` property sets the way a box is justified inside its alignment container along the appropriate axis.


Try it
------



 The effect of this property is dependent of the layout mode we are in:

 * In block-level layouts, it aligns an item inside its containing block on the inline axis.
* For absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
* In table cell layouts, this property is *ignored*. Read more about [alignment in block, absolute positioned and table layout](css_box_alignment/box_alignment_in_block_abspos_tables).
* In flexbox layouts, this property is *ignored*. Read more about [alignment in Flexbox](css_box_alignment/box_alignment_in_flexbox).
* In grid layouts, it aligns an item inside its grid area on the inline axis. Read more about [alignment in grid layouts](css_box_alignment/box_alignment_in_grid_layout).


Syntax
------




```
/\* Basic keywords \*/
justify-self: auto;
justify-self: normal;
justify-self: stretch;

/\* Positional alignment \*/
justify-self: center; /\* Pack item around the center \*/
justify-self: start; /\* Pack item from the start \*/
justify-self: end; /\* Pack item from the end \*/
justify-self: flex-start; /\* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. \*/
justify-self: flex-end; /\* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. \*/
justify-self: self-start;
justify-self: self-end;
justify-self: left; /\* Pack item from the left \*/
justify-self: right; /\* Pack item from the right \*/

/\* Baseline alignment \*/
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/\* Overflow alignment (for positional alignment only) \*/
justify-self: safe center;
justify-self: unsafe center;

/\* Global values \*/
justify-self: inherit;
justify-self: initial;
justify-self: revert;
justify-self: revert-layer;
justify-self: unset;

```
 This property can take one of three different forms:

 * Basic keywords: one of the keyword values `normal`, `auto`, or `stretch`.
* Baseline alignment: the `baseline` keyword, plus optionally one of `first` or `last`.
* Positional alignment:
	+ one of: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, or `right`.
	+ Plus optionally `safe` or `unsafe`.


### Values


 `auto`  The value used is the value of the `justify-items` property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, `auto` represents `normal`.

  `normal`  The effect of this keyword is dependent of the layout mode we are in:

 * In block-level layouts, the keyword is a synonym of `start`.
* In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In table cell layouts, this keyword has no meaning as this property is *ignored*.
* In flexbox layouts, this keyword has no meaning as this property is *ignored.*
* In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.

  `start`  The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

  `end`  The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

  `flex-start`  For items that are not children of a flex container, this value is treated like `start`.

  `flex-end`  For items that are not children of a flex container, this value is treated like `end`.

  `self-start`  The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

  `self-end`  The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

  `center`  The items are packed flush to each other toward the center of the alignment container.

  `left`  The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  `right`  The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  
`baseline`, `first baseline`, `last baseline`
   Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `stretch`  If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size exactly fills the alignment container.

  `safe`  If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level boxes, absolutely-positioned boxes, and grid items |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
justify-self =   
  auto                                                [|](value_definition_syntax#single_bar)  
  normal                                              [|](value_definition_syntax#single_bar)  
  stretch                                             [|](value_definition_syntax#single_bar)  
  <baseline-position>                                 [|](value_definition_syntax#single_bar)  
  <overflow-position>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <self-position> [|](value_definition_syntax#single_bar) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets)    
  
<baseline-position> =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  baseline             
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<self-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  self-start  [|](value_definition_syntax#single_bar)  
  self-end    [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### Simple demonstration



In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` — the default — which causes the grid items to stretch across the entire width of their cells.

 The second, third, and fourth grid items are then given different values of `justify-self`, to show how these override the `justify-items` value. These values cause the grid items to span only as wide as their content width, and align in different positions across their cells.

 #### HTML

 
```
<article class="container">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # justify-self-property](https://w3c.github.io/csswg-drafts/css-align/#justify-self-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `justify-self` | 57 | 16 | 45 | 10 | 44 | 10.1 | 57 | 57 | 45 | 43 | 10.3 | 6.0 |
| `flex_context` | 57 | 16 | 45 | No | 44 | 10.1 | 57 | 57 | 45 | 43 | 10.3 | 6.0 |
| `grid_context` | 57 | 16 | 45 | 10Internet Explorer 10 and 11 have the property `-ms-grid-column-align`, which acts in a similar way to `justify-self`. | 44 | 10.1 | 57 | 57 | 45 | 43 | 10.3 | 6.0 |


See also
--------


* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`justify-items`](justify-items) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self>

justify-tracks
==============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `justify-tracks` CSS property sets the alignment in the masonry axis for grid containers that have [masonry](css_grid_layout/masonry_layout) in their inline axis.



Syntax
------




```
/\* Keyword values \*/
justify-tracks: start;
justify-tracks: space-between;
justify-tracks: center;
justify-tracks: start, center, end;

/\* Global values \*/
justify-tracks: inherit;
justify-tracks: initial;
justify-tracks: revert;
justify-tracks: revert-layer;
justify-tracks: unset;

```
 The property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next, and so on.

 If there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored.


### Values


 `start`  The items are packed flush to each other toward the start edge of the alignment container in the masonry axis.

  `end`  The items are packed flush to each other toward the end edge of the alignment container in the masonry axis.

  `center`  The items are packed flush to each other toward the center of the alignment container along the masonry axis.

  `normal`  Acts as `start`.

  `space-between`  The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

  `space-around`  The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

  `space-evenly`  The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

  `stretch`  The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch.

  `left`  The items are packed flush to each other toward the left edge of the alignment container.

  `right`  The items are packed flush to each other toward the right edge of the alignment container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | Grid containers with masonry layout in their inline axis |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
justify-tracks =   
  [[](value_definition_syntax#brackets) normal [|](value_definition_syntax#single_bar) <content-distribution> [|](value_definition_syntax#single_bar) <overflow-position>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <content-position> [|](value_definition_syntax#single_bar) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<content-distribution> =   
  space-between  [|](value_definition_syntax#single_bar)  
  space-around   [|](value_definition_syntax#single_bar)  
  space-evenly   [|](value_definition_syntax#single_bar)  
  stretch          
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<content-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### Masonry layout with multiple values for justify-tracks


Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 3 # tracks-alignment](https://w3c.github.io/csswg-drafts/css-grid-3/#tracks-alignment) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `justify-tracks` | No | No | 77 | No | No | No | No | No | No | No | No | No |


See also
--------


* Related CSS properties: [`align-tracks`](align-tracks), [`masonry-auto-flow`](masonry-auto-flow)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/justify-tracks>

@keyframes
==========


The `@keyframes` CSS <at-rule> controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than [transitions](css_transitions).


Syntax
------



```
@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

```
### Values


 [`<custom-ident>`](custom-ident)  A name identifying the keyframe list. This must match the identifier production in CSS syntax.

  `from`  A starting offset of `0%`.

  `to`  An ending offset of `100%`.

  [`<percentage>`](percentage)  A percentage of the time through the animation sequence at which the specified keyframe should occur.

  Description
-----------



To use keyframes, create a `@keyframes` rule with a name that is then used by the [`animation-name`](animation-name) property to match an animation to its keyframe declaration. Each `@keyframes` rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.

 You can list the keyframe percentages in any order; they will be handled in the order they should occur.

 JavaScript can access the `@keyframes` at-rule with the CSS object model interface [`CSSKeyframesRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule).


### Valid keyframe lists



If a keyframe rule doesn't specify the start or end states of the animation (that is, `0%`/`from` and `100%`/`to`), browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.

 Properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated.


### Resolving duplicates



If multiple keyframe sets exist for a given name, the last one encountered by the parser is used. `@keyframes` rules don't cascade, so animations never derive keyframes from more than one rule set.

 If a given animation time offset is duplicated, all keyframes in the `@keyframes` rule for that percentage are used for that frame. There is cascading within a `@keyframes` rule if multiple keyframes specify the same percentage values.


### When properties are left out of some keyframes



Properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. For example:

 
```
@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
 72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

```
 Here, the [`top`](top) property animates using the `0%`, `30%`, and `100%` keyframes, and [`left`](left) animates using the `0%`, `68%`, `72%` and `100%` keyframes.


### When a keyframe is defined multiple times



If a keyframe is defined multiple times but not all affected properties are in each keyframe, all values specified in these keyframes are considered. For example:

 
```
@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

```
 In this example, at the `50%` keyframe, the values used are `top: 10px` and `left: 20px`.

 Cascading keyframes are supported starting in Firefox 14.


### 
`!important` in a keyframe



Declarations in a keyframe qualified with `!important` are ignored.

 
```
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /\* ignored \*/
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /\* ignored \*/
    margin-bottom: 50px;
  }
}

```

Formal syntax
-------------



```
@keyframes =   
  @keyframes <keyframes-name> { [<rule-list>](rule-list) }    
  
<keyframes-name> =   
  [<custom-ident>](custom-ident)  [|](value_definition_syntax#single_bar)  
  [<string>](string)          
  

```
Examples
--------


### CSS animation examples


See [Using CSS animations](css_animations/using_css_animations) for examples.

Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 1 # keyframes](https://w3c.github.io/csswg-drafts/css-animations/#keyframes) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@keyframes` | 431 | 12 | 49165 | 10 | 301512.1–1512–15 | 94 | 434.4 | 4318 | 49165 | 301412.1–1412–14 | 94 | 4.01.0 |
| `ignore_important_declarations` | 45 | 79 | 19 | No | 32 | 10.1 | 45 | 45 | 19 | 32 | 10.3 | 5.0 |


See also
--------


* [Using CSS animations](css_animations/using_css_animations)
* [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes>

:last-of-type
=============


The `:last-of-type` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents the last element of its type among a group of sibling elements.


Try it
------


Syntax
------



```
:last-of-type {
  /\* ... \*/
}

```
Examples
--------


### Styling the last paragraph



#### HTML

 
```
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

```
 #### CSS

 
```
p:last-of-type {
  color: red;
  font-style: italic;
}

```
 #### Result



### Nested elements



This example shows how nested elements can also be targeted. Note that the [universal selector](universal_selectors) (`*`) is implied when no simple selector is written.

 #### HTML

 
```
<article>
  <div>This `div` is first.</div>
  <div>This <span>nested `span` is last</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`!</div>
</article>

```
 #### CSS

 
```
article :last-of-type {
  background-color: pink;
}

```
 #### Result



### Multiple selectors elements



This HTML example contains nested elements of different types. The CSS contains both type selectors and class selectors.

 #### HTML

 
```
<p>This `p` is not selected.</p>
<p>This `p` is not selected either.</p>
<p>
  This `p` is last `p` element of its parent e.g. `body` selected by `p` type
  selector.
</p>
<div class="container">
  <div class="item">This `div` is not selected.</div>
  <div class="item">This `div` is not selected either.</div>
  <div class="item">
    This `div` is last `div` element of its parent `div` selected by `.container
    .item` class selector.
  </div>
  <p class="item">
    This `p` is last `p` element of its parent `div` selected by `.container
    .item` class selector.
  </p>
</div>

```
 #### CSS

 
```
p:last-of-type {
  background: skyblue;
}

.container .item:last-of-type {
  color: red;
  font-weight: bold;
}

```
 #### Result


 The last `<div>` and the last `<p>` are both red and bold as the `.item:last-of-type` selects the last of every type if that last element also has the `item` class.


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # last-of-type-pseudo](https://w3c.github.io/csswg-drafts/selectors/#last-of-type-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:last-of-type` | 1 | 12Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type. | 3.5 | 9Internet Explorer treats all unknown elements (such as custom elements) as the same element type. | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:last-child`](:last-child), [`:nth-last-of-type`](:nth-last-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type>

justify-content
===============



The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `justify-content` property defines how the browser distributes space between and around content items along the [main-axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) of a flex container, and the inline axis of a grid container.

 The interactive example below demonstrates some of the values using Grid Layout.



Try it
------



 The alignment is done after the lengths and auto margins are applied, meaning that, if in a [Flexbox layout](css_flexible_box_layout) there is at least one flexible element, with [`flex-grow`](flex-grow) different from `0`, it will have no effect as there won't be any available space.


Syntax
------



```
/\* Positional alignment \*/
justify-content: center; /\* Pack items around the center \*/
justify-content: start; /\* Pack items from the start \*/
justify-content: end; /\* Pack items from the end \*/
justify-content: flex-start; /\* Pack flex items from the start \*/
justify-content: flex-end; /\* Pack flex items from the end \*/
justify-content: left; /\* Pack items from the left \*/
justify-content: right; /\* Pack items from the right \*/

/\* Baseline alignment \*/
/\* justify-content does not take baseline values \*/

/\* Normal alignment \*/
justify-content: normal;

/\* Distributed alignment \*/
justify-content: space-between; /\* Distribute items evenly
 The first item is flush with the start,
 the last is flush with the end \*/
justify-content: space-around; /\* Distribute items evenly
 Items have a half-size space
 on either end \*/
justify-content: space-evenly; /\* Distribute items evenly
 Items have equal space around them \*/
justify-content: stretch; /\* Distribute items evenly
 Stretch 'auto'-sized items to fit
 the container \*/

/\* Overflow alignment \*/
justify-content: safe center;
justify-content: unsafe center;

/\* Global values \*/
justify-content: inherit;
justify-content: initial;
justify-content: revert;
justify-content: revert-layer;
justify-content: unset;

```
### Values


 `start`  The items are packed flush to each other toward the start edge of the alignment container in the main axis.

  `end`  The items are packed flush to each other toward the end edge of the alignment container in the main axis.

  `flex-start`   The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`. 

  `flex-end`   The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`. 

  `center`  The items are packed flush to each other toward the center of the alignment container along the main axis.

  `left`  The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  `right`  The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  `normal`  The items are packed in their default position as if no `justify-content` value was set. This value behaves as `stretch` in grid and flex containers.

   `baseline first baseline` `last baseline`    Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `space-between`  The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

  `space-around`  The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

  `space-evenly`  The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

  `stretch`  If the combined size of the items along the main axis is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.

  **Note:** `stretch` is not supported by flexible boxes (flexbox).

   `safe`  Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | flex containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
justify-content =   
  normal                                              [|](value_definition_syntax#single_bar)  
  <content-distribution>                              [|](value_definition_syntax#single_bar)  
  <overflow-position>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <content-position> [|](value_definition_syntax#single_bar) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets)    
  
<content-distribution> =   
  space-between  [|](value_definition_syntax#single_bar)  
  space-around   [|](value_definition_syntax#single_bar)  
  space-evenly   [|](value_definition_syntax#single_bar)  
  stretch          
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<content-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### Setting flex item distribution



#### CSS

 
```
#container {
  display: flex;
  justify-content: space-between; /\* Can be changed in the live sample \*/
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # align-justify-content](https://w3c.github.io/csswg-drafts/css-align/#align-justify-content) |
| [CSS Flexible Box Layout Module Level 1 # justify-content-property](https://w3c.github.io/csswg-drafts/css-flexbox/#justify-content-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `justify-content` | 2921 | 1212 | 4920 | 11 | 12.1 | 97 | 4.44.4 | 2925 | 4920 | 12.1 | 97 | 2.01.5 |
| `flex_context` | 5221–52Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 12 | 20Before Firefox 27, Firefox supported only single-line flexbox. | 11 | 12.1 | 7 | 524.4–52Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 5225–52Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52. | 20Before Firefox 27, Firefox supported only single-line flexbox. | 12.1 | 7 | 6.01.5–6.0Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Samsung Internet implements the new behavior beginning with Samsung Internet 6.0. |
| `grid_context` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 52 | 52 | 43 | 10.3 | 6.2 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content>

justify-items
=============


The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `justify-items` property defines the default [`justify-self`](justify-self) for all items of the box, giving them all a default way of justifying each box along the appropriate axis.


Try it
------



 The effect of this property is dependent of the layout mode we are in:

 * In block-level layouts, it aligns the items inside their containing block on the inline axis.
* For absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
* In table cell layouts, this property is *ignored* ([more](css_box_alignment/box_alignment_in_block_abspos_tables) about alignment in block, absolute positioned and table layout)
* In flexbox layouts, this property is *ignored* ([more](css_box_alignment/box_alignment_in_flexbox) about alignment in Flexbox)
* In grid layouts, it aligns the items inside their grid areas on the inline axis ([more](css_box_alignment/box_alignment_in_grid_layout) about alignment in grid layouts)


Syntax
------




```
/\* Basic keywords \*/
justify-items: normal;
justify-items: stretch;

/\* Positional alignment \*/
justify-items: center; /\* Pack items around the center \*/
justify-items: start; /\* Pack items from the start \*/
justify-items: end; /\* Pack items from the end \*/
justify-items: flex-start; /\* Equivalent to 'start'. Note that justify-items is ignored in Flexbox layouts. \*/
justify-items: flex-end; /\* Equivalent to 'end'. Note that justify-items is ignored in Flexbox layouts. \*/
justify-items: self-start;
justify-items: self-end;
justify-items: left; /\* Pack items from the left \*/
justify-items: right; /\* Pack items from the right \*/

/\* Baseline alignment \*/
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/\* Overflow alignment (for positional alignment only) \*/
justify-items: safe center;
justify-items: unsafe center;

/\* Legacy alignment \*/
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/\* Global values \*/
justify-items: inherit;
justify-items: initial;
justify-items: revert;
justify-items: revert-layer;
justify-items: unset;

```
 This property can take one of four different forms:

 * Basic keywords: one of the keyword values `normal` or `stretch`.
* Baseline alignment: the `baseline` keyword, plus optionally one of `first` or `last`.
* Positional alignment: one of: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, or `right`. Plus optionally `safe` or `unsafe`.
* Legacy alignment: the `legacy` keyword, followed by one of `left` or `right`.


### Values


 `normal`  The effect of this keyword is dependent of the layout mode we are in:

 * In block-level layouts, the keyword is a synonym of `start`.
* In absolutely-positioned layouts, the keyword behaved like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In table cell layouts, this keyword has no meaning as this property is *ignored*.
* In flexbox layouts, this keyword has no meaning as this property is *ignored.*
* In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.

  `start`  The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

  `end`  The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

  `flex-start`  For items that are not children of a flex container, this value is treated like `start`.

  `flex-end`  For items that are not children of a flex container, this value is treated like `end`.

  `self-start`  The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

  `self-end`  The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

  `center`  The items are packed flush to each other toward the center of the alignment container.

  `left`  The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  `right`  The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  
`baseline`, `first baseline`, `last baseline`
   Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `stretch`  If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size exactly fills the alignment container.

  `safe`  If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

  `legacy`  Makes the value inherited by the box descendants. Note that if a descendant has a `justify-self: auto` value, the `legacy` keyword is not considered by the descend, only the `left`, `right`, or `center` value associated to it.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `legacy` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
justify-items =   
  normal                                              [|](value_definition_syntax#single_bar)  
  stretch                                             [|](value_definition_syntax#single_bar)  
  <baseline-position>                                 [|](value_definition_syntax#single_bar)  
  <overflow-position>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <self-position> [|](value_definition_syntax#single_bar) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  legacy                                              [|](value_definition_syntax#single_bar)  
  legacy [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) center []](value_definition_syntax#brackets)                   
  
<baseline-position> =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [&&](value_definition_syntax#double_ampersand)  
  baseline             
  
<overflow-position> =   
  unsafe  [|](value_definition_syntax#single_bar)  
  safe      
  
<self-position> =   
  center      [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end         [|](value_definition_syntax#single_bar)  
  self-start  [|](value_definition_syntax#single_bar)  
  self-end    [|](value_definition_syntax#single_bar)  
  flex-start  [|](value_definition_syntax#single_bar)  
  flex-end      
  

```
Examples
--------


### Simple demonstration



In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` (the default), which causes the grid items to stretch across the entire width of their cells.

 If you hover or tab onto the grid container however, it is given a `justify-items` value of `center`, which causes the grid items to span only as wide as their content width, and align in the center of their cells.

 #### HTML

 
```
<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # justify-items-property](https://w3c.github.io/csswg-drafts/css-align/#justify-items-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `justify-items` | 52 | 12 | 20 | 11 | 12.1 | 9 | 52 | 52 | 20 | 12.1 | 9 | 6.0 |
| `flex_context` | 52 | 12 | 20 | 11 | 12.1 | 9 | 52 | 52 | 20 | 12.1 | 9 | 6.0 |
| `grid_context` | 57 | 16 | 45 | No | 44 | 10.1 | 57 | 57 | 45 | 43 | 10.3 | 6.0 |


See also
--------


* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`place-items`](place-items) shorthand property
* The [`justify-self`](justify-self) property
* The [`align-items`](align-items) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items>

:lang()
=======


The `:lang()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements based on the language they are determined to be in.


Try it
------



  **Note:** In HTML, the language is determined by a combination of the [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang) attribute, the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) 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.

 
Syntax
------


### Formal syntax



```
:lang(<language-code>) {
  /\* ... \*/
}

```
### Parameter


 `<language-code>`  A [`<string>`](string) representing the language you want to target. Acceptable values are specified in the [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) spec.

  Examples
--------


In this example, the `:lang()` pseudo-class is used to match the parents of quote elements ([`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)) using [child combinators](child_combinator). Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that [Unicode](https://developer.mozilla.org/en-US/docs/Glossary/Unicode) values are used to specify some of the special quote characters.

### HTML



```
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>

```
### CSS



```
:lang(en) > q {
  quotes: "\201C""\201D""\2018""\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039""\203A";
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # lang-pseudo](https://w3c.github.io/csswg-drafts/selectors/#lang-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:lang` | 1 | 12 | 1 | 8 | 8 | 3.1 | 4.4 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* Language-related pseudo-classes: [`:lang`](:lang), [`:dir`](:dir)
* HTML [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang) attribute
* HTML [`translate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#translate) attribute
* [RFC 5646: Tags for Identifying Languages (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:lang>

:last-child
===========


The `:last-child` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents the last element among a group of sibling elements.


Try it
------


Syntax
------



```
:last-child {
  /\* ... \*/
}

```
Examples
--------


### Basic example



#### HTML

 
```
<div>
  <p>This text isn't selected.</p>
  <p>This text is selected!</p>
</div>

<div>
  <p>This text isn't selected.</p>
  <h2>This text isn't selected: it's not a `p`.</h2>
</div>

```
 #### CSS

 
```
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

```
 #### Result



### Styling a list



#### HTML

 
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

```
 #### CSS

 
```
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-last-child-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-last-child-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:last-child` | 1 | 12 | 1 | 9 | 9.5 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `no_parent_required` | 57 | 79 | 52 | No | 44 | No | 57 | 57 | 52 | 43 | No | 7.0 |


See also
--------


* [`:-moz-last-node`](:-moz-last-node)  Non-standard
* [`:last-of-type`](:last-of-type)
* [`:first-child`](:first-child)
* [`:nth-child`](:nth-child)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child>

letter-spacing
==============


The `letter-spacing` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of `letter-spacing` causes characters to spread farther apart, while negative values of `letter-spacing` bring characters closer together.


Try it
------


Syntax
------



```
/\* Keyword value \*/
letter-spacing: normal;

/\* <length> values \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/\* Global values \*/
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

```
### Values


 `normal`  The normal letter spacing for the current font. Unlike a value of `0`, this keyword allows the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) to alter the space between characters in order to justify text.

  [`<length>`](length)  Specifies extra inter-character space *in addition to* the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

  Accessibility concerns
----------------------



A large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

 Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


Internationalization concerns
-----------------------------



Some written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.

 
>  شسيبتنمك
> 
>  


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
letter-spacing =   
  normal    [|](value_definition_syntax#single_bar)  
  [<length>](length)    
  

```
Examples
--------


### Setting letter spacing



#### HTML

 
```
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

```
 #### CSS

 
```
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # letter-spacing-property](https://w3c.github.io/csswg-drafts/css-text/#letter-spacing-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `letter-spacing` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `svg` | 1 | 12 | 72 | 9 | 7 | 5.1 | ≤37 | 18 | No | 10.1 | 5 | 1.0 |


See also
--------


* [`font-kerning`](font-kerning)
* [`word-spacing`](word-spacing)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing>

line-break
==========


The `line-break` CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.


Try it
------


Syntax
------



```
/\* Keyword values \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/\* Global values \*/
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;

```
### Values


 `auto`  Break text using the default line break rule.

  `loose`  Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

  `normal`  Break text using the most common line break rule.

  `strict`  Break text using the most stringent line break rule.

  `anywhere`  There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the [`word-break`](word-break) property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
line-break =   
  auto      [|](value_definition_syntax#single_bar)  
  loose     [|](value_definition_syntax#single_bar)  
  normal    [|](value_definition_syntax#single_bar)  
  strict    [|](value_definition_syntax#single_bar)  
  anywhere    
  

```
Examples
--------


### Setting text wrapping



See whether the text is wrapped before "々", "ぁ" and "。".

 #### HTML

 
```
<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>

```
 #### CSS

 
```
.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # line-break-property](https://w3c.github.io/csswg-drafts/css-text/#line-break-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `line-break` | 581 | 14 | 69 | 85.5 | 4515 | 1132–3 | 58≤37 | 5818 | 79 | 4314 | 111 | 7.01.0 |


* [CSS and International text](https://www.w3.org/International/articles/css3-text/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/line-break>

line-gap-override
=================


The `line-gap-override` CSS descriptor defines the line-gap metric for the font. The line-gap metric is the font recommended line-gap or external leading.


Syntax
------



```
line-gap-override: normal;
line-gap-override: 90%;

```
### Values


 `normal`  The default value. When used the metric value is obtained from the font file.

  `<percentage>`  A [`<percentage>`](../percentage) value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `normal` |
| Percentages | as specified |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
line-gap-override =   
  [[](../value_definition_syntax#brackets) normal [|](../value_definition_syntax#single_bar) [<percentage [0,∞]>](../percentage) []](../value_definition_syntax#brackets)[{1,2}](../value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Overriding metrics of a fallback font



The `line-gap-override` property can help when overriding the metrics of a fallback font to better match those of a primary web font.

 
```
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  line-gap-override: 125%;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-metrics-override-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-metrics-override-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `line-gap-override` | 87 | 87 | 89 | No | 73 | No | 87 | 87 | 89 | 62 | No | 14.0 |


See also
--------


* [`descent-override`](descent-override)
* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-weight`](font-weight)
* [`font-style`](font-style)
* [`font-stretch`](font-stretch)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`line-gap-override`](line-gap-override)
* [`src`](src)
* [`size-adjust`](size-adjust)
* [`unicode-range descriptor`](unicode-range)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override>

:left
=====



The `:left` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes), used with the [`@page`](@page) <at-rule>, represents all left-hand pages of a printed document.

 
```
/\* Selects any left-hand pages when printing \*/
@page :left {
  margin: 2in 3in;
}

```
 Whether a given page is "left" or "right" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a [`:right`](:right) page; if it has a major writing direction of right-to-left then it will be a `:left` page.

  **Note:** This pseudo-class can be used to change only the [`margin`](margin), [`padding`](padding), [`border`](border), and [`background`](background) properties of the *page box*. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.

 

Syntax
------



```
:left {
  /\* ... \*/
}

```
Examples
--------


### Setting a margin for left-hand pages



```
@page :left {
  margin: 2in 3in;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # left-right-first](https://w3c.github.io/csswg-drafts/css-page/#left-right-first) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:left` | 6 | 12 | No | 8 | 9.2 | 5 | ≤37 | 18 | No | 10.1 | 4.2 | 1.0 |


See also
--------


* [`@page`](@page)
* Other page-related pseudo-classes: [`:first`](:first), [`:right`](:right)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:left>

left
====


The `left` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property participates in specifying the horizontal position of a [positioned element](position). It has no effect on non-positioned elements.


Try it
------


Syntax
------



```
/\* <length> values \*/
left: 3px;
left: 2.4em;

/\* <percentage>s of the width of the containing block \*/
left: 10%;

/\* Keyword value \*/
left: auto;

/\* Global values \*/
left: inherit;
left: initial;
left: revert;
left: revert-layer;
left: unset;

```
### Values


 [`<length>`](length)  A negative, null, or positive [`<length>`](length) that represents:

 * for *absolutely positioned elements*, the distance to the left edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved to the right of its normal position.

  [`<percentage>`](percentage)  A [`<percentage>`](percentage) of the containing block's width.

  `auto`  Specifies that:

 * for *absolutely positioned elements*, the position of the element is based on the [`right`](right) property, while `width: auto` is treated as a width based on the content; or if `right` is also `auto`, the element is positioned where it should horizontally be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the [`right`](right) property; or if `right` is also `auto`, the element is not moved horizontally at all.

  `inherit`  Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a [`<length>`](length), [`<percentage>`](percentage), or the `auto` keyword.

  Description
-----------



The effect of `left` depends on how the element is positioned (i.e., the value of the [`position`](position) property):

 * When `position` is set to `absolute` or `fixed`, the `left` property specifies the distance between the element's outer margin of left edge and the inner border of left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)
* When `position` is set to `relative`, the `left` property specifies the distance the element's left edge is moved to the right from its normal position.
* When `position` is set to `sticky`, the `left` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `left` property has *no effect*.

 When both `left` and [`right`](right) are defined, and width constraints don't prevent it, the element will stretch to satisfy both. If the element cannot stretch to satisfy both, the position of the element is *overspecified*. When this is the case, the `left` value has precedence when the container is left-to-right; the `right` value has precedence when the container is right-to-left.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
left =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Positioning elements



#### HTML

 
```
<div id="wrap">
  <div id="example\_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example\_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example\_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example\_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>

    <div id="example\_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Absolute position with both left and right declared</p>
    </div>
  </div>
</div>

```
 #### CSS

 
```
#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example\_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example\_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example\_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example\_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}
#example\_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 3 # insets](https://w3c.github.io/csswg-drafts/css-position/#insets) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `left` | 1 | 12 | 1 | 5.5 | 5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`inset`](inset), the shorthand for all related properties: [`top`](top), [`bottom`](bottom), [`left`](left), and [`right`](right)
* The mapped logical properties: [`inset-block-start`](inset-block-start), [`inset-block-end`](inset-block-end), [`inset-inline-start`](inset-inline-start), and [`inset-inline-end`](inset-inline-end) and the shorthands [`inset-block`](inset-block) and [`inset-inline`](inset-inline)
* [`position`](position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/left>

<length-percentage>
===================


The `<length-percentage>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a value that can be either a [`<length>`](length) or a [`<percentage>`](percentage).


Syntax
------


Refer to the documentation for [`<length>`](length) and [`<percentage>`](percentage) for details of the individual syntaxes allowed by this type.

Formal syntax
-------------



```
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### length-percentage examples



The following simple example demonstrates several properties that use `<length-percentage>` values.

 #### HTML

 
```
<p>You can use percentages and lengths in so many places.</p>

```
 #### CSS

 
```
p {
  /\* length-percentage examples \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* length examples \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* percentage example \*/
  text-size-adjust: 20%;
}

```
 #### Result



### Use in calc()



Where a `<length-percentage>` is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a [`calc()`](calc) expression. Therefore, all of the following values are acceptable for [`width`](width):

 
```
width: 200px;
width: 20%;
width: calc(100% - 200px);

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # mixed-percentages](https://w3c.github.io/csswg-drafts/css-values/#mixed-percentages) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Q` | 63 | 79 | 49 | No | 50 | No | 63 | 63 | 49 | 46 | No | 8.0 |
| `length-percentage` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `cap` | No | No | 97 | No | No | No | No | No | 97 | No | No | No |
| `ch` | 27 | 12 | 1["From Firefox 1 to Firefox 3, `ch` was the width of the *M* character.", "From Firefox 1 to Firefox 3, `ch` did not work with [`border-width`](https://developer.mozilla.org/docs/Web/CSS/border-width) and [`outline-width`](https://developer.mozilla.org/docs/Web/CSS/outline-width) CSS properties."] | 9 | 15 | 7 | 4.4 | 27 | 4 | 15 | 7 | 1.5 |
| `ex` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `ic` | NoSee [bug 937101](https://crbug.com/937101). | NoSee [bug 937101](https://crbug.com/937101). | 97 | No | NoSee [bug 937101](https://crbug.com/937101). | NoSee [bug 195176](https://webkit.org/b/195176). | NoSee [bug 937101](https://crbug.com/937101). | NoSee [bug 937101](https://crbug.com/937101). | 97 | NoSee [bug 937101](https://crbug.com/937101). | NoSee [bug 195176](https://webkit.org/b/195176). | NoSee [bug 937101](https://crbug.com/937101). |
| `lh` | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 1310170](https://bugzil.la/1310170). | No | NoSee [bug 937104](https://crbug.com/937104). | 16.4 | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 1310170](https://bugzil.la/1310170). | NoSee [bug 937104](https://crbug.com/937104). | 16.4 | NoSee [bug 937104](https://crbug.com/937104). |
| `mozmm` | No | No | 4–59 | No | No | No | No | No | 4–59 | No | No | No |
| `rem` | 4 | 12 | 3.6 | 9 | 11.6 | 5 | 2 | 18 | 4 | 12 | 4 | 1.0 |
| `rlh` | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 1310170](https://bugzil.la/1310170). | No | NoSee [bug 937104](https://crbug.com/937104). | 16.4 | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 937104](https://crbug.com/937104). | NoSee [bug 1310170](https://bugzil.la/1310170). | NoSee [bug 937104](https://crbug.com/937104). | 16.4 | NoSee [bug 937104](https://crbug.com/937104). |
| `vb` | No | No | NoSee [bug 1287034](https://bugzil.la/1287034). | No | No | NoSee [bug 159801](https://webkit.org/b/159801). | No | No | NoSee [bug 1287034](https://bugzil.la/1287034). | No | NoSee [bug 159801](https://webkit.org/b/159801). | No |
| `vh` | 20 | 12 | 19 | 9 | 20 | 6 | 4.4 | 25 | 19 | 14 | 6 | 1.5 |
| `vi` | No | No | NoSee [bug 1287034](https://bugzil.la/1287034). | No | No | NoSee [bug 159801](https://webkit.org/b/159801). | No | No | NoSee [bug 1287034](https://bugzil.la/1287034). | No | NoSee [bug 159801](https://webkit.org/b/159801). | No |
| `vmax` | 26 | 16 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | No | 15 | 7 | 1.5 | 26 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 7 | 1.5 |
| `vmin` | 26 | 1212 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 109 | 15 | 7 | 4.4 | 26 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 7 | 1.5 |
| `vw` | 20 | 12 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 9 | 20 | 6 | 4.4 | 25 | 19Starting with version 21, viewport-percentage lengths are invalid in `@page`. | 14 | 6 | 1.5 |


See also
--------


* [`<percentage>`](percentage)
* [`<length>`](length)
* [CSS Values and Units](css_values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage>

line-height-step
================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `line-height-step` CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.

 
```
/\* Point values \*/
line-height-step: 18pt;

/\* Global values \*/
line-height-step: inherit;
line-height-step: initial;
line-height-step: revert;
line-height-step: revert-layer;
line-height-step: unset;

```


Syntax
------



The `line-height-step` property is specified as any one of the following:

 * a `<length>`.


### Values


 `<length>`  The specified [`<length>`](length) is used in the calculation of the line box height step.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | block containers |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | absolute [`<length>`](length) |
| Animation type | discrete |

Formal syntax
-------------



```
line-height-step =   
  [<length [0,∞]>](length)    
  

```
Examples
--------


### Setting step unit for line box height



In the following example, the height of line box in each paragraph is rounded up to the step unit. The line box in `<h1>` does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.

 
```
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}

```
 The result of these rules is shown below in the following screenshot:

  ![How the line-height-step property affects the appearance of text.] 


Specifications
--------------




| Specification |
| --- |
| [CSS Rhythmic Sizing # line-height-step](https://w3c.github.io/csswg-drafts/css-rhythm/#line-height-step) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `line-height-step` | 60 | 79 | No | No | 47 | No | No | 60 | No | No | No | No |


See also
--------


* [`font`](font)
* [`font-size`](font-size)
* [`line-height`](line-height)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/line-height-step>

:link
=====


The `:link` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an element that has not yet been visited. It matches every unvisited [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) or [`<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) element that has an `href` attribute.


Try it
------



 Styles defined by the `:link` and [`:visited`](:visited) pseudo-classes can be overridden by any subsequent user-action pseudo-classes ([`:hover`](:hover) or [`:active`](:active)) that have at least equal specificity. To style links appropriately, put the `:link` rule before all other link-related rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive.

  **Note:** Use [`:any-link`](:any-link) to select an element independent of whether it has been visited or not.

 
Syntax
------



```
:link {
  /\* ... \*/
}

```
Examples
--------


By default, most browsers apply a special [`color`](color) value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the [`background-color`](background-color) values are likely to remain, as most browsers do not set that property on visited links by default.

### HTML



```
<a href="#ordinary-target">This is an ordinary link.</a><br />
<a href="">You've already visited this link.</a><br />
<a>Placeholder link (won't get styled)</a>

```
### CSS



```
a:link {
  background-color: gold;
  color: green;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-link](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-link) |
| [Selectors Level 4 # link](https://w3c.github.io/csswg-drafts/selectors/#link) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:link` | 1 | 12 | 1 | 3 | 3.5 | 1 | 1.5 | 18 | 4 | 14 | 3.2 | 1.0 |
| `not_match_link` | 1 | 12 | 87 | No | 3.5 | 15 | 1.5 | 18 | 87 | 14 | 15 | 1.0 |


See also
--------


* Link-related pseudo-classes: [`:visited`](:visited), [`:hover`](:hover), [`:active`](:active)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:link>

@layer
======


The `@layer` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.


Try it
------


Syntax
------




```
@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

```
 where:

  *layer-name*  Is the name of the cascade layer.

  *rules*  Is the set of CSS rules in the cascade layer.

  
Description
-----------



Rules within a cascade layer cascade together, giving more control over the cascade to web developers. Any styles not in a layer are gathered together and placed into a single anonymous layer that comes after all the declared layers, named and anonymous. This means that any styles declared outside of a layer will override styles declared in a layer, regardless of specificity.

 The `@layer` at-rule is used to create a cascade layer in one of three ways.

 The first way is to create a named cascade layer with the CSS rules for that layer inside, like so:

 
```
@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

```
 The second way is to create a named cascade layer without assigning any styles. This can be a single layer, as shown below:

 
```
@layer utilities;

```
 Multiple layers can be defined at once, as shown below:

 
```
@layer theme, layout, utilities;

```
 This is useful because the initial order in which layers are declared indicates which layer has precedence. As with declarations, the last layer to be listed will win if declarations are found in multiple layers. Therefore, with the preceding example, if a competing rule was found in `theme` and `utilities`, the one in `utilities` would win and be applied.

 A rule in `utilities` would be applied *even if it has lower specificity* than the rule in `theme`. This is because once the layer order has been established, specificity and order of appearance are ignored. This enables the creation of simpler CSS selectors because you do not have to ensure that a selector will have high enough specificity to override competing rules; all you need to ensure is that it appears in a later layer.

  **Note:** Having declared your layer names, thus setting their order, you can add CSS rules to the layer by re-declaring the name. The styles are then appended to the layer and the layer order will not be changed.

  The third way is to create a cascade layer with no name. For example:

 
```
@layer {
  p {
    margin-block: 1rem;
  }
}

```
 This creates an *anonymous cascade layer*. This layer functions in the same way as named layers; however, rules cannot be assigned to it later. The order of precedence for anonymous layers is the order in which layers are declared, named or not, and lower than the styles declared outside of a layer.

 Another way to create a cascade layer is by using [`@import`](@import). In this case, the rules would be in the imported stylesheet. Remember that the `@import` at-rule must precede all other types of rules, except `@charset` and `@layer` rules.

 
```
@import "theme.css" layer(utilities);

```

### Nesting layers



Layers may be nested. For example:

 
```
@layer framework {
  @layer layout {
  }
}

```
 To append rules to the `layout` layer inside `framework`, join the two names with a `.`.

 
```
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

```

Formal syntax
-------------



```
@layer =   
  @layer <layer-name>[?](value_definition_syntax#question_mark) { [<stylesheet>](stylesheet) }  [|](value_definition_syntax#single_bar)  
  @layer <layer-name>[#](value_definition_syntax#hash_mark) ;                   
  
<layer-name> =   
  [<ident>](ident) [[](value_definition_syntax#brackets) '.' [<ident>](ident) []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  

```
Examples
--------


### Simple example



In the following example, two CSS rules are created. One for the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element outside of any layer and one inside a layer named `type` for `.box p`.

 Without layers, the selector `.box p` would have the highest specificity, and therefore, the text `Hello, world!` will display in green. As the `type` layer comes before the anonymous layer created to hold non-layer content, the text will be purple.

 Also notice the order. Even though we declare the non-layered style first, it's still applied *after* the layer styles.

 #### HTML

 
```
<div class="box">
  <p>Hello, world!</p>
</div>

```
 #### CSS

 
```
p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

```
 #### Result



### Assigning rules to existing layers



In the following example, two layers are created with no rules applied, then CSS rules are applied to the two layers. The `base` layer defines a `color`, `border`, `font-size`, and `padding`. The `special` layer defines a different color. As `special` comes last when the layers were defined, the color it provides is used and the text is displayed using `rebeccapurple`. All of the other rules from `base` still apply.

 #### HTML

 
```
<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>

```
 #### CSS

 
```
@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 5 # layering](https://w3c.github.io/csswg-drafts/css-cascade-5/#layering) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@layer` | 99 | 99 | 97 | No | 85 | 15.4 | 99 | 99 | 97 | 68 | 15.4 | 18.0 |


See also
--------


* [`@import`](@import)
* [`CSSLayerBlockRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerBlockRule)
* [`CSSLayerStatementRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerStatementRule)
* [`!important`](important)
* [`revert-layer`](revert-layer)
* [Introducing the CSS cascade](cascade)
* [Cascade, specificity, and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
* [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)
* [The future of CSS: Cascade layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) on bram.us (September 15, 2021)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@layer>

list-style-image
================



The `list-style-image` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets an image to be used as the list item marker.

 It is often more convenient to use the shorthand [`list-style`](list-style).



Try it
------



  **Note:** This property is applied to list items, i.e. elements with `[`display`](display): list-item;` [by default](https://html.spec.whatwg.org/multipage/rendering.html#lists) this includes [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) elements. Because this property is inherited, it can be set on the parent element (normally [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) or [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)) to let it apply to all list items.

 
Syntax
------



```
/\* Keyword values \*/
list-style-image: none;

/\* <url> values \*/
list-style-image: url("starsolid.gif");

/\* valid image values \*/
list-style-image: linear-gradient(to left bottom, red, blue);

/\* Global values \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

```
### Values


 [`<image>`](image)  A valid image to use as the marker.

  `none`  Specifies that no image is used as the marker. If this value is set, the marker defined in [`list-style-type`](list-style-type) will be used instead.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | list items |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) |  |
| Animation type | discrete |

Formal syntax
-------------



```
list-style-image =   
  <image>  [|](value_definition_syntax#single_bar)  
  none       
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Using a url value



#### HTML

 
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

```
 #### CSS

 
```
ul {
  list-style-image: url("starsolid.gif");
}

```
 #### Result



### Using a gradient



#### HTML

 
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

```
 #### CSS

 
```
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # image-markers](https://w3c.github.io/csswg-drafts/css-lists/#image-markers) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `list-style-image` | 1 | 12 | 1Before Firefox 86, this property did not accept an `<image>` type, and required the URL of an image. | 4 | 7 | 1 | 4.4 | 18 | 4Before Firefox 86, this property did not accept an `<image>` type, and required the URL of an image. | 10.1 | 1 | 1.0 |


See also
--------


* [`list-style`](list-style), [`list-style-type`](list-style-type), [`list-style-position`](list-style-position)
* [`url()`](url) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image>

list-style-position
===================


The `list-style-position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the position of the [`::marker`](::marker) relative to a list item.


Try it
------


Syntax
------




```
/\* Keyword values \*/
list-style-position: inside;
list-style-position: outside;

/\* Global values \*/
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;

```
 The `list-style-position` property is specified as one of the keyword values listed below.


### Values


 `inside`  The [`::marker`](::marker) is the first element among the list item's contents.

  `outside`  The [`::marker`](::marker) is outside the principal block box.

  Description
-----------



This property is applied to list items, i.e., elements with `[`display`](display): list-item;`. [By default](https://html.spec.whatwg.org/multipage/rendering.html#lists) this includes [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) elements. Because this property is inherited, it can be set on the parent element (normally [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) or [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)) to let it apply to all list items.

 If a block element is the first child of a list element declared as `list-style-position: inside`, then the block element is placed on the line after the marker-box.

 It is often more convenient to use the shorthand [`list-style`](list-style).


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `outside` |
| Applies to | list items |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
list-style-position =   
  inside   [|](value_definition_syntax#single_bar)  
  outside    
  

```
Examples
--------


### Setting list item position



#### HTML

 
```
<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

```
 #### CSS

 
```
.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # list-style-position-property](https://w3c.github.io/csswg-drafts/css-lists/#list-style-position-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `list-style-position` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`list-style`](list-style), [`list-style-type`](list-style-type), [`list-style-image`](list-style-image)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position>

line-height
===========


The `line-height` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-[replaced](replaced_element) inline elements, it specifies the height that is used to calculate line box height.


Try it
------


Syntax
------




```
/\* Keyword value \*/
line-height: normal;

/\* Unitless values: use this number multiplied
by the element's font size \*/
line-height: 3.5;

/\* <length> values \*/
line-height: 3em;

/\* <percentage> values \*/
line-height: 34%;

/\* Global values \*/
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;

```
 The `line-height` property is specified as any one of the following:

 * a `<number>`
* a `<length>`
* a `<percentage>`
* the keyword `normal`.


### Values


 `normal`  Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly `1.2`, depending on the element's `font-family`.

  
`<number>` (unitless)  The used value is this unitless [`<number>`](number) multiplied by the element's own font size. The computed value is the same as the specified `<number>`. In most cases, **this is the preferred way** to set `line-height` and avoid unexpected results due to inheritance.

  `<length>`  The specified [`<length>`](length) is used in the calculation of the line box height. Values given in **em** units may produce unexpected results (see example below).

  `<percentage>`  Relative to the font size of the element itself. The computed value is this [`<percentage>`](percentage) multiplied by the element's computed font size. **Percentage** values may produce unexpected results (see the second example below).

  
`-moz-block-height`  Non-standard 
  Sets the line height to the content height of the current block.

  Accessibility concerns
----------------------



Use a minimum value of `1.5` for `line-height` for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

 [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| Percentages | refer to the font size of the element itself |
| [Computed value](computed_value) | for percentage and length values, the absolute length, otherwise as specified |
| Animation type | either number or length |

Formal syntax
-------------



```
line-height =   
  normal               [|](value_definition_syntax#single_bar)  
  [<number>](number)             [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Basic example




```
/\* All rules below have the same resultant line height \*/

/\* number/unitless \*/
div {
  line-height: 1.2;
  font-size: 10pt;
}

/\* length \*/
div {
  line-height: 1.2em;
  font-size: 10pt;
}

/\* percentage \*/
div {
  line-height: 120%;
  font-size: 10pt;
}

/\* font shorthand \*/
div {
  font: 10pt/1.2 Georgia, "Bitstream Charter", serif;
}

```
 It is often more convenient to set `line-height` by using the [`font`](font) shorthand as shown above, but this requires the `font-family` property to be specified as well.


### Prefer unitless numbers for line-height values



This example shows why it is better to use [`<number>`](number) values instead of [`<length>`](length) values. We will use two [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) elements. The first, with the green border, uses a unitless `line-height` value. The second, with the red border, uses a `line-height` value defined in `em`s.

 #### HTML

 
```
<div class="box green">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior.
</div>

<div class="box red">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  Length and percentage line-heights have poor inheritance behavior
</div>

<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->

```
 #### CSS

 
```
.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Inline Layout Module Level 3 # line-height-property](https://w3c.github.io/csswg-drafts/css-inline/#line-height-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-block-height` | No | No | 3.6 | No | No | No | No | No | 4 | No | No | No |
| `line-height` | 1 | 12 | 1 | 4 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`font`](font), [`font-size`](font-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/line-height>

linear-gradient()
=================


The `linear-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the [`<gradient>`](../gradient) data type, which is a special kind of [`<image>`](../image).


Try it
------


Syntax
------



```
/\* A gradient tilted 45 degrees,
 starting blue and finishing red \*/
linear-gradient(45deg, blue, red);

/\* A gradient going from the bottom right to the top left corner,
 starting blue and finishing red \*/
linear-gradient(to left top, blue, red);

/\* Color stop: A gradient going from the bottom to top,
 starting blue, turning green at 40% of its length,
 and finishing red \*/
linear-gradient(0deg, blue, green 40%, red);

/\* Color hint: A gradient going from the left to right,
 starting red, getting to the midpoint color
 10% of the way across the length of the gradient,
 taking the rest of the 90% of the length to change to blue \*/
linear-gradient(.25turn, red, 10%, blue);

/\* Multi-position color stop: A gradient tilted 45 degrees,
 with a red bottom-left half and a blue top-right half,
 with a hard line where the gradient changes from red to blue \*/
linear-gradient(45deg, red 0 50%, blue 50% 100%);

```
### Values



 `<side-or-corner>`  The position of the gradient line's starting point. If specified, it consists of the word `to` and up to two keywords: one indicates the horizontal side (`left` or `right`), and the other the vertical side (`top` or `bottom`). The order of the side keywords does not matter. If unspecified, it defaults to `to bottom`.

 The values `to top`, `to bottom`, `to left`, and `to right` are equivalent to the angles `0deg`, `180deg`, `270deg`, and `90deg`, respectively. The other values are translated into an angle.

  [`<angle>`](../angle)  The gradient line's angle of direction. A value of `0deg` is equivalent to `to top`; increasing values rotate clockwise from there.

  `<linear-color-stop>`  A color-stop's [`<color>`](../color_value) value, followed by one or two optional stop positions, (each being either a [`<percentage>`](../percentage) or a [`<length>`](../length) along the gradient's axis).

  `<color-hint>`  An interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

    **Note:** Rendering of [color stops in CSS gradients](#composition_of_a_linear_gradient) follows the same rules as color stops in [SVG gradients](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients).

 Note also that the first example above does not exactly render as depicted in Mozilla Firefox (particularly version 80.0b3). You'll have to set the html height property to 100% or 100vh to render as depicted.

 
Description
-----------



As with any gradient, a linear gradient has [no intrinsic dimensions](../image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

 To create a linear gradient that repeats so as to fill its container, use the [`repeating-linear-gradient()`](repeating-linear-gradient) function instead.

 Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `linear-gradient()` won't work on [`background-color`](../background-color) and other properties that use the [`<color>`](../color_value) data type.


### Composition of a linear gradient



A linear gradient is defined by an axis—the *gradient line*—and two or more *color-stop points*. Each point on the axis is a distinct color; to create a smooth gradient, the `linear-gradient()` function draws a series of colored lines perpendicular to the gradient line, each one matching the color of the point where it intersects the gradient line.

  ![linear-gradient.png] 

 The gradient line is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points: the starting point, the ending point, and, in between, optional color-stop points.

 The *starting point* is the location on the gradient line where the first color begins. The *ending point* is the point where the last color ends. Each of these two points is defined by the intersection of the gradient line with a perpendicular line passing from the box corner which is in the same quadrant. The ending point can be understood as the symmetrical point of the starting point. These somewhat complex definitions lead to an interesting effect sometimes called *magic corners*: the corners nearest to the starting and ending points have the same color as their respective starting or ending points.

 #### Customizing Gradients

 By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using a [`<length>`](../length) or a [`<percentage>`](../percentage). If you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. The following two gradients are equivalent.

 
```
linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

```
 By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

 
```
linear-gradient(red 10%, 30%, blue 90%);

```
 If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

 Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 40% mark, and then transitions from yellow to blue over 25% of the gradient

 
```
linear-gradient(red 40%, yellow 30%, blue 65%);

```
 Multi-position color stop are allowed. A color can be declared as two adjacent color stops by including both positions in the CSS declaration. The following three gradients are equivalent:

 
```
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

```
 By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.


Formal syntax
-------------



```
<linear-gradient()> =   
  linear-gradient( [[](../value_definition_syntax#brackets) [<angle>](../angle) [|](../value_definition_syntax#single_bar) to <side-or-corner> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) , <color-stop-list> )    
  
<side-or-corner> =   
  [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) right []](../value_definition_syntax#brackets)  [||](../value_definition_syntax#double_bar)  
  [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) bottom []](../value_definition_syntax#brackets)    
  
<color-stop-list> =   
  <linear-color-stop> , [[](../value_definition_syntax#brackets) <linear-color-hint>[?](../value_definition_syntax#question_mark) , <linear-color-stop> []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)    
  
<linear-color-stop> =   
  [<color>](../color_value)               [&&](../value_definition_syntax#double_ampersand)  
  <length-percentage>[?](../value_definition_syntax#question_mark)    
  
<linear-color-hint> =   
  <length-percentage>    
  
<length-percentage> =   
  [<length>](../length)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Gradient at a 45-degree angle




```
body {
  background: linear-gradient(45deg, red, blue);
}

```


### Gradient that starts at 60% of the gradient line




```
body {
  background: linear-gradient(135deg, orange 60%, cyan);
}

```


### Gradient with multi-position color stops



This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

 
```
body {
  background: linear-gradient(
    to right,
    red 20%,
    orange 20% 40%,
    yellow 40% 60%,
    green 60% 80%,
    blue 80%
  );
}

```


### More linear-gradient examples


Please see [Using CSS gradients](../css_images/using_css_gradients) for more examples.

Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # linear-gradients](https://w3c.github.io/csswg-drafts/css-images-4/#linear-gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `linear-gradient` | 2610 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 10Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `[-ms-filter: progid:DXImageTransform.Microsoft.Gradient()](https://developer.mozilla.org/docs/Web/CSS/-ms-filter#Gradient)`. | 15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75.1["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | ≤37≤37 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.4["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 1.51.0 |
| `doubleposition` | 71 | 79 | 64 | No | 58 | 12.1 | 71 | 71 | 64 | 50 | 12.2 | 10.0 |
| `hue_interpolation_method` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_color_space` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_hints` | 40 | 79 | 36 | No | 27 | 7 | 40 | 40 | 36 | 27 | 7 | 4.0 |
| `to` | 26 | 12 | 10 | 10 | 12.1 | 7 | 4.4 | 26 | 10 | 14 | 7 | 1.5 |
| `unitless_0_angle` | 26 | 12 | 5546Accepted only in `-webkit-linear-gradient()` and `-moz-linear-gradient()`, not `linear-gradient()`. | No | 16 | 7 | 4.4 | 26 | 5546Accepted only in `-webkit-linear-gradient()` and `-moz-linear-gradient()`, not `linear-gradient()`. | 14 | 7 | 1.5 |


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)
* Other gradient functions: [`repeating-linear-gradient()`](repeating-linear-gradient), [`radial-gradient()`](radial-gradient), [`repeating-radial-gradient()`](repeating-radial-gradient), [`conic-gradient()`](conic-gradient), [`repeating-conic-gradient()`](repeating-conic-gradient)
* [`<image>`](../image)
* [`element()`](../element())
* [`image()`](../image/image)
* [`image-set()`](../image/image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient>

:local-link
===========



The `:local-link` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL.

 
```
/\* Selects any <a> that links to the current document \*/
a:local-link {
  color: green;
}

```


Syntax
------



```
:local-link {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<a href="#target">This is a link on the current page.</a><br />
<a href="https://example.com">This is an external link</a><br />

```
### CSS



```
a:local-link {
  color: green;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # local-link-pseudo](https://drafts.csswg.org/selectors/#local-link-pseudo) |


Browser compatibility
---------------------

See also
--------


* Link-related pseudo-classes: [`:link`](:link), [`:visited`](:visited), [`:hover`](:hover), [`:active`](:active), [`:any-link`](:any-link)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:local-link>

log()
=====



The `log()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is an exponential function that returns the logarithm of a number.

 The [logarithm, or log](https://en.wikipedia.org/wiki/Logarithm), is the inverse of [`exponentiation`](exp); it is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.

 In CSS, when a single parameter is passed, the natural logarithm `e`, or approximately `2.7182818`, is used, though the base can be set to any value with an optional second parameter.



Syntax
------



```
/\* A <number> value \*/
width: calc(100px * log(7.389)); /\* 200px \*/
width: calc(100px * log(8, 2)); /\* 300px \*/
width: calc(100px * log(625, 5)); /\* 400px \*/

```
### Parameters



The `log(value [, base]?)` function accepts two comma-separated values as its parameters.

  `value`  A calculation which resolves to a [`<number>`](number) greater than or equal to 0. Representing the value to be logarithmed.

  `base`  Optional. A calculation which resolves to a [`<number>`](number) greater than or equal to 0. Representing the base of the logarithm. If not defined, the default logarithmic base `e` is used.

  
### Return value



The logarithm of `value`, when `base` is defined.

 The natural logarithm (base `e`) of `value`, when `base` is not defined.


### Formal syntax



```
<log()> =   
  log( <calc-sum> , <calc-sum>[?](value_definition_syntax#question_mark) )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # exponent-funcs](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `log` | No | No | 112 | No | No | 15.4 | No | No | 112 | No | 15.4 | No |


See also
--------


* [`pow()`](pow)
* [`sqrt()`](sqrt)
* [`hypot()`](hypot)
* [`exp()`](exp)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/log>

margin
======


The `margin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) shorthand property sets the [margin area](css_box_model/introduction_to_the_css_box_model#margin_area) on all four sides of an element.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`margin-top`](margin-top)
* [`margin-right`](margin-right)
* [`margin-bottom`](margin-bottom)
* [`margin-left`](margin-left)


Syntax
------




```
/\* Apply to all four sides \*/
margin: 1em;
margin: -3px;

/\* top and bottom | left and right \*/
margin: 5% auto;

/\* top | left and right | bottom \*/
margin: 1em auto 2em;

/\* top | right | bottom | left \*/
margin: 2px 1em 0 auto;

/\* Global values \*/
margin: inherit;
margin: initial;
margin: revert;
margin: revert-layer;
margin: unset;

```
 The `margin` property may be specified using one, two, three, or four values. Each value is a [`<length>`](length), a [`<percentage>`](percentage), or the keyword `auto`. Negative values draw the element closer to its neighbors than it would be by default.

 * When **one** value is specified, it applies the same margin to **all four sides**.
* When **two** values are specified, the first margin applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first margin applies to the **top**, the second to the **right and left**, the third to the **bottom**.
* When **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 [`<length>`](length)  The size of the margin as a fixed value.

  [`<percentage>`](percentage)  The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block).

  `auto`  The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

  Description
-----------



This property can be used to set a margin on all four sides of an element. Margins create extra space *around* an element, unlike [`padding`](padding), which creates extra space *within* an element.

 The top and bottom margins have no effect on *non-[replaced](replaced_element)* inline elements, such as [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) or [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code).


### Horizontal centering



To center something horizontally in modern browsers, you can use [`display`](display)`: flex;` [`justify-content`](justify-content)`: center;`.

 However, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use `margin: 0 auto;`.


### Margin collapsing


Elements' top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins. See [Mastering margin collapsing](css_box_model/mastering_margin_collapsing) for more information.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`margin-bottom`](margin-bottom): `0`
* [`margin-left`](margin-left): `0`
* [`margin-right`](margin-right): `0`
* [`margin-top`](margin-top): `0`
 |
| Applies to | all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`margin-bottom`](margin-bottom): the percentage as specified or the absolute length
* [`margin-left`](margin-left): the percentage as specified or the absolute length
* [`margin-right`](margin-right): the percentage as specified or the absolute length
* [`margin-top`](margin-top): the percentage as specified or the absolute length
 |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin =   
  <'margin-top'>[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Simple example



#### HTML

 
```
<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

```
 #### CSS

 
```
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

```


### More examples



```
margin: 5%; /\* All sides: 5% margin \*/

margin: 10px; /\* All sides: 10px margin \*/

margin: 1.6em 20px; /\* top and bottom: 1.6em margin \*/
/\* left and right: 20px margin \*/

margin: 10px 3% -1em; /\* top: 10px margin \*/
/\* left and right: 3% margin \*/
/\* bottom: -1em margin \*/

margin: 10px 3px 30px 5px; /\* top: 10px margin \*/
/\* right: 3px margin \*/
/\* bottom: 30px margin \*/
/\* left: 5px margin \*/

margin: 2em auto; /\* top and bottom: 2em margin \*/
/\* Box is horizontally centered \*/

margin: auto; /\* top and bottom: 0 margin \*/
/\* Box is horizontally centered \*/

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # margin](https://w3c.github.io/csswg-drafts/css-box/#margin) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `auto` | 1 | 12The `auto` value is not supported in quirks mode. | 1 | 6The `auto` value is not supported in quirks mode. | 3.5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Introduction to the CSS basic box model](css_box_model/introduction_to_the_css_box_model)
* [Margin collapsing](css_box_model/mastering_margin_collapsing)
* [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* The mapped logical properties: [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end) and the shorthands [`margin-block`](margin-block) and [`margin-inline`](margin-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin>

margin-block
============


The `margin-block` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`margin-block-start`](margin-block-start)
* [`margin-block-end`](margin-block-end)


Syntax
------




```
/\* <length> values \*/
margin-block: 10px 20px; /\* An absolute length \*/
margin-block: 1em 2em; /\* relative to the text size \*/
margin-block: 5% 2%; /\* relative to the nearest block container's width \*/
margin-block: 10px; /\* sets both start and end values \*/

/\* Keyword values \*/
margin-block: auto;

/\* Global values \*/
margin-block: inherit;
margin-block: initial;
margin-block: revert;
margin-block: revert-layer;
margin-block: unset;

```
 This property corresponds to the [`margin-top`](margin-top) and [`margin-bottom`](margin-bottom), or the [`margin-right`](margin-right) and [`margin-left`](margin-left) properties, depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 The `margin-block` property may be specified using one or two values.

 * When **one** value is specified, it applies the same margin to **both start and end**.
* When **two** values are specified, the first margin applies to the **start**, the second to the **end**.


### Values


The `margin-block` property takes the same values as the [`margin`](margin#values) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`margin-block-start`](margin-block-start): `0`
* [`margin-block-end`](margin-block-end): `0`
 |
| Applies to | same as [`margin`](margin) |
| [Inherited](inheritance) | no |
| Percentages | depends on layout model |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`margin-block-start`](margin-block-start): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* [`margin-block-end`](margin-block-end): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-block =   
  <'margin-top'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting block start and end margins



#### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}

```
 #### HTML

 
```
<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-margin-block](https://w3c.github.io/csswg-drafts/css-logical/#propdef-margin-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-block` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block>

margin-inline
=============


The `margin-inline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`margin-inline-start`](margin-inline-start)
* [`margin-inline-end`](margin-inline-end)


Syntax
------




```
/\* <length> values \*/
margin-inline: 10px 20px; /\* An absolute length \*/
margin-inline: 1em 2em; /\* relative to the text size \*/
margin-inline: 5% 2%; /\* relative to the nearest block container's width \*/
margin-inline: 10px; /\* sets both start and end values \*/

/\* Keyword values \*/
margin-inline: auto;

/\* Global values \*/
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;

```
 This property corresponds to the [`margin-top`](margin-top) and [`margin-bottom`](margin-bottom), or the [`margin-right`](margin-right) and [`margin-left`](margin-left) properties, depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 The `margin-inline` property may be specified using one or two values.

 * When **one** value is specified, it applies the same margin to **both start and end**.
* When **two** values are specified, the first margin applies to the **start**, the second to the **end**.


### Values


The `margin-inline` property takes the same values as the [`margin`](margin#values) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`margin-inline-start`](margin-inline-start): `0`
* [`margin-inline-end`](margin-inline-end): `0`
 |
| Applies to | same as [`margin`](margin) |
| [Inherited](inheritance) | no |
| Percentages | depends on layout model |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`margin-inline-start`](margin-inline-start): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* [`margin-inline-end`](margin-inline-end): if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-inline =   
  <'margin-top'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting inline start and end margins



#### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}

```
 #### HTML

 
```
<div>
  <p>Example text</p>
</div>
<div class="verticalExample">
  <p>Example text</p>
</div>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-margin-inline](https://w3c.github.io/csswg-drafts/css-logical/#propdef-margin-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-inline` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline>

list-style
==========


The `list-style` CSS [shorthand property](shorthand_properties) allows you to set all the list style properties at once.


Try it
------



  **Note:** This property is applied to list items, i.e., elements with `[`display`](display): list-item;`. [By default](https://html.spec.whatwg.org/multipage/rendering.html#lists) this includes [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) elements. Because this property is inherited, it can be set on a parent element (normally [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) or [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)) to make the same list styling apply to all the items inside.

 
Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`list-style-image`](list-style-image)
* [`list-style-position`](list-style-position)
* [`list-style-type`](list-style-type)


Syntax
------




```
/\* type \*/
list-style: square;

/\* image \*/
list-style: url("../img/shape.png");

/\* position \*/
list-style: inside;

/\* type | position \*/
list-style: georgian inside;

/\* type | image | position \*/
list-style: lower-roman url("../img/shape.png") outside;

/\* Keyword value \*/
list-style: none;

/\* Global values \*/
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;

```
 The `list-style` property is specified as one, two, or three keywords in any order. If [`list-style-type`](list-style-type) and [`list-style-image`](list-style-image) are both set, then `list-style-type` is used as a fallback if the image is unavailable.


### Values


 [`list-style-type`](list-style-type)  See [`list-style-type`](list-style-type).

  [`list-style-image`](list-style-image)  See [`list-style-image`](list-style-image).

  [`list-style-position`](list-style-position)  See [`list-style-position`](list-style-position).

  `none`  No list style is used.

  Accessibility concerns
----------------------



In a notable exception, Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style` value of `none`. This [behavior is intentional](https://webkit.org/b/170179#c1) and not considered a bug.

 The most straightforward way to address this is to add an explicit `role="list"` to the `<ol>` or `<ul>` element in the markup. This will restore the list semantics without affecting the design:

 
```
<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

```
 A CSS-only workaround is also available for those who do not have access to the markup: Adding [pseudo-content](content) before each list item can restore list semantics:

 
```
ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

```
 The added pseudo-content is tested by Safari to determine if it should be accessible or ignored. Accessible pseudo-content restores list semantics, while ignored pseudo-content does not.

 Generally, text or images are determined to be things that should be accessible, which is why the `content: "+ ";` declaration in the previous example works.

 A declaration of `content: "";` (an empty string) is ignored, as are `content` values that contain only spaces, such as `content: " ";`, so these do not work.

 If the intent is to keep list item markers visually hidden, this can often be managed with a [zero-width space](https://en.wikipedia.org/wiki/Zero-width_space), `&#8203;`, which is `\200B` in CSS and `\u200B` in JavaScript:

 
```
ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

```
 Another visually hidden approach is to apply an [`<image>`](image) to the `list-style` property:

 
```
nav ol,
nav ul {
  list-style: none;
}

/\* becomes \*/

nav ol,
nav ul {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

```
 These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact users' experiences.

 * [Bug #170179 | WebKit Bugzilla](https://webkit.org/b/170179)
* ['Fixing' Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)
* [VoiceOver and list-style-type: none](https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html)
* [MDN Understanding WCAG, Guideline 1.3 explanations](#)
* [Understanding Success Criterion 1.3.1: Info and Relationships | WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`list-style-type`](list-style-type): `disc`
* [`list-style-position`](list-style-position): `outside`
* [`list-style-image`](list-style-image): `none`
 |
| Applies to | list items |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`list-style-image`](list-style-image):
* [`list-style-position`](list-style-position): as specified
* [`list-style-type`](list-style-type): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
list-style =   
  <'list-style-position'>  [||](value_definition_syntax#double_bar)  
  <'list-style-image'>     [||](value_definition_syntax#double_bar)  
  <'list-style-type'>        
  

```
Examples
--------


### Setting list style type and position



#### HTML

 
```
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

```
 #### CSS

 
```
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # list-style-property](https://w3c.github.io/csswg-drafts/css-lists/#list-style-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `list-style` | 1 | 12 | 1 | 4 | 7 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `symbols` | No | No | 35 | No | No | No | No | No | 35 | No | No | No |


See also
--------


* [`list-style-type`](list-style-type), [`list-style-image`](list-style-image), [`list-style-position`](list-style-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/list-style>

margin-block-end
================


The `margin-block-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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.


Try it
------


Syntax
------




```
/\* <length> values \*/
margin-block-end: 10px; /\* An absolute length \*/
margin-block-end: 1em; /\* relative to the text size \*/
margin-block-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-block-end: auto;

/\* Global values \*/
margin-block-end: inherit;
margin-block-end: initial;
margin-block-end: revert;
margin-block-end: revert-layer;
margin-block-end: unset;

```
 It corresponds to the [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), or [`margin-left`](margin-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 It relates to [`margin-block-start`](margin-block-start), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end), which define the other margins of the element.


### Values


The `margin-block-end` property takes the same values as the [`margin-left`](margin-left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | same as [`margin`](margin) |
| [Inherited](inheritance) | no |
| Percentages | depends on layout model |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-block-end =   
  <'margin-top'>    
  

```
Examples
--------


### Setting block end margin



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # margin-properties](https://w3c.github.io/csswg-drafts/css-logical/#margin-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-block-end` | 87 | 87 | 41 | No | 73 | 12.1 | 87 | 87 | 41 | 62 | 12.2 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end>

margin-block-start
==================


The `margin-block-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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.


Try it
------


Syntax
------




```
/\* <length> values \*/
margin-block-start: 10px; /\* An absolute length \*/
margin-block-start: 1em; /\* relative to the text size \*/
margin-block-start: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-block-start: auto;

/\* Global values \*/
margin-block-start: inherit;
margin-block-start: initial;
margin-block-start: revert;
margin-block-start: revert-layer;
margin-block-start: unset;

```
 It corresponds to the [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), or [`margin-left`](margin-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

 It relates to [`margin-block-end`](margin-block-end), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end), which define the other margins of the element.


### Values


The `margin-block-start` property takes the same values as the [`margin-left`](margin-left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | same as [`margin`](margin) |
| [Inherited](inheritance) | no |
| Percentages | depends on layout model |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-block-start =   
  <'margin-top'>    
  

```
Examples
--------


### Setting block start margin



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-block-start: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # margin-properties](https://w3c.github.io/csswg-drafts/css-logical/#margin-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-block-start` | 87 | 87 | 41 | No | 73 | 12.1 | 87 | 87 | 41 | 62 | 12.2 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start>

margin-bottom
=============


The `margin-bottom` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [margin area](css_box_model/introduction_to_the_css_box_model#margin_area) on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.


Try it
------



  ![The effect of the CSS margin-bottom property on the element box] 

 This property has no effect on *non-[replaced](replaced_element)* inline elements, such as [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) or [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code).


Syntax
------




```
/\* <length> values \*/
margin-bottom: 10px; /\* An absolute length \*/
margin-bottom: 1em; /\* relative to the text size \*/
margin-bottom: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-bottom: auto;

/\* Global values \*/
margin-bottom: inherit;
margin-bottom: initial;
margin-bottom: revert;
margin-bottom: revert-layer;
margin-bottom: unset;

```
 The `margin-bottom` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.


### Values


 [`<length>`](length)  The size of the margin as a fixed value.

  [`<percentage>`](percentage)  The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block).

  `auto`  The browser selects a suitable value to use. See [`margin`](margin).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-bottom =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting positive and negative bottom margins



#### HTML

 
```
<div class="container">
  <div class="box0">Box 0</div>
  <div class="box1">Box 1</div>
  <div class="box2">Box one's negative margin pulls me up</div>
</div>

```
 #### CSS

 CSS for divs to set margin-bottom and height

 
```
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}

```
 Some definitions for container and divs so margins' effects can be seen more clearly

 
```
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # margin-physical](https://w3c.github.io/csswg-drafts/css-box/#margin-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-bottom` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `auto` | 1 | 12The `auto` value is not supported in quirks mode. | 1 | 6The `auto` value is not supported in quirks mode. | 3.5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`margin-top`](margin-top), [`margin-right`](margin-right), and [`margin-left`](margin-left) and the [`margin`](margin) shorthand
* The mapped logical properties: [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end) and the shorthands [`margin-block`](margin-block) and [`margin-inline`](margin-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom>

margin-top
==========


The `margin-top` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [margin area](css_box_model/introduction_to_the_css_box_model#margin_area) on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.


Try it
------



 This property has no effect on *non-[replaced](replaced_element)* inline elements, such as [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) or [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code).


Syntax
------




```
/\* <length> values \*/
margin-top: 10px; /\* An absolute length \*/
margin-top: 1em; /\* relative to the text size \*/
margin-top: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-top: auto;

/\* Global values \*/
margin-top: inherit;
margin-top: initial;
margin-top: revert;
margin-top: revert-layer;
margin-top: unset;

```
 The `margin-top` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.


### Values


 [`<length>`](length)  The size of the margin as a fixed value.

  [`<percentage>`](percentage)  The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block).

  `auto`  The browser selects a suitable value to use. See [`margin`](margin).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-top =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting positive and negative top margins



```
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # margin-physical](https://w3c.github.io/csswg-drafts/css-box/#margin-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-top` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `auto` | 1 | 12The `auto` value is not supported in quirks mode. | 1 | 6The `auto` value is not supported in quirks mode. | 3.5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left) and the [`margin`](margin) shorthand
* The mapped logical properties: [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end) and the shorthands [`margin-block`](margin-block) and [`margin-inline`](margin-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top>

list-style-type
===============


The `list-style-type` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the marker (such as a disc, character, or custom counter style) of a list item element.


Try it
------



 The [color](color_value) of the marker will be the same as the computed color of the element it applies to.

 Only a few elements ([`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)) have a default value of `display: list-item`. However, the `list-style-type` property may be applied to any element whose [`display`](display) value is set to `list-item`. Moreover, because this property is inherited, it can be set on a parent element (commonly [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) or [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul)) to make it apply to all list items.


Syntax
------




```
/\* Partial list of types \*/
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

/\* <string> value \*/
list-style-type: "-";

/\* Identifier matching an @counter-style rule \*/
list-style-type: custom-counter-style;

/\* Keyword value \*/
list-style-type: none;

/\* Global values \*/
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

```
 The `list-style-type` property may be defined as any one of:

 * a `<custom-ident>` value,
* a `symbols()` value,
* a `<string>` value, or
* the keyword `none`.

 Note that:

 * Some types require a suitable font installed to display as expected.
* The `cjk-ideographic` is identical to `trad-chinese-informal`; it exists for legacy reasons.


### Values


 [`<custom-ident>`](custom-ident)  An identifier matching the value of a [`@counter-style`](@counter-style) or one of the predefined styles:

  [`symbols()`](@counter-style/symbols)  Defines an anonymous style of the list.

  [`<string>`](string)  The specified string will be used as the item's marker.

  `none`  No item marker is shown.

  `disc`  A filled circle (default value).

  `circle`  A hollow circle.

  `square`  A filled square.

  `decimal`  Decimal numbers, beginning with 1.

  `cjk-decimal`  Han decimal numbers.

  `decimal-leading-zero`  Decimal numbers, padded by initial zeros.

  `lower-roman`  Lowercase roman numerals.

  `upper-roman`  Uppercase roman numerals.

  `lower-greek`  Lowercase classical Greek.

  
`lower-alpha`, `lower-latin`
  Lowercase ASCII letters.

  
`upper-alpha`, `upper-latin`
  Uppercase ASCII letters.

  
`arabic-indic`, `-moz-arabic-indic`
  Arabic-Indic numbers.

  `armenian`  Traditional Armenian numbering.

  
`bengali`, `-moz-bengali`
  Bengali numbering.

  
`cambodian`/`khmer`
  Cambodian/Khmer numbering.

  
`cjk-earthly-branch`, `-moz-cjk-earthly-branch`
  Han "Earthly Branch" ordinals.

  
`cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`
  Han "Heavenly Stem" ordinals.

  `cjk-ideographic`  Identical to `trad-chinese-informal`.

  
`devanagari`, `-moz-devanagari`
  Devanagari numbering.

  `ethiopic-numeric`  Ethiopic numbering.

  `georgian`  Traditional Georgian numbering.

  
`gujarati`, `-moz-gujarati`
  Gujarati numbering.

  
`gurmukhi`, `-moz-gurmukhi`
  Gurmukhi numbering.

  `hebrew`  Traditional Hebrew numbering.

  `hiragana`  Dictionary-order hiragana lettering.

  `hiragana-iroha`  [Iroha-order](https://en.wikipedia.org/wiki/Iroha) hiragana lettering.

  `japanese-formal`  Japanese formal numbering to be used in legal or financial documents. The kanjis are designed so that they can't be modified to look like another correct one.

  `japanese-informal`  Japanese informal numbering.

  
`kannada`, `-moz-kannada`
  Kannada numbering.

  `katakana`  Dictionary-order katakana lettering.

  `katakana-iroha`  [Iroha-order](https://en.wikipedia.org/wiki/Iroha) katakana lettering.

  `korean-hangul-formal`  Korean hangul numbering.

  `korean-hanja-formal`  Formal Korean Han numbering.

  `korean-hanja-informal`  Korean hanja numbering.

  
`lao`, `-moz-lao`
  Laotian numbering.

  `lower-armenian`  Lowercase Armenian numbering.

  
`malayalam`, `-moz-malayalam`
  Malayalam numbering.

  `mongolian`  Mongolian numbering.

  
`myanmar`, `-moz-myanmar`
  Myanmar (Burmese) numbering.

  
`oriya`, `-moz-oriya`
  Oriya numbering.

  
`persian`, `-moz-persian`
  Persian numbering.

  `simp-chinese-formal`  Simplified Chinese formal numbering.

  `simp-chinese-informal`  Simplified Chinese informal numbering.

  
`tamil`, `-moz-tamil`
  Tamil numbering.

  
`telugu`, `-moz-telugu`
  Telugu numbering.

  
`thai`, `-moz-thai`
  Thai numbering.

  `tibetan`  Tibetan numbering.

  `trad-chinese-formal`  Traditional Chinese formal numbering.

  `trad-chinese-informal`  Traditional Chinese informal numbering.

  `upper-armenian`  Traditional uppercase Armenian numbering.

  `disclosure-open`  Symbol indicating that a disclosure widget such as [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) is opened.

  `disclosure-closed`  Symbol indicating that a disclosure widget, like [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) is closed.

  ### Non-standard extensions



A few more predefined types are provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers support which extension.

 * `-moz-ethiopic-halehame`
* `-moz-ethiopic-halehame-am`
* `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er`
* `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et`
* `hangul`, `-moz-hangul`
* `hangul-consonant`, `-moz-hangul-consonant`
* `urdu`, `-moz-urdu`


Accessibility concerns
----------------------


Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a `list-style-type` value of `none`. To learn more about this and potential workarounds, see [`list-style`](list-style#accessibility_concerns).

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `disc` |
| Applies to | list items |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
list-style-type =   
  <counter-style>  [|](value_definition_syntax#single_bar)  
  [<string>](string)         [|](value_definition_syntax#single_bar)  
  none               
  
<counter-style> =   
  [<counter-style-name>](counter-style-name)  [|](value_definition_syntax#single_bar)  
  <symbols()>             
  
<symbols()> =   
  symbols( <symbols-type>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <image> []](value_definition_syntax#brackets)[+](value_definition_syntax#plus) )    
  
<symbols-type> =   
  cyclic      [|](value_definition_syntax#single_bar)  
  numeric     [|](value_definition_syntax#single_bar)  
  alphabetic  [|](value_definition_syntax#single_bar)  
  symbolic    [|](value_definition_syntax#single_bar)  
  fixed         
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Setting list item markers



#### HTML

 
```
List 1
<ol class="normal">
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

List 2
<ol class="shortcut">
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>

```
 #### CSS

 
```
ol.normal {
  list-style-type: upper-alpha;
}

/\* or use the shortcut "list-style": \*/
ol.shortcut {
  list-style: upper-alpha;
}

```
 #### Result



### All list style types



#### HTML

 
```
<ol>
  <li>Apollo</li>
  <li>Hubble</li>
  <li>Chandra</li>
  <li>Cassini-Huygens</li>
  <li>Spitzer</li>
</ol>

<h2>Choose a list style type:</h2>

<div class="container">
  <label for="disc">
    <input type="radio" id="disc" name="type" value="disc" />disc
  </label>

  <label for="circle">
    <input type="radio" id="circle" name="type" value="circle" />circle
  </label>

  <label for="square">
    <input type="radio" id="square" name="type" value="square" />square
  </label>

  <label for="decimal">
    <input type="radio" id="decimal" name="type" value="decimal" />decimal
  </label>

  <label for="cjk-decimal">
    <input
 type="radio"
 id="cjk-decimal"
 name="type"
 value="cjk-decimal" />cjk-decimal
  </label>

  <label for="decimal-leading-zero">
    <input
 type="radio"
 id="decimal-leading-zero"
 name="type"
 value="decimal-leading-zero" />decimal-leading-zero
  </label>

  <label for="lower-roman">
    <input
 type="radio"
 id="lower-roman"
 name="type"
 value="lower-roman" />lower-roman
  </label>

  <label for="upper-roman">
    <input
 type="radio"
 id="upper-roman"
 name="type"
 value="upper-roman" />upper-roman
  </label>

  <label for="lower-greek">
    <input
 type="radio"
 id="lower-greek"
 name="type"
 value="lower-greek" />lower-greek
  </label>

  <label for="lower-alpha">
    <input
 type="radio"
 id="lower-alpha"
 name="type"
 value="lower-alpha" />lower-alpha, lower-latin
  </label>

  <label for="upper-alpha">
    <input
 type="radio"
 id="upper-alpha"
 name="type"
 value="upper-alpha" />upper-alpha, upper-latin
  </label>

  <label for="arabic-indic">
    <input
 type="radio"
 id="arabic-indic"
 name="type"
 value="arabic-indic" />arabic-indic
  </label>

  <label for="armenian">
    <input type="radio" id="armenian" name="type" value="armenian" />armenian
  </label>

  <label for="bengali">
    <input type="radio" id="bengali" name="type" value="bengali" />bengali
  </label>

  <label for="cambodian">
    <input type="radio" id="cambodian" name="type" value="cambodian" />cambodian
  </label>

  <label for="cjk-earthly-branch">
    <input
 type="radio"
 id="cjk-earthly-branch"
 name="type"
 value="cjk-earthly-branch" />cjk-earthly-branch
  </label>

  <label for="cjk-heavenly-stem">
    <input
 type="radio"
 id="cjk-heavenly-stem"
 name="type"
 value="cjk-heavenly-stem" />cjk-heavenly-stem
  </label>

  <label for="cjk-ideographic">
    <input
 type="radio"
 id="cjk-ideographic"
 name="type"
 value="cjk-ideographic" />cjk-ideographic
  </label>

  <label for="devanagari">
    <input
 type="radio"
 id="devanagari"
 name="type"
 value="devanagari" />devanagari
  </label>

  <label for="ethiopic-numeric">
    <input
 type="radio"
 id="ethiopic-numeric"
 name="type"
 value="ethiopic-numeric" />ethiopic-numeric
  </label>

  <label for="georgian">
    <input type="radio" id="georgian" name="type" value="georgian" />georgian
  </label>

  <label for="gujarati">
    <input type="radio" id="gujarati" name="type" value="gujarati" />gujarati
  </label>

  <label for="gurmukhi">
    <input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi
  </label>

  <label for="hebrew">
    <input type="radio" id="hebrew" name="type" value="hebrew" />hebrew
  </label>

  <label for="hiragana">
    <input type="radio" id="hiragana" name="type" value="hiragana" />hiragana
  </label>

  <label for="hiragana-iroha">
    <input
 type="radio"
 id="hiragana-iroha"
 name="type"
 value="hiragana-iroha" />hiragana-iroha
  </label>

  <label for="japanese-formal">
    <input
 type="radio"
 id="japanese-formal"
 name="type"
 value="japanese-formal" />japanese-formal
  </label>

  <label for="japanese-informal">
    <input
 type="radio"
 id="japanese-informal"
 name="type"
 value="japanese-informal" />japanese-informal
  </label>

  <label for="kannada">
    <input type="radio" id="kannada" name="type" value="kannada" />kannada
  </label>

  <label for="katakana">
    <input type="radio" id="katakana" name="type" value="katakana" />katakana
  </label>

  <label for="katakana-iroha">
    <input
 type="radio"
 id="katakana-iroha"
 name="type"
 value="katakana-iroha" />katakana-iroha
  </label>

  <label for="khmer">
    <input type="radio" id="khmer" name="type" value="khmer" />khmer
  </label>

  <label for="korean-hangul-formal">
    <input
 type="radio"
 id="korean-hangul-formal"
 name="type"
 value="korean-hangul-formal" />korean-hangul-formal
  </label>

  <label for="korean-hanja-formal">
    <input
 type="radio"
 id="korean-hanja-formal"
 name="type"
 value="korean-hanja-formal" />korean-hanja-formal
  </label>

  <label for="korean-hanja-informal">
    <input
 type="radio"
 id="korean-hanja-informal"
 name="type"
 value="korean-hanja-informal" />korean-hanja-informal
  </label>

  <label for="lao">
    <input type="radio" id="lao" name="type" value="lao" />lao
  </label>

  <label for="lower-armenian">
    <input
 type="radio"
 id="lower-armenian"
 name="type"
 value="lower-armenian" />lower-armenian
  </label>

  <label for="malayalam">
    <input type="radio" id="malayalam" name="type" value="malayalam" />malayalam
  </label>

  <label for="mongolian">
    <input type="radio" id="mongolian" name="type" value="mongolian" />mongolian
  </label>

  <label for="myanmar">
    <input type="radio" id="myanmar" name="type" value="myanmar" />myanmar
  </label>

  <label for="oriya">
    <input type="radio" id="oriya" name="type" value="oriya" />oriya
  </label>

  <label for="persian">
    <input type="radio" id="persian" name="type" value="persian" />persian
  </label>

  <label for="simp-chinese-formal">
    <input
 type="radio"
 id="simp-chinese-formal"
 name="type"
 value="simp-chinese-formal" />simp-chinese-formal
  </label>

  <label for="simp-chinese-informal">
    <input
 type="radio"
 id="simp-chinese-informal"
 name="type"
 value="simp-chinese-informal" />simp-chinese-informal
  </label>

  <label for="tamil">
    <input type="radio" id="tamil" name="type" value="tamil" />tamil
  </label>

  <label for="telugu">
    <input type="radio" id="telugu" name="type" value="telugu" />telugu
  </label>

  <label for="thai">
    <input type="radio" id="thai" name="type" value="thai" />thai
  </label>

  <label for="tibetan">
    <input type="radio" id="tibetan" name="type" value="tibetan" />tibetan
  </label>

  <label for="trad-chinese-formal">
    <input
 type="radio"
 id="trad-chinese-formal"
 name="type"
 value="trad-chinese-formal" />trad-chinese-formal
  </label>

  <label for="trad-chinese-informal">
    <input
 type="radio"
 id="trad-chinese-informal"
 name="type"
 value="trad-chinese-informal" />trad-chinese-informal
  </label>

  <label for="upper-armenian">
    <input
 type="radio"
 id="upper-armenian"
 name="type"
 value="upper-armenian" />upper-armenian
  </label>

  <label for="disclosure-open">
    <input
 type="radio"
 id="disclosure-open"
 name="type"
 value="disclosure-open" />disclosure-open
  </label>

  <label for="disclosure-closed">
    <input
 type="radio"
 id="disclosure-closed"
 name="type"
 value="disclosure-closed" />disclosure-closed
  </label>

  <label for="-moz-ethiopic-halehame">
    <input
 type="radio"
 id="-moz-ethiopic-halehame"
 name="type"
 value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame
  </label>

  <label for="-moz-ethiopic-halehame-am">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-am"
 name="type"
 value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am
  </label>

  <label for="ethiopic-halehame-ti-er">
    <input
 type="radio"
 id="ethiopic-halehame-ti-er"
 name="type"
 value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er
  </label>

  <label for="ethiopic-halehame-ti-et">
    <input
 type="radio"
 id="ethiopic-halehame-ti-et"
 name="type"
 value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et
  </label>

  <label for="hangul">
    <input type="radio" id="hangul" name="type" value="hangul" />hangul
  </label>

  <label for="hangul-consonant">
    <input
 type="radio"
 id="hangul-consonant"
 name="type"
 value="hangul-consonant" />hangul-consonant
  </label>

  <label for="urdu">
    <input type="radio" id="urdu" name="type" value="urdu" />urdu
  </label>

  <label for="-moz-ethiopic-halehame-ti-er">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-ti-er"
 name="type"
 value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er
  </label>

  <label for="-moz-ethiopic-halehame-ti-et">
    <input
 type="radio"
 id="-moz-ethiopic-halehame-ti-et"
 name="type"
 value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et
  </label>

  <label for="-moz-hangul">
    <input
 type="radio"
 id="-moz-hangul"
 name="type"
 value="-moz-hangul" />-moz-hangul
  </label>

  <label for="-moz-hangul-consonant">
    <input
 type="radio"
 id="-moz-hangul-consonant"
 name="type"
 value="-moz-hangul-consonant" />-moz-hangul-consonant
  </label>

  <label for="-moz-urdu">
    <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu" />-moz-urdu
  </label>
</div>

```
 #### CSS

 
```
ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}

```
 #### JavaScript

 
```
const container = document.querySelector(".container");
container.addEventListener("change", (event) => {
  const list = document.querySelector("ol");
  list.setAttribute("style", `list-style-type: ${event.target.value}`);
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # text-markers](https://w3c.github.io/csswg-drafts/css-lists/#text-markers) |
| [CSS Counter Styles Level 3 # extending-css2](https://w3c.github.io/csswg-drafts/css-counter-styles/#extending-css2) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `list-style-type` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `afar` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `amharic` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `amharic-abegede` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `arabic-indic` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `armenian` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `asterisks` | 13–45 | No | No | No | 15–32 | 5.1 | 4.4–45 | 18–45 | No | 14–32 | 5 | 1.0–5.0 |
| `bengali` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `binary` | 13–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `cambodian` | 6 | 79 | 33 | No | 15 | 5 | 4.4 | 18 | 33 | 14 | 4.2 | 1.0 |
| `circle` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `cjk-decimal` | No | No | 28 | No | No | preview | No | No | 28 | No | No | No |
| `cjk-earthly-branch` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `cjk-heavenly-stem` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `cjk-ideographic` | 1 | 79 | 1 | No | 157Until version 15, only decimal numbers display. | 5 | 4.4 | 18 | 4 | 1410.1Until version 15, only decimal numbers display. | 4.2 | 1.0 |
| `decimal` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `decimal-leading-zero` | 1 | 12 | 1 | 8 | 8 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `devanagari` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `disc` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `disclosure-closed` | 89 | 89 | 33 | No | 75 | 15 | 89 | 89 | 33 | 63 | 15 | 15.0 |
| `disclosure-open` | 89 | 89 | 33 | No | 75 | 15 | 89 | 89 | 33 | 63 | 15 | 15.0 |
| `ethiopic` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-abegede` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-abegede-am-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-abegede-gez` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-abegede-ti-er` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-abegede-ti-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame` | 45 | 79 | 1 | No | 32 | No | 45 | 45 | 4 | 32 | No | 5.0 |
| `ethiopic-halehame-aa-er` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-aa-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-am` | 45 | 79 | 1 | No | 32 | 5 | 45 | 45 | 4 | 32 | 4.2 | 5.0 |
| `ethiopic-halehame-am-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-gez` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-om-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-sid-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-so-et` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-halehame-ti-er` | 6 | 79 | 1 | No | 15 | 5 | 3 | 18 | 4 | 14 | 4.2 | 1.0 |
| `ethiopic-halehame-ti-et` | 6 | 79 | 1 | No | 15 | 5 | 3 | 18 | 4 | 14 | 4.2 | 1.0 |
| `ethiopic-halehame-tig` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `ethiopic-numeric` | No | No | 33Before Firefox 38, Firefox added a dot as suffix of the number for `ethiopic-numeric` (for example, ፫. instead of ፫). The specification later defined the absence of a suffix, which Firefox 38 followed.1 | No | No | 15 | No | No | 33Before Firefox 38, Firefox added a dot as suffix of the number for `ethiopic-numeric` (for example, ፫. instead of ፫). The specification later defined the absence of a suffix, which Firefox 38 followed.4 | No | 15 | No |
| `footnotes` | 13–45 | No | No | No | 15–32 | 5.1 | 4.4–45 | 18–45 | No | 14–32 | 5 | 1.0–5.0 |
| `georgian` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `gujarati` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `gurmukhi` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `hangul` | 6 | 79 | 1 | No | 15 | 5 | 4.4 | 18 | 4 | 14 | 4.2 | 1.0 |
| `hangul-consonant` | 6 | 79 | 1 | No | 15 | 5 | 4.4 | 18 | 4 | 14 | 4.2 | 1.0 |
| `hebrew` | 1 | 79 | 1 | No | 15 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `hiragana` | 1 | 79 | 1 | No | 15 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `hiragana-iroha` | 1 | 79 | 1 | No | 15 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `japanese-formal` | No | No | 281 | No | No | 15 | No | No | 284 | No | 15 | No |
| `japanese-informal` | No | No | 281 | No | No | 15 | No | No | 284 | No | 15 | No |
| `kannada` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `katakana` | 1 | 79 | 1 | No | 15 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `katakana-iroha` | 1 | 79 | 1 | No | 15 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `khmer` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `korean-hangul-formal` | 45 | 79 | 28 | No | 32 | 15 | 45 | 45 | 28 | 32 | 15 | 5.0 |
| `korean-hanja-formal` | 45 | 79 | 28 | No | 32 | 15 | 45 | 45 | 28 | 32 | 15 | 5.0 |
| `korean-hanja-informal` | 45 | 79 | 28 | No | 32 | 15 | 45 | 45 | 28 | 32 | 15 | 5.0 |
| `lao` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `lower-alpha` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `lower-armenian` | 13 | 79 | 33 | No | 15 | 5.1 | 4.4 | 18 | 33 | 14 | 5 | 1.0 |
| `lower-greek` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `lower-hexadecimal` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `lower-latin` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 5.0 |
| `lower-norwegian` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `lower-roman` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `malayalam` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `mongolian` | 6 | 79 | 33 | No | 15 | 5 | 4.4 | 18 | 33 | 14 | 4.2 | 1.0 |
| `myanmar` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `octal` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `oriya` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `oromo` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `persian` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `sidama` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `simp-chinese-formal` | 45 | 79 | 281 | No | 32 | 15 | 45 | 45 | 284 | 32 | 15 | 5.0 |
| `simp-chinese-informal` | 45 | 79 | 281 | No | 32 | 15 | 45 | 45 | 284 | 32 | 15 | 5.0 |
| `somali` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `square` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `string` | 79 | 79 | 39 | No | 66 | 14.1 | 79 | 79 | 39 | No | 14.5 | 12.0 |
| `symbols` | No | No | 35 | No | No | No | No | No | 35 | No | No | No |
| `tamil` | No | No | 331 | No | No | preview | No | No | 334 | No | No | No |
| `telugu` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `thai` | 6 | 79 | 331 | No | 15 | 5 | 4.4 | 18 | 334 | 14 | 4.2 | 1.0 |
| `tibetan` | 6 | 79 | 33 | No | 15 | 5 | 4.4 | 18 | No | 14 | 4.2 | 1.0 |
| `tigre` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `tigrinya-er` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `tigrinya-er-abegede` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `tigrinya-et` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `tigrinya-et-abegede` | 6–45 | No | No | No | 15–32 | 5 | 4.4–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `trad-chinese-formal` | 45 | 79 | 281 | No | 32 | 15 | 45 | 45 | 284 | 32 | 15 | 5.0 |
| `trad-chinese-informal` | 45 | 79 | 281 | No | 32 | 15 | 45 | 45 | 284 | 32 | 15 | 5.0 |
| `upper-alpha` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `upper-armenian` | 13 | 79 | 33 | No | 15 | 5.1 | 4.4 | 18 | 33 | 14 | 5 | 1.0 |
| `upper-greek` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `upper-hexadecimal` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `upper-latin` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `upper-norwegian` | 6–45 | No | No | No | 15–32 | 5 | 3–45 | 18–45 | No | 14–32 | 4.2 | 1.0–5.0 |
| `upper-roman` | 1 | 12 | 1 | 8 | 6 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `urdu` | 6 | 79 | 33 | No | 15 | 5 | 4.4 | 18 | 33 | 14 | 4.2 | 1.0 |


See also
--------


* [`list-style`](list-style), [`list-style-image`](list-style-image), [`list-style-position`](list-style-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type>

margin-inline-end
=================


The `margin-inline-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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 [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom) or [`margin-left`](margin-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <length> values \*/
margin-inline-end: 10px; /\* An absolute length \*/
margin-inline-end: 1em; /\* relative to the text size \*/
margin-inline-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-inline-end: auto;

/\* Global values \*/
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;

```
 It relates to [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), and [`margin-inline-start`](margin-inline-start), which define the other margins of the element.


### Values


The `margin-inline-end` property takes the same values as the [`margin-left`](margin-left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | same as [`margin`](margin) |
| [Inherited](inheritance) | no |
| Percentages | depends on layout model |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-inline-end =   
  <'margin-top'>    
  

```
Examples
--------


### Setting inline end margin



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # margin-properties](https://w3c.github.io/csswg-drafts/css-logical/#margin-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-inline-end` | 872 | 8779 | 413 | No | 7315 | 12.13 | 872 | 8718 | 414 | 6214 | 12.23 | 14.01.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* [`margin-inline-start`](margin-inline-start)
* The mapped physical properties: [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end>

margin-inline-start
===================


The `margin-inline-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the logical inline 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 [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), or [`margin-left`](margin-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).


Try it
------


Syntax
------




```
/\* <length> values \*/
margin-inline-start: 10px; /\* An absolute length \*/
margin-inline-start: 1em; /\* relative to the text size \*/
margin-inline-start: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-inline-start: auto;

/\* Global values \*/
margin-inline-start: inherit;
margin-inline-start: initial;
margin-inline-start: revert;
margin-inline-start: revert-layer;
margin-inline-start: unset;

```
 It relates to [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), and [`margin-inline-end`](margin-inline-end), which define the other margins of the element.


### Values


The `margin-inline-start` property takes the same values as the [`margin-left`](margin-left) property.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | same as [`margin`](margin) |
| [Inherited](inheritance) | no |
| Percentages | depends on layout model |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-inline-start =   
  <'margin-top'>    
  

```
Examples
--------


### Setting inline start margin



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # margin-properties](https://w3c.github.io/csswg-drafts/css-logical/#margin-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-inline-start` | 872 | 8779 | 413 | No | 7315 | 12.13 | 872 | 8718 | 414 | 6214 | 12.23 | 14.01.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* [`margin-inline-end`](margin-inline-end)
* The mapped physical properties: [`margin-top`](margin-top), [`margin-right`](margin-right), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start>

margin-left
===========


The `margin-left` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [margin area](css_box_model/introduction_to_the_css_box_model#margin_area) on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.


Try it
------



 The vertical margins of two adjacent boxes may fuse. This is called [*margin collapsing*](css_box_model/mastering_margin_collapsing).

 In the rare cases where width is overconstrained (i.e., when all of `width`, `margin-left`, `border`, `padding`, the content area, and `margin-right` are defined), `margin-left` is ignored, and will have the same calculated value as if the `auto` value was specified.


Syntax
------




```
/\* <length> values \*/
margin-left: 10px; /\* An absolute length \*/
margin-left: 1em; /\* relative to the text size \*/
margin-left: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-left: auto;

/\* Global values \*/
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;

```
 The `margin-left` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.


### Values


 [`<length>`](length)  The size of the margin as a fixed value.

  [`<percentage>`](percentage)  The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block).

  `auto`  The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of `margin-left` and `margin-right` are both `auto`, the calculated space is evenly distributed. This table summarizes the different cases:

 

| Value of [`display`](display) | Value of [`float`](float) | Value of [`position`](position) | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent.  | Block layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` |  Internal `table-*` elements don't have margins, use [`border-spacing`](border-spacing) instead  |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed.  | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins.  | Flexbox layout mode |

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-left =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting left margin using pixels and percentages



```
.content {
  margin-left: 5%;
}
.sidebox {
  margin-left: 10px;
}
.logo {
  margin-left: -5px;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # margin-physical](https://w3c.github.io/csswg-drafts/css-box/#margin-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-left` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `auto` | 1 | 12The `auto` value is not supported in quirks mode. | 1 | 6The `auto` value is not supported in quirks mode. | 3.5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`margin-top`](margin-top), [`margin-right`](margin-right), and [`margin-bottom`](margin-bottom) and the [`margin`](margin) shorthand
* The mapped logical properties: [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end) and the shorthands [`margin-block`](margin-block) and [`margin-inline`](margin-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left>

margin-right
============


The `margin-right` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [margin area](css_box_model/introduction_to_the_css_box_model#margin_area) on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.


Try it
------



 The vertical margins of two adjacent boxes may fuse. This is called [*margin collapsing*](css_box_model/mastering_margin_collapsing).


Syntax
------




```
/\* <length> values \*/
margin-right: 20px; /\* An absolute length \*/
margin-right: 1em; /\* relative to the text size \*/
margin-right: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-right: auto;

/\* Global values \*/
margin-right: inherit;
margin-right: initial;
margin-right: revert;
margin-right: revert-layer;
margin-right: unset;

```
 The `margin-right` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.


### Values


 [`<length>`](length)  The size of the margin as a fixed value.

  [`<percentage>`](percentage)  The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block).

  `auto`  The right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of `margin-left` and `margin-right` are both `auto`, the calculated space is evenly distributed. This table summarizes the different cases:

 

| Value of [`display`](display) | Value of [`float`](float) | Value of [`position`](position) | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent.  | Block layout mode |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` |  Internal `table-*` elements don't have margins, use [`border-spacing`](border-spacing) instead  |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed.  | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins.  | Flexbox layout mode |

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except elements with table [`display`](display) types other than `table-caption`, `table` and `inline-table`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
margin-right =   
  <length-percentage>  [|](value_definition_syntax#single_bar)  
  auto                   
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting right margin using pixels and percentages



```
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # margin-physical](https://w3c.github.io/csswg-drafts/css-box/#margin-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-right` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `auto` | 1 | 12The `auto` value is not supported in quirks mode. | 1 | 6The `auto` value is not supported in quirks mode. | 3.5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`margin-top`](margin-top), [`margin-bottom`](margin-bottom), and [`margin-left`](margin-left) and the [`margin`](margin) shorthand
* The mapped logical properties: [`margin-block-start`](margin-block-start), [`margin-block-end`](margin-block-end), [`margin-inline-start`](margin-inline-start), and [`margin-inline-end`](margin-inline-end) and the shorthands [`margin-block`](margin-block) and [`margin-inline`](margin-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right>

margin-trim
===========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container's edges.



Syntax
------



```
margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;

/\* Global values \*/
margin-trim: inherit;
margin-trim: initial;
margin-trim: revert;
margin-trim: revert-layer;
margin-trim: unset;

```
Values
------


 `none`  Margins are not trimmed by the container.

  `block`  Margins provided to the block children where they adjoin the container's edges are trimmed to zero without affecting the margins provided to the container.

  `block-start`  Margin of the first block child with the container's edge is trimmed to zero.

  `block-end`  Margin of last block child with the container's edge is trimmed to zero.

  `inline`  Margins provided to the inline children where they adjoin the container's edges are trimmed to zero, without affecting the spacing at the beginning and end of the row.

  `inline-start`  Margin between the container's edge and the first inline child is trimmed to zero.

  `inline-end`  Margin between the container's edge and the last inline child is trimmed to zero.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | Block containers and multi-column containers. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
margin-trim =   
  none                                                [|](value_definition_syntax#single_bar)  
  block                                               [|](value_definition_syntax#single_bar)  
  inline                                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) block-start [||](value_definition_syntax#double_bar) inline-start [||](value_definition_syntax#double_bar) block-end [||](value_definition_syntax#double_bar) inline-end []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Basic usage



Once support is implemented for this property, it will probably work like so:

 When you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this:

 
```
article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  margin-left: 30px;
}

```
 The problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it:

 
```
span:last-child {
  margin-right: 0;
  margin-left: 0;
}

```
 It is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, `margin-trim` could fix it:

 
```
article {
  margin-trim: inline-end;
  /\* … \*/
}

```
 Similarly, to remove left margin with the container's edge:

 
```
article {
  margin-trim: inline-start;
  /\* … \*/
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 4 # margin-trim](https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `margin-trim` | No | No | NoSee [bug 1506241](https://bugzil.la/1506241). | No | No | 16.4 | No | No | NoSee [bug 1506241](https://bugzil.la/1506241). | No | 16.4 | No |


See also
--------


* [`margin`](margin)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim>

::marker
========


The `::marker` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to [`display: list-item`](display), such as the [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) and [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) elements.


Try it
------


Allowable properties
--------------------



Only certain CSS properties can be used in a rule with `::marker` as a selector:

 * All [font properties](css_fonts)
* The [`white-space`](white-space) property
* [`color`](color)
* [`text-combine-upright`](text-combine-upright), [`unicode-bidi`](unicode-bidi) and [`direction`](direction) properties
* The [`content`](content) property
* All [animation](css_animations#properties) and [transition](css_transitions#properties) properties

  **Note:** The specification states that additional CSS properties may be supported in future.

 
Syntax
------



```
::marker {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

```
### CSS



```
ul li::marker {
  color: red;
  font-size: 1.5em;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # marker-pseudo](https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::marker` | 86 | 86 | 68 | No | 72 | 11.1Safari support is limited to `color` and `font-size`. See [bug 204163](https://webkit.org/b/204163). | 86 | 86 | 68 | 61 | 11.3Safari support is limited to `color` and `font-size`. See [bug 204163](https://webkit.org/b/204163). | 14.0 |
| `animation_and_transition_support` | 86 | 86 | 80 | No | 72 | No | 86 | 86 | No | 61 | No | 14.0 |


See also
--------


* HTML elements that have marker boxes by default: [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol), [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li), [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::marker>

mask
====



The `mask` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) hides an element (partially or fully) by masking or clipping the image at specific points.

  **Note:** As well as the properties listed below, the `mask` shorthand also resets [`mask-border`](mask-border) to its initial value. It is therefore recommended to use the `mask` shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that `mask-border` has also been reset to allow the new styles to take effect.

 

Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`mask-clip`](mask-clip)
* [`mask-composite`](mask-composite)
* [`mask-image`](mask-image)
* [`mask-mode`](mask-mode)
* [`mask-origin`](mask-origin)
* [`mask-position`](mask-position)
* [`mask-repeat`](mask-repeat)
* [`mask-size`](mask-size)


Syntax
------



```
/\* Keyword values \*/
mask: none;

/\* Image values \*/
mask: url(mask.png); /\* Pixel image used as mask \*/
mask: url(masks.svg#star); /\* Element within SVG graphic used as mask \*/

/\* Combined values \*/
mask: url(masks.svg#star) luminance; /\* Element within SVG graphic used as luminance mask \*/
mask: url(masks.svg#star) 40px 20px; /\* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left \*/
mask: url(masks.svg#star) 0 0/50px 50px; /\* Element within SVG graphic used as mask with a width and height of 50px \*/
mask: url(masks.svg#star) repeat-x; /\* Element within SVG graphic used as horizontally repeated mask \*/
mask: url(masks.svg#star) stroke-box; /\* Element within SVG graphic used as mask extending to the box enclosed by the stroke \*/
mask: url(masks.svg#star) exclude; /\* Element within SVG graphic used as mask and combined with background using non-overlapping parts \*/

/\* Global values \*/
mask: inherit;
mask: initial;
mask: revert;
mask: revert-layer;
mask: unset;

/\* Multiple masks \*/
mask: url(masks.svg#star) left / 16px repeat-y, /\* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px \*/
    url(masks.svg#circle) right / 16px repeat-y; /\* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px \*/

```
### Values


 `<mask-reference>`  Sets the mask image source. See [`mask-image`](mask-image).

  `<masking-mode>`  Sets the masking mode of the mask image. See [`mask-mode`](mask-mode).

  `<position>`  Sets the position of the mask image. See [`mask-position`](mask-position).

  `<bg-size>`  Sets the size of the mask image. See [`mask-size`](mask-size).

  `<repeat-style>`  Sets the repetition of the mask image. See [`mask-repeat`](mask-repeat).

  `<geometry-box>`  If only one `<geometry-box>` value is given, it sets both [`mask-origin`](mask-origin) and [`mask-clip`](mask-clip). If two `<geometry-box>` values are present, then the first sets [`mask-origin`](mask-origin) and the second sets [`mask-clip`](mask-clip).

  `<geometry-box> | no-clip`  Sets the area that is affected by the mask image. See [`mask-clip`](mask-clip).

  `<compositing-operator>`  Sets the compositing operation used on the current mask layer. See [`mask-composite`](mask-composite).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`mask-image`](mask-image): `none`
* [`mask-mode`](mask-mode): `match-source`
* [`mask-repeat`](mask-repeat): `repeat`
* [`mask-position`](mask-position): `center`
* [`mask-clip`](mask-clip): `border-box`
* [`mask-origin`](mask-origin): `border-box`
* [`mask-size`](mask-size): `auto`
* [`mask-composite`](mask-composite): `add`
 |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`mask-position`](mask-position): refer to size of mask painting area minus size of mask layer image (see the text for [`background-position`](background-position))
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`mask-image`](mask-image): as specified, but with [`url()`](url) values made absolute
* [`mask-mode`](mask-mode): as specified
* [`mask-repeat`](mask-repeat): Consists of two keywords, one per dimension
* [`mask-position`](mask-position): Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
* [`mask-clip`](mask-clip): as specified
* [`mask-origin`](mask-origin): as specified
* [`mask-size`](mask-size): as specified, but with relative lengths converted into absolute lengths
* [`mask-composite`](mask-composite): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`mask-image`](mask-image): discrete
* [`mask-mode`](mask-mode): discrete
* [`mask-repeat`](mask-repeat): discrete
* [`mask-position`](mask-position): repeatable list of simple list of length, percentage, or calc
* [`mask-clip`](mask-clip): discrete
* [`mask-origin`](mask-origin): discrete
* [`mask-size`](mask-size): repeatable list of simple list of length, percentage, or calc
* [`mask-composite`](mask-composite): discrete
 |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
mask =   
  <mask-layer>[#](value_definition_syntax#hash_mark)    
  
<mask-layer> =   
  <mask-reference>              [||](value_definition_syntax#double_bar)  
  <position> [[](value_definition_syntax#brackets) / <bg-size> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)   [||](value_definition_syntax#double_bar)  
  <repeat-style>                [||](value_definition_syntax#double_bar)  
  <geometry-box>                [||](value_definition_syntax#double_bar)  
  [[](value_definition_syntax#brackets) <geometry-box> [|](value_definition_syntax#single_bar) no-clip []](value_definition_syntax#brackets)  [||](value_definition_syntax#double_bar)  
  <compositing-operator>        [||](value_definition_syntax#double_bar)  
  <masking-mode>                  
  
<mask-reference> =   
  none           [|](value_definition_syntax#single_bar)  
  <image>        [|](value_definition_syntax#single_bar)  
  <mask-source>    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<bg-size> =   
  [[](value_definition_syntax#brackets) [<length-percentage [0,∞]>](length-percentage) [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)  [|](value_definition_syntax#single_bar)  
  cover                                      [|](value_definition_syntax#single_bar)  
  contain                                      
  
<repeat-style> =   
  repeat-x                                     [|](value_definition_syntax#single_bar)  
  repeat-y                                     [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) repeat [|](value_definition_syntax#single_bar) space [|](value_definition_syntax#single_bar) round [|](value_definition_syntax#single_bar) no-repeat []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  
<geometry-box> =   
  <shape-box>  [|](value_definition_syntax#single_bar)  
  fill-box     [|](value_definition_syntax#single_bar)  
  stroke-box   [|](value_definition_syntax#single_bar)  
  view-box       
  
<compositing-operator> =   
  add        [|](value_definition_syntax#single_bar)  
  subtract   [|](value_definition_syntax#single_bar)  
  intersect  [|](value_definition_syntax#single_bar)  
  exclude      
  
<masking-mode> =   
  alpha         [|](value_definition_syntax#single_bar)  
  luminance     [|](value_definition_syntax#single_bar)  
  match-source    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<mask-source> =   
  <url>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  
<shape-box> =   
  <box>       [|](value_definition_syntax#single_bar)  
  margin-box    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  

```
Examples
--------


### Masking an image



```
.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask](https://drafts.fxtf.org/css-masking/#the-mask) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask` | 1While the property is recognized, values applied to it don't have any effect.1The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 79While the property is recognized, values applied to it don't have any effect.79The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property.12–79 | 2From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification. | No | 15While the property is recognized, values applied to it don't have any effect.15The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 3.1While the property is recognized, values applied to it don't have any effect.3.1The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 2While the property is recognized, values applied to it don't have any effect.2The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 18While the property is recognized, values applied to it don't have any effect.18The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 4From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification. | 14While the property is recognized, values applied to it don't have any effect.14The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 2While the property is recognized, values applied to it don't have any effect.2The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. | 1.0While the property is recognized, values applied to it don't have any effect.1.0The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard [`-webkit-mask-attachment`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-attachment) property. |


See also
--------


* [`clip-path`](clip-path), [`filter`](filter)
* [CSS Shapes, clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
* [Applying SVG effects to HTML content](https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask>

mask-border
===========


The `mask-border` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) lets you create a mask along the edge of an element's border.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-slice`](mask-border-slice)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)


Syntax
------



```
/\* source | slice \*/
mask-border: url("border-mask.png") 25;

/\* source | slice | repeat \*/
mask-border: url("border-mask.png") 25 space;

/\* source | slice | width \*/
mask-border: url("border-mask.png") 25 / 35px;

/\* source | slice | width | outset | repeat | mode \*/
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

/\* Global values \*/
mask-border: inherit;
mask-border: initial;
mask-border: revert;
mask-border: revert-layer;
mask-border: unset;

```
### Values


 `<'mask-border-source'>`  The source image. See [`mask-border-source`](mask-border-source).

  `<'mask-border-slice'>`  The dimensions for slicing the source image into regions. Up to four values may be specified. See [`mask-border-slice`](mask-border-slice).

  `<'mask-border-width'>`  The width of the border mask. Up to four values may be specified. See [`mask-border-width`](mask-border-width).

  `<'mask-border-outset'>`  The distance of the border mask from the element's outside edge. Up to four values may be specified. See [`mask-border-outset`](mask-border-outset).

  `<'mask-border-repeat'>`  Defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask. Up to two values may be specified. See [`mask-border-repeat`](mask-border-repeat).

  `<'mask-border-mode'>`  Defines whether the source image is treated as a luminance mask or alpha mask. See [`mask-border-mode`](mask-border-mode).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`mask-border-mode`](mask-border-mode): `alpha`
* [`mask-border-outset`](mask-border-outset): `0`
* [`mask-border-repeat`](mask-border-repeat): `stretch`
* [`mask-border-slice`](mask-border-slice): `0`
* [`mask-border-source`](mask-border-source): `none`
* [`mask-border-width`](mask-border-width): `auto`
 |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`mask-border-slice`](mask-border-slice): refer to size of the mask border image
* [`mask-border-width`](mask-border-width): relative to width/height of the mask border image area
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`mask-border-mode`](mask-border-mode): as specified
* [`mask-border-outset`](mask-border-outset): as specified, but with relative lengths converted into absolute lengths
* [`mask-border-repeat`](mask-border-repeat): as specified
* [`mask-border-slice`](mask-border-slice): as specified
* [`mask-border-source`](mask-border-source): as specified, but with [`url()`](url) values made absolute
* [`mask-border-width`](mask-border-width): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* [`mask-border-mode`](mask-border-mode): discrete
* [`mask-border-outset`](mask-border-outset): discrete
* [`mask-border-repeat`](mask-border-repeat): discrete
* [`mask-border-slice`](mask-border-slice): discrete
* [`mask-border-source`](mask-border-source): discrete
* [`mask-border-width`](mask-border-width): discrete
 |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
mask-border =   
  <'mask-border-source'>                              [||](value_definition_syntax#double_bar)  
  <'mask-border-slice'> [[](value_definition_syntax#brackets) / <'mask-border-width'>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) / <'mask-border-outset'> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [||](value_definition_syntax#double_bar)  
  <'mask-border-repeat'>                              [||](value_definition_syntax#double_bar)  
  <'mask-border-mode'>                                  
  

```
Examples
--------


### Setting a bitmap-based mask border



In this example, we will mask an element's border with a diamond pattern. The source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:

  ![The image used for the mask examples on this page. The mask is a transparent square with three rows of three diamonds each. The diamonds are a very light, almost white, shade of grey. The middle part between the diamonds is also solid grey. The parts between the outside of the diamonds and the edge of the image are transparent.] 

 To match the size of a single diamond, we will use a value of 90 divided by 3, or `30`, for slicing the image into corner and edge regions. A repeat value of `round` will make the mask slices fit evenly, i.e., without clipping or gaps.



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border](https://drafts.fxtf.org/css-masking/#the-mask-border) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-border` | 1 | 79 | NoSee [bug 877294](https://bugzil.la/877294). | No | 15 | 3.1 | 4.4 | 18 | NoSee [bug 877294](https://bugzil.la/877294). | 14 | 3 | 1.0 |


See also
--------


* [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border>

mask-border-mode
================


The `mask-border-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the blending mode used in a [mask border](mask-border).


Syntax
------



```
/\* Keyword values \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

/\* Global values \*/
mask-border-mode: inherit;
mask-border-mode: initial;
mask-border-mode: revert;
mask-border-mode: revert-layer;
mask-border-mode: unset;

```
### Values


 `luminance`  The luminance values of the mask border image are used as the mask values.

  `alpha`  The alpha values of the mask border image are used as the mask values.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `alpha` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-border-mode =   
  luminance  [|](value_definition_syntax#single_bar)  
  alpha        
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border-mode](https://drafts.fxtf.org/css-masking-1/#the-mask-border-mode) |


Browser compatibility
---------------------

See also
--------


* [`mask-border`](mask-border)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-mode>

mask-border-outset
==================


The `mask-border-outset` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the distance by which an element's [mask border](mask-border) is set out from its border box.


Syntax
------




```
/\* <length> value \*/
mask-border-outset: 1rem;

/\* <number> value \*/
mask-border-outset: 1.5;

/\* top and bottom | left and right \*/
mask-border-outset: 1 1.2;

/\* top | left and right | bottom \*/
mask-border-outset: 30px 2 45px;

/\* top | right | bottom | left \*/
mask-border-outset: 7px 12px 14px 5px;

/\* Global values \*/
mask-border-outset: inherit;
mask-border-outset: initial;
mask-border-outset: revert;
mask-border-outset: revert-layer;
mask-border-outset: unset;

```
 The `mask-border-outset` property may be specified as one, two, three, or four values. Each value is a [`<length>`](length) or [`<number>`](number). Negative values are invalid.

 * When **one** value is specified, it applies the same outset to **all four sides**.
* When **two** values are specified, the first outset applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first outset applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the outsets apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 [`<length>`](length)  The size of the mask border outset as a dimension.

  [`<number>`](number)  The size of the mask border outset as a multiple of the corresponding [`border-width`](border-width).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

Formal syntax
-------------



```
mask-border-outset =   
  [[](value_definition_syntax#brackets) [<length>](length) [|](value_definition_syntax#single_bar) [<number>](number) []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Basic usage



This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to move the mask away from the inner edge of the element's border box — you can use it to make the mask start from part way across the border, rather than the inside of it.

 
```
mask-border-outset: 1rem;

```
 Chromium-based browsers support an outdated version of this property — `mask-box-image-outset` — with a prefix:

 
```
-webkit-mask-box-image-outset: 1rem;

```
  **Note:** The [`mask-border`](mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border-outset](https://drafts.fxtf.org/css-masking/#the-mask-border-outset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-border-outset` | 1 | 79 | NoSee [bug 877294](https://bugzil.la/877294). | No | 15 | 3.1 | 4.4 | 18 | NoSee [bug 877294](https://bugzil.la/877294). | 14 | 3 | 1.0 |


See also
--------


* [`mask-border`](mask-border)
* [`mask-border-mode`](mask-border-mode)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-outset>

mask-border-slice
=================


The `mask-border-slice` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property divides the image set by [`mask-border-source`](mask-border-source) into regions. These regions are used to form the components of an element's [mask border](mask-border).


Syntax
------




```
/\* All sides \*/
mask-border-slice: 30%;

/\* top and bottom | left and right \*/
mask-border-slice: 10% 30%;

/\* top | left and right | bottom \*/
mask-border-slice: 30 30% 45;

/\* top | right | bottom | left \*/
mask-border-slice: 7 12 14 5;

/\* Using the `fill` keyword \*/
mask-border-slice: 10% fill 7 12;

/\* Global values \*/
mask-border-slice: inherit;
mask-border-slice: initial;
mask-border-slice: revert;
mask-border-slice: revert-layer;
mask-border-slice: unset;

```
 The `mask-border-slice` property may be specified using one to four `<number-percentage>` values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to `100%`.

 * When **one** position is specified, it creates all four slices at the same distance from their respective sides.
* When **two** positions are specified, the first value creates slices measured from the **top and bottom**, the second creates slices measured from the **left and right**.
* When **three** positions are specified, the first value creates a slice measured from the **top**, the second creates slices measured from the **left and right**, the third creates a slice measured from the **bottom**.
* When **four** positions are specified, they create slices measured from the **top**, **right**, **bottom**, and **left** in that order (clockwise).

 The optional `fill` value, if used, can be placed anywhere in the declaration.


### Values


 [`<number>`](number)  Represents an edge offset in *pixels* for raster images and *coordinates* for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.

  [`<percentage>`](percentage)  Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.

  `fill`  Preserves the middle image region. Its width and height are sized to match the top and left image regions, respectively.

  Description
-----------



The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

 [![The nine regions defined by the border-image or border-image-slice properties]

 The above diagram illustrates the location of each region.

 * Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.
* Zones 5-8 are edge regions. These are [repeated, scaled, or otherwise modified](mask-border-repeat) in the final border image to match the dimensions of the element.
* Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword `fill` is set.

 The [`mask-border-repeat`](mask-border-repeat), [`mask-border-width`](mask-border-width), and [`mask-border-outset`](mask-border-outset) properties determine how these regions are used to form the final mask border.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| Percentages | refer to size of the mask border image |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-border-slice =   
  [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces) fill[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Basic usage



This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the size of the slices taken from the source image, and used to create the border mask.

 
```
mask-border-slice: 30 fill;

```
 Chromium-based browsers support an outdated version of this property — `mask-box-image-slice` — with a prefix:

 
```
-webkit-mask-box-image-slice: 30 fill;

```
  **Note:** The [`mask-border`](mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

   **Note:** The fill keyword needs to be included if you want the element's content to be visible.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border-slice](https://drafts.fxtf.org/css-masking/#the-mask-border-slice) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-border-slice` | 1 | 79 | NoSee [bug 877294](https://bugzil.la/877294). | No | 15 | 3.1 | 4.4 | 18 | NoSee [bug 877294](https://bugzil.la/877294). | 14 | 3 | 1.0 |


See also
--------


* [`mask-border`](mask-border)
* [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)
* [Illustrated description of the 1-to-4-value syntax](shorthand_properties#tricky_edge_cases)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-slice>

mask-border-width
=================


The `mask-border-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of an element's [mask border](mask-border).


Syntax
------




```
/\* Keyword value \*/
mask-border-width: auto;

/\* <length> value \*/
mask-border-width: 1rem;

/\* <percentage> value \*/
mask-border-width: 25%;

/\* <number> value \*/
mask-border-width: 3;

/\* top and bottom | left and right \*/
mask-border-width: 2em 3em;

/\* top | left and right | bottom \*/
mask-border-width: 5% 15% 10%;

/\* top | right | bottom | left \*/
mask-border-width: 5% 2em 10% auto;

/\* Global values \*/
mask-border-width: inherit;
mask-border-width: initial;
mask-border-width: revert;
mask-border-width: revert-layer;
mask-border-width: unset;

```
 The `mask-border-width` property may be specified using one, two, three, or four values chosen from the list of values below.

 * When **one** value is specified, it applies the same width to **all four sides**.
* When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 `<length-percentage>`  The width of the mask border, specified as a [`<length>`](length) or a [`<percentage>`](percentage). Percentages are relative to the *width* of the border area for horizontal offsets and the *height* of the border area for vertical offsets. Must not be negative.

  `<number>`  The width of the mask border, specified as a multiple of the corresponding [`border-width`](border-width). Must not be negative.

  `auto`  The width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding [`mask-border-slice`](mask-border-slice). If the image does not have the required intrinsic dimension, the corresponding `border-width` is used instead.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| Percentages | relative to width/height of the mask border image area |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

Formal syntax
-------------



```
mask-border-width =   
  [[](value_definition_syntax#brackets) <length-percentage> [|](value_definition_syntax#single_bar) [<number>](number) [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Basic usage



This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to [`mask-border-slice`](mask-border-slice) will cause the slices to be scaled to fit the border mask.

 
```
mask-border-width: 30 fill;

```
 Chromium-based browsers support an outdated version of this property — `mask-box-image-width` — with a prefix:

 
```
-webkit-mask-box-image-width: 20px;

```
  **Note:** The [`mask-border`](mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border-width](https://drafts.fxtf.org/css-masking/#the-mask-border-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-border-width` | 1 | 79 | NoSee [bug 877294](https://bugzil.la/877294). | No | 15 | 3.1 | 4.4 | 18 | NoSee [bug 877294](https://bugzil.la/877294). | 14 | 3 | 1.0 |


See also
--------


* [`mask-border`](mask-border)
* [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-source`](mask-border-source)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-width>

mask-border-repeat
==================


The `mask-border-repeat` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how the [edge regions](border-image-slice#edge-regions) of a source image are adjusted to fit the dimensions of an element's [mask border](mask-border).


Syntax
------




```
/\* Keyword value \*/
mask-border-repeat: stretch;
mask-border-repeat: repeat;
mask-border-repeat: round;
mask-border-repeat: space;

/\* top and bottom | left and right \*/
mask-border-repeat: round stretch;

/\* Global values \*/
mask-border-repeat: inherit;
mask-border-repeat: initial;
mask-border-repeat: revert;
mask-border-repeat: revert-layer;
mask-border-repeat: unset;

```
 The `mask-border-repeat` property may be specified using one or two values chosen from the list of values below.

 * When **one** value is specified, it applies the same behavior on **all four sides**.
* When **two** values are specified, the first applies to the **top and bottom**, the second to the **left and right**.


### Values


 `stretch`  The source image's edge regions are stretched to fill the gap between each border.

  `repeat`  The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.

  `round`  The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.

  `space`  The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `stretch` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-border-repeat =   
  [[](value_definition_syntax#brackets) stretch [|](value_definition_syntax#single_bar) repeat [|](value_definition_syntax#single_bar) round [|](value_definition_syntax#single_bar) space []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Basic usage



This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e. will it just repeat, or be scaled slightly so a whole number of slices fits, or be stretched so one slice fits?

 
```
mask-border-repeat: round;

```
 Chromium-based browsers support an outdated version of this property — `mask-box-image-repeat` — with a prefix:

 
```
-webkit-mask-box-image-repeat: round;

```
  **Note:** The [`mask-border`](mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border-repeat](https://drafts.fxtf.org/css-masking/#the-mask-border-repeat) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-border-repeat` | 1 | 79 | NoSee [bug 877294](https://bugzil.la/877294). | No | 15 | 3.1 | 4.4 | 18 | NoSee [bug 877294](https://bugzil.la/877294). | 14 | 3 | 1.0 |


See also
--------


* [`mask-border`](mask-border)
* [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-source`](mask-border-source)
* [`mask-border-width`](mask-border-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-repeat>

mask-border-source
==================



The `mask-border-source` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the source image used to create an element's [mask border](mask-border).

 The [`mask-border-slice`](mask-border-slice) property is used to divide the source image into regions, which are then dynamically applied to the final mask border.



Syntax
------



```
/\* Keyword value \*/
mask-border-source: none;

/\* <image> values \*/
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

/\* Global values \*/
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: revert-layer;
mask-border-source: unset;

```
### Values


 `none`  No mask border is used.

  [`<image>`](image)  Image reference to use for the mask border.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with [`url()`](url) values made absolute |
| Animation type | discrete |

Formal syntax
-------------



```
mask-border-source =   
  none     [|](value_definition_syntax#single_bar)  
  <image>    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Basic usage



This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask.

 
```
mask-border-source: url(image.jpg);

```
 Chromium-based browsers support an outdated version of this property — `mask-box-image-source` — with a prefix:

 
```
-webkit-mask-box-image-source: url(image.jpg);

```
  **Note:** The [`mask-border`](mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-border-source](https://drafts.fxtf.org/css-masking/#the-mask-border-source) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-border-source` | 1 | 79 | NoSee [bug 877294](https://bugzil.la/877294). | No | 15 | 3.1 | 4.4 | 18 | NoSee [bug 877294](https://bugzil.la/877294). | 14 | 3 | 1.0 |


See also
--------


* [`mask-border`](mask-border)
* [`mask-border-mode`](mask-border-mode)
* [`mask-border-outset`](mask-border-outset)
* [`mask-border-repeat`](mask-border-repeat)
* [`mask-border-width`](mask-border-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border-source>

mask-clip
=========



The `mask-clip` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.

 
```
/\* <geometry-box> values \*/
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

/\* Keyword values \*/
mask-clip: no-clip;

/\* Non-standard keyword values \*/
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;

/\* Multiple values \*/
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;

/\* Global values \*/
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;

```


Syntax
------


One or more of the keyword values listed below, separated by commas.

### Values


 `content-box`  The painted content is clipped to the content box.

  `padding-box`  The painted content is clipped to the padding box.

  `border-box`  The painted content is clipped to the border box.

  `margin-box`  The painted content is clipped to the margin box.

  `fill-box`  The painted content is clipped to the object bounding box.

  `stroke-box`  The painted content is clipped to the stroke bounding box.

  `view-box`  Uses the nearest SVG viewport as reference box. If a [`viewBox`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

  `no-clip`  The painted content is not clipped.

  
`border`  Non-standard 
  This keyword behaves the same as `border-box`.

  
`padding`  Non-standard 
  This keyword behaves the same as `padding-box`.

  
`content`  Non-standard 
  This keyword behaves the same as `content-box`.

  
`text`  Non-standard 
  This keyword clips the mask image to the text of the element.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `border-box` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-clip =   
  [[](value_definition_syntax#brackets) <geometry-box> [|](value_definition_syntax#single_bar) no-clip []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<geometry-box> =   
  <shape-box>  [|](value_definition_syntax#single_bar)  
  fill-box     [|](value_definition_syntax#single_bar)  
  stroke-box   [|](value_definition_syntax#single_bar)  
  view-box       
  
<shape-box> =   
  <box>       [|](value_definition_syntax#single_bar)  
  margin-box    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  

```
Examples
--------


### Clipping a mask to the border box



Change the `mask-clip` value to any of the allowed values detailed above. If viewing the example in a Chromium-based browser change the value of `-webkit-mask-clip`.



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-clip](https://drafts.fxtf.org/css-masking/#the-mask-clip) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-clip` | 1 | 79 | 53 | No | 15 | 15.44 | 2 | 18 | 53 | 14 | 15.43.2 | 1.0 |
| `border` | 1 | 79 | No | No | 15 | 4 | 2 | 18 | No | 14 | 3.2 | 1.0 |
| `content` | 1 | 79 | No | No | 15 | 4 | 2 | 18 | No | 14 | 3.2 | 1.0 |
| `padding` | 1 | 79 | No | No | 15 | 4 | 2 | 18 | No | 14 | 3.2 | 1.0 |
| `text` | 1 | 79 | No | No | 15 | 4 | 2 | 18 | No | 14 | 3.2 | 1.0 |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip>

mask-composite
==============



The `mask-composite` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property represents a compositing operation used on the current mask layer with the mask layers below it.

 
```
/\* Keyword values \*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/\* Global values \*/
mask-composite: inherit;
mask-composite: initial;
mask-composite: revert;
mask-composite: revert-layer;
mask-composite: unset;

```


Syntax
------


One or more of the keyword values listed below, separated by commas.

### Values



For the composition the current mask layer is referred to as *source*, while all layers below it are referred to as *destination*.

  `add`  The source is placed over the destination.

  `subtract`  The source is placed, where it falls outside of the destination.

  `intersect`  The parts of source that overlap the destination, replace the destination.

  `exclude`  The non-overlapping regions of source and destination are combined.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `add` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-composite =   
  <compositing-operator>[#](value_definition_syntax#hash_mark)    
  
<compositing-operator> =   
  add        [|](value_definition_syntax#single_bar)  
  subtract   [|](value_definition_syntax#single_bar)  
  intersect  [|](value_definition_syntax#single_bar)  
  exclude      
  

```
Examples
--------


### Compositing mask layers with addition


Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-composite](https://drafts.fxtf.org/css-masking/#the-mask-composite) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-composite` | NoSee also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | 18–79 | 53 | No | NoSee also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | 15.4See also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | NoSee also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | NoSee also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | 53 | NoSee also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | 15.4See also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. | NoSee also [`-webkit-mask-composite`](https://developer.mozilla.org/docs/Web/CSS/-webkit-mask-composite) for a similar non-standard property that uses different keywords. |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite>

mask-origin
===========



The `mask-origin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the origin of a mask.

 
```
/\* Keyword values \*/
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/\* Multiple values \*/
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/\* Non-standard keyword values \*/
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

/\* Global values \*/
mask-origin: inherit;
mask-origin: initial;
mask-origin: revert;
mask-origin: revert-layer;
mask-origin: unset;

```
 For elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the [`mask-image`](mask-image) CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes [`box-decoration-break`](box-decoration-break) operates upon to determine the mask positioning area.



Syntax
------


One or more of the keyword values listed below, separated by commas.

### Values


 `content-box`  The position is relative to the content box.

  `padding-box`  The position is relative to the padding box. For single boxes `0 0` is the upper left corner of the padding edge, `100% 100%` is the lower right corner.

  `border-box`  The position is relative to the border box.

  `margin-box`  The position is relative to the margin box.

  
`fill-box`  Experimental 
  The position is relative to the object bounding box.

  
`stroke-box`  Experimental 
  The position is relative to the stroke bounding box.

  
`view-box`  Experimental 
  Uses the nearest SVG viewport as reference box. If a `[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)` attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

  
`content`  Non-standard 
  Same as `content-box`.

  
`padding`  Non-standard 
  Same as `padding-box`.

  
`border`  Non-standard 
  Same as `border-box`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `border-box` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-origin =   
  <geometry-box>[#](value_definition_syntax#hash_mark)    
  
<geometry-box> =   
  <shape-box>  [|](value_definition_syntax#single_bar)  
  fill-box     [|](value_definition_syntax#single_bar)  
  stroke-box   [|](value_definition_syntax#single_bar)  
  view-box       
  
<shape-box> =   
  <box>       [|](value_definition_syntax#single_bar)  
  margin-box    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  

```
Examples
--------


### Setting mask origin to border-box



Try some of the other possible values by updating the CSS in the box below.



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-origin](https://drafts.fxtf.org/css-masking/#the-mask-origin) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-origin` | 1The `margin-box` value is unsupported. | 79The `margin-box` value is unsupported. | 53 | No | 15The `margin-box` value is unsupported. | 15.44The `margin-box` value is unsupported. | 2The `margin-box` value is unsupported. | 18The `margin-box` value is unsupported. | 53 | 14The `margin-box` value is unsupported. | 15.43.2The `margin-box` value is unsupported. | 1.0The `margin-box` value is unsupported. |
| `fill-box` | No | No | No | No | No | NoSee [bug 137293](https://webkit.org/b/137293). | No | No | No | No | NoSee [bug 137293](https://webkit.org/b/137293). | No |
| `non_standard_values` | 1 | 79 | No | No | 15 | 4preview | 2 | 18 | No | 14 | 3.2 | 1.0 |
| `stroke-box` | No | No | No | No | No | NoSee [bug 137293](https://webkit.org/b/137293). | No | No | No | No | NoSee [bug 137293](https://webkit.org/b/137293). | No |
| `view-box` | No | No | No | No | No | NoSee [bug 137293](https://webkit.org/b/137293). | No | No | No | No | NoSee [bug 137293](https://webkit.org/b/137293). | No |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-origin>

mask-image
==========



 The `mask-image` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the [`mask-mode`](mask-mode) property. 

 
```
/\* Keyword value \*/
mask-image: none;

/\* <mask-source> value \*/
mask-image: url(masks.svg#mask1);

/\* <image> values \*/
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);

/\* Multiple values \*/
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);

/\* Global values \*/
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;

```


Syntax
------


### Values


 `none`  This keyword is interpreted as an opaque white image layer.

  `<mask-source>`  A [`url()`](url) reference to a [`<mask>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask) or to a CSS image.

  [`<image>`](image)  An image value used as mask image layer.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with [`url()`](url) values made absolute |
| Animation type | discrete |

Formal syntax
-------------



```
mask-image =   
  <mask-reference>[#](value_definition_syntax#hash_mark)    
  
<mask-reference> =   
  none           [|](value_definition_syntax#single_bar)  
  <image>        [|](value_definition_syntax#single_bar)  
  <mask-source>    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<mask-source> =   
  <url>    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Setting a mask image with a URL


Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-image](https://drafts.fxtf.org/css-masking/#the-mask-image) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-image` | 1From version 8, Chrome added support for gradient values. Initially, Chrome supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added. | 7916–79 | 53 | No | 15 | 15.44Initially, Safari supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added. | 2Initially, Android supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added. | 18From version 8, Chrome added support for gradient values. Initially, Chrome supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added. | 53 | 14 | 15.43.2Initially, Safari supported only `-webkit-` prefixed values for gradients (such as `-webkit-linear-gradient()`). Later, support for unprefixed values was added. | 1.0 |
| `multiple_mask_images` | 1 | 18 | 53 | No | 15 | 4 | ≤37 | 18 | 53 | 14 | 3.2 | 1.0 |
| `svg_masks` | 8 | 18 | 53 | No | 15 | 4 | ≤37 | 18 | 53 | 14 | 3.2 | 1.0 |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)
* [Apply effects to images with CSS's mask-image property](https://web.dev/css-masking/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image>

mask-mode
=========



The `mask-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether the mask reference defined by [`mask-image`](mask-image) is treated as a luminance or alpha mask.

 
```
/\* Keyword values \*/
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/\* Multiple values \*/
mask-mode: alpha, match-source;

/\* Global values \*/
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: revert-layer;
mask-mode: unset;

```


Syntax
------


The `mask-mode` property is specified as one or more of the keyword values listed below, separated by commas.

### Values


 `alpha`  This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.

  `luminance`  This keyword indicates that the luminance values of the mask layer image should be used as the mask values.

  `match-source`  If the [`mask-image`](mask-image) property is of type `<mask-source>`, the luminance values of the mask layer image should be used as the mask values.

 If it is of type [`<image>`](image), the alpha values of the mask layer image should be used as the mask values.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `match-source` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-mode =   
  <masking-mode>[#](value_definition_syntax#hash_mark)    
  
<masking-mode> =   
  alpha         [|](value_definition_syntax#single_bar)  
  luminance     [|](value_definition_syntax#single_bar)  
  match-source    
  

```
Examples
--------


### Using alpha mask mode


Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-mode](https://drafts.fxtf.org/css-masking/#the-mask-mode) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-mode` | No | No | 53 | No | No | 15.4 | No | No | 53 | No | 15.4 | No |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode>

mask-position
=============



The `mask-position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the initial position, relative to the mask position layer set by [`mask-origin`](mask-origin), for each defined mask image.

 
```
/\* Keyword values \*/
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/\* <position> values \*/
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/\* Multiple values \*/
mask-position: top right;
mask-position: 1rem 1rem, center;

/\* Global values \*/
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: revert-layer;
mask-position: unset;

```


Syntax
------


One or more `<position>` values, separated by commas.

### Values


 [`<position>`](position_value)  One to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `center` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| Percentages | refer to size of mask painting area minus size of mask layer image (see the text for [`background-position`](background-position)) |
| [Computed value](computed_value) | Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. |
| Animation type | repeatable list of simple list of length, percentage, or calc |

Formal syntax
-------------



```
mask-position =   
  <position>[#](value_definition_syntax#hash_mark)    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting mask position



 Change the `mask-position` value to any of the allowed values detailed above. If viewing the example in a Chromium-based browser change the value of `-webkit-mask-position`. 



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-position](https://drafts.fxtf.org/css-masking/#the-mask-position) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-position` | 1 | 7918–79 | 53 | No | 15 | 15.43.1 | 2 | 18 | 53 | 14 | 15.42 | 1.0 |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position>

mask-repeat
===========



The `mask-repeat` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.

 
```
/\* One-value syntax \*/
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/\* Two-value syntax: horizontal | vertical \*/
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/\* Multiple values \*/
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;

/\* Global values \*/
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: revert;
mask-repeat: revert-layer;
mask-repeat: unset;

```
 By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using `round`) or evenly distributed from end to end (using `space`).



Syntax
------


One or more `<repeat-style>` values, separated by commas.

### Values


 `<repeat-style>`  The one-value syntax is a shorthand for the full two-value syntax:

 

| Single value | Two-value equivalent |
| --- | --- |
| `repeat-x` | `repeat no-repeat` |
| `repeat-y` | `no-repeat repeat` |
| `repeat` | `repeat repeat` |
| `space` | `space space` |
| `round` | `round round` |
| `no-repeat` | `no-repeat no-repeat` |

 In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:

 

|  |  |
| --- | --- |
| `repeat` |  The image is repeated as much as needed to cover the whole mask painting area. The last image will be clipped if it doesn't fit.  |
| `space` |  The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The [`mask-position`](mask-position) property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using `space` is when there isn't enough room to display one image.  |
| `round` |  As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.  |
| `no-repeat` |  The image is not repeated (and hence the mask painting area will not necessarily be entirely covered). The position of the non-repeated mask image is defined by the [`mask-position`](mask-position) CSS property.  |

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `repeat` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | Consists of two keywords, one per dimension |
| Animation type | discrete |

Formal syntax
-------------



```
mask-repeat =   
  <repeat-style>[#](value_definition_syntax#hash_mark)    
  
<repeat-style> =   
  repeat-x                                     [|](value_definition_syntax#single_bar)  
  repeat-y                                     [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) repeat [|](value_definition_syntax#single_bar) space [|](value_definition_syntax#single_bar) round [|](value_definition_syntax#single_bar) no-repeat []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting repeat for a single mask


### Multiple mask image support



You can specify a different `<repeat-style>` for each mask image, separated by commas:

 
```
.examplethree {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-repeat: repeat-x, repeat-y;
}

```
 Each image is matched with the corresponding repeat style, from first specified to last.


Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-repeat](https://drafts.fxtf.org/css-masking/#the-mask-repeat) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-repeat` | 1 | 7918–79 | 53 | No | 15 | 15.43.1 | 2 | 18 | 53 | 14 | 15.42 | 1.0 |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-repeat>

masonry-auto-flow
=================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `masonry-auto-flow` CSS property modifies how items are placed when using [masonry](css_grid_layout/masonry_layout) in [CSS Grid Layout](css_grid_layout).



Syntax
------




```
/\* Keyword values \*/
masonry-auto-flow: pack;
masonry-auto-flow: next;
masonry-auto-flow: ordered;
masonry-auto-flow: definite-first;
masonry-auto-flow: next ordered;

/\* Global values \*/
masonry-auto-flow: inherit;
masonry-auto-flow: initial;
masonry-auto-flow: revert;
masonry-auto-flow: revert-layer;
masonry-auto-flow: unset;

```
 This property may take one of two forms:

 * A single keyword: one of `pack`, `next`, `definite-first`, or `ordered`
* Two keywords, for example `next ordered`.


### Values


 `pack`  As per the default masonry algorithm, items will be placed into the track with the most room.

  `next`  Items will be placed one after the other in the grid axis.

  `definite-first`  Display as in the default masonry algorithm, placing items with a definite place first before placing other masonry items.

  `ordered`  Ignore any items with a definite placement, and place everything according to order-modified document order.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `pack` |
| Applies to | Grid containers with masonry layout |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
masonry-auto-flow =   
  [[](value_definition_syntax#brackets) pack [|](value_definition_syntax#single_bar) next []](value_definition_syntax#brackets)               [||](value_definition_syntax#double_bar)  
  [[](value_definition_syntax#brackets) definite-first [|](value_definition_syntax#single_bar) ordered []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Using the next keyword



#### HTML

 
```
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="flow">
  <option value="pack">pack</option>
  <option value="next">next</option>
</select>

```
 #### CSS

 
```
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}

#item1 {
  background-color: lime;
  height: 2em;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
  height: 3em;
}

#item4 {
  background-color: red;
  height: 2.5em;
}

#item5 {
  background-color: aqua;
  height: 4em;
}

```
 
```
const selectElem = document.querySelector("select");

function changeMasonryFlow() {
  const grid = document.getElementById("grid");
  const direction = document.getElementById("flow");
  const masonryAutoFlow = direction.value === "pack" ? "pack" : "next";

  grid.style.masonryAutoFlow = masonryAutoFlow;
}

selectElem.addEventListener("change", changeMasonryFlow);

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 3 # masonry-auto-flow](https://w3c.github.io/csswg-drafts/css-grid-3/#masonry-auto-flow) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `masonry-auto-flow` | No | No | No | No | No | No | No | No | No | No | No | No |


See also
--------


* Related CSS properties: [`align-tracks`](align-tracks), [`justify-tracks`](justify-tracks)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/masonry-auto-flow>

math-depth
==========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `math-depth` property describes a notion of *depth* for each element of a mathematical formula, with respect to the top-level container of that formula. Concretely, this is used to determine the computed value of the <font-size> property when its specified value is `math`.



Syntax
------



```
/\* Keyword values \*/
math-depth: auto-add;

/\* Relative values \*/
math-depth: add(2);
math-depth: add(-2);

/\* Absolute value \*/
math-depth: 4;

/\* Global values \*/
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

```
Values
------


 `auto-add`  Set to the inherited `math-depth` plus 1 when inherited <math-style> is `compact`.

  `add([`<integer>`](integer))`  Set to the inherited `math-depth` plus the specified integer.

  [`<integer>`](integer)  Set to the specified integer.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
math-depth =   
  auto-add          [|](value_definition_syntax#single_bar)  
  add( [<integer>](integer) )  [|](value_definition_syntax#single_bar)  
  [<integer>](integer)           
  

```
Examples
--------


### CSS



```
math {
  math-depth: auto-add;
}

```
Specifications
--------------




| Specification |
| --- |
| [MathML Core # the-math-script-level-property](https://w3c.github.io/mathml-core/#the-math-script-level-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `math-depth` | 10987 | 10987 | 83Implementation lacks support for `font-size: math` to be complete. | No | 9573 | NoSee [bug 202303](https://webkit.org/b/202303). | 109 | 10987 | No | 74 | NoSee [bug 202303](https://webkit.org/b/202303). | No |


See also
--------


* [`font-size`](font-size)
* [`math-style`](math-style)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/math-depth>

mask-size
=========



The `mask-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.

 
```
/\* Keywords syntax \*/
mask-size: cover;
mask-size: contain;

/\* One-value syntax \*/
/\* the width of the image (height set to 'auto') \*/
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

/\* Two-value syntax \*/
/\* first value: width of the image, second value: height \*/
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

/\* Multiple values \*/
/\* Do not confuse this with mask-size: auto auto \*/
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

/\* Global values \*/
mask-size: inherit;
mask-size: initial;
mask-size: revert;
mask-size: revert-layer;
mask-size: unset;

```
  **Note:** If the value of this property is not set in a [`mask`](mask) shorthand property that is applied to the element after the `mask-size` CSS property, the value of this property is then reset to its initial value by the shorthand property.

 

Syntax
------



One or more `<bg-size>` values, separated by commas.

 A `<bg-size>` can be specified in one of three ways:

 * using the keyword `contain`
* using the keyword `cover`
* using width and height values

 To specify a size using width and height, you can supply one or two values:

 * If only one value is given it sets the width, with the height set to `auto`.
* If two values are given, the first sets width and the second sets height.

 Each value can be a `<length>`, a `<percentage>`, or `auto`.


### Values



 `<length>`  A `[`<length>`](length)` value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed.

  `<percentage>`  A [`<percentage>`](percentage) value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of [`mask-origin`](mask-origin). The mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. Negative percentages are not allowed.

  `auto`  A keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion.

  `contain`  A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image is *letterboxed* within the container. The image is automatically centered unless over-ridden by another property such as [`mask-position`](mask-position).

  `cover`  A keyword that is the inverse of `contain`. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, *the image is clipped* either on left/right or at top/bottom.

   The interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). A bitmap image always has intrinsic dimensions and an intrinsic proportion. A vector image may have both intrinsic dimensions and thus it has an intrinsic proportion too. It also may have one or no intrinsic dimensions and in either case it might or might not have an intrinsic proportion. Gradients are treated as images with no intrinsic dimensions or intrinsic proportion.

 The rendered size of the mask image is then computed as follows:

  If both components of `mask-size` are specified and are not `auto`:  The mask image renders at the specified size.

  If the `mask-size` is `contain` or `cover`:  The image is rendered by preserving its intrinsic proportion at the largest size contained within or covering the mask positioning area. If the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area.

  If the `mask-size` is `auto` or `auto auto`:  If the image has both intrinsic dimensions, it is rendered at that size. If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the mask positioning area. If it has no dimensions but has a proportion, it's rendered as if `contain` had been specified instead. If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion. If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area.

  If `mask-size` has one `auto` component and one non-`auto` component:  If the image has an intrinsic proportion, then render it using the specified dimension and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the mask positioning area.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements; In SVG, it applies to container elements excluding the [`<defs>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) element and all graphics elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | repeatable list of simple list of length, percentage, or calc |

Formal syntax
-------------



```
mask-size =   
  <bg-size>[#](value_definition_syntax#hash_mark)    
  
<bg-size> =   
  [[](value_definition_syntax#brackets) [<length-percentage [0,∞]>](length-percentage) [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)  [|](value_definition_syntax#single_bar)  
  cover                                      [|](value_definition_syntax#single_bar)  
  contain                                      
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting mask size as a percentage


Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-size](https://drafts.fxtf.org/css-masking/#the-mask-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-size` | 4 | 7918–79 | 53 | No | 15 | 15.44 | 4.4 | 18 | 53 | 14 | 15.42 | 1.0 |


See also
--------


* [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-size>

mask-type
=========



The `mask-type` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an SVG [`<mask>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask) element is used as a *luminance* or an *alpha* mask. It applies to the `<mask>` element itself.

 
```
/\* Keyword values \*/
mask-type: luminance;
mask-type: alpha;

/\* Global values \*/
mask-type: inherit;
mask-type: initial;
mask-type: revert;
mask-type: revert-layer;
mask-type: unset;

```
 This property may be overridden by the [`mask-mode`](mask-mode) property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.



Syntax
------


The `mask-type` property is specified as one of the keyword values listed below.

### Values


 `luminance`  Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its [relative luminance](https://en.wikipedia.org/wiki/Luminance_%28relative%29) values must be used when applying it.

  `alpha`  Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its [alpha channel](https://en.wikipedia.org/wiki/Alpha_compositing) values must be used when applying it.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `luminance` |
| Applies to | [`<mask>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask) elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
mask-type =   
  luminance  [|](value_definition_syntax#single_bar)  
  alpha        
  

```
Examples
--------


### Setting an alpha mask



#### HTML

 
```
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

```
 #### CSS

 
```
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

```
 #### Result



### Setting a luminance mask



#### HTML

 
```
<div class="redsquare"></div>
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0"
 height="0">
  <defs>
    <mask
 id="m"
 maskContentUnits="objectBoundingBox"
 style="mask-type:luminance">
      <rect
 x=".1"
 y=".1"
 width=".8"
 height=".8"
 fill="red"
 fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

```
 #### CSS

 
```
.redsquare {
  height: 100px;
  width: 100px;
  background-color: rgb(128, 128, 128);
  border: solid 1px black;
  mask: url("#m");
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Masking Module Level 1 # the-mask-type](https://drafts.fxtf.org/css-masking/#the-mask-type) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mask-type` | 24 | 79 | 35 | No | 15 | 7 | 37 | 25 | 35 | 14 | 7 | 1.5 |


See also
--------


* Other mask-related properties: [`mask`](mask), [`mask-mode`](mask-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type>

math-shift
==========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `math-shift` property indicates whether superscripts inside MathML formulas should be raised by a normal or compact shift.



Syntax
------



```
/\* Keyword values \*/
math-shift: normal;
math-shift: compact;

/\* Global values \*/
math-shift: inherit;
math-shift: initial;
math-shift: revert;
math-shift: revert-layer;
math-shift: unset;

```
### Values


 `normal`  The initial value, indicates normal rendering. Superscripts in MathML formulas use the [superscriptShiftUp](https://w3c.github.io/mathml-core/#dfn-superscriptshiftup) parameter from the OpenType MATH table.

  `compact`  Indicates compact rendering. Superscripts in MathML formulas use the [superscriptShiftUpCramped](https://w3c.github.io/mathml-core/#dfn-superscriptshiftupcramped) parameter from the OpenType MATH table, which is generally smaller.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
math-shift =   
  normal   [|](value_definition_syntax#single_bar)  
  compact    
  

```
Examples
--------


### CSS



```
math {
  math-shift: compact;
}

```
### MathML



The following MathML displays two versions of "x squared" using a font with an OpenType MATH table. Browser implementing the `math-shift` property should raise the superscripts using slightly different shifts.

 
```
<math style="font-size: 64pt;">
  <msup style="math-shift: normal">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <msup style="math-shift: compact">
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

```


Specifications
--------------




| Specification |
| --- |
| [MathML Core # the-math-shift](https://w3c.github.io/mathml-core/#the-math-shift) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `math-shift` | 10987 | 10987 | No | No | 9573 | No | 109 | 10987 | No | 74 | No | No |


See also
--------


* [`math-depth`](math-depth)
* [`font-size`](font-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/math-shift>

matrix()
========


 The `matrix()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a homogeneous 2D transformation matrix. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



   **Note:** `matrix(a, b, c, d, tx, ty)` is a shorthand for `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`. 

 
Syntax
------



 The `matrix()` function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order. 

 
```
matrix(a, b, c, d, tx, ty)

```

### Values



 
*a* *b* *c* *d*
  Are [`<number>`](../number)s describing the linear transformation.

  
*tx* *ty*
  Are [`<number>`](../number)s describing the translation to apply.

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    a   c     b   d    )   |   (    a   c   tx     b   d   ty     0   0   1    )   |   (    a   c   tx     b   d   ty     0   0   1    )   |   (    a   c   0   tx     b   d   0   ty     0   0   1   0     0   0   0   1    )   |
| `[a b c d tx ty]` |

  The values represent the following functions: `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())` 


Examples
--------


### HTML



```
<div>Normal</div>
<div class="changed">Changed</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-matrix](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-matrix) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `matrix` | 1 | 12 | 3.5Before Firefox 16, the translation values of `matrix()` could be [`<length>`](https://developer.mozilla.org/docs/Web/CSS/length)s, in addition to the standard [`<number>`](https://developer.mozilla.org/docs/Web/CSS/number). | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
* [`<transform-function>`](../transform-function)
* [`matrix3d()`](matrix3d)
* [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix>

max()
=====


The `max()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The `max()` function can be used anywhere a [`<length>`](length), [`<frequency>`](frequency), [`<angle>`](angle), [`<time>`](time), [`<percentage>`](percentage), [`<number>`](number), or [`<integer>`](integer) is allowed.


Try it
------



 In the first above example, the width will be at least 400px, but will be wider if the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). Think of the `max()` value as providing the *minimum* value a property can have.


Syntax
------



The `max()` function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.

 The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as [`attr()`](attr), that evaluate to a valid argument type (like [`<length>`](length)), or nested [`min()`](min) and `max()` functions.

 You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.


### Notes


* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `min()` and other `max()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
* The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value.
* You can (and often need to) combine `min()` and `max()` values, or use `max()` within a `clamp()` or `calc()` function.
### Formal syntax



```
<max()> =   
  max( <calc-sum>[#](value_definition_syntax#hash_mark) )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Setting a minimum size for a font



Another use case for CSS functions is allow a font size to grow while ensuring it is at least a minimum size, enabling responsive font sizes while ensuring legibility.

 Let's look at some CSS:

 
```
h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

```
 The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

 
```
<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

```

 Think of the `max()` function as finding the minimum value allowed for a property.


Accessibility concerns
----------------------



When `max()` is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the [`min()`](min) function nested within a `max()` that has as its second value a [relative length unit](length#relative_length_units) that is always large enough to read. For example:

 
```
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

```
 This ensures a minimum size of *1rem*, with a text size that scales if the page is zoomed.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # calc-notation](https://w3c.github.io/csswg-drafts/css-values/#calc-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `max` | 79 | 79 | 75 | No | 66 | 11.1 | 79 | 79 | 79 | 57 | 11.3 | 12.0 |


See also
--------


* [`calc()`](calc)
* [`clamp()`](clamp)
* [`min()`](min)
* [CSS Values](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/max>

math-style
==========


The `math-style` property indicates whether MathML equations should render with normal or compact height.


Syntax
------



```
/\* Keyword values \*/
math-style: normal;
math-style: compact;

/\* Global values \*/
math-style: inherit;
math-style: initial;
math-style: revert;
math-style: revert-layer;
math-style: unset;

```
### Values


 `normal`  The initial value, indicates normal rendering.

  `compact`  The math layout on descendants tries to minimize the logical height.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
math-style =   
  normal   [|](value_definition_syntax#single_bar)  
  compact    
  

```
Examples
--------


### CSS



```
math {
  math-style: compact;
}

```
Specifications
--------------




| Specification |
| --- |
| [MathML Core # the-math-style-property](https://w3c.github.io/mathml-core/#the-math-style-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `math-style` | 10983 | 10983 | 83 | No | 9569 | 14.1 | 109 | 10983 | No | 74 | 14.5 | No |


See also
--------


* [`math-depth`](math-depth)
* [`font-size`](font-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/math-style>

matrix3d()
==========


 The `matrix3d()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------


Syntax
------



The `matrix3d()` function is specified with 16 values. They are described in the column-major order.

 
```
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

```

### Values



  *a1* *b1* *c1* *d1* *a2* *b2* *c2* *d2* *a3* *b3* *c3* *d3*   Are [`<number>`](../number)s describing the linear transformation.

  
*a4* *b4* *c4 d4*
  Are [`<number>`](../number)s describing the translation to apply.

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |  A generic 3D [affine transformation](https://en.wikipedia.org/wiki/Affine_transformation) can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.  |   (    a1   a2   a3   a4     b1   b2   b3   b4     c1   c2   c3   c4     d1   d2   d3   d4    )   |


Examples
--------


### Cube squashing example



 The following example shows a 3D cube created from DOM elements and transforms, which can be hovered/focused to apply a `matrix3d()` transform to it. 

 #### HTML

 
```
<section id="example-element" tabindex="0">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

```
 #### CSS

 
```
#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}

#example-element:hover,
#example-element:focus {
  transform: rotate3d(1, 1, 1, 30deg) matrix3d(
      1,
      0,
      0,
      0,
      0,
      1,
      6,
      0,
      0,
      0,
      1,
      0,
      50,
      100,
      0,
      1.1
    );
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

```
 #### Result



### Matrix translation and scale example



Another `transform3d()` example, which implements an animated combined translate and scale.

 #### HTML

 
```
<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
</div>

```
 #### CSS

 
```
html {
  width: 100%;
}
body {
  height: 100vh;
  /\* Centering content \*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.foo {
  width: 50%;
  padding: 1em;
  color: white;
  background: #ff8c66;
  border: 2px dashed black;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  /\* Setting up animation for better demonstration \*/
  animation: MotionScale 2s alternate linear infinite;
}

@keyframes MotionScale {
  from {
    /\*
 Identity matrix is used as basis here.
 The matrix below describes the
 following transformations:
 Translates every X point by -50px
 Translates every Y point by -100px
 Translates every Z point by 0
 Scales down by 10%
 \*/
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      -50, -100, 0, 1.1
    );
  }
  50% {
    transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, 0.9
    );
  }
  to {
     transform: matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      50, 100, 0, 1.1
    )
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-matrix3d](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-matrix3d) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `matrix3d` | 12 | 12 | 10Before Firefox 16, the translation values of `matrix3d()` could be [`<length>`](https://developer.mozilla.org/docs/Web/CSS/length)s, in addition to the standard [`<number>`](https://developer.mozilla.org/docs/Web/CSS/number). | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
* [`<transform-function>`](../transform-function)
* [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) (2012)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d>

max-height
==========


The `max-height` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the maximum height of an element. It prevents the [used value](used_value) of the [`height`](height) property from becoming larger than the value specified for `max-height`.


Try it
------



 `max-height` overrides [`height`](height), but [`min-height`](min-height) overrides `max-height`.


Syntax
------



```
/\* <length> value \*/
max-height: 3.5em;

/\* <percentage> value \*/
max-height: 75%;

/\* Keyword values \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(20em);

/\* Global values \*/
max-height: inherit;
max-height: initial;
max-height: revert;
max-height: revert-layer;
max-height: unset;

```
### Values


 [`<length>`](length)  Defines the `max-height` as an absolute value.

  [`<percentage>`](percentage)  Defines the `max-height` as a percentage of the containing block's height.

  `none`  No limit on the size of the box.

  `max-content`  The intrinsic preferred `max-height`.

  `min-content`  The intrinsic minimum `max-height`.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

  Accessibility concerns
----------------------



Ensure that elements set with a `max-height` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| [Inherited](inheritance) | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `none`. |
| [Computed value](computed_value) | the percentage as specified or the absolute length or `none` |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
max-height =   
  none                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting max-height using percentage and keyword values



```
table {
  max-height: 75%;
}

form {
  max-height: none;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # width-height-keywords](https://w3c.github.io/csswg-drafts/css-sizing-4/#width-height-keywords) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `max-height` | 18 | 12 | 1CSS 2.1 leaves the behavior of `max-height` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `max-height` to `table` elements. | 7 | 7CSS 2.1 leaves the behavior of `max-height` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Opera supports applying `max-height` to `table` elements. | 1.3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `fit-content` | 4625 | 7979 | 3Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | No | 44 | 1172 | 464.4 | 4625 | 4Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | 43 | 1171 | 5.01.5 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 46 | 79 | 663 | No | 44 | 119 | 46 | 46 | 664 | 43 | 119 | 5.0 |
| `min-content` | 46 | 79 | 663 | No | 44 | 119 | 46 | 46 | 664 | 43 | 119 | 5.0 |
| `stretch` | 28 | 79 | No | No | 15 | No | 4.4 | 28 | No | 15 | No | 1.5 |


See also
--------


* [The box model](css_box_model/introduction_to_the_css_box_model), [`box-sizing`](box-sizing)
* [`height`](height), [`min-height`](min-height)
* The mapped logical properties: [`max-inline-size`](max-inline-size), [`max-block-size`](max-block-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/max-height>

max-inline-size
===============



The `max-inline-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the [`max-width`](max-width) or the [`max-height`](max-height) property, depending on the value of [`writing-mode`](writing-mode).

 If the writing mode is vertically oriented, the value of `max-inline-size` relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is [`max-block-size`](max-block-size), which defines the other dimension of the element.



Try it
------


Syntax
------



```
/\* <length> values \*/
max-inline-size: 300px;
max-inline-size: 25em;

/\* <percentage> values \*/
max-inline-size: 75%;

/\* Keyword values \*/
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content(20em);

/\* Global values \*/
max-inline-size: inherit;
max-inline-size: initial;
max-inline-size: revert;
max-inline-size: revert-layer;
max-inline-size: unset;

```
### Values


The `max-inline-size` property takes the same values as the [`max-width`](max-width) and [`max-height`](max-height) properties.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | same as [`width`](width) and [`height`](height) |
| [Inherited](inheritance) | no |
| Percentages | inline-size of containing block |
| [Computed value](computed_value) | same as [`max-width`](max-width) and [`max-height`](max-height) |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
max-inline-size =   
  <'max-width'>    
  

```
Examples
--------


### Setting maximum inline size in pixels



#### HTML

 
```
<p class="exampleText">Example text</p>

```
 #### CSS

 
```
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-max-inline-size](https://w3c.github.io/csswg-drafts/css-logical/#propdef-max-inline-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `max-inline-size` | 57 | 79 | 41 | No | 44 | 12.110.1 | 57 | 57 | 41 | 43 | 12.210.3 | 7.0 |
| `fit-content` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 7.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 7.0 |
| `min-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 7.0 |


See also
--------


* The mapped physical properties: [`max-width`](max-width) and [`max-height`](max-height)
* [`writing-mode`](writing-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size>

max-width
=========


The `max-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the maximum width of an element. It prevents the [used value](used_value) of the [`width`](width) property from becoming larger than the value specified by `max-width`.


Try it
------



 `max-width` overrides [`width`](width), but [`min-width`](min-width) overrides `max-width`.


Syntax
------



```
/\* <length> value \*/
max-width: 3.5em;

/\* <percentage> value \*/
max-width: 75%;

/\* Keyword values \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(20em);

/\* Global values \*/
max-width: inherit;
max-width: initial;
max-width: revert;
max-width: revert-layer;
max-width: unset;

```
### Values


 [`<length>`](length)  Defines the `max-width` as an absolute value.

  [`<percentage>`](percentage)  Defines the `max-width` as a percentage of the containing block's width.

  `none`  No limit on the size of the box.

  `max-content`  The intrinsic preferred `max-width`.

  `min-content`  The intrinsic minimum `max-width`.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

  Accessibility concerns
----------------------



Ensure that elements set with a `max-width` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length or `none` |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
max-width =   
  none                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting max width in pixels



In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.

 #### HTML

 
```
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>

```
 #### CSS

 
```
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # width-height-keywords](https://w3c.github.io/csswg-drafts/css-sizing-4/#width-height-keywords) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `max-width` | 1 | 12 | 1CSS 2.1 leaves the behavior of `max-width` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `max-width` to `table` elements. | 7 | 4CSS 2.1 leaves the behavior of `max-width` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Opera supports applying `max-width` to `table` elements. | 1 | 4.4 | 18 | 4CSS 2.1 leaves the behavior of `max-width` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `max-width` to `table` elements. | 14 | 1 | 1.0 |
| `fit-content` | 4625 | 7979 | 3Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | No | 44 | 1172 | 46≤37 | 46 | 4Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | 43 | 1171 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 4622 | 7979 | 663 | No | 44 | 1172 | 46≤37 | 46 | 664 | 43 | 1171 | 5.0 |
| `min-content` | 4625 | 7979 | 663 | No | 44 | 1172 | 46 | 46 | 664 | 43 | 1171 | 5.0 |
| `stretch` | 22 | 79 | No | No | 15 | No | 4.4 | 25 | No | 14 | No | 1.5 |


See also
--------


* [The box model](css_box_model/introduction_to_the_css_box_model), [`box-sizing`](box-sizing)
* [`width`](width), [`min-width`](min-width)
* The mapped logical properties: [`max-inline-size`](max-inline-size), [`max-block-size`](max-block-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/max-width>

max-block-size
==============



The `max-block-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by [`writing-mode`](writing-mode). That is, if the writing direction is horizontal, then `max-block-size` is equivalent to [`max-height`](max-height); if the writing direction is vertical, `max-block-size` is the same as [`max-width`](max-width).

 The other dimension's maximum length is specified using the [`max-inline-size`](max-inline-size) property.

 This is useful because the `max-width` is always used for horizontal sizes and `max-height` is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.

 Any time you would normally use `max-height` or `max-width`, you should instead use `max-block-size` to set the maximum "height" of the content (even though this may not be a vertical value) and `max-inline-size` to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). See [`writing-mode` examples](writing-mode#examples), which show the different writing modes in action.



Try it
------


Syntax
------



```
/\* <length> values \*/
max-block-size: 300px;
max-block-size: 25em;

/\* <percentage> values \*/
max-block-size: 75%;

/\* Keyword values \*/
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content(20em);

/\* Global values \*/
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

```
### Values



The `max-block-size` property's value can be any value that's legal for the [`max-width`](max-width) and [`max-height`](max-height) properties:

  [`<length>`](length)  Defines the `max-block-size` as an absolute value.

  [`<percentage>`](percentage)  Defines the `max-block-size` as a percentage of the containing block's size in block axis.

  `none`  No limit on the size of the box.

  `max-content`  The intrinsic preferred `max-block-size`.

  `min-content`  The intrinsic minimum `max-block-size`.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

  
### How writing-mode affects directionality



The values of `writing-mode` affect the mapping of `max-block-size` to `max-width` or `max-height` as follows:

 

| Values of `writing-mode` | `max-block-size` is equivalent to |
| --- | --- |
| `horizontal-tb`, `lr`  Deprecated , `lr-tb`  Deprecated , `rl`  Deprecated , `rb`  Deprecated , `rb-rl`  Deprecated  | [`max-height`](max-height) |
| `vertical-rl`, `vertical-lr`, `sideways-rl`  Experimental , `sideways-lr`  Experimental , `tb`  Deprecated , `tb-rl`  Deprecated  | [`max-width`](max-width) |

  **Note:** The `writing-mode` values `sideways-lr` and `sideways-rl` were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

   **Note:** The writing modes `lr`, `lr-tb`, `rl`, `rb`, and `rb-tl` are no longer allowed in [HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML) contexts; they may only be used in [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG) 1.x contexts.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | same as [`width`](width) and [`height`](height) |
| [Inherited](inheritance) | no |
| Percentages | block-size of containing block |
| [Computed value](computed_value) | same as [`max-width`](max-width) and [`max-height`](max-height) |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
max-block-size =   
  <'max-width'>    
  

```
Examples
--------


### Setting max-block-size with horizontal and vertical text



In this example, the same text (the opening sentences from [Herman Melville's](https://en.wikipedia.org/wiki/Herman_Melville) novel *[Moby-Dick](https://en.wikipedia.org/wiki/Moby-Dick)*) is presented in both the `horizontal-tb` and `vertical-rl` writing modes.

 Everything else about the two boxes is identical, including the values used for [`max-block-size`](max-block-size).

 #### HTML

 The HTML establishes the two [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) blocks that will be presented with their [`writing-mode`](writing-mode) set using the classes `horizontal` or `vertical`. Both boxes share the `standard-box` class, which establishes coloring, padding, and their respective values of `max-block-size`.

 
```
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how long precisely—having little or
  no money in my purse, and nothing particular to interest me on shore, I
  thought I would sail about a little and see the watery part of the world. It
  is a way I have of driving off the spleen and regulating the circulation.
</div>

```
 #### CSS

 The CSS defines three classes. The first, `standard-box`, is applied to both boxes, as seen above. It provides standard styling including the minimum and maximum block sizes, font size, and so forth.

 After that come the classes `horizontal` and `vertical`, which add the [`writing-mode`](writing-mode) property to the box, with the value set to `horizontal-tb` or `vertical-rl` depending on which class is used.

 
```
.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-max-block-size](https://w3c.github.io/csswg-drafts/css-logical/#propdef-max-block-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `max-block-size` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 5.0 |
| `fit-content` | 57 | 79 | No | No | 44 | 12.1 | 57 | 57 | No | 43 | 12.2 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 5.0 |
| `min-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 5.0 |


See also
--------


* The mapped physical properties: [`max-width`](max-width) and [`max-height`](max-height)
* Setting the other direction's maximum size: [`max-inline-size`](max-inline-size)
* [`writing-mode`](writing-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size>

@media
======



The `@media` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> can be used to apply part of a style sheet based on the result of one or more [media queries](media_queries/using_media_queries). With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

  **Note:** In JavaScript, the rules created using `@media` can be accessed with the [`CSSMediaRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule) CSS object model interface.

 

Try it
------


Syntax
------



The `@media` at-rule may be placed at the top level of your code or nested inside any other [conditional group at-rule](at-rule#conditional_group_rules).

 
```
/\* At the top level of your code \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* Nested within another conditional at-rule \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

```
 For a discussion of media query syntax, please see [Using media queries](media_queries/using_media_queries#syntax).


Description
-----------


### Media types



 *Media types* describe the general category of a device. Except when using the `not` or `only` logical operators, the media type is optional and the `all` type is implied. 

  `all`  Suitable for all devices.

  `print`  Intended for paged material and documents viewed on a screen in print preview mode. (Please see [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media) for information about formatting issues that are specific to these formats.)

  `screen`  Intended primarily for screens.

    **Note:** CSS2.1 and [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) defined several additional media types (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, and `aural`), but they were deprecated in [Media Queries 4](https://drafts.csswg.org/mediaqueries/#media-types) and shouldn't be used.

 
### Media features



 *Media features* describe specific characteristics of the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent), output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses. 

  [`any-hover`](@media/any-hover)   Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4. 

  [`any-pointer`](@media/any-pointer)   Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4. 

  [`aspect-ratio`](@media/aspect-ratio)  Width-to-height aspect ratio of the viewport

  [`color`](@media/color)  Number of bits per color component of the output device, or zero if the device isn't color

  [`color-gamut`](@media/color-gamut)   Approximate range of colors that are supported by the user agent and output device. Added in Media Queries Level 4. 

  [`color-index`](@media/color-index)  Number of entries in the output device's color lookup table, or zero if the device does not use such a table

  
[`device-aspect-ratio`](@media/device-aspect-ratio)  Deprecated 
   Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4. 

  
[`device-height`](@media/device-height)  Deprecated 
   Height of the rendering surface of the output device. Deprecated in Media Queries Level 4. 

  
[`device-width`](@media/device-width)  Deprecated 
  Width of the rendering surface of the output device. Deprecated in Media Queries Level 4.

  [`display-mode`](@media/display-mode)   The display mode of the application, as specified in the web app manifest's [`display`](https://developer.mozilla.org/en-US/docs/Web/Manifest#display) member. Defined in the [Web App Manifest spec](https://w3c.github.io/manifest/#the-display-mode-media-feature). 

  [`dynamic-range`](@media/dynamic-range)  Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device. Added in Media Queries Level 5.

  [`forced-colors`](@media/forced-colors)   Detect whether user agent restricts color palette. Added in Media Queries Level 5. 

  [`grid`](@media/grid)  Does the device use a grid or bitmap screen?

  [`height`](@media/height)  Height of the viewport.

  [`hover`](@media/hover)   Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4. 

  [`inverted-colors`](@media/inverted-colors)   Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5. 

  [`monochrome`](@media/monochrome)  Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome.

  [`orientation`](@media/orientation)  Orientation of the viewport.

  [`overflow-block`](@media/overflow-block)   How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4. 

  [`overflow-inline`](@media/overflow-inline)   Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4. 

  [`pointer`](@media/pointer)   Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4. 

  [`prefers-color-scheme`](@media/prefers-color-scheme)   Detect if the user prefers a light or dark color scheme. Added in Media Queries Level 5. 

  [`prefers-contrast`](@media/prefers-contrast)   Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors. Added in Media Queries Level 5. 

  [`prefers-reduced-motion`](@media/prefers-reduced-motion)   The user prefers less motion on the page. Added in Media Queries Level 5. 

  [`resolution`](@media/resolution)  Pixel density of the output device.

  [`scripting`](@media/scripting)   Detects whether scripting (i.e. JavaScript) is available. Added in Media Queries Level 5. 

  [`update`](@media/update-frequency)   How frequently the output device can modify the appearance of content. Added in Media Queries Level 4. 

  [`video-dynamic-range`](@media/video-dynamic-range)  Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5.

  [`width`](@media/width)  Width of the viewport including width of scrollbar.

  
### Logical operators



 The *logical operators* `not`, `and`, `only`, and `or` can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas. 

  `and`   Used for combining multiple media features together into a single media query, requiring each chained feature to return `true` for the query to be `true`. It is also used for joining media features with media types. 

  `not`   Used to negate a media query, returning `true` if the query would otherwise return `false`. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the `not` operator, you *must also* specify a media type. 

  **Note:** In Level 3, the `not` keyword can't be used to negate an individual media feature expression, only an entire media query.

   `only`   Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using `only`, older browsers would interpret the query `screen and (max-width: 500px)` as `screen`, ignoring the remainder of the query, and applying its styles on all screens. If you use the `only` operator, you *must also* specify a media type. 

  
`,` (comma)   Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is `true`, the entire media statement returns `true`. In other words, lists behave like a logical `or` operator. 

  `or`  Equivalent to the `,` operator. Added in Media Queries Level 4.

  
Accessibility concerns
----------------------



To best accommodate people who adjust a site's text size, use [`em`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values)s when you need a [`<length>`](length) for your [media queries](media_queries/using_media_queries).

 Both [`em`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) and [`px`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) are valid units, but [`em`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) works better if the user changes the browser text size.

 Also consider using Level 4 media queries to improve the user's experience. For example, `prefers-reduced-motion` to [detect if the user has requested that the system minimize the amount of animation](@media/prefers-reduced-motion) or motion it uses.


Security
--------



Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a ["fingerprint"](https://developer.mozilla.org/en-US/docs/Glossary/Fingerprinting) which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

 Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.


Formal syntax
-------------



```
@media =   
  @media [<media-query-list>](media-query-list) { [<stylesheet>](stylesheet) }    
  

```
Examples
--------


### Testing for print and screen media types




```
@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

```
 Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:

 
```
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

```
 For more examples, please see [Using media queries](media_queries/using_media_queries).


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # media-descriptor-table](https://w3c.github.io/csswg-drafts/mediaqueries/#media-descriptor-table) |
| [CSS Conditional Rules Module Level 3 # at-media](https://w3c.github.io/csswg-drafts/css-conditional-3/#at-media) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-device-pixel-ratio` | No | No | 4 | No | No | No | No | No | 4 | No | No | No |
| `-webkit-animation` | 2–36 | No | No | No | 15–23 | 4 | 2–37 | 18–36 | No | 14–24 | 3.2 | 1.0–3.0 |
| `-webkit-device-pixel-ratio` | 1 | 12 | 63Implemented as an alias for `-moz-device-pixel-ratio`. | No | 15 | 3 | ≤37 | 18 | 63Implemented as an alias for `-moz-device-pixel-ratio`. | 14 | 1 | 1.0 |
| `-webkit-max-device-pixel-ratio` | 1 | 12 | 63Implemented as an alias for `max--moz-device-pixel-ratio`. | No | 15 | 3 | ≤37 | 18 | 63Implemented as an alias for `max--moz-device-pixel-ratio`. | 14 | 1 | 1.0 |
| `-webkit-min-device-pixel-ratio` | 1 | 12 | 63Implemented as an alias for `min--moz-device-pixel-ratio`. | No | 15 | 3 | ≤37 | 18 | 63Implemented as an alias for `min--moz-device-pixel-ratio`. | 14 | 1 | 1.0 |
| `-webkit-transform-2d` | 2–36 | No | No | No | 15–23 | 4 | 2–37 | 18–36 | No | 14–24 | 3.2 | 1.0–3.0 |
| `-webkit-transform-3d` | 2 | 12 | 49 | No | 15 | 4 | 4.4 | 18 | 49 | 14 | 3.2 | 1.0 |
| `-webkit-transition` | 2–36 | No | No | No | 15–23 | 4 | 2–37 | 18–36 | No | 14–24 | 3.2 | 1.0–3.0 |
| `@media` | 1 | 12 | 1 | 6 | 9.2 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `any-hover` | 41 | 16 | 64 | No | 28 | 9 | 41 | 41 | 64 | 28 | 9 | 5.0 |
| `any-pointer` | 41 | 12 | 64 | No | 28 | 9 | 41 | 41 | 64 | 28 | 9 | 4.0 |
| `aspect-ratio` | 3 | 12 | 3.5 | 9 | 10 | 5 | ≤37 | 18 | 4 | 10.1 | 4.2 | 1.0 |
| `calc` | 66 | 79 | 59 | No | 53 | 12 | 66 | 66 | 59 | 47 | 12 | 9.0 |
| `color` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `color-gamut` | 58 | 79 | 110 | No | 45 | 10 | 58 | 58 | 110 | 43 | 10 | 7.0 |
| `color-index` | 29 | 79 | No | No | 16 | 8 | 4.4 | 29 | No | 16 | 8 | 2.0 |
| `device-aspect-ratio` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `device-height` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `device-width` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `display-mode` | 42 | 79 | 47Firefox 47 and later support `display-mode` values `fullscreen` and `browser`. Firefox 57 added support for `minimal-ui` and `standalone` values. | No | 29 | 13 | 42 | 42 | 47Firefox 47 and later support `display-mode` values `fullscreen` and `browser`. Firefox 57 added support for `minimal-ui` and `standalone` values. | 29 | 12.2 | 4.0 |
| `dynamic-range` | 98 | 98 | 100 | No | 84 | 13.1 | 98 | 98 | 100 | 68 | 13.4 | 18.0 |
| `forced-colors` | 89 | 79 | 89 | No | No | No | NoSee [bug 970285](https://crbug.com/970285). | NoSee [bug 970285](https://crbug.com/970285). | 89 | No | No | NoSee [bug 970285](https://crbug.com/970285). |
| `grid` | 1 | 12 | 2 | 10 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `height` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `hover` | 38Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See [bug 441613](https://crbug.com/441613). | 12 | 64 | No | 28 | 9 | 38Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See [bug 441613](https://crbug.com/441613). | 50 | 64 | 28 | 9 | 5.0 |
| `inverted-colors` | No | No | No | No | No | 9.1 | No | No | No | No | 10 | No |
| `media_features` | 1 | 12 | 1 | 9 | 9.2 | 3 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `media_query_values` | 66 | 79 | 59 | No | 53 | No | 66 | 66 | 59 | 47 | No | 9.0 |
| `monochrome` | 1 | 79 | 2 | No | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `nested-queries` | 26 | 12 | 11 | No | 12.1 | 7 | 4.4 | 26 | 14 | 12.1 | 7 | 1.5 |
| `orientation` | 3 | 12 | 2 | 9 | 10.6 | 5 | ≤37 | 18 | 4 | 11 | 4.2 | 1.0 |
| `overflow-block` | 113 | 113 | 66 | No | No | No | 113 | 113 | 66 | No | No | No |
| `overflow-inline` | 113 | 113 | 66 | No | No | No | 113 | 113 | 66 | No | No | No |
| `pointer` | 41 | 12 | 64 | No | 28 | 9 | 41 | 50 | 64 | 28 | 9 | 5.0 |
| `prefers-color-scheme` | 76 | 79 | 67 | No | 62 | 12.1 | 76 | 76 | 67 | 54 | 13 | 14.2 |
| `prefers-contrast` | 96 | 96 | 101 | No | 82 | 14.1 | 96 | 96 | 101 | No | 14.5 | 17.0 |
| `prefers-reduced-data` | 85See [bug 1051189](https://crbug.com/1051189). | 85See [bug 1051189](https://crbug.com/1051189). | No | No | 71See [bug 1051189](https://crbug.com/1051189). | No | NoSee [bug 1051189](https://crbug.com/1051189). | 85See [bug 1051189](https://crbug.com/1051189). | No | No | No | No |
| `prefers-reduced-motion` | 74 | 79 | 63 | No | 62 | 10.1 | 74 | 74 | 64 | 53 | 10.3 | 11.0 |
| `prefers-reduced-transparency` | No | No | 113 | No | No | No | No | No | No | No | No | No |
| `range_syntax` | 104 | 104 | 10263Only supports range notations where the feature name comes before any value `(width > 500px)` | No | 90 | 16.4 | 104 | 104 | 10263Only supports range notations where the feature name comes before any value `(width > 500px)` | 71 | 16.4 | 20.0 |
| `resolution` | 29 | 12 | 83.5Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 9 | 1610–15 | 16 | 4.4 | 29 | 84Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 1610.1–14 | 16 | 2.0 |
| `scripting` | NoSee [bug 489957](https://crbug.com/489957). | NoSee [bug 489957](https://crbug.com/489957). | 113 | No | No | No | NoSee [bug 489957](https://crbug.com/489957). | NoSee [bug 489957](https://crbug.com/489957). | 113 | No | No | NoSee [bug 489957](https://crbug.com/489957). |
| `update` | 113 | 113 | 102 | No | No | No | 113 | 113 | 102 | No | No | No |
| `video-dynamic-range` | No | No | 100 | No | No | No | No | No | 100 | No | No | No |
| `width` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using media queries](media_queries/using_media_queries)
* In JavaScript, `@media` can be accessed via the CSS object model interface [`CSSMediaRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule).
* [Extended Mozilla media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#media_features)
* [Extended WebKit media features](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions#media_features)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media>

min()
=====


The `min()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The `min()` function can be used anywhere a [`<length>`](length), [`<frequency>`](frequency), [`<angle>`](angle), [`<time>`](time), [`<percentage>`](percentage), [`<number>`](number), or [`<integer>`](integer) is allowed.


Try it
------



 In the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px). In other words, the maximum width is 200px. Think of the `min()` value as providing the *maximum* value a property can have.


Syntax
------



The `min()` function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.

 The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as [`attr()`](attr), that evaluate to a valid argument type (like [`<length>`](length)).

 You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.


### Notes


* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `max()` and other `min()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the `calc()` function itself.
* The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any `<length>` syntax value.
* You can (and often need to) combine `min()` and `max()` values, or use `min()` within a `clamp()` or `calc()` function.
* You can provide more than two arguments, if you have multiple constraints to apply.
### Formal syntax



```
<min()> =   
  min( <calc-sum>[#](value_definition_syntax#hash_mark) )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Accessibility concerns
----------------------



When using `min()` to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Examples
--------


### Setting a maximum size for a label and input



Another use case for CSS functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.

 Let's look at some CSS:

 
```
input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

```
 Here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. We declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. In other words, the widest that the label and input can be is 400px. The narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small.

 
```
<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # calc-notation](https://w3c.github.io/csswg-drafts/css-values/#calc-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `min` | 79 | 79 | 75 | No | 66 | 11.1 | 79 | 79 | 79 | 57 | 11.3 | 12.0 |


See also
--------


* [`calc()`](calc)
* [`clamp()`](clamp)
* [`max()`](max)
* [CSS Values](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/min>

min-block-size
==============



The `min-block-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the [`min-width`](min-width) or the [`min-height`](min-height) property, depending on the value of [`writing-mode`](writing-mode).

 If the writing mode is vertically oriented, the value of `min-block-size` relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is [`min-inline-size`](min-inline-size), which defines the other dimension of the element.



Try it
------


Syntax
------



```
/\* <length> values \*/
min-block-size: 100px;
min-block-size: 5em;

/\* <percentage> values \*/
min-block-size: 10%;

/\* Keyword values \*/
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content(20em);

/\* Global values \*/
min-block-size: inherit;
min-block-size: initial;
min-block-size: revert;
min-block-size: revert-layer;
min-block-size: unset;

```
### Values


The `min-block-size` property takes the same values as the [`min-width`](min-width) and [`min-height`](min-height) properties.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | same as [`width`](width) and [`height`](height) |
| [Inherited](inheritance) | no |
| Percentages | block-size of containing block |
| [Computed value](computed_value) | same as [`min-width`](min-width) and [`min-height`](min-height) |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
min-block-size =   
  <'min-width'>    
  

```
Examples
--------


### Setting minimum block size for vertical text



#### HTML

 
```
<p class="exampleText">Example text</p>

```
 #### CSS

 
```
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  min-block-size: 200px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-min-block-size](https://w3c.github.io/csswg-drafts/css-logical/#propdef-min-block-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `min-block-size` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 7.0 |
| `fit-content` | 57 | 79 | No | No | 44 | 12.1 | 57 | 57 | No | 43 | 12.2 | 7.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 7.0 |
| `min-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 7.0 |


See also
--------


* The mapped physical properties: [`min-width`](min-width) and [`min-height`](min-height)
* [`writing-mode`](writing-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size>

min-inline-size
===============


The `min-inline-size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the [`min-width`](min-width) or the [`min-height`](min-height) property, depending on the value of [`writing-mode`](writing-mode).


Try it
------


Syntax
------




```
/\* <length> values \*/
min-inline-size: 100px;
min-inline-size: 5em;

/\* <percentage> values \*/
min-inline-size: 10%;

/\* Keyword values \*/
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content(20em);

/\* Global values \*/
min-inline-size: inherit;
min-inline-size: initial;
min-inline-size: revert;
min-inline-size: revert-layer;
min-inline-size: unset;

```
 If the writing mode is vertically oriented, the value of `min-inline-size` relates to the minimum height of the element; otherwise, it relates to the minimum width of the element. A related property is [`min-block-size`](min-block-size), which defines the other dimension of the element.


### Values


The `min-inline-size` property takes the same values as the [`min-width`](min-width) and [`min-height`](min-height) properties.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | same as [`width`](width) and [`height`](height) |
| [Inherited](inheritance) | no |
| Percentages | inline-size of containing block |
| [Computed value](computed_value) | same as [`min-width`](min-width) and [`min-height`](min-height) |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
min-inline-size =   
  <'min-width'>    
  

```
Examples
--------


### Setting minimum inline size for vertical text



#### HTML

 
```
<p class="exampleText">Example text</p>

```
 #### CSS

 
```
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-min-inline-size](https://w3c.github.io/csswg-drafts/css-logical/#propdef-min-inline-size) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `min-inline-size` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 7.0 |
| `fit-content` | 57 | 79 | 41 | No | 44 | 12.1 | 57 | 57 | 41 | 43 | 12.2 | 7.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 7.0 |
| `min-content` | 57 | 79 | 6641 | No | 44 | 12.1 | 57 | 57 | 6641 | 43 | 12.2 | 7.0 |


See also
--------


* The mapped physical properties: [`min-width`](min-width) and [`min-height`](min-height)
* [`writing-mode`](writing-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size>

mod()
=====



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `mod()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript [remainder operator (`%`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.

 
>  For example, the CSS `mod(21, -4)` function returns the remainder of `-1`. When dividing 21 by -4, the result is 5 with a remainder of -1. The full calculation is `21 / -4 = -4 * 5 - 1`.
> 
>  



Syntax
------



```
/\* Unitless <number> \*/
line-height: mod(7, 2); /\* 1 \*/
line-height: mod(14, 5); /\* 4 \*/
line-height: mod(3.5, 2); /\* 1.5 \*/

/\* Unit based <percentage> and <dimension> \*/
margin: mod(15%, 2%); /\* 1% \*/
margin: mod(18px, 4px); /\* 2px \*/
margin: mod(19rem, 5rem); /\* 4rem \*/
margin: mod(29vmin, 6vmin); /\* 5vmin \*/
margin: mod(1000px, 29rem); /\* 72px - if root font-size is 16px \*/

/\* Negative/positive values \*/
rotate: mod(100deg, 30deg); /\* 10deg \*/
rotate: mod(135deg, -90deg); /\* -45deg \*/
rotate: mod(-70deg, 20deg); /\* 10deg \*/
rotate: mod(-70deg, -15deg); /\* -10deg \*/

/\* Calculations \*/
scale: mod(10 * 2, 1.7); /\* 1.3 \*/
rotate: mod(10turn, 18turn / 3); /\* 4turn \*/
transition-duration: mod(20s / 2, 3000ms * 2); /\* 4s \*/

```
### Parameter



The `mod(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, <number>, <dimension>, or <percentage>, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as [`<length>`](length), [`<angle>`](angle), [`<time>`](time), or [`<frequency>`](frequency) to be valid.

  `dividend`  A calculation that resolves to a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) representing the dividend.

  `divisor`  A calculation that resolves to a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) representing the divisor.

  
### Return value



Returns a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) (corresponds to the parameters' type) representing the modulus, that is, the operation left over.

 * If `divisor` is `0`, the result is `NaN`.
* If `dividend` is `infinite`, the result is `NaN`.
* If `divisor` is positive the result is positive (`0⁺`), and if `divisor` is negative the result is negative (`0⁻`).


### Formal syntax



```
<mod()> =   
  mod( <calc-sum> , <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # funcdef-mod](https://w3c.github.io/csswg-drafts/css-values/#funcdef-mod) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mod` | No | No | 109 | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`round()`](round)
* [`rem()`](rem)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mod>

min-height
==========


The `min-height` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the minimum height of an element. It prevents the [used value](used_value) of the [`height`](height) property from becoming smaller than the value specified for `min-height`.


Try it
------



 The element's height is set to the value of `min-height` whenever `min-height` is larger than [`max-height`](max-height) or [`height`](height).


Syntax
------



```
/\* <length> value \*/
min-height: 3.5em;

/\* <percentage> value \*/
min-height: 10%;

/\* Keyword values \*/
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);

/\* Global values \*/
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: revert-layer;
min-height: unset;

```
### Values


 [`<length>`](length)  Defines the `min-height` as an absolute value.

  [`<percentage>`](percentage)  Defines the `min-height` as a percentage of the containing block's height.

  `auto`  The browser will calculate and select a `min-height` for the specified element.

  `max-content`  The intrinsic preferred `min-height`.

  `min-content`  The intrinsic minimum `min-height`.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| [Inherited](inheritance) | no |
| Percentages | The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as `0`. |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
min-height =   
  auto                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting min-height



```
table {
  min-height: 75%;
}

form {
  min-height: 0;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # width-height-keywords](https://w3c.github.io/csswg-drafts/css-sizing/#width-height-keywords) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `min-height` | 1 | 12 | 3CSS 2.1 leaves the behavior of `min-height` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `min-height` to `table` elements. | 7In Internet Explorer 10 and 11, a `min-height` declaration on a column-direction flex container doesn't apply to the container's flex items. See [Flexbug #3](https://github.com/philipwalton/flexbugs#3-min-height-on-a-column-flex-container-wont-apply-to-its-flex-items) for more info. | 4CSS 2.1 leaves the behavior of `min-height` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Opera supports applying `min-height` to `table` elements. | 1.3 | 4.4 | 18 | 4CSS 2.1 leaves the behavior of `min-height` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `min-height` to `table` elements. | 14 | 1 | 1.0 |
| `auto` | 21 | 79 | 16–22Firefox 18 and later used `auto` as the initial value for `min-height`. | No | 12.1 | 7 | 37 | 25 | 16–22Firefox 18 and later used `auto` as the initial value for `min-height`. | 14 | 7 | 1.5 |
| `fit-content` | 4625 | 7979 | 3Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | No | 44 | 1172 | 46≤37 | 46 | 4Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | 43 | 1171 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 46 | 79 | 663 | No | 44 | 119 | 46 | 46 | 664 | 43 | 119 | 5.0 |
| `min-content` | 46 | 79 | 663 | No | 44 | 119 | 46 | 46 | 664 | 43 | 119 | 5.0 |
| `stretch` | 28 | 79 | No | No | 15 | 9 | 4.4 | 28 | No | 15 | 9 | 1.5 |


See also
--------


* [The box model](css_box_model/introduction_to_the_css_box_model), [`box-sizing`](box-sizing)
* [`height`](height), [`max-height`](max-height)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/min-height>

min-width
=========


The `min-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the minimum width of an element. It prevents the [used value](used_value) of the [`width`](width) property from becoming smaller than the value specified for `min-width`.


Try it
------



 The element's width is set to the value of `min-width` whenever `min-width` is larger than [`max-width`](max-width) or [`width`](width).


Syntax
------



```
/\* <length> value \*/
min-width: 3.5em;

/\* <percentage> value \*/
min-width: 10%;

/\* Keyword values \*/
min-width: max-content;
min-width: min-content;
min-width: fit-content(20em);

/\* Global values \*/
min-width: inherit;
min-width: initial;
min-width: revert;
min-width: revert-layer;
min-width: unset;

```
### Values


 [`<length>`](length)  Defines the `min-width` as an absolute value.

  [`<percentage>`](percentage)  Defines the `min-width` as a percentage of the containing block's width.

  `auto`  The browser will calculate and select a `min-width` for the specified element.

  `max-content`  The intrinsic preferred `min-width`.

  `min-content`  The intrinsic minimum `min-width`.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
min-width =   
  auto                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting minimum element width



```
table {
  min-width: 75%;
}

form {
  min-width: 0;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # min-size-properties](https://w3c.github.io/csswg-drafts/css-sizing/#min-size-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `min-width` | 1 | 12 | 1CSS 2.1 leaves the behavior of `min-width` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `min-width` to `table` elements. | 7 | 4CSS 2.1 leaves the behavior of `min-width` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Opera supports applying `min-width` to `table` elements. | 1 | 4.4 | 18 | 4CSS 2.1 leaves the behavior of `min-width` with [`table`](https://developer.mozilla.org/docs/Web/HTML/Element/table) undefined. Firefox supports applying `min-width` to `table` elements. | 10.1 | 1 | 1.0 |
| `auto` | 21Chrome uses `auto` as the initial value for `min-width`. | 12Edge uses `auto` as the initial value for `min-width`. | 3416–22Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`. | No | 12.1Opera uses `auto` as the initial value for `min-width`. | 7 | 37Chrome uses `auto` as the initial value for `min-width`. | 25Chrome uses `auto` as the initial value for `min-width`. | 3416–22Firefox 18 and later (until the value was removed), used `auto` as the initial value for `min-width`. | 14Opera uses `auto` as the initial value for `min-width`. | 7 | 1.5Samsung Internet uses `auto` as the initial value for `min-width`. |
| `fit-content` | 4625 | 7979 | 3Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | No | 3315 | 117 | 46≤37 | 46 | 4Firefox implements the definitions given in CSS3 Basic Box. This defines `available` and not `fit-available`. Also, the definition of `fit-content` is simpler than in CSS3 Sizing. | 33 | 117 | 5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 4625 | 7979 | 663 | No | 3315 | 112 | 46≤37 | 46 | 664 | 33 | 111 | 5.0 |
| `min-content` | 462525–48 | 7979 | 663 | No | 33≤15≤15–35 | 112 | 464.44.4–48 | 462525–48 | 664 | 33≤14≤14–35 | 111 | 5.01.51.5–5.0 |
| `stretch` | 22 | 79 | No | No | 15 | No | 4.4 | 25 | No | 14 | No | 1.5 |


See also
--------


* [`width`](width), [`max-width`](max-width)
* The [box model](css_box_model/introduction_to_the_css_box_model), [`box-sizing`](box-sizing)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/min-width>

minmax()
========


The `minmax()` [CSS function](css_functions) defines a size range greater than or equal to *min* and less than or equal to *max*. It is used with [CSS Grids](css_grid_layout).


Try it
------


Syntax
------




```
/\* <inflexible-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> values \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

```
 A function taking two parameters, *min* and *max*.

 Each parameter can be a `<length>`, a `<percentage>`, a `<flex>` value, or one of the keyword values `max-content`, `min-content`, or `auto`.

 If *max* < *min*, then *max* is ignored and `minmax(min,max)` is treated as *min*. As a maximum, a [`<flex>`](flex_value) value sets the flex factor of a grid track; it is invalid as a minimum.


### Values


 [`<length>`](length)  A non-negative length.

  [`<percentage>`](percentage)  A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `<percentage>` must be treated as `auto`. The [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

  [`<flex>`](flex_value)  A non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

  `max-content`  Represents the largest max-content contribution of the grid items occupying the grid track.

  `min-content`  Represents the largest min-content contribution of the grid items occupying the grid track.

  `auto`  As a maximum, identical to `max-content`. As a minimum it represents the largest minimum size (as specified by [`min-width`](min-width)/[`min-height`](min-height)) of the grid items occupying the grid track.

  ### Formal syntax


Error: could not find syntax for this item### CSS properties



`minmax()` function can be used within:

 * [`grid-template-columns`](grid-template-columns)
* [`grid-template-rows`](grid-template-rows)
* [`grid-auto-columns`](grid-auto-columns)
* [`grid-auto-rows`](grid-auto-rows)


Examples
--------


### CSS



```
#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

```
### HTML



```
<div id="container">
  <div>Item as wide as the content, but at most 300 pixels.</div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax](https://w3c.github.io/csswg-drafts/css-grid/#valdef-grid-template-columns-minmax) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `minmax` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |


See also
--------


* Grid Layout Guide: *[Basic concepts of grid layout - track sizing with minmax()](css_grid_layout/basic_concepts_of_grid_layout#track_sizing_and_minmax)*
* [CSS grids, logical values and writing modes](css_grid_layout/css_grid_logical_values_and_writing_modes)
* Video tutorial: *[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/minmax>

<time>
======


The `<time>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a time value expressed in seconds or milliseconds. It is used in [`animation`](animation), [`transition`](transition), and related properties.


Syntax
------



The `<time>` data type consists of a [`<number>`](number) followed by one of the units listed below. Optionally, it may be preceded by a single `+` or `-` sign. As with all dimensions, there is no space between the unit literal and the number.

  **Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0s` or `0ms`.

 
### Units



 `s`  Represents a time in seconds. Examples: `0s`, `1.5s`, `-60s`.

  `ms`  Represents a time in milliseconds. Examples: `0ms`, `150.25ms`, `-60000ms`.

    **Note:** Conversion between `s` and `ms` follows the logical `1s` = `1000ms`.

 
Examples
--------


### Valid times



```
12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, although capital letters are not recommended.
+0s         Zero with a leading + and a unit
-0ms        Zero with a leading - and a unit

```
### Invalid times



```
0           Although unitless zero is allowed for <length>s, it's invalid for <time>s.
12.0        This is a <number>, not a <time>, because it's missing a unit.
7 ms        No space is allowed between the number and the unit.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # time](https://w3c.github.io/csswg-drafts/css-values/#time) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `time` | 1 | 12 | 4 | 9 | 10.1 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`<time-percentage>`](time-percentage)
* [CSS Values and Units](css_values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/time>

@namespace
==========


`@namespace` is an <at-rule> that defines [XML namespaces](https://developer.mozilla.org/en-US/docs/Namespaces) to be used in a [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS) [style sheet](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet).


Try it
------


Syntax
------



```
/\* Default namespace \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* Prefixed namespace \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";

```
Description
-----------



The defined namespaces can be used to restrict the [universal](universal_selectors), [type](type_selectors), and [attribute](attribute_selectors) [selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) to only select elements within that namespace. The `@namespace` rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

 Any `@namespace` rules must follow all [`@charset`](@charset) and [`@import`](@import) rules, and precede all other at-rules and [style declarations](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) in a style sheet.

 `@namespace` can be used to define the **default namespace** for the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements in that namespace.

 The `@namespace` rule can also be used to define a **namespace prefix**. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace *and* name of the element or attribute matches.

 In [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5), known [foreign elements](https://html.spec.whatwg.org/#foreign-elements) will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the [<svg>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg) and [<math>](https://developer.mozilla.org/en-US/docs/Web/MathML/Element/math) elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`).

  **Note:** In XML, unless a prefix is defined directly on an attribute (*e.g.*, `xlink:href`), that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behavior, the default namespace in CSS does not apply to attribute selectors.

 
Formal syntax
-------------



```
@namespace =   
  @namespace <namespace-prefix>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) [<string>](string) [|](value_definition_syntax#single_bar) <url> []](value_definition_syntax#brackets) ;    
  
<namespace-prefix> =   
  [<ident>](ident)    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Specifying default and prefixed namespaces



```
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace \*/
a {
}

/\* This matches all SVG <a> elements \*/
svg|a {
}

/\* This matches both XHTML and SVG <a> elements \*/
\*|a {
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Namespaces Module Level 3 # declaration](https://w3c.github.io/csswg-drafts/css-namespaces/#declaration) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@namespace` | 1 | 12 | 1 | 9 | 8 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Namespaces crash course](https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace>

negative
========


When defining custom counter styles, the `negative` descriptor lets you alter the representations of negative counter values, by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.


Syntax
------



```
/\* <symbol> values \*/
negative: "-"; /\* Prepends '-' if value is negative \*/
negative: "(" ")"; /\* Surrounds value by '(' and ')' if it is negative \*/

```
### Values


 first `<symbol>`
  This symbol will be prepended to the representation when the counter is negative.

  second `<symbol>`
  If present, this symbol will be appended to the representation when the counter is negative.

  Description
-----------


If the counter value is negative, the symbol provided as value for the descriptor is prepended to the counter representation; and a second symbol if specified, will be appended to the representation. The negative descriptor has effect only if the `system` value is `symbolic`, `alphabetic`, `numeric`, `additive`, or `extends`, if the extended counter style itself uses a negative sign. If the negative descriptor is specified for other systems that don't support negative counter values, then the descriptor is ignored.

Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `"-" hyphen-minus` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
negative =   
  <symbol> <symbol>[?](../value_definition_syntax#question_mark)    
  
<symbol> =   
  [<string>](../string)        [|](../value_definition_syntax#single_bar)  
  <image>         [|](../value_definition_syntax#single_bar)  
  [<custom-ident>](../custom-ident)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Rendering negative counters



#### HTML

 
```
<ol class="list" start="-3">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

```
 #### CSS

 
```
@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "(-" ")";
}

.list {
  list-style: neg;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-system](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-system) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `negative` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/negative>

:nth-child()
============


The `:nth-child()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements based on their position among a group of siblings.


Try it
------



 Note that, in the `element:nth-child()` syntax, the child count includes children of any element type; but it is considered a match only if the element *at that child position* is of the specified element type.


Syntax
------



`:nth-child()` takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.

 
```
:nth-child(<nth> [of <complex-selector-list>]?) {
  /\* ... \*/
}

```

### Keyword values


 `odd`  Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.

  `even`  Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

  ### Functional notation


 `<An+B>`  Represents elements whose numeric position in a series of siblings matches the pattern `An+B`, for every positive integer or zero value of `n`, where:

 * `A` is an integer step size,
* `B` is an integer offset,
* `n` is all nonnegative integers, starting from 0.

 It can be read as the `An+B`-th element of a list. The `A` and `B` must both have [`<integer>`](integer) values.

  Examples
--------


### Example selectors


 
`tr:nth-child(odd)` or `tr:nth-child(2n+1)`
  Represents the odd rows of an HTML table: 1, 3, 5, etc.

  
`tr:nth-child(even)` or `tr:nth-child(2n)`
  Represents the even rows of an HTML table: 2, 4, 6, etc.

  `:nth-child(7)`  Represents the seventh element.

  `:nth-child(5n)`  Represents elements **5** [=5×1], **10** [=5×2], **15** [=5×3], **etc.** The first one to be returned as a result of the formula is **0** [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas `n` starts from 0. This may seem weird at first, but it makes more sense when the `B` part of the formula is `>0`, like in the next example.

  `:nth-child(n+7)`  Represents the seventh and all following elements: **7** [=0+7], **8** [=1+7], **9** [=2+7], **etc.**

  `:nth-child(3n+4)`  Represents elements **4** [=(3×0)+4], **7** [=(3×1)+4], **10** [=(3×2)+4], **13** [=(3×3)+4], **etc.**

  `:nth-child(-n+3)`  Represents the first three elements. [=-0+3, -1+3, -2+3]

  `p:nth-child(n)`  Represents every `<p>` element in a group of siblings. This selects the same elements as a simple `p` selector (although with a higher specificity).

  
`p:nth-child(1)` or `p:nth-child(0n+1)`
  Represents every `<p>` that is the first element in a group of siblings. This is the same as the [`:first-child`](:first-child) selector (and has the same specificity).

  `p:nth-child(n+8):nth-child(-n+15)`  Represents the eighth through the fifteenth `<p>` elements of a group of siblings.

  ### Detailed example



#### HTML

 
```
<h3>
  <code>span:nth-child(2n+1)</code>, WITHOUT an <code>&lt;em&gt;</code> among
  the child elements.
</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 5, and 7 are selected.<br />
  3 is used in the counting because it is a child, but it isn't selected because
  it isn't a <code>&lt;span&gt;</code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, WITH an <code>&lt;em&gt;</code> among the
  child elements.
</h3>
<p>
  Children 1, 4, 6, and 8 are selected.<br />
  3 isn't used in the counting or selected because it is an
  <code>&lt;em&gt;</code>, not a <code>&lt;span&gt;</code>, and
  <code>nth-of-type</code> only selects children of that type. The
  <code>&lt;em&gt;</code> is completely skipped over and ignored.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

```
 #### CSS

 
```
html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # nth-child-pseudo](https://w3c.github.io/csswg-drafts/selectors/#nth-child-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:nth-child` | 1 | 12 | 3.5 | 9 | 9.5Before Opera 15, Opera does not handle dynamically inserted elements for `:nth-child()`. | 3.1 | ≤37 | 18 | 4 | 10.1Before Opera 15, Opera does not handle dynamically inserted elements for `:nth-child()`. | 2 | 1.0 |
| `no_parent_required` | 57 | 79 | 52 | No | 44 | No | 57 | 57 | 52 | 43 | No | 7.0 |
| `of_syntax` | 111 | 111 | 113 | No | 97 | 9 | 111 | 111 | 113 | No | 9 | No |


See also
--------


* [`:nth-of-type`](:nth-of-type), [`:nth-last-child`](:nth-last-child)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child>

:nth-last-child()
=================


The `:nth-last-child()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements based on their position among a group of siblings, counting from the end.


Try it
------


Syntax
------



The `nth-last-child` pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

 
```
:nth-last-child(<nth> [of <complex-selector-list>]?) {
  /\* ... \*/
}

```

### Keyword values


 `odd`  Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.

  `even`  Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.

  ### Functional notation


 `<An+B>`  Represents elements whose numeric position in a series of siblings matches the pattern `An+B`, for every positive integer or zero value of `n`, where:

 * `A` is an integer step size,
* `B` is an integer offset,
* `n` is all nonnegative integers, starting from 0.

 It can be read as the `An+B`-th element of a list. The index of the first element, counting from the end, is `1`. The `A` and `B` must both have [`<integer>`](integer) values.

  Examples
--------


### Example selectors


 
`tr:nth-last-child(odd)` or `tr:nth-last-child(2n+1)`
  Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.

  
`tr:nth-last-child(even)` or `tr:nth-last-child(2n)`
  Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.

  `:nth-last-child(7)`  Represents the seventh element, counting from the end.

  `:nth-last-child(5n)`  Represents elements 5, 10, 15, etc., counting from the end.

  `:nth-last-child(3n+4)`  Represents elements 4, 7, 10, 13, etc., counting from the end.

  `:nth-last-child(-n+3)`  Represents the last three elements among a group of siblings.

  
`p:nth-last-child(n)` or `p:nth-last-child(n+1)`
  Represents every `<p>` element among a group of siblings. This is the same as a simple `p` selector. (Since `n` starts at zero, while the last element begins at one, `n` and `n+1` will both select the same elements.)

  
`p:nth-last-child(1)` or `p:nth-last-child(0n+1)`
  Represents every `<p>` that is the first element among a group of siblings, counting from the end. This is the same as the [`:last-child`](:last-child) selector.

  ### Table example



#### HTML

 
```
<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>

```
 #### CSS

 
```
table {
  border: 1px solid blue;
}

/\* Selects the last three elements \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* Selects every element starting from the second to last item \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* Select only the last second element \*/
tr:nth-last-child(2) {
  font-weight: 600;
}

```
 #### Result



### Quantity query



A *quantity query* styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the `nth-last-child` pseudo-class and the [general sibling combinator](general_sibling_combinator).

 #### HTML

 
```
<h4>A list of four items (styled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

<h4>A list of two items (unstyled):</h4>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>

```
 #### CSS

 
```
/\* If there are at least three list items,
 style them all \*/
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # nth-last-child-pseudo](https://w3c.github.io/csswg-drafts/selectors/#nth-last-child-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:nth-last-child` | 4 | 12 | 3.5 | 9 | 9 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `no_parent_required` | 57 | 79 | 52 | No | 44 | No | 57 | 57 | 52 | 43 | No | 7.0 |
| `of_syntax` | NoSee [bug 304163](https://crbug.com/304163). | NoSee [bug 304163](https://crbug.com/304163). | 113 | No | NoSee [bug 304163](https://crbug.com/304163). | 9 | NoSee [bug 304163](https://crbug.com/304163). | NoSee [bug 304163](https://crbug.com/304163). | 113 | NoSee [bug 304163](https://crbug.com/304163). | 9 | NoSee [bug 304163](https://crbug.com/304163). |


See also
--------


* [`:nth-child`](:nth-child), [`:nth-last-of-type`](:nth-last-of-type)
* [Quantity Queries for CSS](https://alistapart.com/article/quantity-queries-for-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child>

:nth-last-col()
===============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `:nth-last-col()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) is designed for tables and grids. It accepts the An+B notation such as used with the [`:nth-child`](:nth-child) selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid.

 
```
/\* Selects every odd column in a table \*/
:nth-last-col(odd) {
  background-color: pink;
}

```


Syntax
------



The `nth-last-col()` pseudo-class is specified with a single argument, which represents the pattern for matching elements. It uses `:nth-last-col(An+B)` syntax.

 See [`:nth-child`](:nth-child) for a more detailed explanation of its syntax.

 
```
:nth-last-col(An + B) {
  /\* ... \*/
}

```

Examples
--------


### Basic example



#### HTML

 
```
<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

```
 #### CSS

 
```
td {
  border: 1px solid #ccc;
  padding: 0.2em;
}

/\* Odd columns starting with the final column of the table \*/
:nth-last-col(2n + 1) {
  background-color: pink;
}

```
 #### Result



Specifications
--------------



**No specification found**No specification data found for `css.selectors.nth-last-col`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------


See also
--------


* [`:nth-child`](:nth-child), [`:nth-last-of-type`](:nth-last-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-col>

:nth-last-of-type()
===================


The `:nth-last-of-type()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements based on their position among siblings of the same type (tag name), counting from the end.


Try it
------


Syntax
------



The `nth-last-of-type` pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

 See [`:nth-last-child`](:nth-last-child) for a more detailed explanation of its syntax.

 
```
:nth-last-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}

```

Examples
--------


### HTML



```
<div>
  <span>This is a span.</span>
  <span>This is another span.</span>
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span>
  <del>This is struck through.</del>
  <span>Here is one last span.</span>
</div>

```
### CSS



```
span:nth-last-of-type(2) {
  background-color: lime;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # nth-last-of-type-pseudo](https://w3c.github.io/csswg-drafts/selectors/#nth-last-of-type-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:nth-last-of-type` | 4 | 12Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type. | 3.5 | 9Internet Explorer treats all unknown elements (such as custom elements) as the same element type. | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:nth-last-child`](:nth-last-child), [`:nth-of-type`](:nth-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type>

:not()
======


The `:not()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the *negation pseudo-class*.


Try it
------



 The `:not()` pseudo-class has a number of [quirks, tricks, and unexpected results](#description) that you should be aware of before using it.


Syntax
------



The `:not()` pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a [pseudo-element](pseudo-elements).

 
```
:not(<complex-selector-list>) {
  /\* ... \*/
}

```

Description
-----------



There are several unusual effects and outcomes when using `:not()` that you should keep in mind when using it:

 * Useless selectors can be written using this pseudo-class. For example, `:not(*)` matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.
* This pseudo-class can increase the <specificity> of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors.
* The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written [`:not(:is(argument))`](:is).
* `:not(.foo)` will match anything that isn't `.foo`, *including [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) and [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).*
* This selector will match everything that is "not an X". This may be surprising when used with [descendant combinators](descendant_combinator), since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), since [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr), [`<tbody>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th), [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td), [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption), etc. can all match the `:not(table)` part of the selector.
* You can negate several selectors at the same time. Example: `:not(.foo, .bar)` is equivalent to `:not(.foo):not(.bar)`.
* If any selector passed to the `:not()` pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use [`:is()`](:is) pseudo-class, which accepts a forgiving selector list. For example `:not(.foo, :invalid-pseudo-class)` will invalidate a whole rule, but `:not(:is(.foo, :invalid-pseudo-class))` will match any (*including [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) and [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)*) element that isn't `.foo`.


Examples
--------


### Basic set of :not() examples



#### HTML

 
```
<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
<h2>
  <span class="foo">foo inside h2</span>
  <span class="bar">bar inside h2</span>
</h2>

```
 #### CSS

 
```
.fancy {
  text-shadow: 2px 2px 3px gold;
}

/\* <p> elements that don't have a class `.fancy` \*/
p:not(.fancy) {
  color: green;
}

/\* Elements that are not <p> elements \*/
body :not(p) {
  text-decoration: underline;
}

/\* Elements that are not <div>s or `.fancy` \*/
body :not(div):not(.fancy) {
  font-weight: bold;
}

/\* Elements that are not <div>s or `.fancy` \*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/\* Elements inside an <h2> that aren't a <span> with a class of `.foo` \*/
h2 :not(span.foo) {
  color: red;
}

```
 #### Result



### :not() with invalid selectors



This example shows the use of `:not()` with invalid selectors and how to prevent invalidation.

 #### HTML

 
```
<p class="foo">I am a paragraph with .foo</p>
<p class="bar">I am a paragraph with .bar</p>
<div>I am a div without a class</div>
<div class="foo">I am a div with .foo</div>
<div class="bar">I am a div with .bar</div>
<div class="foo bar">I am a div with .foo and .bar</div>

```
 #### CSS

 
```
/\* Invalid rule, does nothing \*/
p:not(.foo, :invalid-pseudo-class) {
  color: red;
  font-style: italic;
}

/\* Select all <p> elements without the `foo` class \*/
p:not(:is(.foo, :invalid-pseudo-class)) {
  color: green;
  border-top: dotted thin currentcolor;
}

/\* Select all <div> elements without the `foo` or the `bar` class \*/
div:not(.foo, .bar) {
  color: red;
  font-style: italic;
}

/\* Select all <div> elements without the `foo` or the `bar` class \*/
div:not(:is(.foo, .bar)) {
  border-bottom: dotted thin currentcolor;
}

```
 #### Result


 The `p:not(.foo, :invalid-pseudo-class)` rule is invalid because it contains an invalid selector. The `:is()` pseudo-class accepts a forgiving selector list, so the `:is(.foo, :invalid-pseudo-class)` rule is valid and equivalent to `:is(.foo)`. Thus, the `p:not(:is(.foo, :invalid-pseudo-class))` rule is valid and equivalent to `p:not(.foo)`.

 If `:invalid-pseudo-class` was a valid selector, the first two rules above would still be equivalent (the last two rules showcase that). The use of `:is()` makes the rule more robust.


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # negation](https://w3c.github.io/csswg-drafts/selectors/#negation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:not` | 1 | 12 | 1 | 9 | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |
| `selector_list` | 88 | 88 | 84 | No | 74 | 9 | 88 | 88 | 84 | No | 9 | 15.0 |


See also
--------


* [Pseudo-classes](pseudo-classes)
* [Pseudo-classes and pseudo-elements](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
* Other functional CSS pseudo-classes:
	+ [`:has()`](:has)
	+ [`:is()`](:is)
	+ [`:where()`](:where)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:not>

:nth-col()
==========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `:nth-col()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) is designed for tables and grids. It accepts the An+B notation such as used with the [`:nth-child`](:nth-child) selector, using this to target every nth column. The values odd and even are also valid.

 
```
/\* Selects every odd column in a table \*/
:nth-col(odd) {
  background-color: pink;
}

```


Syntax
------



The `nth-col()` pseudo-class is specified with a single argument, which represents the pattern for matching elements. It uses `:nth-col(An+B)` syntax.

 See [`:nth-child`](:nth-child) for a more detailed explanation of its syntax.

 
```
:nth-col(An + B) {
  /\* ... \*/
}

```

Examples
--------


### Basic example



#### HTML

 
```
<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

```
 #### CSS

 
```
td {
  border: 1px solid #ccc;
  padding: 0.2em;
}

/\* Odd columns \*/
:nth-col(2n + 1) {
  background-color: pink;
}

```
 #### Result



Specifications
--------------



**No specification found**No specification data found for `css.selectors.nth-col`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------


See also
--------


* [`:nth-child`](:nth-child), [`:nth-last-of-type`](:nth-last-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-col>

:nth-of-type()
==============


The `:nth-of-type()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements based on their position among siblings of the same type (tag name).


Try it
------


Syntax
------



The `nth-of-type` pseudo-class is specified with a single argument, which represents the pattern for matching elements.

 See [`:nth-child`](:nth-child) for a more detailed explanation of its syntax.

 
```
:nth-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}

```

Examples
--------


### Basic example



#### HTML

 
```
<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

```
 #### CSS

 
```
/\* Odd paragraphs \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* Even paragraphs \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* First paragraph \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) \*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}

```
 #### Result


  **Note:** There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on `:nth-of-type` location **and** a class, as shown in the example above.

 
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # nth-of-type-pseudo](https://w3c.github.io/csswg-drafts/selectors/#nth-of-type-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:nth-of-type` | 1 | 12Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type. | 3.5 | 9Internet Explorer treats all unknown elements (such as custom elements) as the same element type. | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:nth-child`](:nth-child), [`:nth-last-of-type`](:nth-last-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type>

<number>
========


The `<number>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a number, being either an integer or a number with a fractional component.


Syntax
------


The syntax of `<number>` extends the syntax of [`<integer>`](integer). A fractional value is represented by a `.` followed by one or more decimal digits, and may be appended to an integer. There is no unit associated with numbers.

Interpolation
-------------


When animated, values of the `<number>` CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](easing-function) associated with the animation.

Examples
--------


### Valid numbers



```
12          A raw <integer> is also a <number>.
4.01        Positive fraction
-456.8      Negative fraction
0.0         Zero
+0.0        Zero, with a leading +
-0.0        Zero, with a leading -
.60         Fractional number without a leading zero
10e3        Scientific notation
-3.4e-2     Complicated scientific notation

```
### Invalid numbers



```
12.         Decimal points must be followed by at least one digit.
+-12.2      Only one leading +/- is allowed.
12.1.1      Only one decimal point is allowed.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # numbers](https://w3c.github.io/csswg-drafts/css-values/#numbers) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `number` | 1 | 12 | 1 | 5 | 2 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `scientific_notation` | 43 | 12 | 29 | 11 | 30 | 10.1 | 43 | 43 | 29 | 30 | 10.3 | 4.0 |


See also
--------


* [`<integer>`](integer)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/number>

offset-distance
===============


The `offset-distance` CSS property specifies a position along an [`offset-path`](offset-path) for an element to be placed.


Try it
------


Syntax
------




```
/\* Default value \*/
offset-distance: 0;

/\* the middle of the offset-path \*/
offset-distance: 50%;

/\* a fixed length positioned along the path \*/
offset-distance: 40px;

/\* Global values \*/
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;

```
  `[`<length-percentage>`](length-percentage)`  A length that specifies how far the element is along the path (defined with [`offset-path`](offset-path)).

 100% represents the total length of the path (when the `offset-path` is defined as a basic shape or `path()`).

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the total path length |
| [Computed value](computed_value) | for [`<length>`](length) the absolute value, otherwise a percentage |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
offset-distance =   
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Using offset-distance in an animation



The motion aspect in CSS Motion Path typically comes from animating the `offset-distance` property. If you want to animate an element along its full path, you would define its [`offset-path`](offset-path) and then set up an animation that takes the `offset-distance` from `0%` to `100%`.

 #### HTML

 
```
<div id="motion-demo"></div>

```
 #### CSS

 
```
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-distance-property](https://drafts.fxtf.org/motion/#offset-distance-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `offset-distance` | 5546 | 7979 | 72 | No | 4233 | preview | 5546 | 5546 | No | 4233 | No | 6.05.0 |


See also
--------


* [`offset`](offset)
* [`offset-anchor`](offset-anchor)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)
* [`offset-rotate`](offset-rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance>

offset
======



The `offset` CSS [shorthand property](shorthand_properties) sets all the properties required for animating an element along a defined path.

  **Note:** Early versions of the spec called this property `motion`.

 

Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)
* [`offset-rotate`](offset-rotate)


Syntax
------



```
/\* Offset position \*/
offset: auto;
offset: 10px 30px;
offset: none;

/\* Offset path \*/
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/\* Offset path with distance and/or rotation \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* Including offset anchor \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

/\* Global values \*/
offset: inherit;
offset: initial;
offset: revert;
offset: revert-layer;
offset: unset;

```
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`offset-position`](offset-position): `auto`
* [`offset-path`](offset-path): `none`
* [`offset-distance`](offset-distance): `0`
* [`offset-anchor`](offset-anchor): `auto`
* [`offset-rotate`](offset-rotate): `auto`
 |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`offset-position`](offset-position): referToSizeOfContainingBlock
* [`offset-distance`](offset-distance): refer to the total path length
* [`offset-anchor`](offset-anchor): relativeToWidthAndHeight
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`offset-position`](offset-position): for [`<length>`](length) the absolute value, otherwise a percentage
* [`offset-path`](offset-path): as specified
* [`offset-distance`](offset-distance): for [`<length>`](length) the absolute value, otherwise a percentage
* [`offset-anchor`](offset-anchor): for [`<length>`](length) the absolute value, otherwise a percentage
* [`offset-rotate`](offset-rotate): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`offset-position`](offset-position): a [position](position_value#interpolation)
* [`offset-path`](offset-path): as <angle>, <basic-shape> or <path()>
* [`offset-distance`](offset-distance): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`offset-anchor`](offset-anchor): a [position](position_value#interpolation)
* [`offset-rotate`](offset-rotate): as <angle>, <basic-shape> or <path()>
 |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
offset =   
  [[](value_definition_syntax#brackets) <'offset-position'>[?](value_definition_syntax#question_mark) [[](value_definition_syntax#brackets) <'offset-path'> [[](value_definition_syntax#brackets) <'offset-distance'> [||](value_definition_syntax#double_bar) <'offset-rotate'> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) ]! [[](value_definition_syntax#brackets) / <'offset-anchor'> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Animating an element along a path



#### HTML

 
```
<div id="offsetElement"></div>

```
 #### CSS

 
```
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-shorthand](https://drafts.fxtf.org/motion/#offset-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `offset` | 5546 | 7979 | 72 | No | 4233 | 16 | 5546 | 5546 | No | 4233 | 16 | 6.05.0 |


See also
--------


* [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)
* [`offset-rotate`](offset-rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/offset>

offset-anchor
=============


The `offset-anchor` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the point inside the box of an element traveling along an [`offset-path`](offset-path) that is actually moving along the path.


Try it
------


Syntax
------



```
/\* Keyword values \*/
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

/\* <percentage> values \*/
offset-anchor: 25% 75%;

/\* <length> values \*/
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/\* Edge offsets values \*/
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

/\* Global values \*/
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: revert;
offset-anchor: revert-layer;
offset-anchor: unset;

```
### Values


 `auto`  `offset-anchor` is given the same value as the element's [`transform-origin`](transform-origin), unless [`offset-path`](offset-path) is `none`, in which case it takes its value from [`offset-position`](offset-position).

  `<position>`  A [`<position>`](position_value) defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. For more specifics, see the [`<position>`](position_value) and [`background-position`](background-position) reference pages. Note that the 3-value position syntax does not work for any usage of `<position>`, except for in `background(-position)`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | relativeToWidthAndHeight |
| [Computed value](computed_value) | for [`<length>`](length) the absolute value, otherwise a percentage |
| Animation type | a [position](position_value#interpolation) |

Formal syntax
-------------



```
offset-anchor =   
  auto        [|](value_definition_syntax#single_bar)  
  <position>    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting various offset-anchor values



In the following example, we have three [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) elements nested in [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) elements. Each `<div>` is given the same [`offset-path`](offset-path) (a horizontal line 200 pixels long) and animated to move along it. The three are then given different [`background-color`](background-color) and `offset-anchor` values.

 Each `<section>` has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the `<div>`'s offset paths are running.

 This allows you to see what effect the different `offset-anchor` values have — the first one, `auto`, causes the `<div>`'s center point to move along the path. The other two cause the `<div>`'s top-right and bottom-left points to move along the path, respectively.

 #### HTML

 
```
<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>

```
 #### CSS

 
```
div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-anchor-property](https://drafts.fxtf.org/motion/#offset-anchor-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `offset-anchor` | No | No | 72 | No | No | preview | No | No | 79 | No | No | No |


See also
--------


* [`offset`](offset)
* [`offset-distance`](offset-distance)
* [`offset-rotate`](offset-rotate)
* [SVG `<path>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor>

:only-child
===========


The `:only-child` CSS [pseudo-class](pseudo-classes) represents an element without any siblings. This is the same as `:first-child:last-child` or `:nth-child(1):nth-last-child(1)`, but with a lower specificity.


Try it
------



  **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

 
Syntax
------



```
:only-child {
  /\* ... \*/
}

```
Examples
--------


### Basic example



#### HTML

 
```
<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>
    I am the 3rd sibling,
    <div>but this is an only child.</div>
  </div>
</div>

```
 #### CSS

 
```
div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

```
 #### Result



### A list example



#### HTML

 
```
<ol>
  <li>
    First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>
    Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>

```
 #### CSS

 
```
li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # only-child-pseudo](https://w3c.github.io/csswg-drafts/selectors/#only-child-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:only-child` | 2 | 12 | 1.5 | 9 | 9.5 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `no_parent_required` | 57 | 79 | 52 | No | 44 | No | 57 | 57 | 52 | 43 | No | 7.0 |


See also
--------


* [`:only-of-type`](:only-of-type)
* [`:first-child`](:first-child)
* [`:last-child`](:last-child)
* [`:nth-child`](:nth-child)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child>

:only-of-type
=============


The `:only-of-type` CSS [pseudo-class](pseudo-classes) represents an element that has no siblings of the same type.


Try it
------



  **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.

 
Syntax
------



```
:only-of-type {
  /\* ... \*/
}

```
Examples
--------


### Styling elements with no siblings of the same type



#### HTML

 
```
<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>
    I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>

```
 #### CSS

 
```
main :only-of-type {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # only-of-type-pseudo](https://w3c.github.io/csswg-drafts/selectors/#only-of-type-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:only-of-type` | 1 | 12Before Edge 16, Microsoft Edge treats all unknown elements (such as custom elements) as the same element type. | 3.5 | 9Internet Explorer treats all unknown elements (such as custom elements) as the same element type. | 9.5 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`:only-child`](:only-child)
* [`:first-of-type`](:first-of-type)
* [`:last-of-type`](:last-of-type)
* [`:nth-of-type`](:nth-of-type)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type>

mix-blend-mode
==============


The `mix-blend-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how an element's content should blend with the content of the element's parent and the element's background.


Try it
------


Syntax
------



```
/\* Keyword values \*/
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/\* Global values \*/
mix-blend-mode: inherit;
mix-blend-mode: initial;
mix-blend-mode: revert;
mix-blend-mode: revert-layer;
mix-blend-mode: unset;

```
### Values


 [`<blend-mode>`](blend-mode)  The blending mode that should be applied.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
mix-blend-mode =   
  <blend-mode>  [|](value_definition_syntax#single_bar)  
  plus-darker   [|](value_definition_syntax#single_bar)  
  plus-lighter    
  
<blend-mode> =   
  normal       [|](value_definition_syntax#single_bar)  
  multiply     [|](value_definition_syntax#single_bar)  
  screen       [|](value_definition_syntax#single_bar)  
  overlay      [|](value_definition_syntax#single_bar)  
  darken       [|](value_definition_syntax#single_bar)  
  lighten      [|](value_definition_syntax#single_bar)  
  color-dodge  [|](value_definition_syntax#single_bar)  
  color-burn   [|](value_definition_syntax#single_bar)  
  hard-light   [|](value_definition_syntax#single_bar)  
  soft-light   [|](value_definition_syntax#single_bar)  
  difference   [|](value_definition_syntax#single_bar)  
  exclusion    [|](value_definition_syntax#single_bar)  
  hue          [|](value_definition_syntax#single_bar)  
  saturation   [|](value_definition_syntax#single_bar)  
  color        [|](value_definition_syntax#single_bar)  
  luminosity     
  

```
Examples
--------


### Effect of different mix-blend-mode values




### Using mix-blend-mode with HTML



#### HTML

 
```
<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>

```
 #### CSS

 
```
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /\* Without isolation, the background color will be taken into account \*/
  position: relative;
}

```
 #### Result



### Using mix-blend-mode with SVG



#### SVG

 
```
<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red" />
    <circle cx="80" cy="40" r="40" fill="lightgreen" />
    <circle cx="60" cy="80" r="40" fill="blue" />
  </g>
</svg>

```
 #### CSS

 
```
circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /\* Without isolation, the background color will be taken into account \*/

```
 #### Result



### Using mix-blend-mode with text



This example uses `mix-blend-mode` to blend text color with the background color of its parent element.

 #### HTML

 
```
<div class="container">
  <p>Mostly Harmless</p>
  <p class="multiply">Mostly Harmless</p>
  <p class="screen">Mostly Harmless</p>
  <p class="hard-light">Mostly Harmless</p>
</div>

```
 #### CSS

 
```
@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");

.container {
  background-color: blue;
}

p {
  font: 4rem "Rubik Moonrocks", cursive;
  font-weight: bold;
  color: orange;
  padding: 0.5rem;
  margin: 0;
}

.multiply {
  mix-blend-mode: multiply;
}

.screen {
  mix-blend-mode: screen;
}

.hard-light {
  mix-blend-mode: hard-light;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Compositing and Blending Level 2 # mix-blend-mode](https://drafts.fxtf.org/compositing/#mix-blend-mode) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `mix-blend-mode` | 41 | 79 | 32 | No | 28 | 8 | 41 | 41 | 32 | 28 | 8 | 4.0 |
| `plus-lighter` | 100 | 100 | 99 | No | No | 9.1 | 100 | 100 | 99 | No | 9.3 | 19.0 |
| `svg` | 41 | 79 | 32 | No | 28 | No | No | No | 32 | No | No | No |


See also
--------


* [`<blend-mode>`](blend-mode)
* [`background-blend-mode`](background-blend-mode)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode>

object-fit
==========



The `object-fit` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how the content of a [replaced element](replaced_element), such as an [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) or [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video), should be resized to fit its container.

 You can alter the alignment of the replaced element's content object within the element's box using the [`object-position`](object-position) property.



Try it
------


Syntax
------




```
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/\* Global values \*/
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

```
 The `object-fit` property is specified as a single keyword chosen from the list of values below.


### Values


 `contain`  The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be ["letterboxed"](https://en.wikipedia.org/wiki/Letterboxing_(filming)) if its aspect ratio does not match the aspect ratio of the box.

  `cover`  The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

  `fill`  The replaced content is sized to fill the element's content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.

  `none`  The replaced content is not resized.

  `scale-down`  The content is sized as if `none` or `contain` were specified, whichever would result in a smaller concrete object size.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `fill` |
| Applies to | replaced elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
object-fit =   
  fill        [|](value_definition_syntax#single_bar)  
  contain     [|](value_definition_syntax#single_bar)  
  cover       [|](value_definition_syntax#single_bar)  
  none        [|](value_definition_syntax#single_bar)  
  scale-down    
  

```
Examples
--------


### Setting object-fit for an image



#### HTML

 
```
<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn\_logo\_only\_color.png" alt="MDN Logo" />
</section>

```
 #### CSS

 
```
h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # the-object-fit](https://w3c.github.io/csswg-drafts/css-images/#the-object-fit) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `object-fit` | 32 | 7916–79Only supported for `<img>` elements. | 36 | No | 1911.6–15 | 10 | 4.4.3 | 32 | 36 | 1912–14 | 10 | 2.0 |


See also
--------


* Other image-related CSS properties: [`object-position`](object-position), [`image-orientation`](image-orientation), [`image-rendering`](image-rendering), [`image-resolution`](image-resolution).
* [`background-size`](background-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit>

object-position
===============



The `object-position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the alignment of the selected [replaced element](replaced_element)'s contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.

 You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the [`object-fit`](object-fit) property.



Try it
------


Syntax
------



```
/\* Keyword values \*/
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/\* <percentage> values \*/
object-position: 25% 75%;

/\* <length> values \*/
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/\* Edge offsets values \*/
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/\* Global values \*/
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

```
### Values



 [`<position>`](position_value)  From one to four values that define the 2D position of the element. Relative or absolute offsets can be used.

    **Note:** The position can be set so that the replaced element is drawn outside its box.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `50% 50%` |
| Applies to | replaced elements |
| [Inherited](inheritance) | yes |
| Percentages | refer to width and height of element itself |
| [Computed value](computed_value) | as specified |
| Animation type | repeatable list of simple list of length, percentage, or calc |

Formal syntax
-------------



```
object-position =   
  <position>    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Positioning image content



#### HTML

 Here we see HTML that includes two [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) elements, each displaying the MDN logo.

 
```
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

```
 #### CSS

 The CSS includes default styling for the `<img>` element itself, as well as separate styles for each of the two images.

 
```
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

```
 The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.

 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # the-object-position](https://w3c.github.io/csswg-drafts/css-images/#the-object-position) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `object-position` | 32 | 7916–79Only supported for `<img>` elements. | 36 | No | 1911.6–15 | 10 | 4.4.3 | 32 | 36 | 1912–14 | 10 | 2.0 |


See also
--------


* Other image-related CSS properties: [`object-fit`](object-fit), [`image-orientation`](image-orientation), [`image-rendering`](image-rendering), [`image-resolution`](image-resolution).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/object-position>

offset-position
===============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `offset-position` CSS property defines the [initial position](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) of the [`offset-path`](offset-path).



Syntax
------



```
/\* Keyword values \*/
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/\* <percentage> values \*/
offset-position: 25% 75%;

/\* <length> values \*/
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/\* Edge offsets values \*/
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/\* Global values \*/
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;

```
### Values


 `auto`  The initial position is the position of the box specified by the [`position`](position) property.

  `<position>`  A [`<position>`](position_value). A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). For more explanation of these value types, see [`background-position`](background-position).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | referToSizeOfContainingBlock |
| [Computed value](computed_value) | for [`<length>`](length) the absolute value, otherwise a percentage |
| Animation type | a [position](position_value#interpolation) |

Formal syntax
-------------



```
offset-position =   
  auto        [|](value_definition_syntax#single_bar)  
  <position>    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting initial offset position




```
<div id="motion-demo"></div>

```
 
```
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

```

Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-position-property](https://drafts.fxtf.org/motion/#offset-position-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `offset-position` | NoSee [bug 638055](https://crbug.com/638055). | NoSee [bug 638055](https://crbug.com/638055). | NoSee [bug 1559232](https://bugzil.la/1559232). | No | NoSee [bug 638055](https://crbug.com/638055). | preview | NoSee [bug 638055](https://crbug.com/638055). | NoSee [bug 638055](https://crbug.com/638055). | NoSee [bug 1559232](https://bugzil.la/1559232). | NoSee [bug 638055](https://crbug.com/638055). | No | NoSee [bug 638055](https://crbug.com/638055). |


See also
--------


* [`offset`](offset)
* [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-rotate`](offset-rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/offset-position>

offset-rotate
=============


The `offset-rotate` CSS property defines the orientation/direction of the element as it is positioned along the [`offset-path`](offset-path).


Try it
------



  **Note:** Early versions of the spec called this property `motion-rotation`.

 
Syntax
------




```
/\* Follow the path direction, with optional additional angle \*/
offset-rotate: auto;
offset-rotate: auto 45deg;

/\* Follow the path direction but facing the opposite direction of `auto` \*/
offset-rotate: reverse;

/\* Keep a constant rotation regardless the position on the path \*/
offset-rotate: 90deg;
offset-rotate: 0.5turn;

/\* Global values \*/
offset-rotate: inherit;
offset-rotate: initial;
offset-rotate: revert;
offset-rotate: revert-layer;
offset-rotate: unset;

```
  `auto`  The element is rotated by the angle of the direction of the [`offset-path`](offset-path), relative to the positive x-axis. This is the default value.

  `[`<angle>`](angle)`  The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.

  `auto <angle>`  If `auto` is followed by an [`<angle>`](angle), the computed value of the angle is added to the computed value of `auto`.

  `reverse`  The element is rotated similar to `auto`, except it faces the opposite direction. It is the same as specifying a value of `auto 180deg`.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | as <angle>, <basic-shape> or <path()> |

Formal syntax
-------------



```
offset-rotate =   
  [[](value_definition_syntax#brackets) auto [|](value_definition_syntax#single_bar) reverse []](value_definition_syntax#brackets)  [||](value_definition_syntax#double_bar)  
  [<angle>](angle)               
  

```
Examples
--------


### Setting element orientation along its offset path



#### HTML

 
```
<div></div>
<div></div>
<div></div>

```
 #### CSS

 
```
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-rotate-property](https://drafts.fxtf.org/motion/#offset-rotate-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `offset-rotate` | 565546 | 797979 | 72 | No | 434233 | preview | 565546 | 565546 | No | 434233 | No | 6.06.05.0 |


See also
--------


* [`offset`](offset)
* [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate>

opacity
=======


The `opacity` CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.


Try it
------


Syntax
------



```
opacity: 0.9;
opacity: 90%;

/\* Global values \*/
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

```
### Values


 `<alpha-value>`  A [`<number>`](number) in the range `0.0` to `1.0`, inclusive, or a [`<percentage>`](percentage) in the range `0%` to `100%`, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.

 

| Value | Meaning |
| --- | --- |
| `0` | The element is fully transparent (that is, invisible). |
| Any [`<number>`](number) strictly between `0` and `1` | The element is translucent (that is, content behind the element can be seen). |
| `1` (default value) | The element is fully opaque (visually solid). |

  Description
-----------



`opacity` applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

 Using `opacity` with a value other than `1` places the element in a new [stacking context](css_positioning/understanding_z_index/the_stacking_context).

 To change the opacity of a background only, use the [`background`](background) property with a [`color value`](color_value) that allows for an alpha channel. For example:

 
```
background: rgba(0, 0, 0, 0.4);

```

Accessibility concerns
----------------------



If text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

 Color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](font-weight) or larger, or 24px or larger.

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `1` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | map to the range `[0,1]` |
| [Computed value](computed_value) | The same as the specified value after clipping the [`<number>`](number) to the range [0.0, 1.0]. |
| Animation type | by computed value type |

Formal syntax
-------------



```
opacity =   
  <alpha-value>    
  
<alpha-value> =   
  [<number>](number)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting opacity



The following example demonstrates how the `opacity` property changes the opacity of the entire element and content, thus making the text very hard to read.

 #### HTML

 
```
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /\* Barely see the text over the background \*/
}
.medium {
  opacity: 0.5; /\* See the text more clearly over the background \*/
}
.heavy {
  opacity: 0.9; /\* See the text very clearly over the background \*/
}

```
 #### Result



### Setting opacity on hover



In the following example opacity is changed on hover, so the striped background image on the parent element shows through the image.

 #### HTML

 
```
<div class="wrapper">
  <img
 src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
 alt="MDN Dino"
 width="128"
 height="146"
 class="opacity" />
</div>

```
 #### CSS

 
```
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%
  );
  background-size: 20px 20px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # transparency](https://w3c.github.io/csswg-drafts/css-color/#transparency) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `opacity` | 1 | 12 | 11–3.5 | 9 | 9 | 21.1–2 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `percentages` | 78 | 79 | 70 | No | No | preview | 78 | 78 | No | No | No | 12.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/opacity>

opacity()
=========


The `opacity()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) applies transparency to the samples in the input image. Its result is a [`<filter-function>`](../filter-function).


Try it
------



  **Note:** This function is similar to the more established [`opacity`](../opacity) property. The difference is that with filters, some browsers provide hardware acceleration for better performance.

 
Syntax
------



```
opacity(amount)

```
### Parameters


 `amount`  The amount of the conversion, specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value of `0%` is completely transparent, while a value of `100%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `1`.

  Examples
--------


### Examples of correct values for opacity()



```
opacity(0%)   /\* Completely transparent \*/
opacity(50%)  /\* 50% transparent \*/
opacity(1)    /\* No effect \*/

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-opacity](https://drafts.fxtf.org/filter-effects/#funcdef-filter-opacity) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `opacity` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------


* The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:
	+ [`blur()`](blur)
	+ [`brightness()`](brightness)
	+ [`contrast()`](contrast)
	+ [`drop-shadow()`](drop-shadow)
	+ [`grayscale()`](grayscale)
	+ [`hue-rotate()`](hue-rotate)
	+ [`invert()`](invert)
	+ [`saturate()`](saturate)
	+ [`sepia()`](sepia)
* The CSS [`opacity`](../opacity) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity>

:optional
=========


The `:optional` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element that does not have the [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required) attribute set on it.


Try it
------



 This pseudo-class is useful for styling fields that are not required to submit a form.

  **Note:** The [`:required`](:required) pseudo-class selects *required* form fields.

 
Syntax
------



```
:optional {
  /\* ... \*/
}

```
Examples
--------


### The optional field has a purple border



#### HTML

 
```
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>

```
 #### CSS

 
```
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:optional {
  border-color: rebeccapurple;
  border-width: 3px;
}

```
 #### Result



Accessibility concerns
----------------------



If a [form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) contains optional [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)s, required inputs should be indicated using the [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required) attribute. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission.

 Required inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

 * [MDN Understanding WCAG, Guideline 3.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes)
* [Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-optional](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-optional) |
| [Selectors Level 4 # opt-pseudos](https://w3c.github.io/csswg-drafts/selectors/#opt-pseudos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:optional` | 10 | 12 | 4 | 10 | 10 | 5 | 37 | 18 | 4 | 10.1 | 5 | 1.0 |


See also
--------


* Other validation-related pseudo-classes: [`:required`](:required), [`:invalid`](:invalid), [`:valid`](:valid)
* [Form data validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:optional>

order
=====


The `order` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.


Try it
------


Syntax
------




```
/\* <integer> values \*/
order: 5;
order: -5;

/\* Global values \*/
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;

```
 Since `order` is only meant to affect the *visual order* of elements and not their logical or tab order. `order` must not be used on non-visual media such as [speech](@media#speech).


### Values


 [`<integer>`](integer)  Represents the ordinal group to be used by the item.

  Accessibility concerns
----------------------



Using the `order` property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

 * [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
* [Source Order Matters | Adrian Roselli](https://adrianroselli.com/2015/09/source-order-matters.html)
* [MDN Understanding WCAG, Guideline 1.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)
* [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | Flex items, grid items, and absolutely-positioned flex and grid container children |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | an [integer](integer#interpolation) |

Formal syntax
-------------



```
order =   
  [<integer>](integer)    
  

```
Examples
--------


### Ordering items in a flex container



This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.

 #### HTML

 
```
<header>…</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>…</footer>

```
 #### CSS

 
```
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # order-property](https://w3c.github.io/csswg-drafts/css-display/#order-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `order` | 2921 | 1212 | 4920Since Firefox 28, multi-line flexbox is supported. | 1110 | 12.1 | 97 | ≤374.4 | 2925 | 4920Since Firefox 28, multi-line flexbox is supported. | 12.1 | 97 | 2.01.5 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Ordering flex items](css_flexible_box_layout/ordering_flex_items)*
* CSS Grid Guide: *[CSS Grid Layout and accessibility](css_grid_layout/css_grid_layout_and_accessibility)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/order>

orphans
=======



The `orphans` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the minimum number of lines in a block container that must be shown at the *bottom* of a [page](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media), region, or [column](css_columns).

 
```
/\* <integer> values \*/
orphans: 2;
orphans: 3;

/\* Global values \*/
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;

```
 In typography, an *orphan* is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)



Syntax
------


### Values


 [`<integer>`](integer)  The minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. The value must be positive.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `2` |
| Applies to | block container elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
orphans =   
  [<integer [0,∞]>](integer)    
  

```
Examples
--------


### Setting a minimum orphan size of three lines



#### HTML

 
```
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how orphans work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>

```
 #### CSS

 
```
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3 # widows-orphans](https://w3c.github.io/csswg-drafts/css-break/#widows-orphans) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `orphans` | 25 | 12 | No | 8 | 9.2 | 1.3 | 4.4 | 25 | No | 14 | 1 | 1.5 |


See also
--------


* [`widows`](widows)
* [Paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/orphans>

offset-path
===========


The `offset-path` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system.


Try it
------


Syntax
------



```
/\* Default \*/
offset-path: none;

/\* Line segment \*/
offset-path: ray(45deg closest-side contain);
offset-path: ray(45deg);

/\* URL \*/
offset-path: url(#path);

/\* Shape \*/
offset-path: circle(50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");

/\* Geometry box \*/
offset-path: margin-box;
offset-path: stroke-box;

/\* Global values \*/
offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: revert-layer;
offset-path: unset;

```
### Values



 [`ray()`](ray)  Defines a path that is a line segment from the starting position of an element and proceeding in the direction defined by the specified angle. This value accepts up to three parameters – an [`<angle>`](angle) similar to the CSS [linear-gradient](gradient/linear-gradient) angle, a size value similar to the CSS [radial-gradient](gradient/radial-gradient) size values, and the keyword `contain`. The angle `0deg` starts on the y-axis, pointing up, with positive angles increasing in the clockwise direction. The possible values for the optional size parameter include `closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`, and `sides`. If omitted, the value of the size parameter defaults to `closest-side`. The optional `contain` keyword reduces the length of the offset path so that the element stays within its containing block.

    **Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support.

   `url()`  References the ID of an SVG shape — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect` — using the shape's geometry as the path.

  `<basic-shape>`  Specifies a [CSS shape](css_shapes/basic_shapes) by using one of the shape functions such as [`circle()`](basic-shape/circle), [`ellipse()`](basic-shape/ellipse), [`inset()`](basic-shape/inset), [`polygon()`](basic-shape/polygon), or [`path()`](path).

  `none`  Specifies no motion path at all.

  
Description
-----------



This property defines a path an animated element can follow. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. The element's exact position on the offset path is determined by the [`offset-distance`](offset-distance) property. Each shape or path must define an initial position for the computed value of `0` for [`offset-distance`](offset-distance) and an initial direction which specifies the rotation of the object to the initial position.

 Early versions of the spec called this property `motion-path`. It was changed to `offset-path` because the property describes static positions, not motion.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | as <angle>, <basic-shape> or <path()> |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
offset-path =   
  none                               [|](value_definition_syntax#single_bar)  
  <ray()>                            [|](value_definition_syntax#single_bar)  
  <path()>                           [|](value_definition_syntax#single_bar)  
  <url>                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<basic-shape>](basic-shape) [&&](value_definition_syntax#double_ampersand) <coord-box>[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  <coord-box>                          
  
<ray()> =   
  ray( [[](value_definition_syntax#brackets) [<angle>](angle) [&&](value_definition_syntax#double_ampersand) <size> [&&](value_definition_syntax#double_ampersand) contain[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets) )    
  
<path()> =   
  path( [<string>](string) )    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  
<coord-box> =   
  content-box  [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  border-box   [|](value_definition_syntax#single_bar)  
  fill-box     [|](value_definition_syntax#single_bar)  
  stroke-box   [|](value_definition_syntax#single_bar)  
  view-box       
  
<size> =   
  <extent-keyword>              [|](value_definition_syntax#single_bar)  
  [<length [0,∞]>](length)                [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)[{2}](value_definition_syntax#curly_braces)    
  
<extent-keyword> =   
  closest-corner   [|](value_definition_syntax#single_bar)  
  closest-side     [|](value_definition_syntax#single_bar)  
  farthest-corner  [|](value_definition_syntax#single_bar)  
  farthest-side      
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Animating an element with offset-path



The `offset-path` properties in the CSS code sample defines a motion path that is identical to the `<path>` element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney.

 #### SVG

 The top and bottom halves of the scissors would appear in the top left of the canvas were they not positioned along the starting point of the motion path defined by `offset-path`.

 
```
<svg
 xmlns="http://www.w3.org/2000/svg"
 width="700"
 height="450"
 viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
 id="house"
 d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
 fill="none"
 stroke="black"
 stroke-width="13"
 stroke-linejoin="round"
 stroke-linecap="round" />
  <path
 id="firstScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
 transform="translate(0,0)"
 fill="green"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
  <path
 id="secondScissorHalf"
 class="scissorHalf"
 d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
 transform="translate(0,0)"
 fill="forestgreen"
 stroke="black"
 stroke-width="5"
 stroke-linejoin="round"
 stroke-linecap="round"
 fill-rule="evenodd" />
</svg>

```
 #### CSS

 
```
.scissorHalf {
  offset-path: path(
    "M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
  );
  animation: followpath 4s linear infinite;
}

@keyframes followpath {
  to {
    motion-offset: 100%;
    offset-distance: 100%;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-path-property](https://drafts.fxtf.org/motion/#offset-path-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `offset-path` | 5546 | 7979 | 72 | No | 4532 | 15.4 | 5546 | 5546 | 79 | 4332 | 15.4 | 6.0`path()` is the only value type supported.5.0 |
| `path-support` | 64 | 79 | 72 | No | 51 | preview | 64 | 64 | 79 | 47 | No | 9.0 |
| `ray-support` | 64 | 79 | 112`<ray-size>` is optional with the default value `closest-side`.72 | No | 51 | preview | No | 64 | No | No | No | No |


See also
--------



* [`offset`](offset)
* [`offset-distance`](offset-distance)
* [`offset-rotate`](offset-rotate)
* [SVG <path>](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)
* [`path()`](path)

 Other demos:

 * [Examples of the various values](https://codepen.io/team/css-tricks/pen/WZdKMq)
* [Triangle](https://codepen.io/ericwilligers/pen/jMbJPp)
* [Scissors](https://codepen.io/ericwilligers/pen/bwVZNa)
* [Eyes](https://jsfiddle.net/ericwilligers/r1snqdan/)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path>

:out-of-range
=============


The `:out-of-range` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element whose current value is outside the range limits specified by the [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) and [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) attributes.


Try it
------



 This pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.

  **Note:** This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be "in-range" nor "out-of-range."

 
Syntax
------



```
:out-of-range {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<form action="" id="form1">
  <p>Values between 1 and 10 are valid.</p>
  <ul>
    <li>
      <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 to 10"
 min="1"
 max="10"
 value="12" />
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

```
### CSS



```
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "okay.";
}

input:out-of-range + label::after {
  content: "out of range!";
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-out-of-range](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-out-of-range) |
| [Selectors Level 4 # out-of-range-pseudo](https://w3c.github.io/csswg-drafts/selectors/#out-of-range-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:out-of-range` | 10 | 13 | 29 | No | 11 | 5.1 | 2.2 | 18 | 16 | 11 | 5 | 1.0 |


See also
--------


* [`:in-range`](:in-range)
* [Form data validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range>

outline
=======


The `outline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) sets most of the outline properties in a single declaration.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`outline-color`](outline-color)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)


Syntax
------




```
/\* style \*/
outline: solid;

/\* color | style \*/
outline: #f66 dashed;

/\* style | width \*/
outline: inset thick;

/\* color | style | width \*/
outline: green solid 3px;

/\* Global values \*/
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

```
 The `outline` property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their [initial value](initial_value).

  **Note:** The outline will be invisible for many elements if its style is not defined. This is because the style defaults to `none`. A notable exception is `input` elements, which are given default styling by browsers.

 
### Values


 `<'outline-color'>`  Sets the color of the outline. Defaults to `invert` for browsers supporting it, `currentcolor` for the others. See [`outline-color`](outline-color).

  `<'outline-style'>`  Sets the style of the outline. Defaults to `none` if absent. See [`outline-style`](outline-style).

  `<'outline-width'>`  Sets the thickness of the outline. Defaults to `medium` if absent. See [`outline-width`](outline-width).

  Description
-----------



Outline is a line outside of the element's <border>. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

 There are a few properties that affect an outline's appearance. It is possible to change the style, color, and width using the `outline` property, the distance from the border using the [`outline-offset`](outline-offset) property, and corner angles using the [`border-radius`](border-radius) property.

 An outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.


Accessibility concerns
----------------------



Assigning `outline` a value of `0` or `none` will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.

 * [How to Design Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
* WCAG 2.1: [Understanding Success Criterion 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`outline-color`](outline-color): `invert`, for browsers supporting it, `currentColor` for the other
* [`outline-style`](outline-style): `none`
* [`outline-width`](outline-width): `medium`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`outline-color`](outline-color): For the keyword `invert`, the computed value is `invert`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* [`outline-width`](outline-width): an absolute length; if the keyword `none` is specified, the computed value is `0`
* [`outline-style`](outline-style): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`outline-color`](outline-color): a [color](color_value#interpolation)
* [`outline-width`](outline-width): a [length](length#interpolation)
* [`outline-style`](outline-style): discrete
 |

Formal syntax
-------------



```
outline =   
  <'outline-color'>  [||](value_definition_syntax#double_bar)  
  <'outline-style'>  [||](value_definition_syntax#double_bar)  
  <'outline-width'>    
  

```
Examples
--------


### Using outline to set a focus style



#### HTML

 
```
<a href="#">This link has a special focus style.</a>

```
 #### CSS

 
```
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # outline](https://w3c.github.io/csswg-drafts/css-ui/#outline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `outline` | 941–94Before Chrome 94, `outline` does not follow the shape of `border-radius`. | 9412–94Before Edge 94, `outline` does not follow the shape of `border-radius`. | 881.5–88Before Firefox 88, `outline` does not follow the shape of `border-radius`.1–3.6 | 8 | 807–80Before Opera 80, `outline` does not follow the shape of `border-radius`. | 1.2`outline` does not follow the shape of `border-radius`. See [bug 20807](https://webkit.org/b/20807). | 941–94Before Chrome 94, `outline` does not follow the shape of `border-radius`. | 9418–94Before Chrome 94, `outline` does not follow the shape of `border-radius`. | 884–88Before Firefox 88, `outline` does not follow the shape of `border-radius`. | 10.1 | 1`outline` does not follow the shape of `border-radius`. See [bug 20807](https://webkit.org/b/20807). | 1.0 |
| `invert` | No | 12–79 | 1–3 | 8 | 7–15 | No | No | No | No | No | No | No |


See also
--------


* [`outline-color`](outline-color)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/outline>

outline-color
=============


The `outline-color` CSS property sets the color of an element's outline.


Try it
------


Syntax
------




```
/\* <color> values \*/
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

/\* Keyword value \*/
outline-color: invert;

/\* Global values \*/
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

```
 The `outline-color` property is specified as any one of the values listed below.


### Values


 [`<color>`](color_value)  The color of the outline, specified as a `<color>`.

  `invert`  To ensure the outline is visible, performs a color inversion of the background. Note that browsers are not required to support this value; if they don't, this keyword is considered invalid.

  Description
-----------



An outline is a line that is drawn around an element, outside the [`border`](border). Unlike the element's border, the outline is drawn outside the element's frame, and may overlap other content. The border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap).

 It is often more convenient to use the shorthand property [`outline`](outline) when defining the appearance of an outline.


Accessibility concerns
----------------------



Custom [focus styles](:focus) commonly involve making adjustments to the [`outline`](outline) property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.

 Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](font-weight) or larger, or 24px or larger.

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `invert`, for browsers supporting it, `currentColor` for the other |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | For the keyword `invert`, the computed value is `invert`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
outline-color =   
  [[](value_definition_syntax#brackets) [<color>](color_value) [|](value_definition_syntax#single_bar) <1d-image> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  invert                      
  
<1d-image> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe>[#](value_definition_syntax#hash_mark) )    
  
<color-stripe> =   
  [<color>](color_value)                            [&&](value_definition_syntax#double_ampersand)  
  [[](value_definition_syntax#brackets) <length-percentage> [|](value_definition_syntax#single_bar) [<flex>](flex) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting a solid blue outline



#### HTML

 
```
<p>My outline is blue, as you can see.</p>

```
 #### CSS

 
```
p {
  outline: 2px solid; /\* Set the outline width and style \*/
  outline-color: #0000ff; /\* Make the outline blue \*/
  margin: 5px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # outline-color](https://w3c.github.io/csswg-drafts/css-ui/#outline-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `outline-color` | 1 | 12 | 1.51–3.6 | 8 | 7 | 1.2 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `invert` | No | 12–79 | 1–3 | 8 | 7–15 | No | No | No | No | No | No | No |


See also
--------


* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)
* The [`<color>`](color_value) data type
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color>

outline-offset
==============


The `outline-offset` CSS property sets the amount of space between an <outline> and the edge or border of an element.


Try it
------


Syntax
------



```
/\* <length> values \*/
outline-offset: 3px;
outline-offset: 0.2em;

/\* Global values \*/
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;

```
### Values


 `[`<length>`](length)`  The width of the space between the element and its outline. A negative value places the outline inside the element. A value of `0` places the outline so that there is no space between it and the element.

  Description
-----------


An outline is a line that is drawn around an element, outside the border edge. The space between an element and its outline is transparent. In other words, it is the same as the parent element's background.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
outline-offset =   
  [<length>](length)    
  

```
Examples
--------


### Setting outline offset in pixels



#### HTML

 
```
<p>Gallia est omnis divisa in partes tres.</p>

```
 #### CSS

 
```
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # outline-offset](https://w3c.github.io/csswg-drafts/css-ui/#outline-offset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `outline-offset` | 1 | 15 | 1.5Before Firefox 88, an outline does not follow the shape of `border-radius`. | No | 9.5 | 1.2 | 37 | 18 | 4Before Firefox 88, an outline does not follow the shape of `border-radius`. | 14 | 1 | 1.0 |


See also
--------


* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-style`](outline-style)
* [`outline-width`](outline-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset>

overflow-anchor
===============



The `overflow-anchor` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.

 Scroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off.



Try it
------


Syntax
------



```
/\* Keyword values \*/
overflow-anchor: auto;
overflow-anchor: none;

/\* Global values \*/
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: revert;
overflow-anchor: revert-layer;
overflow-anchor: unset;

```
### Values


 `auto`  The element becomes a potential anchor when adjusting scroll position.

  `none`  The element won't be selected as a potential anchor.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-anchor =   
  auto  [|](value_definition_syntax#single_bar)  
  none    
  

```
Examples
--------


### Prevent scroll anchoring



To prevent scroll anchoring in a document, use the `overflow-anchor` property.

 
```
\* {
  overflow-anchor: none;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Anchoring Module Level 1 # exclusion-api](https://w3c.github.io/csswg-drafts/css-scroll-anchoring/#exclusion-api) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-anchor` | 56 | 79 | 66 | No | 43 | No | 56 | 56 | No | 43 | No | 6.0 |


See also
--------


* [Guide to scroll anchoring](overflow-anchor/guide_to_scroll_anchoring)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor>

overflow-block
==============



The `overflow-block` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.

  **Note:** The `overflow-block` property maps to [`overflow-y`](overflow-y) or [`overflow-x`](overflow-x) depending on the writing mode of the document.

 

Syntax
------




```
/\* Keyword values \*/
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;

/\* Global values \*/
overflow-block: inherit;
overflow-block: initial;
overflow-block: revert;
overflow-block: revert-layer;
overflow-block: unset;

```
 The `overflow-block` property is specified as a single keyword chosen from the list of values below.


### Values


 `visible`  Content is not clipped and may be rendered outside the padding box's block start and block end edges.

  `hidden`  Content is clipped if necessary to fit the block dimension in the padding box. No scrollbars are provided.

  `scroll`  Content is clipped if necessary to fit in the block dimension in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

  `auto`  Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | Block-containers, flex containers, and grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of [`overflow-x`](overflow-x) or [`overflow-y`](overflow-y) is neither `visible` nor clip |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-block =   
  <'overflow'>    
  

```
Examples
--------


### HTML



```
<ul>
  <li>
    <code>overflow-block:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:auto</code> — on most browser, equivalent to
    <code>scroll</code>
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

```
### CSS



```
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-block: hidden;
  margin-bottom: 120px;
}
#div2 {
  overflow-block: scroll;
  margin-bottom: 120px;
}
#div3 {
  overflow-block: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-block: auto;
  margin-bottom: 120px;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # overflow-control](https://w3c.github.io/csswg-drafts/css-overflow/#overflow-control) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-block` | No | No | 69 | No | No | No | No | No | No | No | No | No |


See also
--------


* Related CSS properties: [`text-overflow`](text-overflow), [`white-space`](white-space), [`overflow`](overflow), [`overflow-inline`](overflow-inline), [`overflow-x`](overflow-x), [`overflow-y`](overflow-y), [`clip`](clip), [`display`](display)
* [CSS Logical Properties](css_logical_properties)
* [Writing Modes](css_writing_modes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block>

outline-width
=============


The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `outline-width` property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the [`border`](border).


Try it
------



 It is often more convenient to use the shorthand property [`outline`](outline) when defining the appearance of an outline.


Syntax
------




```
/\* Keyword values \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* <length> values \*/
outline-width: 1px;
outline-width: 0.1em;

/\* Global values \*/
outline-width: inherit;
outline-width: initial;
outline-width: revert;
outline-width: revert-layer;
outline-width: unset;

```
 The `outline-width` property is specified as any one of the values listed below.


### Values


 [`<length>`](length)  The width of the outline specified as a `<length>`.

  `thin`  Depends on the user agent. Typically equivalent to `1px` in desktop browsers (including Firefox).

  `medium`  Depends on the user agent. Typically equivalent to `3px` in desktop browsers (including Firefox).

  `thick`  Depends on the user agent. Typically equivalent to `5px` in desktop browsers (including Firefox).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `medium` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | an absolute length; if the keyword `none` is specified, the computed value is `0` |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
outline-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Setting an element's outline width



#### HTML

 
```
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

```
 #### CSS

 
```
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # outline-width](https://w3c.github.io/csswg-drafts/css-ui/#outline-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `outline-width` | 1 | 12 | 1.5Before Firefox 88, an outline does not follow the shape of `border-radius`.1–3.6 | 8 | 7 | 1.2 | 37 | 18 | 4Before Firefox 88, an outline does not follow the shape of `border-radius`. | 14 | 1 | 1.0 |


See also
--------


* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-style`](outline-style)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width>

overflow
========


The `overflow` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`overflow-x`](overflow-x)
* [`overflow-y`](overflow-y)


Syntax
------




```
/\* Keyword values \*/
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/\* Global values \*/
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

```
 The `overflow` property is specified as one or two keywords chosen from the list of options below. If only one keyword is specified, both `overflow-x` and `overflow-y` are set to the same value. If two keywords are specified, the first value applies to `overflow-x` in the horizontal direction and the second one applies to `overflow-y` in the vertical direction.


### Values



 `visible`  Overflow content is not clipped and may be visible outside the element's padding box. The element box is not a [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container). This is the default value of the `overflow` property.

  `hidden`  Overflow content is clipped at the element's padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content *can* be scrolled programmatically (for example, by setting the value of the [`scrollLeft`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft) property or the [`scrollTo()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo) method), in which case. The element box is a scroll container.

  `clip`  Overflow content is clipped at the element's *overflow clip edge* that is defined using the [`overflow-clip-margin`](overflow-clip-margin) property. As a result, content overflows the element's padding box by the [`<length>`](length) value of `overflow-clip-margin` or by `0px` if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new [formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) is created. To establish a formatting context, use `overflow: clip` along with [`display: flow-root`](display#flow-root). The element box is not a scroll container.

  `scroll`  Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box is a scroll container.

  `auto`  Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible` but still establishes a new formatting context. The element box is a scroll container.

    **Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

 
Description
-----------



Overflow options include hiding overflowing content, enabling scroll bars to view overflow content or displaying the content flowing out of an element box into the surrounding area, and combinations there of.

 The following nuances should be kept in mind while using the various keywords for `overflow`:

 * Specifying a value other than `visible` (the default) or `clip` for `overflow` creates a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context). This is necessary for technical reasons; if a float intersects with a scrolling element, it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
* For an `overflow` setting to create the desired effect, the block-level element must have either a set height (`height` or `max-height`) or `white-space` set to `nowrap`.
* Setting one axis to `visible` (the default) while setting the other to a *different* value results in `visible` behaving as `auto`.
* The JavaScript [`Element.scrollTop`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) property may be used to scroll through content in a scroll container, including when `overflow` is set to `hidden`.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`overflow-x`](overflow-x): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of [`overflow-x`](overflow-x) or [`overflow-y`](overflow-y) is neither `visible` nor clip
* [`overflow-y`](overflow-y): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of [`overflow-x`](overflow-x) or [`overflow-y`](overflow-y) is neither `visible` nor clip
 |
| Animation type | discrete |

Formal syntax
-------------



```
overflow =   
  [[](value_definition_syntax#brackets) visible [|](value_definition_syntax#single_bar) hidden [|](value_definition_syntax#single_bar) clip [|](value_definition_syntax#single_bar) scroll [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Demonstrating results of various overflow keywords



#### HTML

 
```
<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

```
 #### CSS

 
```
p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

```
 #### Result



Accessibility concerns
----------------------



A scrolling content area cannot be scrolled by a keyboard-only user, with the exception of users on Firefox (which makes the container keyboard focusable by default).

 As a developer, to allow non-Firefox keyboard-only users to scroll the container, you will need to give it a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) using `tabindex="0"`. Unfortunately, when a screen reader encounters this tab-stop, they will have no context for what it is and their screen reader will likely announce the entirety of its contents. Giving it an appropriate [WAI-ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) (`role="region"`, for example) and an accessible name (via [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)) can mitigate this.


Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # propdef-overflow](https://w3c.github.io/csswg-drafts/css-overflow/#propdef-overflow) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow` | 1 | 12 | 1After Firefox 3.6, the `overflow` property is correctly applied to table group elements (`<thead>`, `<tbody>`, `<tfoot>`). | 4From version 4 to 6, Internet Explorer enlarges an element with `overflow: visible` (default value) to fit the content inside it. `height` and `width` behave like `min-height` and `min-width`, respectively. | 7 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `clip` | 90 | 90 | 811.5–81 | No | 76 | 16 | 90 | 90 | 814–81 | No | 16 | 15.0 |
| `multiple_keywords` | 68 | 79 | 61 | No | 55 | preview | 68 | 68 | 61 | 48 | No | 10.0 |
| `overlay` | 15 | 79 | 112 | No | 15 | No | 100 | 100 | 112 | No | No | 4.0 |


See also
--------


* [`overflow-x`](overflow-x), [`overflow-y`](overflow-y)
* [`overflow-block`](overflow-block), [`overflow-clip-margin`](overflow-clip-margin), [`overflow-inline`](overflow-inline)
* [`clip`](clip), [`display`](display), [`text-overflow`](text-overflow), [`white-space`](white-space)
* [CSS overflow](css_overflow)
* [Keyboard-only scrolling areas](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html) on adrianroselli.com (November 28, 2022)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow>

overflow-clip-margin
====================


The `overflow-clip-margin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property determines how far outside its bounds an element with [`overflow: clip`](overflow) may be painted before being clipped. The bound defined by this property is called the *overflow clip edge* of the box.


Syntax
------




```
/\* <length> values \*/
overflow-clip-margin: 20px;
overflow-clip-margin: 1em;

/\* <visual-box> | <length> \*/
overflow-clip-margin: content-box 5px;

/\* Global values \*/
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: revert-layer;
overflow-clip-margin: unset;

```
 The `<visual-box>` value, which defaults to `padding-box`, specifies the box edge to use as the overflow clip edge origin. The [`<length>`](length) value specified in `overflow-clip-margin` must be nonnegative.

  **Note:** If the element does not have `overflow: clip` then this property will be ignored.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0px` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the computed 
 |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-clip-margin =   
  <visual-box>    [||](value_definition_syntax#double_bar)  
  [<length [0,∞]>](length)    
  
<visual-box> =   
  content-box  [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  border-box     
  

```
Examples
--------


### HTML



```
<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
</div>

```
### CSS



```
.box {
  border: 3px solid black;
  width: 250px;
  height: 100px;
  overflow: clip;
  overflow-clip-margin: 20px;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # overflow-clip-margin](https://w3c.github.io/csswg-drafts/css-overflow/#overflow-clip-margin) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-clip-margin` | 90Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). | 90Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). | 102Only supports using a length, not a visual box. See [bug 1661582](https://bugzil.la/1661582). | No | 76Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). | No | 90Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). | 90Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). | 102Only supports using a length, not a visual box. See [bug 1661582](https://bugzil.la/1661582). | 64Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). | No | 15.0Only works when both axes are using `overflow: clip`. See [bug 1354474](https://crbug.com/1354474). |


See also
--------


* Related CSS properties: [`text-overflow`](text-overflow), [`white-space`](white-space), [`overflow`](overflow), [`overflow-inline`](overflow-inline), [`overflow-x`](overflow-x), [`overflow-y`](overflow-y), [`clip`](clip), [`display`](display)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin>

overscroll-behavior
===================


The `overscroll-behavior` CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for [`overscroll-behavior-x`](overscroll-behavior-x) and [`overscroll-behavior-y`](overscroll-behavior-y).


Try it
------



 By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called **scroll chaining**.

 In some cases these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

 Note that this property only applies to [scroll containers](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container). In particular, since an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) is not a scroll container, this property cannot be used to stop scroll chaining for iframes.


Syntax
------




```
/\* Keyword values \*/
overscroll-behavior: auto; /\* default \*/
overscroll-behavior: contain;
overscroll-behavior: none;

/\* Two values \*/
overscroll-behavior: auto contain;

/\* Global values \*/
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: revert;
overscroll-behavior: revert-layer;
overscroll-behavior: unset;

```
 The `overscroll-behavior` property is specified as one or two keywords chosen from the list of values below.

 Two keywords specifies the `overscroll-behavior` value on the `x` and `y` axes respectively. If only one value is specified, both x and y are assumed to have the same value.


### Values


 `auto`  The default scroll overflow behavior occurs as normal.

  `contain`  Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

  `none`  No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`overscroll-behavior-x`](overscroll-behavior-x): as specified
* [`overscroll-behavior-y`](overscroll-behavior-y): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
overscroll-behavior =   
  [[](value_definition_syntax#brackets) contain [|](value_definition_syntax#single_bar) none [|](value_definition_syntax#single_bar) auto []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Preventing an underlying element from scrolling



In our [overscroll-behavior example](https://mdn.github.io/css-examples/overscroll-behavior/) (see the [source code](https://github.com/mdn/css-examples/tree/main/overscroll-behavior) also), we present a full-page list of fake contacts, and a dialog box containing a chat window.

  ![A popup chat window titled 'Active chat', showing a conversation between Chris and Bob. Behind the chat window is a contact list titled 'overscroll-behavior demo'.] 

 Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using `overscroll-behavior-y` (`overscroll-behavior` would also work) on the chat window, like this:

 
```
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

```
 We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting `overscroll-behavior: none` on the [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) element:

 
```
html {
  margin: 0;
  overscroll-behavior: none;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties](https://w3c.github.io/csswg-drafts/css-overscroll/#overscroll-behavior-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overscroll-behavior` | 63 | 18Currently the `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect). | 59 | No | 50 | 16 | 63 | 63 | 59 | 46 | 16 | 8.0 |


See also
--------


* [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#demo)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior>

overscroll-behavior-inline
==========================



The `overscroll-behavior-inline` CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.

 See [`overscroll-behavior`](overscroll-behavior) for a full explanation.

 
```
/\* Keyword values \*/
overscroll-behavior-inline: auto; /\* default \*/
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;

/\* Global values \*/
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: revert;
overscroll-behavior-inline: revert-layer;
overscroll-behavior-inline: unset;

```


Syntax
------


The `overscroll-behavior-inline` property is specified as a keyword chosen from the list of values below.

### Values


 `auto`  The default scroll overflow behavior occurs as normal.

  `contain`  Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

  `none`  No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
overscroll-behavior-inline =   
  contain  [|](value_definition_syntax#single_bar)  
  none     [|](value_definition_syntax#single_bar)  
  auto       
  

```
Examples
--------


### Preventing inline overscrolling



In this demo we have two block-level boxes, one inside the other. The outer box has a large [`width`](width) set on it so the page will scroll horizontally. The inner box has a small width (and [`height`](height)) set on it so it sits comfortably inside the viewport, but its content is given a large width so it will also scroll horizontally.

 By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the inline direction, we've set `overscroll-behavior-inline: contain` on the inner box.

 #### HTML

 
```
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>

```
 #### CSS

 
```
main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

p {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical](https://w3c.github.io/csswg-drafts/css-overscroll/#overscroll-behavior-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overscroll-behavior-inline` | 77 | 79 | 73 | No | 64 | 16 | 77 | 77 | No | 55 | 16 | 12.0 |


See also
--------


* [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#demo)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-inline>

overscroll-behavior-x
=====================



The `overscroll-behavior-x` CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.

 See [`overscroll-behavior`](overscroll-behavior) for a full explanation.

 
```
/\* Keyword values \*/
overscroll-behavior-x: auto; /\* default \*/
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/\* Global values \*/
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

```


Syntax
------


The `overscroll-behavior-x` property is specified as a keyword chosen from the list of values below.

### Values


 `auto`  The default scroll overflow behavior occurs as normal.

  `contain`  Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

  `none`  No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
overscroll-behavior-x =   
  contain  [|](value_definition_syntax#single_bar)  
  none     [|](value_definition_syntax#single_bar)  
  auto       
  

```
Examples
--------


### Preventing an underlying element from scrolling horizontally



In our simple [overscroll-behavior-x example](https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x) (see [source code](https://github.com/mdn/css-examples/blob/main/overscroll-behavior/overscroll-behavior-x.html) also), we have two block-level boxes, one inside the other. The outer box has a large [`width`](width) set on it so the page will scroll horizontally. The inner box has a small width (and [`height`](height)) set on it so it sits comfortably inside the viewport, but its content is given a large `width` so it will scroll horizontally.

 By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this, you can set `overscroll-behavior-x: contain` on the inner box:

 
```
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical](https://w3c.github.io/csswg-drafts/css-overscroll/#overscroll-behavior-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overscroll-behavior-x` | 63 | 18Currently the `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect). | 59 | No | 50 | 16 | 63 | 63 | 59 | 46 | 16 | 8.0 |


See also
--------


* [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#full-demo)
* The mapped logical properties: [`overscroll-behavior-inline`](overscroll-behavior-inline), [`overscroll-behavior-block`](overscroll-behavior-block)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x>

overscroll-behavior-y
=====================



The `overscroll-behavior-y` CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.

 See [`overscroll-behavior`](overscroll-behavior) for a full explanation.

 
```
/\* Keyword values \*/
overscroll-behavior-y: auto; /\* default \*/
overscroll-behavior-y: contain;
overscroll-behavior-y: none;

/\* Global values \*/
overscroll-behavior-y: inherit;
overscroll-behavior-y: initial;
overscroll-behavior-y: revert;
overscroll-behavior-y: revert-layer;
overscroll-behavior-y: unset;

```


Syntax
------


The `overscroll-behavior-y` property is specified as a keyword chosen from the list of values below.

### Values


 `auto`  The default scroll overflow behavior occurs as normal.

  `contain`  Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

  `none`  No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
overscroll-behavior-y =   
  contain  [|](value_definition_syntax#single_bar)  
  none     [|](value_definition_syntax#single_bar)  
  auto       
  

```
Examples
--------


### Preventing an underlying element from scrolling vertically




```
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

```
 See [`overscroll-behavior`](overscroll-behavior) for a full example and explanation.


Specifications
--------------




| Specification |
| --- |
| [CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical](https://w3c.github.io/csswg-drafts/css-overscroll/#overscroll-behavior-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overscroll-behavior-y` | 63 | 18Currently the `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect). | 59 | No | 50 | 16 | 63 | 63 | 59 | 46 | 16 | 8.0 |


See also
--------


* [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#demo)
* The mapped logical properties: [`overscroll-behavior-inline`](overscroll-behavior-inline), [`overscroll-behavior-block`](overscroll-behavior-block)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y>

outline-style
=============


The `outline-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the [`border`](border).


Try it
------



 It is often more convenient to use the shorthand property [`outline`](outline) when defining the appearance of an outline.


Syntax
------




```
/\* Keyword values \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* Global values \*/
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;

```
 The `outline-style` property is specified as any one of the values listed below.


### Values


 `auto`  Permits the user agent to render a custom outline style.

  `none`  No outline is used. The [`outline-width`](outline-width) is `0`.

  `dotted`  The outline is a series of dots.

  `dashed`  The outline is a series of short line segments.

  `solid`  The outline is a single line.

  `double`  The outline is two single lines. The [`outline-width`](outline-width) is the sum of the two lines and the space between them.

  `groove`  The outline looks as though it were carved into the page.

  `ridge`  The opposite of `groove`: the outline looks as though it were extruded from the page.

  `inset`  The outline makes the box look as though it were embedded in the page.

  `outset`  The opposite of `inset`: the outline makes the box look as though it were coming out of the page.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
outline-style =   
  auto                  [|](value_definition_syntax#single_bar)  
  [<outline-line-style>](outline-line-style)    
  

```
Examples
--------


### Setting outline style to auto



The `auto` value indicates a custom outline style, described in [the specification](https://www.w3.org/TR/css-ui-3/#outline-style) as "typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow".

 #### HTML

 
```
<div>
  <p class="auto">Outline Demo</p>
</div>

```
 #### CSS

 
```
.auto {
  outline-style: auto; /\* same result as "outline: auto" \*/
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}

```
 #### Result



### Setting outline style to dashed and dotted



#### HTML

 
```
<div>
  <div class="dotted">
    <p class="dashed">Outline Demo</p>
  </div>
</div>

```
 #### CSS

 
```
.dotted {
  outline-style: dotted; /\* same result as "outline: dotted" \*/
}
.dashed {
  outline-style: dashed;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}

```
 #### Result



### Setting outline style to solid and double



#### HTML

 
```
<div>
  <div class="solid">
    <p class="double">Outline Demo</p>
  </div>
</div>

```
 #### CSS

 
```
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}

```
 #### Result



### Setting outline style to groove and ridge



#### HTML

 
```
<div>
  <div class="groove">
    <p class="ridge">Outline Demo</p>
  </div>
</div>

```
 #### CSS

 
```
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}

```
 #### Result



### Setting outline style to inset and outset



#### HTML

 
```
<div>
  <div class="inset">
    <p class="outset">Outline Demo</p>
  </div>
</div>

```
 #### CSS

 
```
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* To make the Demo clearer \*/
\* {
  outline-width: 10px;
  padding: 15px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # outline-style](https://w3c.github.io/csswg-drafts/css-ui/#outline-style) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `outline-style` | 1 | 12 | 1.5Before Firefox 88, an outline does not follow the shape of `border-radius`.1–3.6 | 8 | 7 | 1.2 | 2 | 18 | 4Before Firefox 88, an outline does not follow the shape of `border-radius`. | 10.1 | 1 | 1.0 |
| `auto` | 1 | 79 | 1.5 | No | 15 | 1.2 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-width`](outline-width)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style>

overflow-inline
===============



The `overflow-inline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.

  **Note:** The `overflow-inline` property maps to [`overflow-y`](overflow-y) or [`overflow-x`](overflow-x) depending on the writing mode of the document.

 

Syntax
------




```
/\* Keyword values \*/
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: scroll;
overflow-inline: auto;

/\* Global values \*/
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;

```
 The `overflow-inline` property is specified as a single keyword chosen from the list of values below.


### Values


 `visible`  Content is not clipped and may be rendered outside the padding box's inline start and end edges.

  `hidden`  Content is clipped if necessary to fit the inline dimension in the padding box. No scrollbars are provided.

  `scroll`  Content is clipped if necessary to fit in the padding box in the inline dimension. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

  `auto`  Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | Block-containers, flex containers, and grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of [`overflow-x`](overflow-x) or [`overflow-y`](overflow-y) is neither `visible` nor clip |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-inline =   
  <'overflow'>    
  

```
Examples
--------


### Setting inline overflow behavior



#### HTML

 
```
<ul>
  <li>
    <code>overflow-inline:hidden</code> — hides the text outside the box
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline:scroll</code> — always adds a scrollbar
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline:visible</code> — displays the text outside the box if
    needed
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline:auto</code> — on most browsers, equivalent to
    <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>

```
 #### CSS

 
```
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # overflow-control](https://w3c.github.io/csswg-drafts/css-overflow/#overflow-control) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-inline` | No | No | 69 | No | No | No | No | No | No | No | No | No |


See also
--------


* Related CSS properties: [`text-overflow`](text-overflow), [`white-space`](white-space), [`overflow`](overflow), [`overflow-block`](overflow-block), [`overflow-x`](overflow-x), [`overflow-y`](overflow-y), [`clip`](clip), [`display`](display)
* [CSS Logical Properties](css_logical_properties)
* [Writing Modes](css_writing_modes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-inline>

overflow-wrap
=============


The `overflow-wrap` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.


Try it
------



  **Note:** In contrast to [`word-break`](word-break), `overflow-wrap` will only create a break if an entire word cannot be placed on its own line without overflowing.

  The property was originally a nonstandard and unprefixed Microsoft extension called `word-wrap`, and was implemented by most browsers with the same name. It has since been renamed to `overflow-wrap`, with `word-wrap` being an alias.


Syntax
------




```
/\* Keyword values \*/
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/\* Global values \*/
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;

```
 The `overflow-wrap` property is specified as a single keyword chosen from the list of values below.


### Values


 `normal`  Lines may only break at normal word break points (such as a space between two words).

  `anywhere`  To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

  `break-word`  The same as the `anywhere` value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | non-replaced inline elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-wrap =   
  normal      [|](value_definition_syntax#single_bar)  
  break-word  [|](value_definition_syntax#single_bar)  
  anywhere      
  

```
Examples
--------


### Comparing overflow-wrap, word-break, and hyphens



This example compares the results of `overflow-wrap`, `word-break`, and `hyphens` when breaking up a long word.

 #### HTML

 
```
<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>

```
 #### CSS

 
```
p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # overflow-wrap-property](https://w3c.github.io/csswg-drafts/css-text/#overflow-wrap-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-wrap` | 231 | 1812 | 493.5 | 5.5 | 12.110.5 | 71 | 4.41 | 2518 | 494 | 12.111 | 71 | 1.51.0 |
| `anywhere` | 80 | 80 | 65 | No | 67 | 15.4 | 80 | 80 | 65 | No | 15.4 | 13.0 |
| `break-word` | 1 | 12 | 3.5 | 5.5 | 10.5 | 1 | ≤37 | 18 | 4 | 11 | 1 | 1.0 |


See also
--------


* [`word-break`](word-break)
* [`hyphens`](hyphens)
* [`text-overflow`](text-overflow)
* [Guide to wrapping and breaking text](css_text/wrapping_text)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap>

overflow-x
==========


The `overflow-x` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the [`overflow`](overflow) shorthand property.


Try it
------


Syntax
------




```
/\* Keyword values \*/
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

/\* Global values \*/
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;

```
 The `overflow-x` property is specified as a single keyword chosen from the list of values below.

 If [`overflow-y`](overflow-y) is `hidden`, `scroll`, or `auto` and this property is `visible` (default), the value will be implicitly computed as `auto`.


### Values


 `visible`  Overflow content is not clipped and may be visible outside the element's padding box on left and right edges. The element box is not a [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container).

  `hidden`  Overflow content is clipped if necessary to fit horizontally in the elements' padding box. No scroll bars are provided.

  `clip`  Overflow content is clipped at the element's *overflow clip edge* that is defined using the [`overflow-clip-margin`](overflow-clip-margin) property. As a result, content overflows the element's padding box by the [`<length>`](length) value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with [`display: flow-root`](display#flow-root). The element box is not a scroll container.

  `scroll`  Overflow content is clipped if necessary to fit horizontally inside the element's padding box. Browsers display scroll bars in the horizontal direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

  `auto`  Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible`, but still establishes a new block-formatting context. Desktop browsers provide scroll bars if content overflows.

  **Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

   Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of [`overflow-x`](overflow-x) or [`overflow-y`](overflow-y) is neither `visible` nor clip |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-x =   
  visible  [|](value_definition_syntax#single_bar)  
  hidden   [|](value_definition_syntax#single_bar)  
  clip     [|](value_definition_syntax#single_bar)  
  scroll   [|](value_definition_syntax#single_bar)  
  auto       
  

```
Examples
--------


### HTML



```
<ul>
  <li>
    <code>overflow-x:hidden</code> — hides the text outside the box
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:scroll</code> — always adds a scrollbar
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code> — displays the text outside the box if
    needed
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code> — on most browsers, equivalent to
    <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>

```
### CSS



```
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # overflow-properties](https://w3c.github.io/csswg-drafts/css-overflow/#overflow-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-x` | 1 | 12 | 3.5 | 85 | 9.5 | 3 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `clip` | 90 | 90 | 813.5–81 | No | 76 | 16 | 90 | 90 | 814–81 | No | 16 | 15.0 |
| `overlay` | 15 | 79 | 112 | No | 15 | No | 100 | 100 | 112 | No | No | 4.0 |


See also
--------


* Related CSS properties: [`text-overflow`](text-overflow), [`white-space`](white-space), [`overflow`](overflow), [`overflow-y`](overflow-y), [`clip`](clip), [`display`](display)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x>

overscroll-behavior-block
=========================



The `overscroll-behavior-block` CSS property sets the browser's behavior when the block direction boundary of a scrolling area is reached.

 See [`overscroll-behavior`](overscroll-behavior) for a full explanation.

 
```
/\* Keyword values \*/
overscroll-behavior-block: auto; /\* default \*/
overscroll-behavior-block: contain;
overscroll-behavior-block: none;

/\* Global values \*/
overscroll-behavior-block: inherit;
overscroll-behavior-block: initial;
overscroll-behavior-block: revert;
overscroll-behavior-block: revert-layer;
overscroll-behavior-block: unset;

```


Syntax
------


The `overscroll-behavior-block` property is specified as a keyword chosen from the list of values below.

### Values


 `auto`  The default scroll overflow behavior occurs as normal.

  `contain`  Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

  `none`  No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | non-replaced block-level elements and non-replaced inline-block elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
overscroll-behavior-block =   
  contain  [|](value_definition_syntax#single_bar)  
  none     [|](value_definition_syntax#single_bar)  
  auto       
  

```
Examples
--------


### Preventing block overscrolling



In this demo we have two block-level boxes, one inside the other. The outer box has a large [`height`](height) set on it so the page will scroll vertically. The inner box has a small [`width`](width) (and `height`) set on it so it sits comfortably inside the viewport, but its content is given a large `height` so it will also scroll vertically.

 By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the block direction, we've set `overscroll-behavior-block: contain` on the inner box.

 #### HTML

 
```
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-block</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>

```
 #### CSS

 
```
main {
  height: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 19px,
    rgba(0, 0, 0, 0.5) 20px
  );
}

p {
  padding: 10px;
  background-color: rgba(255, 0, 0, 0.5);
  margin: 0;
  width: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical](https://w3c.github.io/csswg-drafts/css-overscroll/#overscroll-behavior-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overscroll-behavior-block` | 77 | 79 | 73 | No | 64 | 16 | 77 | 77 | No | 55 | 16 | 12.0 |


See also
--------


* [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#full-demo)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block>

pad
===


The `pad` descriptor can be used with custom counter style definitions when you need the marker representations to have a minimum length.


Syntax
------



```
pad: 3 "0";

```
### Values


 `<integer> && <symbol>`  The `<integer>` specifies a minimum length that all counter representations must reach. The value must be non-negative. If the minimum length is not reached, the representation will be padded with the specified `<symbol>`.

  Description
-----------


If a marker representation is smaller than the specified pad length, then the marker will be padded with the specified pad symbol. Marker representations longer than the pad length are constructed as normal. Pad descriptor takes the minimum marker length as an integer and a symbol to be used for padding as the second parameter. A common usage of the pad descriptor is when you need your list to start numbering from 01 and go through 02, 03 and so on, instead of just 1, 2, 3…

Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `0 ""` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
pad =   
  [<integer [0,∞]>](../integer)  [&&](../value_definition_syntax#double_ampersand)  
  <symbol>           
  
<symbol> =   
  [<string>](../string)        [|](../value_definition_syntax#single_bar)  
  <image>         [|](../value_definition_syntax#single_bar)  
  [<custom-ident>](../custom-ident)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Padding a counter



#### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style pad-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}

.list {
  list-style: pad-example;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-pad](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-pad) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `pad` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/pad>

padding
=======


The `padding` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) sets the [padding area](css_box_model/introduction_to_the_css_box_model#padding_area) on all four sides of an element at once.


Try it
------



 An element's padding area is the space between its content and its border.

  **Note:** Padding creates extra space within an element. In contrast, [`margin`](margin) creates extra space *around* an element.

 
Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`padding-top`](padding-top)
* [`padding-right`](padding-right)
* [`padding-bottom`](padding-bottom)
* [`padding-left`](padding-left)


Syntax
------




```
/\* Apply to all four sides \*/
padding: 1em;

/\* top and bottom | left and right \*/
padding: 5% 10%;

/\* top | left and right | bottom \*/
padding: 1em 2em 2em;

/\* top | right | bottom | left \*/
padding: 5px 1em 0 2em;

/\* Global values \*/
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

```
 The `padding` property may be specified using one, two, three, or four values. Each value is a [`<length>`](length) or a [`<percentage>`](percentage). Negative values are invalid.

 * When **one** value is specified, it applies the same padding to **all four sides**.
* When **two** values are specified, the first padding applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first padding applies to the **top**, the second to the **right and left**, the third to the **bottom**.
* When **four** values are specified, the paddings apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


### Values


 [`<length>`](length)  The size of the padding as a fixed value.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`padding-bottom`](padding-bottom): `0`
* [`padding-left`](padding-left): `0`
* [`padding-right`](padding-right): `0`
* [`padding-top`](padding-top): `0`
 |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`padding-bottom`](padding-bottom): the percentage as specified or the absolute length
* [`padding-left`](padding-left): the percentage as specified or the absolute length
* [`padding-right`](padding-right): the percentage as specified or the absolute length
* [`padding-top`](padding-top): the percentage as specified or the absolute length
 |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding =   
  <'padding-top'>[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting padding with pixels



#### HTML

 
```
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>

```
 #### CSS

 
```
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

```
 #### Result



### Setting padding with pixels and percentages



```
padding: 5%; /\* All sides: 5% padding \*/

padding: 10px; /\* All sides: 10px padding \*/

padding: 10px 20px; /\* top and bottom: 10px padding \*/
/\* left and right: 20px padding \*/

padding: 10px 3% 20px; /\* top: 10px padding \*/
/\* left and right: 3% padding \*/
/\* bottom: 20px padding \*/

padding: 1em 3px 30px 5px; /\* top: 1em padding \*/
/\* right: 3px padding \*/
/\* bottom: 30px padding \*/
/\* left: 5px padding \*/

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # padding-shorthand](https://w3c.github.io/csswg-drafts/css-box/#padding-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Introduction to the CSS basic box model](css_box_model/introduction_to_the_css_box_model)
* [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left).
* The mapped logical properties: [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end) and the shorthands [`padding-block`](padding-block) and [`padding-inline`](padding-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding>

padding-block
=============


The `padding-block` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`padding-block-end`](padding-block-end)
* [`padding-block-start`](padding-block-start)


Syntax
------




```
/\* <length> values \*/
padding-block: 10px 20px; /\* An absolute length \*/
padding-block: 1em 2em; /\* relative to the text size \*/
padding-block: 10px; /\* sets both start and end values \*/

/\* <percentage> values \*/
padding-block: 5% 2%; /\* relative to the nearest block container's width \*/

/\* Global values \*/
padding-block: inherit;
padding-block: initial;
padding-block: revert;
padding-block: revert-layer;
padding-block: unset;

```
 The `padding-block` property may be specified with one or two values. If one value is given, it is used as the value for both [`padding-block-start`](padding-block-start) and [`padding-block-end`](padding-block-end). If two values are given, the first is used for [`padding-block-start`](padding-block-start) and the second for [`padding-block-end`](padding-block-end).


### Values


The `padding-block` property takes the same values as the [`padding-left`](padding-left) property.

Description
-----------


These values corresponds to the [`padding-top`](padding-top) and [`padding-bottom`](padding-bottom), or [`padding-right`](padding-right), and [`padding-left`](padding-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`padding-block-start`](padding-block-start): `0`
* [`padding-block-end`](padding-block-end): `0`
 |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`padding-block-start`](padding-block-start): as [`<length>`](length)
* [`padding-block-end`](padding-block-end): as [`<length>`](length)
 |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-block =   
  <'padding-top'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting block padding for vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-padding-block](https://w3c.github.io/csswg-drafts/css-logical/#propdef-padding-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-block` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block>

padding-block-end
=================


The `padding-block-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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.


Try it
------


Syntax
------



```
/\* <length> values \*/
padding-block-end: 10px; /\* An absolute length \*/
padding-block-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-block-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-block-end: inherit;
padding-block-end: initial;
padding-block-end: revert;
padding-block-end: revert-layer;
padding-block-end: unset;

```
### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Description
-----------



The `padding-block-end` property is defined in the specification as taking the same values as the [`padding-top`](padding-top) property. However, the physical property it maps to depends on the values set for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). Therefore, it could map to [`padding-bottom`](padding-bottom), [`padding-right`](padding-right), or [`padding-left`](padding-left).

 It relates to [`padding-block-start`](padding-block-start), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end), which define the other paddings of the element.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as [`<length>`](length) |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-block-end =   
  <'padding-top'>    
  

```
Examples
--------


### Setting block end padding for vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-end: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # padding-properties](https://w3c.github.io/csswg-drafts/css-logical/#padding-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-block-end` | 87 | 87 | 41 | No | 73 | 12.1 | 87 | 87 | 41 | 62 | 12.2 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end>

padding-block-start
===================


The `padding-block-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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.


Try it
------


Syntax
------



```
/\* <length> values \*/
padding-block-start: 10px; /\* An absolute length \*/
padding-block-start: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-block-start: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: revert;
padding-block-start: revert-layer;
padding-block-start: unset;

```
### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the [inline-size](css_flow_layout/block_and_inline_layout_in_normal_flow) (*width* in a horizontal language) of the [containing block](containing_block). Must be nonnegative.

  Description
-----------



The `padding-block-start` property is defined in the specification as taking the same values as the [`padding-top`](padding-top) property. However, the physical property it maps to depends on the values set for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). Therefore, it could map to [`padding-bottom`](padding-bottom), [`padding-right`](padding-right), or [`padding-left`](padding-left).

 It relates to [`padding-block-end`](padding-block-end), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end), which define the other paddings of the element.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as [`<length>`](length) |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-block-start =   
  <'padding-top'>    
  

```
Examples
--------


### Setting block start padding for vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-block-start: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # padding-properties](https://w3c.github.io/csswg-drafts/css-logical/#padding-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-block-start` | 87 | 87 | 41 | No | 73 | 12.1 | 87 | 87 | 41 | 62 | 12.2 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start>

padding-bottom
==============


The `padding-bottom` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the height of the [padding area](css_box_model/introduction_to_the_css_box_model#padding_area) on the bottom of an element.


Try it
------



 An element's padding area is the space between its content and its border.

  ![The effect of the CSS padding-bottom property on the element box] 

  **Note:** The [`padding`](padding) property can be used to set paddings on all four sides of an element with a single declaration.

 
Syntax
------




```
/\* <length> values \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> value \*/
padding-bottom: 10%;

/\* Global values \*/
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: revert;
padding-bottom: revert-layer;
padding-bottom: unset;

```
 The `padding-bottom` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.


### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-bottom =   
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting padding bottom with pixels and percentages



```
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 10px;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # padding-physical](https://w3c.github.io/csswg-drafts/css-box/#padding-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-bottom` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Introduction to the CSS basic box model](css_box_model/introduction_to_the_css_box_model)
* [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-left`](padding-left) and the [`padding`](padding) shorthand
* The mapped logical properties: [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end) and the shorthands [`padding-block`](padding-block) and [`padding-inline`](padding-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom>

overflow-y
==========


The `overflow-y` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the [`overflow`](overflow) shorthand property.


Try it
------


Syntax
------




```
/\* Keyword values \*/
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;

/\* Global values \*/
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;

```
 The `overflow-y` property is specified as a single keyword chosen from the list of values below.

 If [`overflow-x`](overflow-x) is `hidden`, `scroll`, or `auto` and this property is `visible` (default), the value will be implicitly computed as `auto`.


### Values



 `visible`  Overflow content is not clipped and may be visible outside the element's padding box on top and bottom edges. The element box is not a [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container).

  `hidden`  Overflow content is clipped if necessary to fit vertically in the elements' padding box. No scroll bars are provided.

  `clip`  Overflow content is clipped at the element's *overflow clip edge* that is defined using the [`overflow-clip-margin`](overflow-clip-margin) property. As a result, content overflows the element's padding box by the [`<length>`](length) value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with [`display: flow-root`](display#flow-root). The element box is not a scroll container.

  `scroll`  Overflow content is clipped if necessary to fit vertically inside the element's padding box. Browsers display scroll bars in the vertical direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

  `auto`  Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing, hiding scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible`, but still establishes a new block-formatting context.

    **Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of [`overflow-x`](overflow-x) or [`overflow-y`](overflow-y) is neither `visible` nor clip |
| Animation type | discrete |

Formal syntax
-------------



```
overflow-y =   
  visible  [|](value_definition_syntax#single_bar)  
  hidden   [|](value_definition_syntax#single_bar)  
  clip     [|](value_definition_syntax#single_bar)  
  scroll   [|](value_definition_syntax#single_bar)  
  auto       
  

```
Examples
--------


### Setting overflow-y behavior



#### HTML

 
```
<ul>
  <li>
    <code>overflow-y:hidden</code> — hides the text outside the box
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:scroll</code> — always adds a scrollbar
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:visible</code> — displays the text outside the box if
    needed
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-y:auto</code> — equivalent to <code>scroll</code>
    on most browsers
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

```
 #### CSS

 
```
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-y: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-y: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-y: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-y: auto;
  margin-bottom: 120px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # overflow-properties](https://w3c.github.io/csswg-drafts/css-overflow/#overflow-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-y` | 1 | 12 | 3.5 | 85 | 9.5 | 3 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `clip` | 90 | 90 | 813.5–81 | No | 76 | 16 | 90 | 90 | 814–81 | No | 16 | 15.0 |
| `overlay` | 15 | 79 | 112 | No | 15 | No | 100 | 100 | 112 | No | No | 4.0 |


See also
--------


* Related CSS properties: [`text-overflow`](text-overflow), [`white-space`](white-space), [`overflow`](overflow), [`overflow-x`](overflow-x), [`clip`](clip), [`display`](display)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y>

padding-inline
==============


The `padding-inline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`padding-inline-end`](padding-inline-end)
* [`padding-inline-start`](padding-inline-start)


Syntax
------




```
/\* <length> values \*/
padding-inline: 10px 20px; /\* An absolute length \*/
padding-inline: 1em 2em; /\* relative to the text size \*/
padding-inline: 10px; /\* sets both start and end values \*/

/\* <percentage> values \*/
padding-inline: 5% 2%; /\* relative to the nearest block container's width \*/

/\* Global values \*/
padding-inline: inherit;
padding-inline: initial;
padding-inline: revert;
padding-inline: revert-layer;
padding-inline: unset;

```
 The `padding-inline` property may be specified with one or two values. If one value is given, it is used as the value for both [`padding-inline-start`](padding-inline-start) and [`padding-inline-end`](padding-inline-end). If two values are given, the first is used for [`padding-inline-start`](padding-inline-start) and the second for [`padding-inline-end`](padding-inline-end).


### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Description
-----------


Values for this property correspond to the [`padding-top`](padding-top) and [`padding-bottom`](padding-bottom), or [`padding-right`](padding-right), and [`padding-left`](padding-left) property depending on the values defined for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation).

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`padding-inline-start`](padding-inline-start): `0`
* [`padding-inline-end`](padding-inline-end): `0`
 |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`padding-inline-start`](padding-inline-start): as [`<length>`](length)
* [`padding-inline-end`](padding-inline-end): as [`<length>`](length)
 |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-inline =   
  <'padding-top'>[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Setting inline padding for vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # propdef-padding-inline](https://w3c.github.io/csswg-drafts/css-logical/#propdef-padding-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-inline` | 87 | 87 | 66 | No | 73 | 14.1 | 87 | 87 | 66 | 62 | 14.5 | 14.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline>

padding-inline-end
==================


The `padding-inline-end` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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.


Try it
------


Syntax
------



```
/\* <length> values \*/
padding-inline-end: 10px; /\* An absolute length \*/
padding-inline-end: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-end: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-inline-end: inherit;
padding-inline-end: initial;
padding-inline-end: revert;
padding-inline-end: revert-layer;
padding-inline-end: unset;

```
### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the [inline-size](css_flow_layout/block_and_inline_layout_in_normal_flow) (*width* in a horizontal language) of the [containing block](containing_block). Must be nonnegative.

  Description
-----------



The `padding-inline-end` property is defined in the specification as taking the same values as the [`padding-top`](padding-top) property. However, the physical property it maps to depends on the values set for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). Therefore, it could map to [`padding-bottom`](padding-bottom), [`padding-right`](padding-right), or [`padding-left`](padding-left).

 It relates to [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), and [`padding-inline-start`](padding-inline-start), which define the other paddings of the element.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as [`<length>`](length) |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-inline-end =   
  <'padding-top'>    
  

```
Examples
--------


### Setting inline end padding for vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-end: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # padding-properties](https://w3c.github.io/csswg-drafts/css-logical/#padding-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-inline-end` | 872 | 8779 | 413 | No | 7315 | 12.13 | 872 | 8718 | 414 | 6214 | 12.23 | 14.01.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end>

padding-inline-start
====================


The `padding-inline-start` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 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.


Try it
------


Syntax
------



```
/\* <length> values \*/
padding-inline-start: 10px; /\* An absolute length \*/
padding-inline-start: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-inline-start: 5%; /\* A padding relative to the block container's width \*/

/\* Global values \*/
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: revert-layer;
padding-inline-start: unset;

```
### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Description
-----------



The `padding-inline-start` property is defined in the specification as taking the same values as the [`padding-top`](padding-top) property. However, the physical property it maps to depends on the values set for [`writing-mode`](writing-mode), [`direction`](direction), and [`text-orientation`](text-orientation). Therefore, it could map to [`padding-bottom`](padding-bottom), [`padding-right`](padding-right), or [`padding-left`](padding-left).

 It relates to [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), and [`padding-inline-end`](padding-inline-end), which define the other paddings of the element.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| [Inherited](inheritance) | no |
| Percentages | logical-width of containing block |
| [Computed value](computed_value) | as [`<length>`](length) |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-inline-start =   
  <'padding-top'>    
  

```
Examples
--------


### Setting inline start padding for vertical text



#### HTML

 
```
<div>
  <p class="exampleText">Example text</p>
</div>

```
 #### CSS

 
```
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # padding-properties](https://w3c.github.io/csswg-drafts/css-logical/#padding-properties) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-inline-start` | 872 | 8779 | 413 | No | 7315 | 12.13 | 872 | 8718 | 414 | 6214 | 12.23 | 14.01.0 |


See also
--------


* [CSS Logical Properties and Values](css_logical_properties)
* The mapped physical properties: [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), and [`padding-left`](padding-left)
* [`writing-mode`](writing-mode), [`direction`](direction), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start>

padding-left
============


The `padding-left` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the [padding area](css_box_model/introduction_to_the_css_box_model#padding_area) to the left of an element.


Try it
------



 An element's padding area is the space between its content and its border.

  **Note:** The [`padding`](padding) property can be used to set paddings on all four sides of an element with a single declaration.

 
Syntax
------




```
/\* <length> values \*/
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;

/\* <percentage> value \*/
padding-left: 10%;

/\* Global values \*/
padding-left: inherit;
padding-left: initial;
padding-left: revert;
padding-left: revert-layer;
padding-left: unset;

```
 The `padding-left` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.


### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-left =   
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting left padding using pixels and percentages



```
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # padding-physical](https://w3c.github.io/csswg-drafts/css-box/#padding-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-left` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Introduction to the CSS basic box model](css_box_model/introduction_to_the_css_box_model)
* [`padding-top`](padding-top), [`padding-right`](padding-right), [`padding-bottom`](padding-bottom) and the [`padding`](padding) shorthand
* The mapped logical properties: [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end) and the shorthands [`padding-block`](padding-block) and [`padding-inline`](padding-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left>

padding-right
=============


The `padding-right` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the width of the [padding area](css_box_model/introduction_to_the_css_box_model#padding_area) on the right of an element.


Try it
------



 An element's padding area is the space between its content and its border.

  **Note:** The [`padding`](padding) property can be used to set paddings on all four sides of an element with a single declaration.

 
Syntax
------




```
/\* <length> values \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* <percentage> value \*/
padding-right: 10%;

/\* Global values \*/
padding-right: inherit;
padding-right: initial;
padding-right: revert;
padding-right: revert-layer;
padding-right: unset;

```
 The `padding-right` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.


### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-right =   
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting right padding using pixels and percentages



```
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 10px;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # padding-physical](https://w3c.github.io/csswg-drafts/css-box/#padding-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-right` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Introduction to the CSS basic box model](css_box_model/introduction_to_the_css_box_model)
* [`padding-top`](padding-top), [`padding-bottom`](padding-bottom), [`padding-left`](padding-left) and the [`padding`](padding) shorthand
* The mapped logical properties: [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end) and the shorthands [`padding-block`](padding-block) and [`padding-inline`](padding-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right>

page-break-after
================



 **Warning:** This property has been replaced by the [`break-after`](break-after) property.

  The `page-break-after` CSS property adjusts page breaks *after* the current element.



Try it
------


Syntax
------




```
/\* Keyword values \*/
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;

/\* Global values \*/
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: revert-layer;
page-break-after: unset;

```
 This property applies to block elements that generate a box. It won't apply on an empty [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) that won't generate a box.


### Values


 `auto`  Initial value. Automatic page breaks (neither forced nor forbidden).

  `always`  Always force page breaks after the element.

  `avoid`  Avoid page breaks after the element.

  `left`  Force page breaks after the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

  `right`  Force page breaks after the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

  
`recto`  Experimental 
  If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

  
`verso`  Experimental 
  If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

  Page break aliases
------------------



The `page-break-after` property is now a legacy property, replaced by [`break-after`](break-after).

 For compatibility reasons, `page-break-after` should be treated by browsers as an alias of `break-after`. This ensures that sites using `page-break-after` continue to work as designed. A subset of values should be aliased as follows:

 

| page-break-after | break-after |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
page-break-after =   
  auto     [|](value_definition_syntax#single_bar)  
  always   [|](value_definition_syntax#single_bar)  
  avoid    [|](value_definition_syntax#single_bar)  
  left     [|](value_definition_syntax#single_bar)  
  right    [|](value_definition_syntax#single_bar)  
  inherit    
  

```
Examples
--------


### Setting a page break after footnotes



```
/\* move to a new page after footnotes \*/
div.footnotes {
  page-break-after: always;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # page](https://w3c.github.io/csswg-drafts/css-logical/#page) |
| [CSS Paged Media Module Level 3 # page-break-after](https://w3c.github.io/csswg-drafts/css-page/#page-break-after) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `page-break-after` | 1 | 12 | 1The values `avoid`, `left`, and `right` are unsupported. | 4 | 7 | 1.2 | 37 | 18 | 4The values `avoid`, `left`, and `right` are unsupported. | 14 | 1 | 1.0 |


See also
--------


* [`break-before`](break-before), [`break-after`](break-after), [`break-inside`](break-inside)
* [`page-break-before`](page-break-before), [`page-break-inside`](page-break-inside)
* [`orphans`](orphans), [`widows`](widows)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after>

page-break-before
=================



 **Warning:** This property has been replaced by the [`break-before`](break-before) property.

  The `page-break-before` CSS property adjusts page breaks *before* the current element.

 This property applies to block elements that generate a box. It won't apply on an empty [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) that won't generate a box.



Try it
------


Syntax
------



```
/\* Keyword values \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/\* Global values \*/
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;

```
### Values


 `auto`  Initial value. Automatic page breaks (neither forced nor forbidden).

  `always`  Always force page breaks before the element.

  `avoid`  Avoid page breaks before the element.

  `left`  Force page breaks before the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.

  `right`  Force page breaks before the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.

  
`recto`  Experimental 
  If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.

  
`verso`  Experimental 
  If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.

  Page break aliases
------------------



The `page-break-before` property is now a legacy property, replaced by [`break-before`](break-before).

 For compatibility reasons, `page-break-before` should be treated by browsers as an alias of `break-before`. This ensures that sites using `page-break-before` continue to work as designed. A subset of values should be aliased as follows:

 

| page-break-before | break-before |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
page-break-before =   
  auto     [|](value_definition_syntax#single_bar)  
  always   [|](value_definition_syntax#single_bar)  
  avoid    [|](value_definition_syntax#single_bar)  
  left     [|](value_definition_syntax#single_bar)  
  right    [|](value_definition_syntax#single_bar)  
  inherit    
  

```
Examples
--------


### Avoid a page break before an element



```
/\* Avoid page break before div elements of class note \*/
div.note {
  page-break-before: avoid;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # page](https://w3c.github.io/csswg-drafts/css-logical/#page) |
| [CSS Paged Media Module Level 3 # page-break-before](https://w3c.github.io/csswg-drafts/css-page/#page-break-before) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `page-break-before` | 1 | 12 | 1The values `avoid`, `left`, and `right` are unsupported. | 4 | 7 | 1.2 | 37 | 18 | 4The values `avoid`, `left`, and `right` are unsupported. | 14 | 1 | 1.0 |


See also
--------


* [`break-before`](break-before), [`break-after`](break-after), [`break-inside`](break-inside)
* [`page-break-after`](page-break-after), [`page-break-inside`](page-break-inside)
* [`orphans`](orphans), [`widows`](widows)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before>

page-break-inside
=================



 **Warning:** This property has been replaced by the [`break-inside`](break-inside) property.

  The `page-break-inside` CSS property adjusts page breaks *inside* the current element.



Try it
------


Syntax
------



```
/\* Keyword values \*/
page-break-inside: auto;
page-break-inside: avoid;

/\* Global values \*/
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: revert-layer;
page-break-inside: unset;

```
### Values


 `auto`  Initial value. Automatic page breaks (neither forced nor forbidden).

  `avoid`  Avoid page breaks inside the element.

  Page break aliases
------------------



The `page-break-inside` property is now a legacy property, replaced by [`break-inside`](break-inside).

 For compatibility reasons, `page-break-inside` should be treated by browsers as an alias of `break-inside`. This ensures that sites using `page-break-inside` continue to work as designed. A subset of values should be aliased as follows:

 

| page-break-inside | break-inside |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements. |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
page-break-inside =   
  avoid    [|](value_definition_syntax#single_bar)  
  auto     [|](value_definition_syntax#single_bar)  
  inherit    
  

```
Examples
--------


### Avoiding page breaks inside elements



#### HTML

 
```
<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>

```
 #### CSS

 
```
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # page-break-inside](https://w3c.github.io/csswg-drafts/css-page/#page-break-inside) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `page-break-inside` | 1 | 12 | 19Until Firefox 25, `page-break-inside: avoid` did not work with the height of a block. | 8 | 7 | 1.3 | 37 | 18 | 19Until Firefox 25, `page-break-inside: avoid` did not work with the height of a block. | 14 | 1 | 1.0 |


See also
--------


* [`break-before`](break-before), [`break-after`](break-after), [`break-inside`](break-inside)
* [`page-break-after`](page-break-after), [`page-break-before`](page-break-before)
* [`orphans`](orphans), [`widows`](widows)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside>

::part()
========



The `::part` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents any element within a [shadow tree](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) that has a matching [`part`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#part) attribute.

 
```
custom-element::part(foo) {
  /\* Styles to apply to the `foo` part \*/
}

```


Syntax
------



```
::part(<ident>+) {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
<template id="tabbed-custom-element">
  <style>
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 padding: 1rem;
 }
 :host {
 display: flex;
 }
 </style>
  <div part="tab active">Tab 1</div>
  <div part="tab">Tab 2</div>
  <div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>

```
### CSS



```
tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  color: #ffffff;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
  color: #ffffff;
}

tabbed-custom-element::part(tab):focus {
  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}

```
### JavaScript



```
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super().attachShadow({ mode: "open" }).append(template.content);
    }
  }
);

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Shadow Parts # part](https://w3c.github.io/csswg-drafts/css-shadow-parts/#part) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::part` | 73 | 79 | 72 | No | 60 | 13.1 | 73 | 73 | 79 | 52 | 13.4 | 11.0 |


See also
--------


* The [`part`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#part) attribute - Used to define parts which can be selected by the `::part()` selector
* The [`exportparts`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#exportparts) attribute - Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
* [Explainer: CSS Shadow ::part and ::theme](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::part>

:past
=====



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `:past` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches [`:current`](:current). For example in a video with captions which are being displayed by [WebVTT](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API).

 
```
:past(p, span) {
  display: none;
}

```


Syntax
------



```
:past {
  /\* ... \*/
}

```
Examples
--------


### CSS



```
:past(p, span) {
  display: none;
}

```
### HTML



```
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="subtitles.vtt"
 default />
</video>

```
### WebVTT



```
WEBVTT FILE

1
00:00:03.500 --> 00:00:05.000
This is the first caption

2
00:00:06.000 --> 00:00:09.000
This is the second caption

3
00:00:11.000 --> 00:00:19.000
This is the third caption

```
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-past-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-past-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:past` | No | No | No | No | No | 7 | No | No | No | No | 7 | No |


See also
--------


* [Web Video Text Tracks Format (WebVTT)](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API)
* [`:current`](:current)
* [`:future`](:future)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:past>

padding-top
===========


The `padding-top` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the height of the [padding area](css_box_model/introduction_to_the_css_box_model#padding_area) on the top of an element.


Try it
------



 An element's padding area is the space between its content and its border.

  ![The effect of the CSS padding-top property on the element box] 

  **Note:** The [`padding`](padding) property can be used to set paddings on all four sides of an element with a single declaration.

 
Syntax
------




```
/\* <length> values \*/
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/\* <percentage> value \*/
padding-top: 10%;

/\* Global values \*/
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: revert-layer;
padding-top: unset;

```
 The `padding-top` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.


### Values


 [`<length>`](length)  The size of the padding as a fixed value. Must be nonnegative.

  [`<percentage>`](percentage)  The size of the padding as a percentage, relative to the inline size (*width* in a horizontal language, defined by [`writing-mode`](writing-mode)) of the [containing block](containing_block). Must be nonnegative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
padding-top =   
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Setting top padding using pixels and percentages



```
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # padding-physical](https://w3c.github.io/csswg-drafts/css-box/#padding-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `padding-top` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Introduction to the CSS basic box model](css_box_model/introduction_to_the_css_box_model)
* [`padding-right`](padding-right), [`padding-bottom`](padding-bottom), [`padding-left`](padding-left) and the [`padding`](padding) shorthand
* The mapped logical properties: [`padding-block-start`](padding-block-start), [`padding-block-end`](padding-block-end), [`padding-inline-start`](padding-inline-start), and [`padding-inline-end`](padding-inline-end) and the shorthands [`padding-block`](padding-block) and [`padding-inline`](padding-inline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top>

paint()
=======


The `paint()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines an [`<image>`](../image) value generated with a PaintWorklet.


Syntax
------




```
paint(workletName, ...parameters)

```
 where:

  *workletName*  The name of the registered worklet.

  *parameters*  Optional additional parameters to pass to the paintWorklet

  
Examples
--------


### Basic usage example



In JavaScript, we register the [paint worklet](https://developer.mozilla.org/en-US/docs/Web/API/PaintWorkletGlobalScope):

 
```
CSS.paintWorklet.addModule("boxbg.js");

```
 ...then, in the CSS, we define the `background-image` as a `paint()` type with the worklet name, `boxbg`, along with any variables (ex. `--boxColor` and `--widthSubtractor`) the worklet will use:

 
```
li {
  background-image: paint(boxbg);
  --boxColor: hsl(55 90% 60% / 1);
}
li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 1);
  --widthSubtractor: 20;
}
li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 1);
  --widthSubtractor: 40;
}

```
 The result will be the following:



### With additional parameters



You can pass additional arguments via the CSS paint() function. In this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline:

 
```
li {
  --boxColor: hsl(55 90% 60% / 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsl(155 90% 60% / 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsl(255 90% 60% / 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}

```
 We've included a custom property in the selector block defining a boxColor. Custom properties are accessible to the PaintWorklet.



Specifications
--------------




| Specification |
| --- |
| [CSS Painting API Level 1 # paint-notation](https://drafts.css-houdini.org/css-paint-api/#paint-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `paint` | 65 | 79 | No | No | 52 | No | 65 | 65 | No | 47 | No | 9.2 |
| `additional_parameters` | No | No | No | No | No | No | No | No | No | No | No | No |


See also
--------


* [`PaintWorklet`](https://developer.mozilla.org/en-US/docs/Web/API/PaintWorkletGlobalScope)
* [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API)
* [Using the CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API/Guide)
* [`<image>`](../image)
* [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image/paint>

paint-order
===========


The `paint-order` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.


Syntax
------




```
/\* Normal \*/
paint-order: normal;

/\* Single values \*/
paint-order: stroke; /\* draw the stroke first, then fill and markers \*/
paint-order: markers; /\* draw the markers first, then fill and stroke \*/

/\* Multiple values \*/
paint-order: stroke fill; /\* draw the stroke first, then the fill, then the markers \*/
paint-order: markers stroke fill; /\* draw markers, then stroke, then fill \*/

/\* Global values \*/
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;

```
 If no value is specified, the default paint order is `fill`, `stroke`, `markers`.

 When one value is specified, that one is painted first, followed by the other two in their default order relative to one another. When two values are specified, they will be painted in the order they are specified in, followed by the unspecified one.

  **Note:** In the case of this property, markers are only appropriate when drawing SVG shapes involving the use of the `marker-*` properties (e.g. [`marker-start`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-start)) and [`<marker>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker) element. They do not apply to HTML text, so in that case, you can only determine the order of `stroke` and `fill`.

 
### Values


 `normal`  Paint the different items in normal paint order.

   `stroke`, `fill`, `markers`   Specify some or all of these values in the order you want them to be painted in.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | text elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
paint-order =   
  normal                         [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) fill [||](value_definition_syntax#double_bar) stroke [||](value_definition_syntax#double_bar) markers []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Reversing the paint order of stroke and fill



#### SVG

 
```
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>

```
 #### CSS

 
```
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Scalable Vector Graphics (SVG) 2 # PaintOrder](https://svgwg.org/svg2-draft/painting.html#PaintOrder) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `paint-order` | 35 | 17 | 60 | No | 22 | 8 | 37 | 35 | 60 | 22 | 8 | 3.0 |


See also
--------


* [CSS Tricks: paint-order](https://css-tricks.com/almanac/properties/p/paint-order/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order>

path()
======


The `path()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) accepts an SVG path string, and is used in [CSS Shapes](css_shapes) and CSS Motion Path to enable a shape to be drawn.


Try it
------


Syntax
------



When used in [`offset-path`](offset-path) or `[d](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)`:

 
```
path(<string>)

```
 When used in [`clip-path`](clip-path):

 
```
path([<'fill-rule'>,]?<string>)

```

### Parameters


 `<'fill-rule'>`   The filling rule for the interior of the path. Possible values are `nonzero` or `evenodd`. The default value is `nonzero`. See [fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule) for more details. 

  `<string>`  The string is a [data string](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path).

  Examples
--------


### Examples of correct values for path()



```
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

```
### Use as the value of offset-path



The `path()` function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.



### Modify the value of the SVG path d attribute



The `path()` can be used to modify the value of the SVG [`d` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d), which can also be set to `none` in your CSS.

 The "V" symbol will flip vertically when you hover over it, if `d` is supported as a CSS property.

 #### CSS

 
```
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

```
 #### HTML

 
```
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # funcdef-basic-shape-path](https://w3c.github.io/csswg-drafts/css-shapes/#funcdef-basic-shape-path) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `path` | 46Only supported on the `offset-path` property. | 79Only supported on the `offset-path` property. | 97Only supported on the `d` SVG presentation attribute and the `clip-path` and `offset-path` CSS properties. Not supported on the `shape-outside` CSS property.71Only supported on the `clip-path` and `offset-path` properties.63Only supported on the `offset-path` property. | No | 33Only supported on the `offset-path` property. | No | 46Only supported on the `offset-path` property. | 46Only supported on the `offset-path` property. | 97Only supported on the `d` SVG presentation attribute and the `clip-path` and `offset-path` CSS properties. Not supported on the `shape-outside` CSS property.79Only supported on the `clip-path` and `offset-path` properties.63Only supported on the `offset-path` property. | 33Only supported on the `offset-path` property. | No | 5.0Only supported on the `offset-path` property. |


See also
--------


* [`<shape-outside>`](shape-outside)
* [CSS Shapes](css_shapes)
* [Overview of CSS Shapes](css_shapes/overview_of_css_shapes)
* [SVG Path Syntax Illustrated Guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/path>

:paused
=======



The `:paused` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused".

 A resource is paused if the user explicitly paused it, or if it is in a non-activated state.



Syntax
------



```
:paused {
  /\* ... \*/
}

```
Examples
--------


### CSS



```
:paused {
  border: 5px solid orange;
}

```
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # selectordef-paused](https://w3c.github.io/csswg-drafts/selectors/#selectordef-paused) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:paused` | No | No | No | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`:playing`](:playing)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:paused>

<percentage>
============



The `<percentage>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as [`width`](width), [`height`](height), [`margin`](margin), [`padding`](padding), and [`font-size`](font-size).

  **Note:** Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a [`<length>`](length) value) will be accessible on the inherited property, not the percentage value.

 

Syntax
------


The `<percentage>` data type consists of a [`<number>`](number) followed by the percentage sign (`%`). Optionally, it may be preceded by a single `+` or `-` sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.

Interpolation
-------------


When animated, values of the `<percentage>` data type are [interpolated](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](easing-function) associated with the animation.

Examples
--------


### Width and margin-left




```
<div style="background-color:navy;">
  <div style="width:50%; margin-left:20%; background-color:chartreuse;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>

```
 The above HTML will output:



### Font-size




```
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>

```
 The above HTML will output:



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # percentages](https://w3c.github.io/csswg-drafts/css-values/#percentages) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `percentage` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [`<length-percentage>`](length-percentage)
* [CSS Values and Units](css_values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/percentage>

perspective
===========


The `perspective` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.


Try it
------


Syntax
------



```
/\* Keyword value \*/
perspective: none;

/\* <length> values \*/
perspective: 20px;
perspective: 3.5em;

/\* Global values \*/
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;

```
### Values


 `none`  Indicates that no perspective transform is to be applied.

  `<length>`  A [`<length>`](length) giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the children of the element. Negative values are syntax errors. If the value is smaller than `1px`, it is clamped to `1px`.

  Description
-----------



 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. Large values of `perspective` cause a small transformation; small values of `perspective` cause a large transformation. 

 The parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the `perspective` CSS property — are not drawn.

 The *vanishing point* is by default placed at the center of the element, but its position can be changed using the [`perspective-origin`](perspective-origin) property.

 Using this property with a value other than `none` creates a new [stacking context](css_positioning/understanding_z_index/the_stacking_context). Also, in that case, the object will act as a containing block for `position: fixed` elements that it contains.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | the absolute length or `none` |
| Animation type | a [length](length#interpolation) |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
perspective =   
  none            [|](value_definition_syntax#single_bar)  
  [<length [0,∞]>](length)    
  

```
Examples
--------


### Setting perspective


An example showing how a cube varies if the `perspective` is set at different positions is given in [Using CSS transforms > Setting perspective](css_transforms/using_css_transforms#setting_perspective).

Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # perspective-property](https://w3c.github.io/csswg-drafts/css-transforms-2/#perspective-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `perspective` | 3612 | 1212 | 491610 | 10 | 2315 | 94 | 4.43 | 3618 | 491610 | 2414 | 92 | 3.01.0 |


See also
--------


* [Using CSS Transforms](css_transforms/using_css_transforms)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/perspective>

perspective()
=============


 The `perspective()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  The `perspective()` transform function is part of the [`transform`](../transform) value applied on the element being transformed. This differs from the [`perspective`](../perspective) and [`perspective-origin`](../perspective-origin) properties which are attached to the parent of a child transformed in 3-dimensional space. 


Syntax
------



 The perspective distance used by `perspective()` is specified by a [`<length>`](../length) value, which represents the distance between the user and the z=0 plane, or by `none`. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. Negative values are syntax errors. Values smaller than `1px` (including zero) are clamped to `1px`. Values other than `none` cause elements with positive z positions to appear larger, and elements with negative z positions to appear smaller. Elements with z positions equal to or larger than the perspective value disappear as though they are behind the user. Large values of perspective represent a small transformation; small values of `perspective()` represent a large transformation; `perspective(none)` represents perspective from infinite distance and no transformation. 

 
```
perspective(d)

```

### Values



 *d*   Is a [`<length>`](../length) representing the distance from the user to the z=0 plane. If it is 0 or a negative value, no perspective transform is applied. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |  This transformation is not a linear transformation in ℝ^3, and can't be represented using a Cartesian-coordinate matrix.  |   (    1   0   0   0     0   1   0   0     0   0   1   0     0   0   − 1 / d   1    )   |


Examples
--------


### HTML



```
<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

```
### CSS



```
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-perspective](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-perspective) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `perspective` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective>

perspective-origin
==================


The `perspective-origin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property determines the position at which the viewer is looking. It is used as the *vanishing point* by the [`perspective`](perspective) property.


Try it
------



 The `perspective-origin` and [`perspective`](perspective) properties are attached to the parent of a child transformed in 3-dimensional space, unlike the [`perspective()`](transform-function/perspective) transform function which is placed on the element being transformed.


Syntax
------



```
/\* One-value syntax \*/
perspective-origin: x-position;

/\* Two-value syntax \*/
perspective-origin: x-position y-position;

/\* When both x-position and y-position are keywords,
 the following is also valid \*/
perspective-origin: y-position x-position;

/\* Global values \*/
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: revert;
perspective-origin: revert-layer;
perspective-origin: unset;

```
### Values


 *x-position*  Indicates the position of the abscissa of the *vanishing point*. It can have one of the following values:

 * [`<length-percentage>`](length-percentage) indicating the position as an absolute length value or relative to the width of the element. The value may be negative.
* `left`, a keyword being a shortcut for the `0` length value.
* `center`, a keyword being a shortcut for the `50%` percentage value.
* `right`, a keyword being a shortcut for the `100%` percentage value.

  *y-position*  Indicates the position of the ordinate of the *vanishing point*. It can have one of the following values:

 * [`<length-percentage>`](length-percentage) indicating the position as an absolute length value or relative to the height of the element. The value may be negative.
* `top`, a keyword being a shortcut for the `0` length value.
* `center`, a keyword being a shortcut for the `50%` percentage value.
* `bottom`, a keyword being a shortcut for the `100%` percentage value.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `50% 50%` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the size of bounding box |
| [Computed value](computed_value) | for [`<length>`](length) the absolute value, otherwise a percentage |
| Animation type | simple list of length, percentage, or calc |

Formal syntax
-------------



```
perspective-origin =   
  <position>    
  
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Changing the perspective origin


An example showing how to change `perspective-origin` is given in [Using CSS transforms > Changing the perspective origin](css_transforms/using_css_transforms#changing_the_perspective_origin).

Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # perspective-origin-property](https://w3c.github.io/csswg-drafts/css-transforms-2/#perspective-origin-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `perspective-origin` | 3612 | 1212 | 491610 | 10 | 2315 | 94 | 4.43 | 3618 | 491610 | 2414 | 92 | 3.01.0 |


See also
--------


* [Using CSS Transforms](css_transforms/using_css_transforms)
* [`transform-style`](transform-style)
* [`<transform-function>`](transform-function)
* [`perspective`](perspective)
* [`transform: perspective()`](transform-function/perspective) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin>

::placeholder
=============


The `::placeholder` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents the [placeholder text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) in an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element.


Try it
------



 Only the subset of CSS properties that apply to the [`::first-line`](::first-line) pseudo-element can be used in a rule using `::placeholder` in its selector.

  **Note:** In most browsers, the appearance of placeholder text is a translucent or light gray color by default.

 
Syntax
------



```
::placeholder {
  /\* ... \*/
}

```
Accessibility concerns
----------------------


### Color contrast



#### Contrast Ratio

 Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.

 It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputted data.

 Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

 #### Usability

 Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

 An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) to programmatically associate the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) with its hint.

 With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use `aria-describedby` to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

 
```
<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
 id="user-email"
 aria-describedby="user-email-hint"
 name="email"
 type="email" />

```
 * [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)


### Windows High Contrast Mode


Placeholder text will appear with the same styling as user-entered text content when rendered in [Windows High Contrast Mode](https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/)). This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

### Labels



Placeholders are not a replacement for the [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) element. Without a label that has been programmatically associated with an input using a combination of the [`for`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#for) and [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) attributes, assistive technology such as screen readers cannot parse [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements.

 * [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/)


Examples
--------


### Change placeholder appearance



This example shows some of the adjustments that you can make to the styles of placeholder text.

 #### HTML

 
```
<input placeholder="Type here" />

```
 #### CSS

 
```
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

```
 #### Result



### Opaque text



Some browsers (such as Firefox) set the default [`opacity`](opacity) of placeholders to something less than 100%. If you want fully opaque placeholder text, set `opacity` to `1`.

 #### HTML

 
```
<input placeholder="Default opacity" />
<input placeholder="Full opacity" class="force-opaque" />

```
 #### CSS

 
```
::placeholder {
  color: green;
}

.force-opaque::placeholder {
  opacity: 1;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # placeholder-pseudo](https://w3c.github.io/csswg-drafts/css-pseudo/#placeholder-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::placeholder` | 576 | 791212–79 | 5119 | No | 4415 | 10.15 | 572 | 5718 | 5119 | 4314 | 10.34.2 | 7.01.0 |


See also
--------


* The [`:placeholder-shown`](:placeholder-shown) pseudo-class styles an element that *has* an active placeholder.
* Related HTML elements: [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
* [HTML forms](https://developer.mozilla.org/en-US/docs/Learn/Forms)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder>

:placeholder-shown
==================


The `:placeholder-shown` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element that is currently displaying [placeholder text](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder).


Try it
------


Syntax
------



```
:placeholder-shown {
  /\* ... \*/
}

```
Examples
--------


### Basic example



This example applies special font and border styles when the placeholder is shown.

 #### HTML

 
```
<input placeholder="Type something here!" />

```
 #### CSS

 
```
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

```
 #### Result



### Overflowing text



When form fields are too small, placeholder text can get cropped in an undesirable way. You can use the [`text-overflow`](text-overflow) property to alter the way overflowing text is displayed.

 #### HTML

 
```
<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />

```
 #### CSS

 
```
#input2:placeholder-shown {
  text-overflow: ellipsis;
}

```
 #### Result



### Customized input field



The following example highlights the Student ID field with a custom style.

 #### HTML

 
```
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>

```
 #### CSS

 
```
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # placeholder](https://w3c.github.io/csswg-drafts/selectors/#placeholder) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:placeholder-shown` | 47 | 79 | 514–51 | 10 | 34 | 9 | 47 | 47 | 514–51 | 34 | 9 | 5.0 |
| `non_text_types` | 47 | 79 | 59 | No | 34 | 9 | 47 | 47 | 59 | 34 | 9 | 5.0 |


See also
--------


* The [`::placeholder`](::placeholder) pseudo-element styles the placeholder *itself*.
* Related HTML elements: [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
* [HTML forms](https://developer.mozilla.org/en-US/docs/Learn/Forms)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown>

:picture-in-picture
===================


The `:picture-in-picture` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches the element which is currently in picture-in-picture mode.


Syntax
------



```
:picture-in-picture {
  /\* ... \*/
}

```
Usage notes
-----------


The `:picture-in-picture` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

Examples
--------


In this example, a video has a box shadow when it is displayed in the floating window.

### HTML



The page's HTML looks like this:

 
```
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>

```
 The [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) with the ID `"pip-video"` will change between having a red box shadow or not, depending on whether or not it is displayed in the picture-in-picture floating window.


### CSS



The magic happens in the CSS.

 
```
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}

```

Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # pip-state](https://w3c.github.io/csswg-drafts/selectors/#pip-state) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:picture-in-picture` | 110 | 110 | No | No | 96 | No | 110 | 110 | No | 74 | No | No |


See also
--------


* [Picture-in-picture API](https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API)
* [`HTMLVideoElement.requestPictureInPicture()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture)
* [`HTMLVideoElement.disablePictureInPicture`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/disablePictureInPicture)
* [`Document.pictureInPictureEnabled`](https://developer.mozilla.org/en-US/docs/Web/API/Document/pictureInPictureEnabled)
* [`Document.exitPictureInPicture()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/exitPictureInPicture)
* [`Document.pictureInPictureElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/pictureInPictureElement)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture>

place-content
=============


The `place-content` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) allows you to align content along both the block and inline directions at once (i.e. the [`align-content`](align-content) and [`justify-content`](justify-content) properties) in a relevant layout system such as [Grid](css_grid_layout) or [Flexbox](css_flexible_box_layout).


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`align-content`](align-content)
* [`justify-content`](justify-content)


Syntax
------




```
/\* Positional alignment \*/
/\* align-content does not take left and right values \*/
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/\* Baseline alignment \*/
/\* justify-content does not take baseline values \*/
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/\* Distributed alignment \*/
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/\* Global values \*/
place-content: inherit;
place-content: initial;
place-content: revert;
place-content: revert-layer;
place-content: unset;

```
 The first value is the [`align-content`](align-content) property value, the second the [`justify-content`](justify-content) one.

  **Note:** If the second value is not present, the first value is used for both, provided it is a valid value for both. If it is invalid for one or the other, the whole value will be invalid.

 
### Values


 `start`  The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.

  `end`  The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.

  `flex-start`   The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start or cross-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`. 

  `flex-end`   The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end or cross-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`. 

  `center`  The items are packed flush to each other toward the center of the alignment container.

  `left`  The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  `right`  The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.

  `space-between`  The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.

  
`baseline`, `first baseline`, `last baseline`
   Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `space-around`  The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.

  `space-evenly`  The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

  `stretch`  If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size exactly fills the alignment container

  `safe`  Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

  `unsafe`  Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`align-content`](align-content): `normal`
* [`justify-content`](justify-content): `normal`
 |
| Applies to | multi-line flex containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`align-content`](align-content): as specified
* [`justify-content`](justify-content): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
place-content =   
  <'align-content'> <'justify-content'>[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Placing content in a flex container



#### HTML

 
```
<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br />ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br />ipsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

```
 #### CSS

 
```
#container {
  display: flex;
  height: 240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /\* Can be changed in the live sample \*/
  direction: ltr; /\* Can be changed in the live sample \*/
  place-content: flex-end center; /\* Can be changed in the live sample \*/
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # place-content](https://w3c.github.io/csswg-drafts/css-align/#place-content) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `place-content` | 59 | 79 | 45 | No | 46 | 9 | 59 | 59 | 45 | 43 | 9 | 7.0 |
| `flex_context` | 59 | 79 | 45Starting with version 60, you can only specify a single value if it is valid for both `align-content` and `justify-content`. | No | 46 | 9 | 59 | 59 | 45Starting with version 60, you can only specify a single value if it is valid for both `align-content` and `justify-content`. | 43 | 9 | 7.0 |
| `grid_context` | 59 | 79 | 53Starting with version 60, you can only specify a single value if it is valid for both `align-content` and `justify-content`. | No | 46 | 11 | 59 | 59 | 53Starting with version 60, you can only specify a single value if it is valid for both `align-content` and `justify-content`. | 43 | 11 | 7.0 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`align-content`](align-content) property
* The [`justify-content`](justify-content) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/place-content>

place-self
==========


The `place-self` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) allows you to align an individual item in both the block and inline directions at once (i.e. the [`align-self`](align-self) and [`justify-self`](justify-self) properties) in a relevant layout system such as [Grid](css_grid_layout) or [Flexbox](css_flexible_box_layout). If the second value is not present, the first value is also used for it.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`align-self`](align-self)
* [`justify-self`](justify-self)


Syntax
------



```
/\* Keyword values \*/
place-self: auto center;
place-self: normal start;

/\* Positional alignment \*/
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;

/\* Baseline alignment \*/
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/\* Global values \*/
place-self: inherit;
place-self: initial;
place-self: revert;
place-self: revert-layer;
place-self: unset;

```
### Values


 `auto`  Computes to the parent's [`align-items`](align-items) value.

  `normal`  The effect of this keyword is dependent of the layout mode we are in:

 * In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
* For flex items, the keyword behaves as `stretch`.
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* The property doesn't apply to block-level boxes, and to table cells.

  `self-start`  Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

  `self-end`  Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.

  `flex-start`  The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.

  `flex-end`  The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

  `center`  The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.

  
`baseline`, `first baseline`. `last baseline`
   Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`. 

  `stretch`  If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by [`max-height`](max-height)/[`max-width`](max-width) (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`align-self`](align-self): `auto`
* [`justify-self`](justify-self): `auto`
 |
| Applies to | block-level boxes, absolutely-positioned boxes, and grid items |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`align-self`](align-self): `auto` computes to itself on absolutely-positioned elements, and to the computed value of [`align-items`](align-items) on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for [`justify-self`](justify-self). Otherwise the specified value.
* [`justify-self`](justify-self): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
place-self =   
  <'align-self'> <'justify-self'>[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Simple demonstration



In the following example we have a simple 2 x 2 grid layout. Initially the grid container has [`justify-items`](justify-items) and [`align-items`](align-items) values of `stretch` — the defaults — which causes the grid items to stretch across the entire width of their cells.

 The second, third, and fourth grid items are then given different values of `place-self`, to show how these override the default placements. These values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.

 #### HTML

 
```
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>

```
 #### CSS

 
```
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # place-self-property](https://w3c.github.io/csswg-drafts/css-align/#place-self-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `place-self` | 59 | 79 | 45 | No | 46 | 11 | 59 | 59 | 45 | 43 | 11 | 7.0 |
| `flex_context` | 59 | 79 | 45 | No | 46 | 11 | 59 | 59 | 45 | 43 | 11 | 7.0 |
| `grid_context` | 59 | 79 | 45 | No | 46 | 11 | 59 | 59 | 45 | 43 | 11 | 7.0 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`align-self`](align-self) property
* The [`justify-self`](justify-self) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/place-self>

:playing
========



The `:playing` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "playing".

 A resource is playing even if in buffering state or paused for any reason other than a user interaction to cause it to be paused.



Syntax
------



```
:playing {
  /\* ... \*/
}

```
Examples
--------


### CSS



```
:playing {
  border: 5px solid green;
}

```
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # selectordef-playing](https://w3c.github.io/csswg-drafts/selectors/#selectordef-playing) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:playing` | No | No | No | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`:paused`](:paused)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:playing>

<position>
==========



The `<position>` (or `<bg-position>`) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the [`background-position`](background-position) and [`offset-anchor`](offset-anchor) properties.

  **Note:** The final position described by the `<position>` value does not need to be inside the element's box.

 

Syntax
------



 ![Grid showing placement of various values. 0 0 is the top left corner. The four values, right, right center, center left 100%, and top 50% left 100%, are all equivalent, being on the right edge in the middle vertically. The two values, top 75px left 100px and left 100px top 75px, are the same. Bottom left 25% is the same as top 100% left 25%.] 

 The `<position>` data type is specified with one or two keywords, with optional offsets.

 The keyword values are `center`, `top`, `right`, `bottom`, and `left`. Each keyword represents either an edge of the element's box or the center line between two edges. Depending on the context, `center` represents either the center between the left and right edges, or the center between the top and bottom edges.

 If specified, an offset can be either a relative [`<percentage>`](percentage) value or an absolute [`<length>`](length) value. Positive values are offset towards the right or the bottom, whichever is appropriate. Negative values are offset in the opposite directions.

 If only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to `center`.

 
```
/\* 1-value syntax \*/
keyword                  /\* Either the horizontal or vertical position; the other axis defaults to center \*/
value                    /\* The position on the x-axis; the y-axis defaults to 50% \*/

/\* 2-value syntax \*/
keyword keyword          /\* A keyword for each direction (the order is irrelevant) \*/
keyword value            /\* A keyword for horizontal position, value for vertical position \*/
value keyword            /\* A value for horizontal position, keyword for vertical position \*/
value value              /\* A value for each direction (horizontal then vertical) \*/

/\* 4-value syntax \*/
keyword value keyword value /\* Each value is an offset from the keyword that precedes it \*/

```
  **Note:** The [`background-position`](background-position) property also accepts a three-value syntax. This is not allowed in other properties that use `<position>`.

 
Interpolation
-------------


When animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single [timing function](easing-function) for both coordinates, the point will move in a straight line.

Formal syntax
-------------



```
<position> =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Valid positions



```
center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px

```
### Invalid positions



```
left right
bottom top
10px 15px 20px 15px

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # position](https://w3c.github.io/csswg-drafts/css-values/#position) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `position_value` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `four_value_syntax` | 25 | 12 | 13 | 9 | 10.5 | 7 | 4.4 | 25 | 14 | 14 | 7 | 1.5 |
| `keyword_value_syntax` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [CSS Values and Units](css_values_and_units)
* [CSS Values and Units introduction](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
* [`background-position`](background-position)
* [`radial-gradient()`](gradient/radial-gradient)
* [`conic-gradient()`](gradient/conic-gradient)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/position_value>

place-items
===========


The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) `place-items` [shorthand property](shorthand_properties) allows you to align items along both the block and inline directions at once (i.e. the [`align-items`](align-items) and [`justify-items`](justify-items) properties) in a relevant layout system such as [Grid](css_grid_layout) or [Flexbox](css_flexible_box_layout). If the second value is not set, the first value is also used for it.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`align-items`](align-items)
* [`justify-items`](justify-items)


Syntax
------



```
/\* Keyword values \*/
place-items: center;
place-items: normal start;

/\* Positional alignment \*/
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;

/\* Baseline alignment \*/
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/\* Global values \*/
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

```
### Values



One of the following forms:

 * A single [`align-items`](align-items) value, which is used to set alignment in both block and inline directions.
* An [`align-items`](align-items) value, which sets alignment in the block direction, followed by a [`justify-items`](justify-items) value, which sets alignment in the inline direction.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`align-items`](align-items): `normal`
* [`justify-items`](justify-items): `legacy`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`align-items`](align-items): as specified
* [`justify-items`](justify-items): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
place-items =   
  <'align-items'> <'justify-items'>[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Placing items in a flex container



In flexbox [`justify-self`](justify-self) or [`justify-items`](justify-items) do not apply, as on the main axis items are treated as a group. Therefore, the second value will be ignored.

 #### CSS

 
```
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
  display: flex;
}

```
 #### Result



### Placing items in a grid container



The following grid container has items which are smaller than the grid areas they are placed in, therefore `place-items` will move them in the block and inline dimensions.

 #### CSS

 
```
#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* You can change this value by selecting another option in the list \*/
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # place-items-property](https://w3c.github.io/csswg-drafts/css-align/#place-items-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `place-items` | 59 | 79 | 45 | No | 46 | 11 | 59 | 59 | 45 | 43 | 11 | 7.0 |
| `flex_context` | 59 | 79 | 45 | No | 46 | 11 | 59 | 59 | 45 | 43 | 11 | 7.0 |
| `grid_context` | 59 | 79 | 45 | No | 46 | 11 | 59 | 59 | 45 | 43 | 11 | 7.0 |


See also
--------


* CSS Flexbox Guide: *[Basic Concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox Guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid Guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
* [CSS Box Alignment](css_box_alignment)
* The [`align-items`](align-items) property
* The [`align-self`](align-self) property
* The [`justify-items`](justify-items) property
* The [`justify-self`](justify-self) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/place-items>

pointer-events
==============


The `pointer-events` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets under what circumstances (if any) a particular graphic element can become the [target](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) of pointer events.


Try it
------


Syntax
------




```
/\* Keyword values \*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /\* SVG only \*/
pointer-events: visibleFill; /\* SVG only \*/
pointer-events: visibleStroke; /\* SVG only \*/
pointer-events: visible; /\* SVG only \*/
pointer-events: painted; /\* SVG only \*/
pointer-events: fill; /\* SVG only \*/
pointer-events: stroke; /\* SVG only \*/
pointer-events: all; /\* SVG only \*/

/\* Global values \*/
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

```
 The `pointer-events` property is specified as a single keyword chosen from the list of values below.


### Values



 `auto`  The element behaves as it would if the `pointer-events` property were not specified. In SVG content, this value and the value `visiblePainted` have the same effect.

  `none`  The element is never the [target](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) of pointer events; however, pointer events may target its descendant elements if those descendants have `pointer-events` set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/[bubble](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) phases.

   #### SVG only (experimental for HTML)

  `visiblePainted`  SVG only (experimental for HTML). The element can only be the target of a pointer event when the `visibility` property is set to `visible` and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the `fill` property is set to a value other than `none`, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and the `stroke` property is set to a value other than `none`.

  `visibleFill`  SVG only. The element can only be the target of a pointer event when the `visibility` property is set to `visible` and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the `fill` property does not affect event processing.

  `visibleStroke`  SVG only. The element can only be the target of a pointer event when the `visibility` property is set to `visible` and e.g. when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the `stroke` property does not affect event processing.

  `visible`  SVG only (experimental for HTML). The element can be the target of a pointer event when the `visibility` property is set to `visible` and e.g. the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the `fill` and `stroke` do not affect event processing.

  `painted`  SVG only (experimental for HTML). The element can only be the target of a pointer event when e.g. the mouse cursor is over the interior (i.e., 'fill') of the element and the `fill` property is set to a value other than `none`, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the `stroke` property is set to a value other than `none`. The value of the `visibility` property does not affect event processing.

  `fill`  SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the `fill` and `visibility` properties do not affect event processing.

  `stroke`  SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the `stroke` and `visibility` properties do not affect event processing.

  `all`  SVG only (experimental for HTML). The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the `fill`, `stroke`, and `visibility` properties do not affect event processing.

  
Description
-----------



When this property is unspecified, the same characteristics of the `visiblePainted` value apply to SVG content.

 In addition to indicating that the element is not the target of pointer events, the value `none` instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.

 Note that preventing an element from being the target of pointer events by using `pointer-events` does *not* necessarily mean that pointer event listeners on that element *cannot* or *will not* be triggered. If one of the element's children has `pointer-events` explicitly set to *allow* that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

 Elements with `pointer-events: none` will still receive focus through sequential keyboard navigation using the `Tab` key.

 We would like to provide finer grained control (than just `auto` and `none`) in HTML for which parts of an element will cause it to "catch" pointer events, and when. To help us in deciding how `pointer-events` should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of [this wiki page](https://wiki.mozilla.org/SVG:Pointer-events) (don't worry about keeping it tidy).


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
pointer-events =   
  auto            [|](value_definition_syntax#single_bar)  
  bounding-box    [|](value_definition_syntax#single_bar)  
  visiblePainted  [|](value_definition_syntax#single_bar)  
  visibleFill     [|](value_definition_syntax#single_bar)  
  visibleStroke   [|](value_definition_syntax#single_bar)  
  visible         [|](value_definition_syntax#single_bar)  
  painted         [|](value_definition_syntax#single_bar)  
  fill            [|](value_definition_syntax#single_bar)  
  stroke          [|](value_definition_syntax#single_bar)  
  all             [|](value_definition_syntax#single_bar)  
  none              
  

```
Examples
--------


### Disabling pointer events on all images



This example disables pointer events (clicking, dragging, hovering, etc.) on all images.

 
```
img {
  pointer-events: none;
}

```

### Disabling pointer events on a single link



This example disables pointer events on the link to `http://example.com`.

 #### HTML

 
```
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

```
 #### CSS

 
```
a[href="http://example.com"]
{
  pointer-events: none;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # pointer-events-control](https://w3c.github.io/csswg-drafts/css-ui/#pointer-events-control) |
| [Scalable Vector Graphics (SVG) 2 # PointerEventsProperty](https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty) |


Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its [level 4](https://wiki.csswg.org/spec/css4-ui#pointer-events).


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `pointer-events` | 1 | 12 | 1.5 | 11 | 9 | 4 | 2 | 18 | 4 | 14 | 3.2 | 1.0 |
| `html_elements` | 2 | 12 | 3.6 | 11 | 15 | 4 | 37 | 18 | 4 | 14 | 3.2 | 1.0 |


See also
--------


* The SVG attribute `[pointer-events](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events)`
* The SVG attribute `[visibility](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility)`
* [WebKit Specs PointerEventsProperty](https://webkit.org/specs/PointerEventsProperty.html) extended for use in (X)HTML content
* [`user-select`](user-select) - controls whether the user can select text


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events>

position
========


The `position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how an element is positioned in a document. The [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left) properties determine the final location of positioned elements.


Try it
------


Syntax
------



```
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/\* Global values \*/
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

```
### Values


 `static`  The element is positioned according to the normal flow of the document. The [`top`](top), [`right`](right), [`bottom`](bottom), [`left`](left), and [`z-index`](z-index) properties have *no effect*. This is the default value.

  `relative`  The element is positioned according to the normal flow of the document, and then offset *relative to itself* based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were `static`.

 This value creates a new [stacking context](css_positioning/understanding_z_index/the_stacking_context) when the value of `z-index` is not `auto`. Its effect on `table-*-group`, `table-row`, `table-column`, `table-cell`, and `table-caption` elements is undefined.

  `absolute`  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest [positioned](#types_of_positioning) ancestor, if any; otherwise, it is placed relative to the initial [containing block](containing_block). Its final position is determined by the values of `top`, `right`, `bottom`, and `left`.

 This value creates a new [stacking context](css_positioning/understanding_z_index/the_stacking_context) when the value of `z-index` is not `auto`. The margins of absolutely positioned boxes do not [collapse](css_box_model/mastering_margin_collapsing) with other margins.

  `fixed`  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial [containing block](containing_block) established by the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport), except when one of its ancestors has a `transform`, `perspective`, or `filter` property set to something other than `none` (see the [CSS Transforms Spec](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), or the [`will-change`](will-change) property is set to `transform`, in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with `perspective` and `filter` contributing to containing block formation.) Its final position is determined by the values of `top`, `right`, `bottom`, and `left`.

 This value always creates a new [stacking context](css_positioning/understanding_z_index/the_stacking_context). In printed documents, the element is placed in the same position on *every page*.

  `sticky`  The element is positioned according to the normal flow of the document, and then offset relative to its *nearest scrolling ancestor* and [containing block](containing_block) (nearest block-level ancestor), including table-related elements, based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements.

 This value always creates a new [stacking context](css_positioning/understanding_z_index/the_stacking_context). Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when `overflow` is `hidden`, `scroll`, `auto`, or `overlay`), even if that ancestor isn't the nearest actually scrolling ancestor.

  Description
-----------


### Types of positioning



* A **positioned element** is an element whose [computed](computed_value) `position` value is either `relative`, `absolute`, `fixed`, or `sticky`. (In other words, it's anything except `static`.)
* A **relatively positioned element** is an element whose [computed](computed_value) `position` value is `relative`. The [`top`](top) and [`bottom`](bottom) properties specify the vertical offset from its normal position; the [`left`](left) and [`right`](right) properties specify the horizontal offset.
* An **absolutely positioned element** is an element whose [computed](computed_value) `position` value is `absolute` or `fixed`. The [`top`](top), [`right`](right), [`bottom`](bottom), and [`left`](left) properties specify offsets from the edges of the element's [containing block](containing_block). (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents.
* A **stickily positioned element** is an element whose [computed](computed_value) `position` value is `sticky`. It's treated as relatively positioned until its [containing block](containing_block) crosses a specified threshold (such as setting [`top`](top) to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its [containing block](containing_block).

 Most of the time, absolutely positioned elements that have [`height`](height) and [`width`](width) set to `auto` are sized so as to fit their contents. However, non-[replaced](replaced_element), absolutely positioned elements can be made to fill the available vertical space by specifying both [`top`](top) and [`bottom`](bottom) and leaving [`height`](height) unspecified (that is, `auto`). They can likewise be made to fill the available horizontal space by specifying both [`left`](left) and [`right`](right) and leaving [`width`](width) as `auto`.

 Except for the case just described (of absolutely positioned elements filling the available space):

 * If both `top` and `bottom` are specified (technically, not `auto`), `top` wins.
* If both `left` and `right` are specified, `left` wins when [`direction`](direction) is `ltr` (English, horizontal Japanese, etc.) and `right` wins when [`direction`](direction) is `rtl` (Persian, Arabic, Hebrew, etc.).


Accessibility concerns
----------------------



Ensure that elements positioned with an `absolute` or `fixed` value do not obscure other content when the page is zoomed to increase text size.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


### Performance & Accessibility


Scrolling elements containing `fixed` or `sticky` content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add [`will-change: transform`](will-change) to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `static` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
position =   
  static      [|](value_definition_syntax#single_bar)  
  relative    [|](value_definition_syntax#single_bar)  
  absolute    [|](value_definition_syntax#single_bar)  
  sticky      [|](value_definition_syntax#single_bar)  
  fixed       [|](value_definition_syntax#single_bar)  
  running( )    
  

```
Examples
--------


### Relative positioning



Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.

 #### HTML

 
```
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

```
 #### CSS

 
```
\* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

```


### Absolute positioning



Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its *nearest positioned ancestor* (i.e., the nearest ancestor that is not `static`). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the [W3C definition](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)), which is the containing block of the document's root element.

 #### HTML

 
```
<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="long.jpg" />
</p>

```
 #### CSS

 
```
\* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

```
 #### Result



### Fixed positioning



Fixed positioning is similar to absolute positioning, with the exception that the element's [containing block](containing_block) is the initial containing block established by the *viewport*, unless any ancestor has `transform`, `perspective`, or `filter` property set to something other than `none` (see [CSS Transforms Spec](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), which then causes that ancestor to take the place of the elements [containing block](containing_block). This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport. Also, when the [`will-change`](will-change) property is set to `transform`, a new containing block is established.

 #### HTML

 
```
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

```
 #### CSS

 
```
\* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

```
 #### Result



### Sticky positioning



Sticky positioning can be thought of as a hybrid of relative and fixed positioning when its nearest scrolling ancestor is the viewport. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For example:

 
```
#one {
  position: sticky;
  top: 10px;
}

```
 The above CSS rule would position the element with id *one* relatively until the viewport was scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.

 A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.

 You must specify a threshold with at least one of `top`, `right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.

 #### HTML

 
```
<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

```
 #### CSS

 
```
\* {
  box-sizing: border-box;
}

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 3 # position-property](https://w3c.github.io/csswg-drafts/css-position/#position-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `position` | 1 | 12 | 1["Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) applied to them ([bug 1379306](https://bugzil.la/1379306)).", "Before Firefox 30, absolute positioning of table rows and row groups was not supported ([bug 63895](https://bugzil.la/63895))."] | 4 | 4 | 1 | ≤37 | 18 | 4["Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) applied to them ([bug 1379306](https://bugzil.la/1379306)).", "Before Firefox 30, absolute positioning of table rows and row groups was not supported ([bug 63895](https://bugzil.la/63895))."] | 14 | 1 | 1.0 |
| `absolutely_positioned_flex_children` | 52 | 12 | 52 | 10 | 39 | 11 | 52 | 52 | 52 | 41 | 11 | 6.0 |
| `fixed` | 1 | 12 | 1Before Firefox 44, `position: fixed` didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior. | 7In Internet Explorer, fixed positioning doesn't work if the document is in [quirks mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). | 4 | 1 | ≤37 | 18 | 4Before Firefox 44, `position: fixed` didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior. | 14 | 1 | 1.0 |
| `position_sticky_table_elements` | 56 | 16 | 59Borders do not display on table headers if [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) is set to `collapse` ([bug 1727594](https://bugzil.la/1727594)). | No | 43 | 8 | 56 | 56 | 59Borders do not display on table headers if [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) is set to `collapse` ([bug 1727594](https://bugzil.la/1727594)). | 43 | 8 | 6.0 |
| `sticky` | 56 | 16 | 32 | No | 43 | 137 | 56 | 56 | 32 | 43 | 137 | 6.0 |


See also
--------


* [Learn CSS: Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/position>

pow()
=====



The `pow()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is an exponential function that returns the value of a base raised to the power of a number.

 The [`exp()`](exp) function is a special case of `pow()` where the value of the base is the mathematical constant [e](https://en.wikipedia.org/wiki/E_(mathematical_constant)).



Syntax
------



```
/\* A <number> value \*/
width: calc(10px * pow(5, 2)); /\* 10px \* 25 = 250px \*/
width: calc(10px * pow(5, 3)); /\* 10px \* 125 = 1250px \*/
width: calc(10px * pow(2, 10)); /\* 10px \* 1024 = 10240px \*/

```
### Parameters



The `pow(base, number)` function accepts two comma-separated values as its parameters.

  `base`  A calculation that resolves to a [`<number>`](number), representing the base.

  `number`  A calculation that resolves to a [`<number>`](number), representing the exponent.

  
### Return value


Returns a [`<number>`](number) representing basenumber, that is, `base` raised to the power of `number`.

Formal syntax
-------------



```
<pow()> =   
  pow( <calc-sum> , <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Scale headings by fixed ratio



The `pow()` function can be useful for strategies like CSS Modular Scale, which relates all the font-sizes on a page to each other by a fixed ratio.

 #### HTML

 
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

```
 #### CSS

 
```
h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # exponent-funcs](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `pow` | No | No | 112 | No | No | 15.4 | No | No | 112 | No | 15.4 | No |


See also
--------


* [`sqrt()`](sqrt)
* [`hypot()`](hypot)
* [`exp()`](exp)
* [`log()`](log)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/pow>

prefix
======


The `prefix` descriptor of the [`@counter-style`](../@counter-style) rule specifies content that will be prepended to the marker representation. If not specified, the default value will be `""` (an empty string).


Syntax
------



```
/\* <symbol> values \*/
prefix: "»";
prefix: "Page ";
prefix: url(bullet.png);

```
### Values


 `<symbol>`  Specifies a `<symbol>` that is prepended to the marker representation. It may be a [`<string>`](../string), [`<image>`](../image), or [`<custom-ident>`](../custom-ident).

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | "" (the empty string) |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
prefix =   
  <symbol>    
  
<symbol> =   
  [<string>](../string)        [|](../value_definition_syntax#single_bar)  
  <image>         [|](../value_definition_syntax#single_bar)  
  [<custom-ident>](../custom-ident)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Adding a prefix to a counter



#### HTML

 
```
<ul class="index">
  <li>The Boy Who Lived</li>
  <li>The Vanishing Glass</li>
  <li>The Letters from No One</li>
  <li>The Keeper of the Keys</li>
  <li>Diagon Alley</li>
</ul>

```
 #### CSS

 
```
@counter-style chapters {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Chapter ";
}

.index {
  list-style: chapters;
  padding-left: 15ch;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-prefix](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-prefix) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `prefix` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/prefix>

@property
=========



The `@property` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> is part of the [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini) umbrella of APIs, it allows developers to explicitly define their [`CSS custom properties`](--*), allowing for property type checking, setting default values, and define whether a property can inherit values or not.

 The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if [`CSS.registerProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty) had been called with equivalent parameters.



Syntax
------



```
@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

```
### Descriptors



 [`syntax`](@property/syntax)  Describes the allowable syntax for the property.

  [`inherits`](@property/inherits)  Controls whether the custom property registration specified by `@property` inherits by default.

  [`initial-value`](@property/initial-value)  Sets the initial value for the property.

   A valid `@property` rule represents a custom property registration, with the property name being the serialization of the in the rule's prelude.

 `@property` rules require a [`syntax`](@property/syntax) and [`inherits`](@property/inherits) descriptor; if either are missing, the entire rule is invalid and must be ignored. The [`initial-value`](@property/initial-value) descriptor is optional only if the syntax is the [universal syntax definition](https://drafts.css-houdini.org/css-properties-values-api/#universal-syntax-definition), otherwise the descriptor is required; if it's missing, the entire rule is invalid and must be ignored.

 Unknown descriptors are invalid and ignored, but do not invalidate the `@property` rule.


Examples
--------



Add type checking to `--my-color` [`custom property`](--*), as a color, a default value, and not allow it to inherit its value:

 Using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`@property`](@property) <at-rule>:

 
```
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

```
 Using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [`CSS.registerProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty):

 
```
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

```

Formal syntax
-------------



```
@property =   
  @property [<custom-property-name>](custom-property-name) { [<declaration-list>](declaration-list) }    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Properties and Values API Level 1 # at-property-rule](https://drafts.css-houdini.org/css-properties-values-api/#at-property-rule) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@property` | 85 | 85 | NoSee [bug 1684605](https://bugzil.la/1684605). | No | 71 | 16.4 | 85 | 85 | NoSee [bug 1684605](https://bugzil.la/1684605). | 60 | 16.4 | 14.0 |
| `inherits` | 85 | 85 | No | No | 71 | 16.4 | 85 | 85 | No | 60 | 16.4 | 14.0 |
| `initial-value` | 85 | 85 | No | No | 71 | 16.4 | 85 | 85 | No | 60 | 16.4 | 14.0 |
| `syntax` | 85 | 85 | No | No | 71 | 16.4 | 85 | 85 | No | 60 | 16.4 | 14.0 |


See also
--------


* [CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API)
* [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API)
* [CSS Typed Object Model](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API)
* [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@property>

quotes
======


The `quotes` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how the browser should render quotation marks that are added using the `open-quotes` or `close-quotes` values of the CSS [`content`](content) property.


Try it
------


Syntax
------



```
/\* Keyword value \*/
quotes: none;
quotes: auto;

/\* <string> values \*/
quotes: "«" "»"; /\* Set open-quote and close-quote to the French quotation marks \*/
quotes: "«" "»" "‹" "›"; /\* Set two levels of quotation marks \*/

/\* Global values \*/
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;

```
### Values


 `none`  The `open-quote` and `close-quote` values of the [`content`](content) property produce no quotation marks.

  `auto`  Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#lang) attribute).

  `[<string> <string>]+`  One or more pairs of [`<string>`](string) values for `open-quote` and `close-quote`. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | depends on user agent |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
quotes =   
  auto                    [|](value_definition_syntax#single_bar)  
  none                    [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<string>](string) [<string>](string) []](value_definition_syntax#brackets)[+](value_definition_syntax#plus)    
  

```
Examples
--------


### Basic quote marks



#### HTML

 
```
<q>To be or not to be. That's the question!</q>

```
 #### CSS

 
```
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

```
 #### Result



### Auto quotes



For most browsers, the default value of `quotes` is `auto` (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge), so this example works without it being explicitly being set.

 #### HTML

 
```
<div lang="fr">
  <q>Ceci est une citation française.</q>
  <div>
    <hr />
    <div lang="ru">
      <q>Это русская цитата</q>
      <div>
        <hr />
        <div lang="de">
          <q>Dies ist ein deutsches Zitat</q>
          <div>
            <hr />
            <div lang="en">
              <q>This is an English quote.</q>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

```
 #### CSS

 
```
/\*q {
 quotes: auto;
}\*/

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Generated Content Module Level 3 # quotes](https://w3c.github.io/csswg-drafts/css-content/#quotes) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `quotes` | 11 | 12 | 1.5 | 8 | 4 | 9 | 37 | 18 | 4 | 14 | 9 | 1.0 |
| `quotes_auto` | 87 | 87 | 70 | NoThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting | 73 | previewThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting | 87 | 87 | No | NoThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting | NoThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting | 14.0 |


See also
--------


* [`contain`](contain)
* [`content`](content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/quotes>

print-color-adjust
==================


 The `print-color-adjust` CSS property sets what, if anything, the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device. 


Syntax
------




```
print-color-adjust: economy;
print-color-adjust: exact;

/\* Global values \*/
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

```
 The `print-color-adjust` property's value must be one of the following keywords.


### Values


 `economy`   The user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for. For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper. This is the default. 

  `exact`   The element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better. The appearance of the content should not be changed except by the user's request. For example, a page might include a list of information with rows whose background colors alternate between white and a light grey. Removing the background color would decrease the legibility of the content. 

  Usage notes
-----------



There are a number of reasons a browser might wish to deviate from the specified appearance, such as:

 * The content uses text and background colors that will be too similar on the output device for legibility purposes.
* If the output device is a printer, and to save ink, dark or extremely dense background images might be removed.
* When printing a page, the browser might want to replace light-colored text on a dark background with dark text on a white background.

  Any options the user agent offers the user to allow them to control the use of color and images will take priority over the value of `print-color-adjust`. In other words, there isn't any guarantee that `print-color-adjust` will do anything. Not only can the user override the behavior, but each user agent is allowed to decide for itself how to handle `print-color-adjust` in any given situation. 


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `economy` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
print-color-adjust =   
  economy  [|](value_definition_syntax#single_bar)  
  exact      
  

```
Examples
--------


### Preserving low contrast



 In this example, a box is shown which uses a [`background-image`](background-image) and a translucent [`linear-gradient()`](gradient/linear-gradient) function atop a black background color to have a dark blue gradient behind medium red text. For whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use `print-color-adjust: exact` to tell the browser not to make color or style adjustments to the box when rendering it. 

 #### CSS

 
```
.my-box {
  background-color: black;
  background-image: linear-gradient(
    rgba(0, 0, 180, 0.5),
    rgba(70, 140, 220, 0.5)
  );
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font: 24px "Helvetica", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}

```
 #### HTML

 
```
<div class="my-box">
  <p>Need more contrast!</p>
</div>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Color Adjustment Module Level 1 # propdef-print-color-adjust](https://w3c.github.io/csswg-drafts/css-color-adjust/#propdef-print-color-adjust) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `print-color-adjust` | 17["Chrome does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.", "Before version 26, if background images are clipped (for example, when using `background-image` sprites) and `-webkit-print-color-adjust` is set to `exact`, then backgrounds will appear distorted when printed. Solid backgrounds and background images that are not clipped (i.e., backgrounds that have narrower and shorter than the element to which they are applied) are printed correctly. See [Chromium bug 131054](https://crbug.com/131054)."] | 79Edge does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants. | 9748 | No | 15Opera does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants. | 15.46Safari does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants. | 4.4WebView does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants. | 18["Chrome does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.", "Before version 26, if background images are clipped (for example, when using `background-image` sprites) and `-webkit-print-color-adjust` is set to `exact`, then backgrounds will appear distorted when printed. Solid backgrounds and background images that are not clipped (i.e., backgrounds that have narrower and shorter than the element to which they are applied) are printed correctly. See [Chromium bug 131054](https://crbug.com/131054)."] | 9748 | 15Opera does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants. | 15.46Safari does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants. | 1.0["Samsung Internet does not print backgrounds of the [`<body>`](https://developer.mozilla.org/docs/Web/HTML/Element/body) element. If this property is set to `exact` for the `<body>` element, it will apply only to its descendants.", "In version 1, if background images are clipped (for example, when using `background-image` sprites) and `-webkit-print-color-adjust` is set to `exact`, then backgrounds will appear distorted when printed. Solid backgrounds and background images that are not clipped (i.e., backgrounds that have narrower and shorter than the element to which they are applied) are printed correctly. See [Chromium bug 131054](https://crbug.com/131054)."] |


See also
--------


* [Applying color to HTML elements using CSS](css_colors/applying_color)
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [`background-image`](background-image)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust>

radial-gradient()
=================


The `radial-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the [`<gradient>`](../gradient) data type, which is a special kind of [`<image>`](../image).


Try it
------


Syntax
------




```
/\* A gradient at the center of its container,
 starting red, changing to blue, and finishing green \*/
radial-gradient(circle at center, red 0, blue, green 100%)

```
 A radial gradient is specified by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the *ending shape* (the 100% ellipse).


### Values


 [`<position>`](../position_value)  The position of the gradient, interpreted in the same way as [`background-position`](../background-position) or [`transform-origin`](../transform-origin). If unspecified, it defaults to `center`.

  `<ending-shape>`  The gradient's ending-shape. The value can be `circle` (meaning that the gradient's shape is a circle with a constant radius) or `ellipse` (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to `ellipse`.

  `<size>`  Determines the size of the gradient's ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments.

 Both circle and ellipse gradients accept the following keywords for their `<size>`:

 

| Keyword | Description |
| --- | --- |
| `closest-side` | The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
| `closest-corner` | The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. |
| `farthest-side` | Similar to `closest-side`, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
| `farthest-corner` | The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. |

 If `<ending-shape>` is specified as `circle`, the size may be given explicitly as a [`<length>`](../length), which provides an explicit circle radius. Negative values are invalid.

 If `<ending-shape>` is specified as `ellipse`, the size may be given as a [`<length-percentage>`](../length-percentage) with two values to provide an explicit ellipse size. The first value represents the horizontal radius and the second is the vertical radius. Percentage values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

 When the `<ending-shape>` keyword is omitted, the gradient shape is determined by the size given. One `<length>` value provides a circle, while two values in `<length-percentage>`units provide an ellipse. A single `<percentage>` value is not valid.

  `<linear-color-stop>`  A color-stop's [`<color>`](../color_value) value, followed by an one or two optional stop positions (either a [`<percentage>`](../percentage) or a [`<length>`](../length) along the gradient's axis). A percentage of `0%`, or a length of `0`, represents the center of the gradient; the value `100%` represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.

  `<color-hint>`  The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

  Description
-----------



As with any gradient, a radial gradient has [no intrinsic dimensions](../image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

 To create a radial gradient that repeats so as to fill its container, use the [`repeating-radial-gradient()`](repeating-radial-gradient) function instead.

 Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `radial-gradient()` won't work on [`background-color`](../background-color) and other properties that use the [`<color>`](../color_value) data type.


### Composition of a radial gradient



 ![Graph explaining radial gradients: the virtual radiant ray is horizontal starting from the midpoint. The elliptical gradient, and therefore the ending shape, has the same aspect ratio as the box upon which it is declared.] 

 A radial gradient is defined by a *center point*, an *ending shape*, and two or more *color-stop points*.

 To create a smooth gradient, the `radial-gradient()` function draws a series of concentric shapes radiating out from the center to the *ending shape* (and potentially beyond). The ending shape may be either a circle or an ellipse.

 Color-stop points are positioned on a *virtual gradient ray* that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents `100%`. Each shape is a single color determined by the color on the gradient ray it intersects.


Formal syntax
-------------



```
<radial-gradient()> =   
  radial-gradient( [[](../value_definition_syntax#brackets) [<ending-shape>](../ending-shape) [||](../value_definition_syntax#double_bar) <size> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) [[](../value_definition_syntax#brackets) at <position> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) , <color-stop-list> )    
  
<size> =   
  <extent-keyword>              [|](../value_definition_syntax#single_bar)  
  [<length [0,∞]>](../length)                [|](../value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](../length-percentage)[{2}](../value_definition_syntax#curly_braces)    
  
<position> =   
  [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) right []](../value_definition_syntax#brackets) [||](../value_definition_syntax#double_bar) [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) bottom []](../value_definition_syntax#brackets)  [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) right [|](../value_definition_syntax#single_bar) <length-percentage> []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) center [|](../value_definition_syntax#single_bar) bottom [|](../value_definition_syntax#single_bar) <length-percentage> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark)  [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) left [|](../value_definition_syntax#single_bar) right []](../value_definition_syntax#brackets) <length-percentage> []](../value_definition_syntax#brackets) [&&](../value_definition_syntax#double_ampersand) [[](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) top [|](../value_definition_syntax#single_bar) bottom []](../value_definition_syntax#brackets) <length-percentage> []](../value_definition_syntax#brackets)    
  
<color-stop-list> =   
  <linear-color-stop> , [[](../value_definition_syntax#brackets) <linear-color-hint>[?](../value_definition_syntax#question_mark) , <linear-color-stop> []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)    
  
<extent-keyword> =   
  closest-corner   [|](../value_definition_syntax#single_bar)  
  closest-side     [|](../value_definition_syntax#single_bar)  
  farthest-corner  [|](../value_definition_syntax#single_bar)  
  farthest-side      
  
<length-percentage> =   
  [<length>](../length)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  
<linear-color-stop> =   
  [<color>](../color_value)               [&&](../value_definition_syntax#double_ampersand)  
  <length-percentage>[?](../value_definition_syntax#question_mark)    
  
<linear-color-hint> =   
  <length-percentage>    
  

```
Examples
--------


### Simple gradient




```
.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

```


### Non-centered gradient




```
.radial-gradient {
  background-image: radial-gradient(
    farthest-corner at 40px 40px,
    #f35 0%,
    #43e 100%
  );
}

```


### More radial-gradient examples


Please see [Using CSS gradients](../css_images/using_css_gradients) for more examples.

Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # radial-gradients](https://w3c.github.io/csswg-drafts/css-images/#radial-gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `radial-gradient` | 2613 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 10Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `[-ms-filter: progid:DXImageTransform.Microsoft.Gradient()](https://developer.mozilla.org/docs/Web/CSS/-ms-filter#Gradient)`. | 1512.111.6–15 | 75.1Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | ≤37≤37 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.4Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 1412.112–14 | 75Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | 1.51.0 |
| `at` | 26 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.10Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 10 | 1511.6–15 | 7 | 4.4 | 26 | 1610 | 1412–14 | 7 | 1.5 |
| `doubleposition` | 71 | 79 | 64 | No | 58 | 12.1 | 71 | 71 | 64 | 50 | 12.2 | 10.0 |
| `hue_interpolation_method` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_color_space` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_hints` | 40 | 79 | 36 | No | 27 | 7 | 40 | 40 | 36 | 27 | 7 | 4.0 |


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)
* Other gradient functions: [`repeating-radial-gradient()`](repeating-radial-gradient), [`linear-gradient()`](linear-gradient), [`repeating-linear-gradient()`](repeating-linear-gradient), [`conic-gradient()`](conic-gradient), [`repeating-conic-gradient()`](repeating-conic-gradient)
* [`<image>`](../image)
* [`image()`](../image/image)
* [`element()`](../element())
* [`image-set()`](../image/image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient>

range
=====


When defining custom counter styles, the `range` descriptor lets the author specify a range of counter values over which the style is applied. If a counter value is outside the specified range, then the fallback style will be used to construct the representation of that marker.


Syntax
------



```
/\* Keyword value \*/
range: auto;

/\* Range values \*/
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;

/\* Multiple range values \*/
range: 2 5, 8 10;
range: infinite 6, 10 infinite;

```
### Values


 `auto`  The range depends on the counter system:

 * For cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity.
* For alphabetic and symbolic systems, the range is 1 to positive infinity.
* For additive systems, the range is 0 to positive infinity.
* For extends systems, the range is whatever auto would produce for the extended system; if extending a complex predefined style (§7 Complex Predefined Counter Styles), the range is the style's defined range.

  `[ [ | infinite ]{2} ]#`   Defines a comma-separated list of ranges. For each individual range, the first value is the lower bound and the second value is the upper bound. A range is inclusive, that means it always contains both, the lower and upper bound numbers. If infinite is used as the first value in a range, it represents negative infinity; if it is used as the second value, it represents positive infinity. The range of the counter style is the union of all the ranges defined in the list. If the lower bound of any range is higher than the upper bound, the entire descriptor is invalid and will be ignored. 

  Description
-----------



The value of the range descriptor can be either auto or a comma separated list of lower and upper bounds specified as integers.

 If value is auto, then for cyclic, numeric, and fixed system, the range will be from negative infinity to positive infinity. For alphabetic and symbolic systems, range will be from 1 to positive infinity. For additive systems, auto will result in the range 0 to positive infinity. For extends systems, the range is whatever auto will produce for the extended system.

 When range is specified as integers, the value `infinite` can be used to denote infinity. If *infinite* is specified as the first value in a range, then it is interpreted as negative infinity. If used as upper bound, it is taken as positive infinity.


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `auto` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
range =   
  [[](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<integer>](../integer) [|](../value_definition_syntax#single_bar) infinite []](../value_definition_syntax#brackets)[{2}](../value_definition_syntax#curly_braces) []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)  [|](../value_definition_syntax#single_bar)  
  auto                                
  

```
Examples
--------


### Setting counter style over a range




```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

```
 
```
@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0""\25A1";
  range: 2 4, 7 9;
}

.list {
  list-style: range-multi-example;
}

```
 The above list will display as follows:

 :


Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-range](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-range) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `range` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/range>

<ratio>
=======


The `<ratio>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types), used for describing [aspect ratios](@media/aspect-ratio) in [media queries](media_queries), denotes the proportion between two unitless values.


Syntax
------



In Media Queries Level 3, the `<ratio>` data type consisted of a strictly positive [`<integer>`](integer) followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive [`<integer>`](integer). Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.

 In Media Queries Level 4, the `<ratio>` date type is updated to consist of a strictly positive [`<number>`](number) followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive [`<number>`](number). In addition a single [`<number>`](number) as a value is allowable.


Formal syntax
-------------



```
<ratio> =   
  [<number [0,∞]>](number) [[](value_definition_syntax#brackets) / [<number [0,∞]>](number) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Use in a media query



```
@media screen and (min-aspect-ratio: 16/9) {
  /\* … \*/
}

```
### Common aspect ratios




|  | Ratio | Usage |
| --- | --- | --- |
| A rectangle that is three units tall and four units wide | `4/3` | Traditional TV format in the twentieth century. |
| A rectangle that is nine units tall and sixteen units wide | `16/9` | Modern "widescreen" TV format. |
| A rectangle that is 1 unit tall and 1.85 units wide | `185/100` = `91/50` | The most common movie format since the 1960s. |
| A rectangle that is 1 unit tall and 2.39 units wide | `239/100` | "Widescreen," anamorphic movie format. |

Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # values](https://w3c.github.io/csswg-drafts/mediaqueries/#values) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ratio` | 3 | 12 | 3.5 | 9 | 9.5 | 5 | ≤37 | 18 | 4 | 14 | 4.2 | 1.0 |
| `number_value` | No | No | 70 | No | No | No | No | No | No | No | No | No |


See also
--------


* [`aspect-ratio`](@media/aspect-ratio) media feature


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/ratio>

:read-write
===========


The `:read-write` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an element (such as `input` or `textarea`) that is editable by the user.


Try it
------


Syntax
------



```
:read-write {
  /\* ... \*/
}

```
Examples
--------


### Confirming form information in read-only/read-write controls



One use of `readonly` form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. We do just this in the example below.

 The `:read-only` pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs. The `:read-write` pseudo-class on the other hand is used to provide some nicer styling to the editable `<textarea>`.

 
```
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

```
 You can find the full source code at [readonly-confirmation.html](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/readonly-confirmation.html); this renders like so:



### Styling read-write non-form controls



This selector doesn't just select [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)/[`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) elements — it will select *any* element that can be edited by the user, such as a [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element with [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#contenteditable) set on it.

 
```
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>

```
 
```
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

```


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-read-write](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-write) |
| [Selectors Level 4 # rw-pseudos](https://w3c.github.io/csswg-drafts/selectors/#rw-pseudos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:read-write` | 1 | 13 | 781.5 | No | 9 | 4 | ≤37 | 18 | 4 | 10.1 | 3.2 | 1.0 |


See also
--------


* [`:read-only`](:read-only)
* HTML [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write>

rem()
=====



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `rem()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript [remainder operator (`%`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.

 
>  For example, the CSS `rem(27, 5)` function returns the remainder of `2`. When dividing 27 by 5, the result is 5 with a remainder of 2. The full calculation is `27 / 5 = 5 * 5 + 2`.
> 
>  



Syntax
------



```
/\* Unitless <number> \*/
line-height: rem(21, 2); /\* 1 \*/
line-height: rem(14, 5); /\* 4 \*/
line-height: rem(5.5, 2); /\* 1.5 \*/

/\* Unit based <percentage> and <dimension> \*/
margin: rem(14%, 3%); /\* 2% \*/
margin: rem(18px, 5px); /\* 3px \*/
margin: rem(10rem, 6rem); /\* 4rem \*/
margin: rem(26vmin, 7vmin); /\* 5vmin \*/
margin: rem(1000px, 29rem); /\* 72px - if root font-size is 16px \*/

/\* Negative/positive values \*/
rotate: rem(200deg, 30deg); /\* 20deg \*/
rotate: rem(140deg, -90deg); /\* 50deg \*/
rotate: rem(-90deg, 20deg); /\* -10deg \*/
rotate: rem(-55deg, -15deg); /\* -10deg \*/

/\* Calculations \*/
scale: rem(10 * 2, 1.7); /\* 1.3 \*/
rotate: rem(10turn, 18turn / 3); /\* 4turn \*/
transition-duration: rem(20s / 2, 3000ms * 2); /\* 4s \*/

```
### Parameter



The `rem(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, <number>, <dimension>, or <percentage>, for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as [`<length>`](length), [`<angle>`](angle), [`<time>`](time), or [`<frequency>`](frequency) to be valid.

  `dividend`  A calculation that resolves to a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) representing the dividend.

  `divisor`  A calculation that resolves to a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) representing the divisor.

  
### Return value



Returns a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage) (corresponds to the parameters' type) representing the remainder, that is, the operation left over.

 * If `divisor` is `0`, the result is `NaN`.
* If `dividend` is `infinite`, the result is `NaN`.
* If `dividend` is positive the result is positive (`0⁺`), and if `dividend` is negative the result is negative (`0⁻`).


### Formal syntax



```
<rem()> =   
  rem( <calc-sum> , <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # funcdef-rem](https://w3c.github.io/csswg-drafts/css-values/#funcdef-rem) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rem` | No | No | 109 | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`round()`](round)
* [`mod()`](mod)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/rem>

:read-only
==========


The `:read-only` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an element (such as `input` or `textarea`) that is not editable by the user.


Try it
------


Syntax
------



```
:read-only {
  /\* ... \*/
}

```
Examples
--------


### Confirming form information in read-only/read-write controls



One use of `readonly` form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. We do just this in the example below.

 The `:read-only` pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs. The `:read-write` pseudo-class on the other hand is used to provide some nicer styling to the editable `<textarea>`.

 
```
input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

```
 You can find the full source code at [readonly-confirmation.html](https://github.com/mdn/learning-area/blob/main/html/forms/pseudo-classes/readonly-confirmation.html); this renders like so:



### Styling read-only non-form controls



This selector doesn't just select [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)/[`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) elements — it will select *any* element that cannot be edited by the user.

 
```
<p contenteditable>This paragraph is editable; it is read-write.</p>

<p>This paragraph is not editable; it is read-only.</p>

```
 
```
p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}

```


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-read-only](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only) |
| [Selectors Level 4 # rw-pseudos](https://w3c.github.io/csswg-drafts/selectors/#rw-pseudos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:read-only` | 1 | 13 | 781.5 | No | 9 | 4 | ≤37 | 18 | 4 | 10.1 | 3.2 | 1.0 |


See also
--------


* [`:read-write`](:read-write)
* HTML [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only>

<shape>
=======



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The `<shape>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) defines the specific form (shape) of a region. The region represents the part of an element to which the [`clip`](clip) property applies.

  **Note:** `<shape>` and `rect()` work in conjunction with [`clip`](clip), which has been deprecated in favor of [`clip-path`](clip-path). When possible, use `clip-path` and the [`<basic-shape>`](basic-shape) data type instead.

 

Syntax
------



The `<shape>` data type is specified using the `rect()` function, which produces a region in the form of a rectangle.

 `rect()`

 
```
rect(top, right, bottom, left)

```

### Values



 ![A graph showing top, right, bottom, and left, as described below. These define the rectangle's shape. The upper left corner is defined by the top and left values. The bottom right corner is defined by the bottom and right values.] 

  *top*  Is a [`<length>`](length) representing the offset for the top of the rectangle relative to the top border of the element's box.

  *right*  Is a [`<length>`](length) representing the offset for the right of the rectangle relative to the left border of the element's box.

  *bottom*  Is a [`<length>`](length) representing the offset for the bottom of the rectangle relative to the top border of the element's box.

  *left*  Is a [`<length>`](length) representing the offset for the left of the rectangle relative to the left border of the element's box.

  
Interpolation
-------------


When animated, values of the `<shape>` data type are interpolated over their `top`, `right`, `bottom`, and `left` components, each treated as a real, floating-point number. The speed of the interpolation is determined by the [timing function](easing-function) associated with the animation.

Example
-------


### Example demonstrating correct use of the rect() function



```
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}

```
Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # value-def-shape](https://w3c.github.io/csswg-drafts/css2/#value-def-shape) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `shape` | 1 | 12 | 1 | 5.5 | 9.5 | 1.3 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `rect` | 1 | 12 | 1 | 5.5For Internet Explorer versions 5.5 through 7, the `rect()` function uses spaces (instead of commas) to separate parameters. For Internet Explorer 8 and later versions, only the standard comma-separated syntax is supported. | 9.5 | 1.3 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* Related CSS property: [`clip`](clip)
* The [`-moz-image-rect()`](-moz-image-rect) function has similar coordinate values to `rect()`.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/shape>

repeating-linear-gradient()
===========================


The `repeating-linear-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) creates an image consisting of repeating linear gradients. It is similar to [`linear-gradient()`](linear-gradient) and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the [`<gradient>`](../gradient) data type, which is a special kind of [`<image>`](../image).


Try it
------



 The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. This can be altered with repeating the first color again as the last color.

 As with any gradient, a repeating linear gradient has [no intrinsic dimensions](../image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

 Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `repeating-linear-gradient()` won't work on [`background-color`](../background-color) and other properties that use the [`<color>`](../color_value) data type.


Syntax
------



```
/\* A repeating gradient tilted 45 degrees,
 starting blue and finishing red, repeating 3 times \*/
repeating-linear-gradient(45deg, blue, red 33.3%);

/\* A repeating gradient going from the bottom right to the top left,
 starting blue and finishing red, repeating every 20px \*/
repeating-linear-gradient(to left top, blue, red 20px);

/\* A gradient going from the bottom to top,
 starting blue, turning green after 40%,
 and finishing red. This gradient doesn't repeat because
 the last color stop defaults to 100% \*/
repeating-linear-gradient(0deg, blue, green 40%, red);

/\* A gradient repeating five times, going from the left to right,
 starting red, turning green, and back to red \*/
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

```
### Values



 `<side-or-corner>`  The position of the gradient line's starting point. If specified, it consists of the word `to` and up to two keywords: one indicates the horizontal side (`left` or `right`), and the other the vertical side (`top` or `bottom`). The order of the side keywords does not matter. If unspecified, it defaults to `to bottom`.

 The values `to top`, `to bottom`, `to left`, and `to right` are equivalent to the angles `0deg`, `180deg`, `270deg`, and `90deg` respectively. The other values are translated into an angle.

  [`<angle>`](../angle)  The gradient line's angle of direction. A value of `0deg` is equivalent to `to top`; increasing values rotate clockwise from there.

  `<linear-color-stop>`  A color-stop's [`<color>`](../color_value) value, followed by one or two optional stop positions, (each being either a [`<percentage>`](../percentage) or a [`<length>`](../length) along the gradient's axis). A percentage of `0%`, or a length of `0`, represents the start of the gradient; the value `100%` is 100% of the image size, meaning the gradient will not repeat.

  `<color-hint>`  Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

    **Note:** Rendering of [color stops in CSS gradients](#gradient_with_multiple_color_stops) follows the same rules as color stops in [SVG gradients](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients).

 
### Formal syntax


Error: could not find syntax for this itemExamples
--------


### Zebra stripes




```
body {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 40px
  );
  /\* with multiple color stop lengths \*/
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );
}

```


### Ten repeating horizontal bars




```
body {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(26, 198, 204),
    rgb(26, 198, 204) 7%,
    rgb(100, 100, 100) 10%
  );
}

```

 Because the last color stop is 10% and the gradient is vertical, each gradient in the repeated gradient is 10% of the height, fitting 10 horizontal bars.

  **Note:** Please see [Using CSS gradients](../css_images/using_css_gradients) for more examples.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # repeating-gradients](https://w3c.github.io/csswg-drafts/css-images/#repeating-gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `repeating-linear-gradient` | 2610 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 10Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: `[-ms-filter: progid:DXImageTransform.Microsoft.Gradient()](https://developer.mozilla.org/docs/Web/CSS/-ms-filter#Gradient)`. | 15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–15Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75.1["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | ≤37≤37 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.4["Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right.12.111–14Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right. | 75["Safari 4 was supporting an experimental `[-webkit-gradient(linear,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. It is more limited than the later standard version: you cannot specify both a position and an angle like in `repeating-linear-gradient()`. This old outdated syntax is still supported for compatibility purposes.", "Considers `<angle>` to start to the right, instead of the top. I.e. it considered an angle of `0deg` as a direction indicator pointing to the right."] | 1.51.0 |
| `doubleposition` | 71 | 79 | 64 | No | 58 | 12.1 | 71 | 71 | 64 | 50 | 12.2 | 10.0 |
| `hue_interpolation_method` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_color_space` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_hints` | 40 | 79 | 36 | No | 27 | 7 | 40 | 40 | 36 | 27 | 7 | 4.0 |
| `to` | 26 | 12 | 10 | 10 | 12.1 | 7 | 4.4 | 26 | 10 | 14 | 7 | 1.5 |
| `unitless_0_angle` | 26 | 12 | 5546Accepted only in `-webkit-repeating-linear-gradient()` and `-moz-repeating-linear-gradient()`, not `repeating-linear-gradient()`. | No | 16 | 7 | 4.4 | 26 | 5546Accepted only in `-webkit-repeating-linear-gradient()` and `-moz-repeating-linear-gradient()`, not `repeating-linear-gradient()`. | 14 | 7 | 1.5 |


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)
* Other gradient functions: [`linear-gradient()`](linear-gradient), [`radial-gradient()`](radial-gradient), [`repeating-radial-gradient()`](repeating-radial-gradient), [`conic-gradient()`](conic-gradient), [`repeating-conic-gradient()`](repeating-conic-gradient)
* [`<image>`](../image)
* [`image()`](../image/image)
* [`element()`](../element())
* [`image-set()`](../image/image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient>

repeating-radial-gradient()
===========================


The `repeating-radial-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) creates an image consisting of repeating gradients that radiate from an origin. It is similar to [`radial-gradient()`](radial-gradient) and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to [`repeating-linear-gradient()`](repeating-linear-gradient). The function's result is an object of the [`<gradient>`](../gradient) data type, which is a special kind of [`<image>`](../image).


Try it
------



 With each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color.

 As with any gradient, a repeating radial gradient has [no intrinsic dimensions](../image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

 Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `repeating-radial-gradient()` won't work on [`background-color`](../background-color) and other properties that use the [`<color>`](../color_value) data type.


Syntax
------



```
/\* A gradient at the center of its container,
 starting red, changing to blue, and finishing green,
 with the colors repeating every 30px \*/
repeating-radial-gradient(circle at center, red 0, blue, green 30px);

/\* An elliptical gradient near the top left of its container,
 starting red, changing to green and back again,
 repeating five times between the center and the bottom right corner,
 and only once between the center and the top left corner \*/
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);

```
### Values


 [`<position>`](../position_value)  The position of the gradient, interpreted in the same way as [`background-position`](../background-position) or [`transform-origin`](../transform-origin). If unspecified, it defaults to `center`.

  `<shape>`  The gradient's shape. The value can be `circle` (meaning that the gradient's shape is a circle with constant radius) or `ellipse` (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to `ellipse`.

  `<extent-keyword>`  A keyword describing how big the ending shape must be. The possible values are:

 

| Keyword | Description |
| --- | --- |
| `closest-side` | The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). |
| `closest-corner` | The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center. |
| `farthest-side` | Similar to `closest-side`, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). |
| `farthest-corner` | The gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center. |

  **Note:** Early implementations of this function included other keywords (`cover` and `contain`) as synonyms of the standard `farthest-corner` and `closest-side`, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

   `<color-stop>`  A color-stop's [`<color>`](../color_value) value, followed by an optional stop position (either a [`<percentage>`](../percentage) or a [`<length>`](../length) along the gradient's axis). A percentage of `0%`, or a length of `0`, represents the center of the gradient; the value `100%` represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the virtual gradient ray.

  ### Formal syntax


Error: could not find syntax for this itemExamples
--------


### Black and white gradient




```
.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

```


### Farthest-corner




```
.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}

```

 The elliptical gradient will be centered 20% from the top left, and will repeat 10 times between the center and the farthest corner (the bottom right corner). Browsers supporting multi position color stops will display a red and green striped ellipse. Browsers not supporting the syntax yet will see a gradient that goes from red to black and then from blue to green.

  **Note:** Please see [Using CSS gradients](../css_images/using_css_gradients) for more examples.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3 # repeating-gradients](https://w3c.github.io/csswg-drafts/css-images/#repeating-gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `repeating-radial-gradient` | 2610 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.3.6Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 10 | 1512.112–15 | 75.1Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | ≤374.4 | 2618 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.10Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 1412.112–14 | 75Safari 4 was supporting an experimental `[-webkit-gradient(radial,…)](https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html)` function. This old outdated syntax is still supported for compatibility purposes. | 1.51.0 |
| `at` | 26 | 12 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.10Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 10 | 1512–15 | No | 4.4 | 26 | 4916Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.10Since Firefox 42, the prefixed version of gradients can be disabled by setting `layout.css.prefixes.gradients` to `false`. | 1412–14 | No | 1.5 |
| `doubleposition` | 71 | 79 | 64 | No | 58 | 12.1 | 71 | 71 | 64 | 50 | 12.2 | 10.0 |
| `hue_interpolation_method` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_color_space` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_hints` | 40 | 79 | 36 | No | 27 | 7 | 40 | 40 | 46 | 27 | 7 | 4.0 |


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)
* Other gradient functions: [`radial-gradient()`](radial-gradient), [`linear-gradient()`](linear-gradient), [`repeating-linear-gradient()`](repeating-linear-gradient), [`conic-gradient()`](conic-gradient), [`repeating-conic-gradient()`](repeating-conic-gradient)
* [`<image>`](../image)
* [`image()`](../image/image)
* [`element()`](../element())
* [`image-set()`](../image/image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-radial-gradient>

repeat()
========


The `repeat()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) represents a repeated fragment of the [track list](css_grid_layout/basic_concepts_of_grid_layout), allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.


Try it
------



 This function can be used in the CSS Grid properties [`grid-template-columns`](grid-template-columns) and [`grid-template-rows`](grid-template-rows).


Syntax
------




```
/\* <track-repeat> values \*/
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/\* <auto-repeat> values \*/
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/\* <fixed-repeat> values \*/
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

```
 The `repeat()` function takes two arguments:

 * **repeat count**: the first argument specifies the number of times that the track list should be repeated. It is specified with an integer value of 1 or more, or with the keyword values [`auto-fill`](#auto-fill) or [`auto-fit`](#auto-fit). These keyword values repeat the set of tracks as many times as is needed to fill the grid container.
* **tracks**: the second argument specifies the set of tracks that will be repeated. Fundamentally this consists of one or more values, where each value represents the size of that track. Each size is specified using either a [`<track-size>`](#track-size) value or a [`<fixed-size>`](#fixed-size) value. You can also specify one or more [line names](css_grid_layout/layout_using_named_grid_lines) before or after each track, by providing [`<line-names>`](#line-names) values before and/or after the track size.

 If you use [`auto-fill`](#auto-fill) or [`auto-fit`](#auto-fit) to set the repeat count, you may only specify track sizes using the [`<fixed-size>`](#fixed-size) type, not the [`<track-size>`](#track-size) type. This give us three main syntax forms for `repeat()`:

 * `<track-repeat>`, which uses:
	+ an integer to set the repeat count
	+ [`<track-size>`](#track-size) values to set track sizes.
* `<auto-repeat>`, which uses
	+ [`auto-fill`](#auto-fill) or [`auto-fit`](#auto-fit) to set the repeat count
	+ [`<fixed-size>`](#fixed-size) to set track sizes.
* `<fixed-repeat>`, which uses:
	+ an integer to set the repeat count
	+ [`<fixed-size>`](#fixed-size) values to set track sizes.

 Then if a property declaration uses `<auto-repeat>`, it is only allowed to use `<fixed-repeat>` for any additional `repeat()` calls. For example, this is invalid, because it combines the `<auto-repeat>` form with the `<track-repeat>` form:

 
```
.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}

```
 There is a fourth form, `<name-repeat>`, which is used to add line names to subgrids. It only used with the [`subgrid`](css_grid_layout/subgrid) keyword and only specifies line names, not track sizes.


### Values


 `<fixed-size>`  One of the following forms:

 * a [`<length-percentage>`](length-percentage) value
* a [`minmax()`](minmax) function with:
	+ `min` given as a [`<length-percentage>`](length-percentage) value
	+ `max` given as one of a [`<length-percentage>`](length-percentage) value, a [`<flex>`](flex_value) value, or one of the following keywords: [`min-content`](#min-content), [`max-content`](#max-content), or [`auto`](#auto)
* a [`minmax()`](minmax) function with:
	+ `min` given as a [`<length-percentage>`](length-percentage) value or one of the following keywords: [`min-content`](#min-content), [`max-content`](#max-content), or [`auto`](#auto)
	+ `max` given as a [`<length-percentage>`](length-percentage) value.

  [`<flex>`](flex_value)  A non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

  [`<length>`](length)  A positive integer length.

  `<line-names>`  Zero or more [`<custom-ident>`](custom-ident) values, space-separated and enclosed in square brackets, like this: `[first header-start]`.

  [`<percentage>`](percentage)  A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `<percentage>` must be treated as `auto`. The user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

  `<track-size>`  One of the following forms:

 * a [`<length-percentage>`](length-percentage) value, a [`<flex>`](flex_value) value, or one of the following keywords: [`min-content`](#min-content), [`max-content`](#max-content), or [`auto`](#auto)
* a [`minmax()`](minmax) function with:
	+ `min` given as a [`<length-percentage>`](length-percentage) value, or one of the following keywords: [`min-content`](#min-content), [`max-content`](#max-content), or [`auto`](#auto)
	+ `max` given as a [`<length-percentage>`](length-percentage) value, a [`<flex>`](flex_value) value, or one of the following keywords: [`min-content`](#min-content), [`max-content`](#max-content), or [`auto`](#auto)
* a [`fit-content()`](fit-content_function) function, passed a [`<length-percentage>`](length-percentage) value.

  `auto`  As a maximum, identical to `max-content`. As a minimum it represents the largest minimum size (as specified by [`min-width`](min-width)/[`min-height`](min-height)) of the grid items occupying the grid track.

  `auto-fill`  If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. Treating each track as its maximal track sizing function (each independent value used to define `grid-template-rows` or `grid-template-columns`), if that is definite. Otherwise, as its minimum track sizing function, and taking grid-gap into account. If any number of repetitions would overflow, then the repetition is `1`. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

  `auto-fit`  Behaves the same as `auto-fill`, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they're all empty.)

 A collapsed track is treated as having a single fixed track sizing function of `0px`, and the gutters on either side of it collapse.

 For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., `1px`), to avoid division by zero.

  `max-content`  Represents the largest max-content contribution of the grid items occupying the grid track.

  `min-content`  Represents the largest min-content contribution of the grid items occupying the grid track.

  Examples
--------


### Specifying grid columns using repeat()



#### HTML

 
```
<div id="container">
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>Inflexible item of 100 pixels width.</div>
</div>

```
 #### CSS

 
```
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # repeat-notation](https://w3c.github.io/csswg-drafts/css-grid/#repeat-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `repeat` | 57 | 16 | 7657–76`repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see [bug 1341507](https://bugzil.la/1341507)).52–57[`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) doesn't work in `repeat()` (see [bug 1350069](https://bugzil.la/1350069)). | No | 44 | 10.1 | 57 | 57 | 7957–79`repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see [bug 1341507](https://bugzil.la/1341507)).52–57[`calc()`](https://developer.mozilla.org/docs/Web/CSS/calc) doesn't work in `repeat()` (see [bug 1350069](https://bugzil.la/1350069)). | 43 | 10.3 | 6.0 |


See also
--------


* Related CSS properties: [`grid-template`](grid-template), [`grid-template-rows`](grid-template-rows), [`grid-template-columns`](grid-template-columns), [`grid-template-areas`](grid-template-areas), [`grid-auto-columns`](grid-auto-columns), [`grid-auto-rows`](grid-auto-rows), [`grid-auto-flow`](grid-auto-flow)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Grid Layout Guide: *[Grid template areas - Grid definition shorthands](css_grid_layout/grid_template_areas#grid_definition_shorthands)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/repeat>

:required
=========


The `:required` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), or [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) element that has the [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required) attribute set on it.


Try it
------



 This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

  **Note:** The [`:optional`](:optional) pseudo-class selects *optional* form fields.

 
Syntax
------



```
:required {
  /\* ... \*/
}

```
Examples
--------


### The required field has a red border



#### HTML

 
```
<form>
  <div class="field">
    <label for="url\_input">Enter a URL:</label>
    <input type="url" id="url\_input" />
  </div>

  <div class="field">
    <label for="email\_input">Enter an email address:</label>
    <input type="email" id="email\_input" required />
  </div>
</form>

```
 #### CSS

 
```
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

```
 #### Result



Accessibility concerns
----------------------



Mandatory [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)s should have the [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required) attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.

 If the form also contains [optional](:optional) inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

 * [MDN Understanding WCAG, Guideline 3.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes)
* [Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-required](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-required) |
| [Selectors Level 4 # opt-pseudos](https://w3c.github.io/csswg-drafts/selectors/#opt-pseudos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:required` | 10 | 12 | 4 | 10 | 10 | 5 | 4.4.3 | 18 | 4 | 10.1 | 5 | 1.0 |


See also
--------


* Other validation-related pseudo-classes: [`:optional`](:optional), [`:invalid`](:invalid), [`:valid`](:valid)
* [Form data validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:required>

resize
======


The `resize` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether an element is resizable, and if so, in which directions.


Try it
------



 `resize` does not apply to the following:

 * Inline elements
* Block elements for which the [`overflow`](overflow) property is set to `visible`


Syntax
------




```
/\* Keyword values \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/\* Global values \*/
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

```
 The `resize` property is specified as a single keyword value from the list below.


### Values


 `none`  The element offers no user-controllable method for resizing it.

  `both`  The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.

  `horizontal`  The element displays a mechanism for allowing the user to resize it in the *horizontal* direction.

  `vertical`  The element displays a mechanism for allowing the user to resize it in the *vertical* direction.

  
`block`  Experimental 
  The element displays a mechanism for allowing the user to resize it in the *block* direction (either horizontally or vertically, depending on the [`writing-mode`](writing-mode) and [`direction`](direction) value).

  
`inline`  Experimental 
  The element displays a mechanism for allowing the user to resize it in the *inline* direction (either horizontally or vertically, depending on the [`writing-mode`](writing-mode) and [`direction`](direction) value).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | elements with [`overflow`](overflow) other than `visible`, and optionally replaced elements representing images or videos, and iframes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
resize =   
  none        [|](value_definition_syntax#single_bar)  
  both        [|](value_definition_syntax#single_bar)  
  horizontal  [|](value_definition_syntax#single_bar)  
  vertical    [|](value_definition_syntax#single_bar)  
  block       [|](value_definition_syntax#single_bar)  
  inline        
  

```
Examples
--------


### Disabling resizability of textareas



In many browsers, [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) elements are resizable by default. You may override this behavior with the `resize` property.

 #### HTML

 
```
<textarea>Type some text here.</textarea>

```
 #### CSS

 
```
textarea {
  resize: none; /\* Disables resizability \*/
}

```
 #### Result



### Using resize with arbitrary elements



You can use the `resize` property to make any element resizable. In the example below, a resizable [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) contains a resizable paragraph ([`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element).

 #### HTML

 
```
<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>

```
 #### CSS

 
```
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # resize](https://w3c.github.io/csswg-drafts/css-ui/#resize) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `resize` | 1 | 79 | 4 | No | 12.1 | 3 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `block_level_support` | 4 | 79 | 5`resize` doesn't have any effect on [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). See [bug 680823](https://bugzil.la/680823)) | No | 15 | 4 | 37 | 18 | 5`resize` doesn't have any effect on [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe). See [bug 680823](https://bugzil.la/680823)) | 14 | 3.2 | 1.0 |
| `flow_relative_support` | 70 | 79 | 63 | No | 57 | 16 | No | 70 | 63 | No | 16 | No |


See also
--------


* [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/resize>

:right
======



The `:right` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes), used with the [`@page`](@page) <at-rule>, represents all right-hand pages of a printed document.

 
```
/\* Selects any right-hand pages when printing \*/
@page :right {
  margin: 2in 3in;
}

```
 Whether a given page is "left" or "right" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page; if it has a major writing direction of right-to-left then it will be a [`:left`](:left) page.

  **Note:** This pseudo-class can be used to change only the [`margin`](margin), [`padding`](padding), [`border`](border), and [`background`](background) properties of the *page box*. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.

 

Syntax
------



```
:right {
  /\* ... \*/
}

```
Examples
--------


### Setting margins for right-hand pages



```
@page :right {
  margin: 2in 3in;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # left-right-first](https://w3c.github.io/csswg-drafts/css-page/#left-right-first) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:right` | 6 | 12 | No | 8 | 9.2 | 5 | ≤37 | 18 | No | 10.1 | 4.2 | 1.0 |


See also
--------


* [`@page`](@page)
* Other page-related pseudo-classes: [`:first`](:first), [`:left`](:left)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:right>

:root
=====



The `:root` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches the root element of a tree representing the document. In HTML, `:root` represents the [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) element and is identical to the selector `html`, except that its <specificity> is higher.

 
```
/\* Selects the root element of the document:
 <html> in the case of HTML \*/
:root {
  background: yellow;
}

```


Syntax
------



```
:root {
  /\* ... \*/
}

```
Examples
--------


### Declaring global CSS variables



`:root` can be useful for declaring global [CSS variables](using_css_custom_properties):

 
```
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

```

Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # root-pseudo](https://w3c.github.io/csswg-drafts/selectors/#root-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:root` | 1 | 12 | 1 | 9 | 9.5 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)
* [`Document.rootElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/rootElement)
* [`Node.getRootNode()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode)
* [`Element.shadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot)
* [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:root>

rotate
======


The `rotate` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property allows you to specify rotation transforms individually and independently of the [`transform`](transform) property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.


Try it
------


Syntax
------



```
/\* Keyword values \*/
rotate: none;

/\* Angle value \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, or z axis name plus angle \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* Vector plus angle value \*/
rotate: 1 1 1 90deg;

/\* Global values \*/
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;

```
### Values


 angle value  An [`<angle>`](angle) specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function.

  x, y, or z axis name plus angle value  The name of the axis you want to rotate the affected element around (`"x"`, "`y`", or "`z"`), plus an [`<angle>`](angle) specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function.

  vector plus angle value  Three [`<number>`](number)s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an [`<angle>`](angle) specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function.

  `none`  Specifies that no rotation should be applied.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | a transform |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
rotate =   
  none                                    [|](value_definition_syntax#single_bar)  
  [<angle>](angle)                                 [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) x [|](value_definition_syntax#single_bar) y [|](value_definition_syntax#single_bar) z [|](value_definition_syntax#single_bar) [<number>](number)[{3}](value_definition_syntax#curly_braces) []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [<angle>](angle)    
  

```
Examples
--------


### Rotating an element on hover



 The following example shows how to use the `rotate` property to rotate an element along various axes on hover. The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates. 

 #### HTML

 
```
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>

```
 #### CSS

 
```
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # individual-transforms](https://w3c.github.io/csswg-drafts/css-transforms-2/#individual-transforms) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rotate` | 104 | 104 | 72 | No | 90 | 14.1 | 104 | 104 | 79 | 71 | 14.5 | 20.0 |
| `x_y_z_angle` | 104 | 104 | 72 | No | 90 | preview | 104 | 104 | 79 | 71 | No | 20.0 |


See also
--------



* [`translate`](translate)
* [`scale`](scale)
* [`transform`](transform)

 Note: `skew` is not an independent `transform` value




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/rotate>

repeating-conic-gradient()
==========================


The `repeating-conic-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) creates an image consisting of a repeating gradient (rather than a [`single gradient`](conic-gradient)) with color transitions rotated around a center point (rather than [`radiating from the center`](repeating-radial-gradient)).


Try it
------


Syntax
------



```
/\* Starburst: a blue on blue starburst: the gradient
 is a starburst of lighter and darker blue,
 centered in the upper left quadrant,
 offset by 3degrees so there is no up/down straight line \*/
background: repeating-conic-gradient(
  from 3deg at 25% 25%,
  hsl(200, 100%, 50%) 0deg 15deg,
  hsl(200, 100%, 60%) 10deg 30deg
);

```
### Values



 [`<angle>`](../angle)  Preceded by the `from` keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.

  `<position>`  Using the same length, order and keyterm values as the [background-position](../background-position) property, the position defines center of the gradient. If omitted, the default value is `center`, meaning the gradient will be centered, .

  `<angular-color-stop>`  A color-stop's [`<color>`](../color_value) value, followed by one or two optional stop positions, (an [`<angle>`](../angle) along the gradient's circumference axis). The last color stop minus the first color-stop angle defines the size of the repeating gradient.

  `<color-hint>`  An [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

    **Note:** Rendering of [color stops in CSS gradients](#gradient_with_multiple_color_stops) follows the same rules as color stops in [SVG gradients](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients).

 
Description
-----------



Example repeating conic gradients include starbursts. The result of the `repeating-conic-gradient()` function is an object of the [`<gradient>`](../gradient) data type, which is a special kind of [`<image>`](../image).

 If neither the first nor the last color stops include a color stop angle greater than 0deg or less than 360 degrees respectively, the conic-gradient will not repeat.

 As with any gradient, a repeating-conic gradient has [no intrinsic dimensions](../image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to, or the size the `<image>` is set to if it's set to something other than the element's size.

 Because `<gradient>`s belong to the `<image>` data type, they can only be used where `<image>`s can be used. For this reason, `repeating-conic-gradient()` won't work on [`background-color`](../background-color) and other properties that use the [`<color>`](../color_value) data type.

  **Note:** To create a conic gradient that does not repeat, make the gradient a full 360 degree rotation, or use the [`conic-gradient()`](conic-gradient) function instead.

 
### Understanding repeating conic gradients



The repeating-conic-gradient syntax is similar to the [`conic-gradient()`](conic-gradient) and [`repeating-radial-gradient()`](repeating-radial-gradient) syntax. Like the non-repeating conic-gradient, the color-stops are placed around a gradient arc. Like the repeating radial gradient, the size of the repeating section is the first color stop subtracted from the angle of the last color stop.

  ![Comparison of the color stops for repeating and non-repeating conic and radial gradients] 

 The above gradients are defined as being one third blue, one third red, and one third yellow.

 
```
repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

```
 For a repeating gradient to repeat we define the first and last color stops. Like in non-repeating gradients, the first and last color stops are assumed to be 0 and either 100% or 360deg if not explicitly declared. When defaulting to these values, the repeating arc is 360 degrees, and therefore doesn't repeat.

 Like the non-repeating conic gradient, the color-stops are placed around a gradient arc — the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. The colors transition as if spun around the center of a circle, starting at the top if no `from <angle>` is declared, and going clockwise for the size of the angle that is the different between the largest and smallest color angle, then repeating.

 A repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an [`<angle>`](../angle). Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting repeating conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

 Radial and conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value [`background-position`](../background-position).

 The gradient arc is part of the circumference of the gradient. 0 degrees is north, or 12:00pm. The colors of the gradient are determined by the angled color stops, their starting points, ending points, and, in between, and optional angled color-stop points. The transitions between colors can be altered with color hints between adjacent colors' color stops.

 #### Customizing gradients

 By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an [`<angle>`](../angle). If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. Like the non-repeating gradient counterpart, If you don't specify an angle for the first or last color stop, the values are will be 0deg and 360deg. If you don't declare an angle for either, you'll get a non-repeating conic gradient. If you declare a non 0 or 360degree for the first or last respectively, the gradient will repeat based on that value. For example, if you don't declare an angle for the first color, and declare 10% on the last color stop, the arc will repeat 10 times. Rather, the starting point is the first color stop declared, and the last color stop is the last color stop angle declared. The following two gradients are equivalent:

 
```
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

```
 By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be.

 If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location.

 While you can mix and match different angle units, don't. It makes CSS hard to read.


### Formal syntax


Error: could not find syntax for this itemAccessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)


Examples
--------


### Black and white starburst




```
div {
  background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}

```


### Off-centered gradient



This gradient repeats 18 times, but since we only see the right half, we only see 9 repeats.

 
```
div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}

```


### More repeating-conic-gradient examples


Please see [Using CSS gradients](../css_images/using_css_gradients) for more examples.

Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # repeating-gradients](https://w3c.github.io/csswg-drafts/css-images-4/#repeating-gradients) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `repeating-conic-gradient` | 69 | 79 | 83 | No | 56 | 12.1 | 69 | 69 | 83 | 48 | 12.2 | 10.0 |
| `hue_interpolation_method` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |
| `interpolation_color_space` | 111 | 111 | No | No | 97 | 16.2 | 111 | 111 | No | No | 16.2 | No |


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)
* Other gradient functions: [`conic-gradient()`](conic-gradient), [`linear-gradient()`](linear-gradient), [`repeating-linear-gradient()`](repeating-linear-gradient), [`radial-gradient()`](radial-gradient), [`repeating-radial-gradient()`](repeating-radial-gradient)
* [`<image>`](../image)
* [`image()`](../image/image)
* [`element()`](../element())
* [`image-set()`](../image/image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-conic-gradient>

revert
======



The `revert` CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current **[style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin)** to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). It can be applied to any CSS property, including the CSS shorthand property [`all`](all).

 This keyword removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.

 * If used by a site's own styles (the author origin), `revert` rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.
* If used in a user's custom stylesheet, or if the style was applied by the user (the user origin), `revert` rolls back the cascaded value to the user agent's default style.
* If used within the user agent's default styles, this keyword is functionally equivalent to [`unset`](unset).

 The `revert` keyword works exactly the same as [`unset`](unset) in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

 Revert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). So if you have a `color: green` for all sections and `all: revert` on a specific section, the color of the section will be black. But if you have a rule to make all paragraphs red, then all paragraphs will still be red in all sections.

  **Note:** Revert is just a value. It is still possible to override the `revert` value using <specificity>.

   **Note:** The `revert` keyword is different from and should not be confused with the [`initial`](initial) keyword, which uses the [initial value](initial_value) defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

 For example, the [initial value](initial_value) for the [`display`](display#formal_definition) property is `inline`, whereas a normal user-agent stylesheet sets the default [`display`](display) value of [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)s to `block`, of [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)s to `table`, etc.

 

Examples
--------


### Revert vs. unset



Although `revert` and `unset` are similar, they differ for some properties for some elements.

 So in the below example, we set custom [`font-weight`](font-weight#formal_definition), but then try to `revert` and `unset` it inline in the HTML document. The `revert` keyword will revert the text to bold because that is the default value for headers in most browsers. The `unset` keyword will keep the text normal because, as an inherited property, the `font-weight` would then inherit its value from the body.

 #### HTML

 
```
<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

```
 #### CSS

 
```
h3 {
  font-weight: normal;
  color: blue;
}

```
 #### Result



### Revert all



Reverting all values is useful in a situation where you've made several style changes and then you want to revert to the browser default values. So in the above example, instead of reverting `font-weight` and `color` separately, you could just revert all of them at once - by applying the `revert` keyword on `all`.

 #### HTML

 
```
<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>

```
 #### CSS

 
```
h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

```
 #### Result



### Revert on a parent



Reverting effectively removes the value for the element you select with some rule and this happens only for that element. To illustrate this, we will set a green color on a section and red color on a paragraph.

 #### HTML

 
```
<section>
  <h3>This will be dark green</h3>
  <p>Text in paragraph will be red.</p>
  This will also be dark green.
</section>
<section class="with-revert">
  <h3>This will be black</h3>
  <p>Text in paragraph will be red.</p>
  This will also be black.
</section>

```
 #### CSS

 
```
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

```
 Notice how paragraph still has a red color even though a color property for the section was reverted. Also note that both the header and plain text node are black. This is exactly the same as if `section { color: darkgreen }` would not exist for the second section.

 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 4 # default](https://w3c.github.io/csswg-drafts/css-cascade/#default) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `revert` | 84 | 84 | 67 | No | 70 | 9.1 | 84 | 84 | 67 | 60 | 9.3 | 14.0 |


See also
--------


* Use the [`initial`](initial) keyword to set a property to its initial value.
* Use the [`inherit`](inherit) keyword to make an element's property the same as its parent.
* Use the [`revert-layer`](revert-layer) keyword to reset a property to the value established in a previous cascade layer.
* Use the [`unset`](unset) keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The [`all`](all) property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/revert>

right
=====


The `right` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property participates in specifying the horizontal position of a [positioned element](position). It has no effect on non-positioned elements.


Try it
------


Syntax
------



```
/\* <length> values \*/
right: 3px;
right: 2.4em;

/\* <percentage>s of the width of the containing block \*/
right: 10%;

/\* Keyword value \*/
right: auto;

/\* Global values \*/
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

```
### Values


 [`<length>`](length)  A negative, null, or positive [`<length>`](length) that represents:

 * for *absolutely positioned elements*, the distance to the right edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved to the left of its normal position.

  [`<percentage>`](percentage)  A [`<percentage>`](percentage) of the containing block's width.

  `auto`  Specifies that:

 * for *absolutely positioned elements*, the position of the element is based on the [`left`](left) property, while `width: auto` is treated as a width based on the content; or if `left` is also `auto`, the element is positioned where it should horizontally be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the [`left`](left) property; or if `left` is also `auto`, the element is not moved horizontally at all.

  `inherit`  Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a [`<length>`](length), [`<percentage>`](percentage), or the `auto` keyword.

  Description
-----------



The effect of `right` depends on how the element is positioned (i.e., the value of the [`position`](position) property):

 * When `position` is set to `absolute` or `fixed`, the `right` property specifies the distance between the element's outer margin of right edge and the inner border of the right edge of its containing block.
* When `position` is set to `relative`, the `right` property specifies the distance the element's right edge is moved to the left from its normal position.
* When `position` is set to `sticky`, the `right` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `right` property has *no effect*.

 When both [`left`](left) and `right` are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both — for example, if a `width` is declared — the position of the element is *over-constrained*. When this is the case, the `left` value has precedence when the container is left-to-right; the `right` value has precedence when the container is right-to-left.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
right =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Absolute and relative positioning using right



#### HTML

 
```
<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>

```
 #### CSS

 
```
#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

```
 #### Result



### Declaring both left and right



When both `left` and `right` are declared, the element will stretch to meet both, unless other constraints prevent it from doing so. If the element will not stretch or shrink to meet both. When the position of the element is *overspecified*, the precedence is based on the container's direction: The `left` will take precedence if the container's direction is left-to-right. The `right` will take precedence if the container's direction is right-to-left.

 #### HTML

 
```
<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>

```
 #### CSS

 
```
div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/\* declare both a left and a right \*/
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/\* declare a width \*/
#width {
  width: 100px;
  top: 60px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 3 # insets](https://w3c.github.io/csswg-drafts/css-position/#insets) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `right` | 1 | 12 | 1 | 5.5 | 5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`inset`](inset), the shorthand for all related properties: [`top`](top), [`bottom`](bottom), [`left`](left), and [`right`](right)
* The mapped logical properties: [`inset-block-start`](inset-block-start), [`inset-block-end`](inset-block-end), [`inset-inline-start`](inset-inline-start), and [`inset-inline-end`](inset-inline-end) and the shorthands [`inset-block`](inset-block) and [`inset-inline`](inset-inline)
* [`position`](position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/right>

rotateX()
=========


 The `rotateX()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



 The axis of rotation passes through an origin, defined by the [`transform-origin`](../transform-origin) CSS property.

   **Note:** `rotateX(a)` is equivalent to `rotate3d(1, 0, 0, a)`. 

    **Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result. 

 
Syntax
------



 The amount of rotation created by `rotateX()` is specified by an [`<angle>`](../angle). If positive, the movement will be clockwise; if negative, it will be counter-clockwise. 

 
```
rotateX(a)

```

### Values



 `a`   Is an [`<angle>`](../angle) representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |   (    1   0   0     0   cos ( a )   - sin ( a )     0   sin ( a )   cos ( a )    )   |   (    1   0   0   0     0   cos ( a )   - sin ( a )   0     0   sin ( a )   cos ( a )   0     0   0   0   1    )   |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="rotated">Rotated</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateX(45deg);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-rotatex](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-rotatex) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rotateX` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform) property
* [`rotate`](../rotate) property
* [`<transform-function>`](../transform-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX>

rotateZ()
=========


 The `rotateZ()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that rotates an element around the z-axis without deforming it. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



 The axis of rotation passes through an origin, defined by the [`transform-origin`](../transform-origin) CSS property.

   **Note:** `rotateZ(a)` is equivalent to `rotate(a)` or `rotate3d(0, 0, 1, a)`. 

    **Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result. 

 
Syntax
------



 The amount of rotation created by `rotateZ()` is specified by an [`<angle>`](../angle). If positive, the movement will be clockwise; if negative, it will be counter-clockwise. 

 
```
rotateZ(a)

```

### Values



 `a`   Is an [`<angle>`](../angle) representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |   (    cos ( a )   - sin ( a )   0     sin ( a )   cos ( a )   0     0   0   1    )   |   (    cos ( a )   - sin ( a )   0   0     sin ( a )   cos ( a )   0   0     0   0   1   0     0   0   0   1    )   |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="rotated">Rotated</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateZ(45deg);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-rotatez](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-rotatez) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rotateZ` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform) property
* [`rotate`](../rotate) property
* [`<transform-function>`](../transform-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ>

row-gap
=======


The `row-gap` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the size of the gap ([gutter](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)) between an element's rows.


Try it
------


Syntax
------




```
/\* <length> values \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> value \*/
row-gap: 10%;

/\* Global values \*/
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

```
 Note that `grid-row-gap` is an alias for this property.


### Values


 `<length-percentage>`  Is the width of the gutter separating the rows. [`<percentage>`](percentage) values are relative to the dimension of the element.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | multi-column elements, flex containers, grid containers |
| [Inherited](inheritance) | no |
| Percentages | refer to corresponding dimension of the content area |
| [Computed value](computed_value) | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
row-gap =   
  normal                     [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Flex layout



#### HTML

 
```
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

```
 #### Result



### Grid layout



#### HTML

 
```
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

```
 #### CSS

 
```
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Alignment Module Level 3 # column-row-gap](https://w3c.github.io/csswg-drafts/css-align/#column-row-gap) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `row-gap` | 47 | 16 | 52 | No | 34 | 10.1 | 47 | 47 | 52 | 34 | 10.3 | 5.0 |
| `flex_context` | 84 | 84 | 63 | No | 70 | 14.1 | 84 | 84 | 63 | 60 | 14.5 | 14.0 |
| `grid_context` | 6657 | 1616 | 6152 | No | 5344 | 1210.1 | 6657 | 6657 | 6152 | 4743 | 1210.3 | 9.06.0 |


See also
--------


* Related CSS properties: [`column-gap`](column-gap), [`gap`](gap)
* Grid Layout Guide: *[Basic concepts of grid layout - Gutters](css_grid_layout/basic_concepts_of_grid_layout#gutters)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap>

rotate()
========


 The `rotate()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  The fixed point that the element rotates around — mentioned above — is also known as the **transform origin**. This defaults to the center of the element, but you can set your own custom transform origin using the [`transform-origin`](../transform-origin) property. 


Syntax
------



 The amount of rotation created by `rotate()` is specified by an [`<angle>`](../angle). If positive, the movement will be clockwise; if negative, it will be counter-clockwise. A rotation by 180° is called *point reflection*. 

 
```
rotate(a)

```

### Values



 *a*   Is an [`<angle>`](../angle) representing the angle of the rotation. The direction of rotation depends on the writing direction. In a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context, a positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    cos ( a )   - sin ( a )     sin ( a )   cos ( a )    )   |   (    cos ( a )   - sin ( a )   0     sin ( a )   cos ( a )   0     0   0   1    )   |   (    cos ( a )   - sin ( a )   0     sin ( a )   cos ( a )   0     0   0   1    )   |   (    cos ( a )   - sin ( a )   0   0     sin ( a )   cos ( a )   0   0     0   0   1   0     0   0   0   1    )   |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |


Examples
--------


### Basic example



#### HTML

 
```
<div>Normal</div>
<div class="rotated">Rotated</div>

```
 #### CSS

 
```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}

```
 #### Result



### Combining rotation with another transformation



 If you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation! 

 #### HTML

 
```
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>

```
 #### CSS

 
```
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-rotate](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-rotate) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rotate` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform) property
* [`rotate`](../rotate) property
* [`<transform-function>`](../transform-function)
* [`rotate3d()`](rotate3d)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate>

rotate3d()
==========


 The `rotate3d()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  In 3D space, rotations have three degrees of freedom, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the [`transform-origin`](../transform-origin) property). If, as specified, the vector is not *normalized* (i.e., if the sum of the square of its three coordinates is not 1), the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invalidating the whole CSS property. 

   **Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result. 

 
Syntax
------



 The amount of rotation created by `rotate3d()` is specified by three [`<number>`](../number)s and one [`<angle>`](../angle). The `<number>`s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The `<angle>` represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise. 

 
```
rotate3d(x, y, z, a)

```

### Values



 `x`   Is a [`<number>`](../number) describing the x-coordinate of the vector denoting the axis of rotation which can be a positive or negative number. 

  `y`   Is a [`<number>`](../number) describing the y-coordinate of the vector denoting the axis of rotation which can be a positive or negative number. 

  `z`   Is a [`<number>`](../number) describing the z-coordinate of the vector denoting the axis of rotation which can be a positive or negative number. 

  `a`   Is an [`<angle>`](../angle) representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. 

   

|  |  |
| --- | --- |
| Cartesian coordinates on ℝ^2 |  This transformation applies to the 3D space and can't be represented on the plane.  |
| Homogeneous coordinates on ℝℙ^2 |
| Cartesian coordinates on ℝ^3 |    (    1 + ( 1 - cos ( a ) ) (  x 2  - 1 )   z · sin ( a ) + x y ( 1 - cos ( a ) )   - y · sin ( a ) + x z · ( 1 - cos ( a ) )     - z · sin ( a ) + x y · ( 1 - cos ( a ) )   1 + ( 1 - cos ( a ) ) ( y2 - 1 )   x · sin ( a ) + y z · ( 1 - cos ( a ) )     y sin ( a ) + xz ( 1 - cos ( a ) )   - x sin ( a ) + yz ( 1 - cos ( a ) )   1 + ( 1 - cos ( a ) ) ( z2 - 1 )   t     0   0   0   1    )   |
| Homogeneous coordinates on ℝℙ^3 |  |


Examples
--------


### Rotating on the y-axis



#### HTML

 
```
<div>Normal</div>
<div class="rotated">Rotated</div>

```
 #### CSS

 
```
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}

```
 #### Result



### Rotating on a custom axis



#### HTML

 
```
<div>Normal</div>
<div class="rotated">Rotated</div>

```
 #### CSS

 
```
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-rotate3d](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-rotate3d) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rotate3d` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform) property
* [`rotate`](../rotate) property
* [`<transform-function>`](../transform-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d>

rotateY()
=========


 The `rotateY()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



 The axis of rotation passes through an origin, defined by the [`transform-origin`](../transform-origin) CSS property.

   **Note:** `rotateY(a)` is equivalent to `rotate3d(0, 1, 0, a)`. 

    **Note:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result. 

 
Syntax
------



 The amount of rotation created by `rotateY()` is specified by an [`<angle>`](../angle). If positive, the movement will be clockwise; if negative, it will be counter-clockwise. 

 
```
rotateY(a)

```

### Values



 `a`   Is an [`<angle>`](../angle) representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |   (    cos ( a )   0   sin ( a )     0   1   0     - sin ( a )   0   cos ( a )    )   |   (    cos ( a )   0   sin ( a )   0     0   1   0   0     - sin ( a )   0   cos ( a )   0     0   0   0   1    )   |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="rotated">Rotated</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-rotatey](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-rotatey) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rotateY` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform) property
* [`rotate`](../rotate) property
* [`<transform-function>`](../transform-function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY>

saturate()
==========


The `saturate()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) super-saturates or desaturates the input image. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



```
saturate(amount)

```
### Parameters


 `amount`  The amount of the conversion, specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value under `100%` desaturates the image, while a value over `100%` super-saturates it. A value of `0%` is completely unsaturated, while a value of `100%` leaves the input unchanged. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `1`.

  Examples
--------


### Examples of correct values for saturate()



```
saturate(0)     /\* Completely unsaturated \*/
saturate(.4)    /\* 40% saturated \*/
saturate(100%)  /\* No effect \*/
saturate(200%)  /\* Double saturation \*/

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-saturate](https://drafts.fxtf.org/filter-effects/#funcdef-filter-saturate) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `saturate` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------



The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:

 * [`blur()`](blur)
* [`brightness()`](brightness)
* [`contrast()`](contrast)
* [`drop-shadow()`](drop-shadow)
* [`grayscale()`](grayscale)
* [`hue-rotate()`](hue-rotate)
* [`invert()`](invert)
* [`opacity()`](opacity)
* [`sepia()`](sepia)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate>

scale
=====


The `scale` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property allows you to specify scale transforms individually and independently of the [`transform`](transform) property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scale: none;

/\* Single values \*/
/\* values of more than 1 or 100% make the element grow \*/
scale: 2;
/\* values of less than 1 or 100% make the element shrink \*/
scale: 50%;

/\* Two values \*/
scale: 2 0.5;

/\* Three values \*/
scale: 200% 50% 200%;

/\* Global values \*/
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;

```
### Values


 Single value  A [`<number>`](number) or [`<percentage>`](percentage) specifying a scale factor to make the affected element scale by the same factor along both the X and Y axes. Equivalent to a `scale()` (2D scaling) function with a single value specified.

  Two values  Two [`<number>`](number) or [`<percentage>`](percentage) values that specify the X and Y axis scaling values (respectively) of a 2D scale. Equivalent to a `scale()` (2D scaling) function with two values specified.

  Three values  Three [`<number>`](number) or [`<percentage>`](percentage) values that specify the X, Y, and Z axis scaling values (respectively) of a 3D scale. Equivalent to a `scale3d()` (3D scaling) function.

  `none`  Specifies that no scaling should be applied.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | a transform |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
scale =   
  none                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<number>](number) [|](value_definition_syntax#single_bar) [<percentage>](percentage) []](value_definition_syntax#brackets)[{1,3}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Scaling an element on hover



 The following example shows how to scale an element on hover. Two boxes are shown, one with a single `scale` value which scales the element along both axes. The second box has two `scale` values which scales the element along the X and Y axes independently. 

 #### HTML

 
```
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>

```
 #### CSS

 
```
.box {
  float: left;
  margin: 1em;
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}

#box1:hover {
  scale: 1.25;
}

#box2:hover {
  scale: 1.25 0.75;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # individual-transforms](https://w3c.github.io/csswg-drafts/css-transforms-2/#individual-transforms) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scale` | 104 | 104 | 72 | No | 90 | 14.1 | 104 | 104 | 79 | 71 | 14.5 | 20.0 |


See also
--------



* [`translate`](translate)
* [`rotate`](rotate)
* [`transform`](transform)

 Note: skew is not an independent transform value




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scale>

round()
=======



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `round()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) returns a rounded number based on a selected rounding strategy.

 Authors should use a [custom CSS property](--*) (e.g., `--my-property`) for the rounding value, interval, or both; using the `round()` function is redundant if these have known values.



Syntax
------



```
width: round(var(--width), 50px);
width: round(up, 101px, var(--interval));
width: round(down, var(--height), var(--interval));
margin: round(to-zero, -105px, 10px);

```
### Parameter



 The `round(<rounding-strategy>, valueToRound, roundingInterval)` function specifies an optional rounding strategy, a value (or mathematical expression) to be rounded and a rounding interval (or mathematical expression). The `valueToRound` is rounded according to the rounding strategy, to the nearest integer multiple of `roundingInterval`. 

  `<rounding-strategy>`   The rounding strategy. This may be one of the following values: 

  `up`  Round `valueToRound` up to the nearest integer multiple of `roundingInterval` (if the value is negative, it will become "more positive"). This is equivalent to the JavaScript [`Math.ceil()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil) method.

  `down`  Round `valueToRound` down to the nearest integer multiple of `roundingInterval` (if the value is negative, it will become "more negative"). This is equivalent to the JavaScript [`Math.floor()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) method.

  
`nearest` (default)   Round `valueToRound` to the nearest integer multiple of `roundingInterval`, which may be either above or below the value. If the `valueToRound` is half way between the rounding targets above and below (neither is "nearest"), it will be rounded up. Equivalent to JavaScript [`Math.round()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round). 

  `to-zero`  Round `valueToRound` to the nearest integer multiple of `roundingInterval` closer to/towards zero (a positive number will decrease, while a negative value will become "less negative"). This is equivalent to the JavaScript [`Math.trunc()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc) method.

    `valueToRound`   The value to be rounded. This must be a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage), or a mathematical expression that resolves to one of those values. 

  `roundingInterval`   The rounding interval. This is a [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage), or a mathematical expression that resolves to one of those values. 

  
### Return value



The value of `valueToRound`, rounded to the nearest lower or higher integer multiple of `roundingInterval`, depending on the `rounding strategy`.

 * If `roundingInterval` is 0, the result is `NaN`.
* If `valueToRound` and `roundingInterval` are both `infinite`, the result is `NaN`.
* If `valueToRound` is infinite but `roundingInterval` is finite, the result is the same `infinity`.
* If `valueToRound` is finite but `roundingInterval` is infinite, the result depends on the rounding strategy and the sign of `A`:
	+ `up` - If `valueToRound` is positive (not zero), return `+∞`. If `valueToRound` is `0⁺`, return `0⁺`. Otherwise, return `0⁻`.
	+ `down` - If `valueToRound` is negative (not zero), return `−∞`. If `valueToRound` is `0⁻`, return `0⁻`. Otherwise, return `0⁺`.
	+ `nearest`, `to-zero` - If `valueToRound` is positive or `0⁺`, return `0⁺`. Otherwise, return `0⁻`.
* The argument calculations can resolve to [`<number>`](number), [`<dimension>`](dimension), or [`<percentage>`](percentage), but must have the same type, or else the function is invalid; the result will have the same type as the arguments.
* If `valueToRound` is exactly equal to an integer multiple of `roundingInterval`, `round()` resolves to `valueToRound` exactly (preserving whether `valueToRound` is `0⁻` or `0⁺`, if relevant). Otherwise, there are two integer multiples of `roundingInterval` that are potentially "closest" to `valueToRound`, lower `roundingInterval` which is closer to `−∞` and upper `roundingInterval` which is closer to `+∞`.


### Formal syntax



```
<round()> =   
  round( <rounding-strategy>[?](value_definition_syntax#question_mark) , <calc-sum> , <calc-sum> )    
  
<rounding-strategy> =   
  nearest  [|](value_definition_syntax#single_bar)  
  up       [|](value_definition_syntax#single_bar)  
  down     [|](value_definition_syntax#single_bar)  
  to-zero    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Round positive values



This example demonstrates how the `round()` function's rounding strategies work for positive values.

  Of the five boxes below, the `round()` function is used to set the height of the last four. The value to be rounded is between 100 px and 125 px in each case, and the rounding value is 25px in all cases. The height of the boxes is therefore either rounded up to 125 px or down to 100 px. 

 #### HTML

  The HTML defines 5 `div` elements that will be rendered as boxes by the CSS. The elements contain text indicating the rounding strategy, initial value, and expected final height of the box (in brackets). 

 
```
<div class="box box-1">height: 100px</div>
<div class="box box-2">up 101px (125px)</div>
<div class="box box-3">down 122px (100px)</div>
<div class="box box-4">to-zero 120px (100px)</div>
<div class="box box-5">nearest 117px (125px)</div>

```
 #### CSS

  The CSS that is applied to all boxes is shown below. Note that we apply a [custom CSS property](--*) named `--rounding-interval`, that we will use for the rounding interval. 

 
```
div.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  padding: 5px;
  --rounding-interval: 25px;
}

```
  The first `div` from the left isn't targeted with specific CSS rules, so it will have a default height of 100px. The CSS for `div` two, three, and four is shown below, which round, up, down, and to-zero, respectively. 

 
```
div.box-2 {
  height: round(up, 101px, var(--rounding-interval));
}
div.box-3 {
  height: round(down, 122px, var(--rounding-interval));
}
div.box-4 {
  height: round(to-zero, 120px, var(--rounding-interval));
}

```
 Notice how above we indicate the rounding interval using `var()` and the custom CSS property `--rounding-interval`.

  The last box is set without specifying a rounding strategy, and hence defaults to `nearest`. In this case, the nearest interval to 117 px is 125px, so it will round up. Just for contrast, here we specified hard coded values for both the rounding value and interval. While this is allowed, you wouldn't do this normally because there is no point rounding a number when you already know what the result must be. 

 
```
div.box-5 {
  height: round(117px, 25px);
}

```
 #### Result

 If the browser supports the CSS `round()` function, you should see five columns with heights that are rounded as indicated by their contained text.



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # funcdef-round](https://w3c.github.io/csswg-drafts/css-values/#funcdef-round) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `round` | No | No | 108preview | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`mod()`](mod)
* [`rem()`](rem)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/round>

ruby-align
==========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `ruby-align` CSS property defines the distribution of the different ruby elements over the base.

 
```
/\* Keyword values \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/\* Global values \*/
ruby-align: inherit;
ruby-align: initial;
ruby-align: revert;
ruby-align: revert-layer;
ruby-align: unset;

```


Syntax
------


### Values


 `start`  Is a keyword indicating that the ruby will be aligned with the start of the base text.

  `center`  Is a keyword indicating that the ruby will be aligned at the middle of the base text.

  `space-between`  Is a keyword indicating that the extra space will be distributed between the elements of the ruby.

  `space-around`  Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `space-around` |
| Applies to | ruby bases, ruby annotations, ruby base containers, ruby annotation containers |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
ruby-align =   
  start          [|](value_definition_syntax#single_bar)  
  center         [|](value_definition_syntax#single_bar)  
  space-between  [|](value_definition_syntax#single_bar)  
  space-around     
  

```
Examples
--------


### Ruby aligned at the start of the base text



#### HTML

 
```
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-align: start;
}

```
 #### Result



### Ruby aligned at the center of the base text



#### HTML

 
```
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-align: center;
}

```
 #### Result



### Extra space distributed between ruby elements



#### HTML

 
```
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-align: space-between;
}

```
 #### Result



### Extra space distributed between and around ruby elements



#### HTML

 
```
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-align: space-around;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Ruby Annotation Layout Module Level 1 # ruby-align-property](https://w3c.github.io/csswg-drafts/css-ruby/#ruby-align-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ruby-align` | No | No | 38 | NoInternet Explorer 9 and later supports an earlier draft of CSS Ruby with non-standard values for this property: `auto`, `left`, `center`, `right`, `distribute-letter`, `distribute-space`, and `line-edge`. | No | No | No | No | 38 | No | No | No |


See also
--------


* HTML Ruby elements: [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby), [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt), [`<rp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp), and [`<rtc>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc).
* CSS Ruby properties: [`ruby-position`](ruby-position), `ruby-merge`.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align>

scale()
=======


 The `scale()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (*isotropic*) and the aspect ratio of the element is preserved (this is a [homothetic transformation](https://en.wikipedia.org/wiki/Homothetic_transformation)). 

  When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. A negative value results in a [point reflection](https://en.wikipedia.org/wiki/Point_reflection) in that dimension. The value `1` has no effect. 

   **Note:** The `scale()` function only scales in 2D. To scale in 3D, use [`scale3d()`](scale3d) instead. 

 
Syntax
------



 The `scale()` function is specified with either one or two values, which represent the amount of scaling to be applied in each direction. 

 
```
scale(sx)

scale(sx, sy)

```

### Values



 `sx`  A [`<number>`](../number) or [`<percentage>`](../percentage) representing the abscissa of the scaling vector.

  `sy`   A [`<number>`](../number) or [`<percentage>`](../percentage) representing the ordinate of the scaling vector. If not defined, its default value is `sx`, resulting in a uniform scaling that preserves the element's aspect ratio. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    sx   0     0   sy    )   |   (    sx   0   0     0   sy   0     0   0   1    )   |   (    sx   0   0     0   sy   0     0   0   1    )   |   (    sx   0   0   0     0   sy   0   0     0   0   1   0     0   0   0   1    )   |
| `[sx 0 0 sy 0 0]` |


Accessibility concerns
----------------------



 Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide. 

  Also, consider making use of the [`prefers-reduced-motion`](../@media/prefers-reduced-motion) media feature — use it to write a [media query](../media_queries) that will turn off animations if the user has reduced animation specified in their system preferences. 

 Find out more:

 * [MDN Understanding WCAG, Guideline 2.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
* [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)


Examples
--------


### Scaling the X and Y dimensions together



#### HTML

 
```
<div>Normal</div>
<div class="scaled">Scaled</div>

```
 #### CSS

 
```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /\* Equal to scaleX(0.7) scaleY(0.7) \*/
  background-color: pink;
}

```
 #### Result



### Scaling X and Y dimensions separately, and translating the origin



#### HTML

 
```
<div>Normal</div>
<div class="scaled">Scaled</div>

```
 #### CSS

 
```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /\* Equal to scaleX(2) scaleY(0.5) \*/
  transform-origin: left;
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-scale](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-scale) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scale` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`scale`](../scale)
* [`<transform-function>`](../transform-function)
* [`scale3d()`](scale3d)
* Other individual transform properties [`translate`](../translate) and [`rotate`](../rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale>

scale3d()
=========


 The `scale3d()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This scaling transformation is characterized by a three-dimensional vector. Its coordinates define how much scaling is done in each direction. If all three coordinates are equal, the scaling is uniform (*isotropic*) and the aspect ratio of the element is preserved (this is a [homothetic transformation](https://en.wikipedia.org/wiki/Homothetic_transformation)). 

  When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a [point reflection](https://en.wikipedia.org/wiki/Point_reflection) in that dimension. A value of 1 has no effect. 


Syntax
------



 The `scale3d()` function is specified with three values, which represent the amount of scaling to be applied in each direction. 

 
```
scale3d(sx, sy, sz)

```

### Values



 `sx`  Is a [`<number>`](../number) representing the abscissa of the scaling vector.

  `sy`  Is a [`<number>`](../number) representing the ordinate of the scaling vector.

  `sz`  Is a [`<number>`](../number) representing the z-component of the scaling vector.

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |   (    sx   0   0     0   sy   0     0   0   sz    )   |   (    sx   0   0   0     0   sy   0   0     0   0   sz   0     0   0   0   1    )   |


Examples
--------


### Without changing the origin



#### HTML

 
```
<div>Normal</div>
<div class="scaled">Scaled</div>

```
 #### CSS

 
```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}

```
 #### Result



### Translating the origin of the transformation



#### HTML

 
```
<div>Normal</div>
<div class="scaled">Scaled</div>

```
 #### CSS

 
```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-scale3d](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-scale3d) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scale3d` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`scaleZ()`](scalez)
* [`translate3d()`](translate3d)
* [`rotate3d()`](rotate3d)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d>

:scope
======



The `:scope` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents elements that are a reference point for selectors to match against.

 
```
/\* Selects a scoped element \*/
:scope {
  background-color: lime;
}

```
 Currently, when used in a stylesheet, `:scope` is the same as [`:root`](:root), since there is not at this time a way to explicitly establish a scoped element. When used from a DOM API such as [`querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll), [`matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches), or [`Element.closest()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest), `:scope` matches the element on which the method was called.



Syntax
------



```
:scope {
  /\* ... \*/
}

```
Examples
--------


### Identity match



In this simple example, we demonstrate that using the `:scope` pseudo-class from the [`Element.matches()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) method matches the element on which it's called.

 #### JavaScript

 
```
const paragraph = document.getElementById("para");
const output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.textContent = "Yep, the element is its own scope as expected!";
}

```
 #### HTML

 
```
<p id="para">
  This is a paragraph. It is not an interesting paragraph. Sorry about that.
</p>
<p id="output"></p>

```
 #### Result



### Direct children



A situation where the `:scope` pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element).

 #### JavaScript

 
```
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = Array.prototype.map
  .call(selected, (element) => `#${element.getAttribute("id")}`)
  .join(", ");

```
 #### HTML

 
```
<div id="context">
  <div id="element-1">
    <div id="element-1.1"></div>
    <div id="element-1.2"></div>
  </div>
  <div id="element-2">
    <div id="element-2.1"></div>
  </div>
</div>
<p>
  Selected elements ids :
  <span id="results"></span>
</p>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-scope-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-scope-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:scope` | 27 | 79 | 32Firefox 55 removes support for `<style scoped>` but not for the `:scope` pseudo-class, which is still supported. `<style scoped>` made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it. | No | 15 | 7 | 4.4 | 27 | 32Firefox 55 removes support for `<style scoped>` but not for the `:scope` pseudo-class, which is still supported. `<style scoped>` made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it. | 15 | 7 | 1.5 |
| `dom_api` | 27 | 79 | 32 | No | 15 | 7 | 4.4 | 27 | 32 | 15 | 7 | 1.5 |


See also
--------


* The [`:root`](:root) [pseudo-class](pseudo-classes)
* [Locating DOM elements using selectors](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
* [`Element.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector) and [`Element.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll)
* [`Document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) and [`Document.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
* [`DocumentFragment.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelector) and [`DocumentFragment.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelectorAll)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:scope>

ruby-position
=============


The `ruby-position` CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (`over`), under it (`under`), or between the characters on their right side (`inter-character`).


Try it
------


Syntax
------



```
/\* Keyword values \*/
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;
ruby-position: alternate;

/\* Global values \*/
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;

```
### Values


 `over`   ![Over example]Is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts. 

  `under`   ![Under example]Is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts. 

  
`inter-character`  Experimental 
  Is a keyword indicating that the ruby has to be placed between the different characters.

  
`alternate`  Experimental 
  Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotation.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `alternate` |
| Applies to | ruby annotations containers |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
ruby-position =   
  [[](value_definition_syntax#brackets) alternate [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) over [|](value_definition_syntax#single_bar) under []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  inter-character                      
  

```
Examples
--------


### Ruby positioned over the text



#### HTML

 
```
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-position: over;
}

```
 #### Result



### Ruby positioned under the text



#### HTML

 
```
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-position: under;
}

```
 #### Result



### Ruby alternate



#### HTML

 
```
<ruby>
  <rb>A</rb><rb>B</rb><rb>C</rb>
  <rtc>Above</rtc>
  <rtc>Below</rtc>
</ruby>

```
 #### CSS

 
```
ruby {
  ruby-position: alternate; /\* this is also the initial value \*/
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Ruby Annotation Layout Module Level 1 # rubypos](https://w3c.github.io/csswg-drafts/css-ruby/#rubypos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ruby-position` | 841Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 8479Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`).12–79 | 38 | NoInternet Explorer 9 and later support an old draft values: `inline` (equivalent of having `display: inline` on the ruby), and `above` (synonym of the modern `over`). | 7015Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 7Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 844.4Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 8418Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 38 | 6014Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 7Implemented as a non-standard, prefixed, version of `ruby-position`, `-webkit-ruby-position`: it has two properties: `before` and `after` (both equivalent, for ltr and rtl scripts to the standard `over` value used with `ruby-align: start`). | 14.0 |
| `alternate` | NoSee [bug 1191394](https://crbug.com/1191394). | NoSee [bug 1191394](https://crbug.com/1191394). | 88 | No | NoSee [bug 1191394](https://crbug.com/1191394). | No | NoSee [bug 1191394](https://crbug.com/1191394). | NoSee [bug 1191394](https://crbug.com/1191394). | 88 | NoSee [bug 1191394](https://crbug.com/1191394). | No | NoSee [bug 1191394](https://crbug.com/1191394). |
| `inter-character` | NoSee [bug 1258284](https://crbug.com/1258284). | NoSee [bug 1258284](https://crbug.com/1258284). | NoSee [bug 1055672](https://bugzil.la/1055672). | No | NoSee [bug 1258284](https://crbug.com/1258284). | No | NoSee [bug 1258284](https://crbug.com/1258284). | NoSee [bug 1258284](https://crbug.com/1258284). | NoSee [bug 1055672](https://bugzil.la/1055672). | NoSee [bug 1258284](https://crbug.com/1258284). | No | NoSee [bug 1258284](https://crbug.com/1258284). |


See also
--------


* HTML Ruby elements: [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby), [`<rt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt), [`<rp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp), and [`<rtc>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rtc).
* CSS Ruby properties: [`ruby-align`](ruby-align), `ruby-merge`.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position>

scaleX()
========


 The `scaleX()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that resizes an element along the x-axis (horizontally). Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  It modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are generally not conserved, except for multiples of 90 degrees. `scaleX(-1)` defines an [axial symmetry](https://en.wikipedia.org/wiki/Axial_symmetry), with a vertical axis passing through the origin (as specified by the [`transform-origin`](../transform-origin) property). 

   **Note:** `scaleX(sx)` is equivalent to `scale(sx, 1)` or `scale3d(sx, 1, 1)`. 

 
Syntax
------



```
scaleX(s)

```
### Values



 `s`   Is a [`<number>`](../number) representing the scaling factor to apply on the abscissa of each point of the element. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    s   0     0   1    )   |   (    s   0   0     0   1   0     0   0   1    )   |   (    s   0   0     0   1   0     0   0   1    )   |   (    s   0   0   0     0   1   0   0     0   0   1   0     0   0   0   1    )   |
| `[s 0 0 1 0 0]` |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="scaled">Scaled</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-scalex](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-scalex) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scaleX` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`scaleY()`](scaley)
* [`scaleZ()`](scalez)
* [`transform`](../transform)
* [`scale`](../scale)
* [`<transform-function>`](../transform-function)
* [`transform-origin`](../transform-origin)
* Other individual transform properties:
	+ [`translate`](../translate)
	+ [`rotate`](../rotate)
	+ Note: there is no `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX>

scaleY()
========


 The `scaleY()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that resizes an element along the y-axis (vertically). Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. `scaleY(-1)` defines an [axial symmetry](https://en.wikipedia.org/wiki/Axial_symmetry), with a horizontal axis passing through the origin (as specified by the [`transform-origin`](../transform-origin) property). 

   **Note:** `scaleY(sy)` is equivalent to `scale(1, sy)` or `scale3d(1, sy, 1)`. 

 `transform: rotateX(180deg);` === `transform: scaleY(-1);`

 
Syntax
------



```
scaleY(s)

```
### Values



 `s`   Is a [`<number>`](../number) representing the scaling factor to apply on the ordinate of each point of the element. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    1   0     0   s    )   |   (    1   0   0     0   s   0     0   0   1    )   |   (    1   0   0     0   s   0     0   0   1    )   |   (    1   0   0   0     0   s   0   0     0   0   1   0     0   0   0   1    )   |
| `[1 0 0 s 0 0]` |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="scaled">Scaled</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleY(0.6);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-scaley](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-scaley) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scaleY` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`scaleX()`](scalex)
* [`scaleZ()`](scalez)
* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`transform-origin`](../transform-origin)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
	+ Note: there is no `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY>

scaleZ()
========


 The `scaleZ()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that resizes an element along the z-axis. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. `scaleZ(-1)` defines an [axial symmetry](https://en.wikipedia.org/wiki/Axial_symmetry), with the z-axis passing through the origin (as specified by the [`transform-origin`](../transform-origin) property). 

  In the above interactive examples, [`perspective: 550px;`](../perspective) (to create a 3D space) and [`transform-style: preserve-3d;`](../transform-style) (so the children, the 6 sides of the cube, are also positioned in the 3D space), have been set on the cube. 

   **Note:** `scaleZ(sz)` is equivalent to `scale3d(1, 1, sz)`. 

 
Syntax
------



```
scaleZ(s)

```
### Values



 `s`   Is a [`<number>`](../number) representing the scaling factor to apply on the z-coordinate of each point of the element. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |   (    1   0   0     0   1   0     0   0   s    )   |   (    1   0   0   0     0   1   0   0     0   0   s   0     0   0   0   1    )   |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="perspective">Translated</div>
<div class="scaled-translated">Scaled</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.perspective {
  /\* Includes a perspective to create a 3D space \*/
  transform: perspective(400px) translateZ(-100px);
  background-color: limegreen;
}

.scaled-translated {
  /\* Includes a perspective to create a 3D space \*/
  transform: perspective(400px) scaleZ(2) translateZ(-100px);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-scalez](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-scalez) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scaleZ` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`scaleX()`](scalex)
* [`scaleY()`](scaley)
* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`transform-origin`](../transform-origin)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
	+ Note: there is no `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ>

scroll-behavior
===============


The `scroll-behavior` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.


Try it
------



 Note that any other scrolls, such as those 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. This property specified on the `body` element will *not* propagate to the viewport.

 User agents are allowed to ignore this property.


Syntax
------




```
/\* Keyword values \*/
scroll-behavior: auto;
scroll-behavior: smooth;

/\* Global values \*/
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: revert;
scroll-behavior: revert-layer;
scroll-behavior: unset;

```
 The `scroll-behavior` property is specified as one of the keyword values listed below.


### Values


 `auto`  The scrolling box scrolls instantly.

  `smooth`  The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scrolling boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
scroll-behavior =   
  auto    [|](value_definition_syntax#single_bar)  
  smooth    
  

```
Examples
--------


### Setting smooth scroll behavior



#### HTML

 
```
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>

```
 #### CSS

 
```
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # smooth-scrolling](https://w3c.github.io/csswg-drafts/css-overflow/#smooth-scrolling) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-behavior` | 61 | 79 | 36 | No | 48 | 15.4 | 61 | 61 | 36 | 45 | 15.4 | 8.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior>

scroll-margin
=============


The `scroll-margin` [shorthand property](shorthand_properties) sets all of the scroll margins of an element at once, assigning values much like the [`margin`](margin) property does for margins of an element.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-margin-bottom`](scroll-margin-bottom)
* [`scroll-margin-left`](scroll-margin-left)
* [`scroll-margin-right`](scroll-margin-right)
* [`scroll-margin-top`](scroll-margin-top)


Syntax
------



```
/\* <length> values \*/
scroll-margin: 10px;
scroll-margin: 1em 0.5em 1em 1em;

/\* Global values \*/
scroll-margin: inherit;
scroll-margin: initial;
scroll-margin: revert;
scroll-margin: revert-layer;
scroll-margin: unset;

```
### Values


 [`<length>`](length)  An outset from the corresponding edge of the scroll container.

  Description
-----------



You can see the effect of `scroll-margin` by scrolling to a point partway between two of the "pages" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the snapport should remain visible.

 Thus, the `scroll-margin` values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-margin-bottom`](scroll-margin-bottom): `0`
* [`scroll-margin-left`](scroll-margin-left): `0`
* [`scroll-margin-right`](scroll-margin-right): `0`
* [`scroll-margin-top`](scroll-margin-top): `0`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-margin-bottom`](scroll-margin-bottom): as specified
* [`scroll-margin-left`](scroll-margin-left): as specified
* [`scroll-margin-right`](scroll-margin-right): as specified
* [`scroll-margin-top`](scroll-margin-top): as specified
 |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin =   
  [<length>](length)[{1,4}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Simple demonstration



This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.

 #### HTML

 The HTML that represents the blocks is very simple:

 
```
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

```
 #### CSS

 Let's walk through the CSS. The outer container is styled like this:

 
```
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

```
 The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

 The child elements are styled as follows:

 
```
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

```
 The most relevant part here is `scroll-snap-align: start`, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.

 Last of all we specify the scroll margin-values, a different one for the second and third child elements:

 
```
.scroller > div:nth-child(2) {
  scroll-margin: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin: 2rem;
}

```
 This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the left edge of the second `<div>`, and `2rems` outside the left edge of the third `<div>`.

  **Note:** Here we are setting `scroll-margin` on all sides at once, but only the start edge is really relevant. It would work just as well here to only set a scroll margin on that one edge, for example with `scroll-margin-inline-start: 1rem`, or `scroll-margin: 0 0 0 1rem`.

  #### Result

 Try it for yourself:



Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # scroll-margin](https://w3c.github.io/csswg-drafts/css-scroll-snap/#scroll-margin) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin` | 69 | 79 | 9068–90The `scroll-margin` property can cause an element's visibility to be incorrectly calculated for `element.focus()`. See [bug 1708303](https://bugzil.la/1708303). | No | 56 | 14.111Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 69 | 69 | 9068–90The `scroll-margin` property can cause an element's visibility to be incorrectly calculated for `element.focus()`. See [bug 1708303](https://bugzil.la/1708303). | 48 | 14.511Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin>

scroll-margin-block-end
=======================


The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-block-end: 10px;
scroll-margin-block-end: 1em;

/\* Global values \*/
scroll-margin-block-end: inherit;
scroll-margin-block-end: initial;
scroll-margin-block-end: revert;
scroll-margin-block-end: revert-layer;
scroll-margin-block-end: unset;

```
### Values


 `<length>`  An outset from the block end edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-block-end =   
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-block-end` | 69 | 79 | 68 | No | 56 | 14.1 | 69 | 69 | 68 | 48 | 14.5 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end>

scroll-margin-block-start
=========================


The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-block-start: 10px;
scroll-margin-block-start: 1em;

/\* Global values \*/
scroll-margin-block-start: inherit;
scroll-margin-block-start: initial;
scroll-margin-block-start: revert;
scroll-margin-block-start: revert-layer;
scroll-margin-block-start: unset;

```
### Values


 `<length>`  An outset from the block start edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-block-start =   
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-block-start` | 69 | 79 | 68 | No | 56 | 14.1 | 69 | 69 | 68 | 48 | 14.5 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start>

scroll-margin-bottom
====================


The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-bottom: 10px;
scroll-margin-bottom: 1em;

/\* Global values \*/
scroll-margin-bottom: inherit;
scroll-margin-bottom: initial;
scroll-margin-bottom: revert;
scroll-margin-bottom: revert-layer;
scroll-margin-bottom: unset;

```
### Values


 `<length>`  An outset from the bottom edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-bottom =   
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-bottom` | 69 | 79 | 68 | No | 56 | 14.111Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 69 | 69 | 68 | 48 | 14.511Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-bottom>

scroll-margin-block
===================


The `scroll-margin-block` [shorthand property](shorthand_properties) sets the scroll margins of an element in the block dimension.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-margin-block-end`](scroll-margin-block-end)
* [`scroll-margin-block-start`](scroll-margin-block-start)


Syntax
------



```
/\* <length> values \*/
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/\* Global values \*/
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: revert-layer;
scroll-margin-block: unset;

```
### Values


 `<length>`  An outset from the corresponding edge of the scroll container.

  Description
-----------


The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-margin-block-start`](scroll-margin-block-start): `0`
* [`scroll-margin-block-end`](scroll-margin-block-end): `0`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-margin-block-start`](scroll-margin-block-start): as specified
* [`scroll-margin-block-end`](scroll-margin-block-end): as specified
 |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-block =   
  [<length>](length)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # propdef-scroll-margin-block](https://w3c.github.io/csswg-drafts/css-scroll-snap/#propdef-scroll-margin-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-block` | 69 | 79 | 68 | No | 56 | 14.1 | 69 | 69 | 68 | 48 | 14.5 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block>

scroll-margin-inline
====================


The `scroll-margin-inline` [shorthand property](shorthand_properties) sets the scroll margins of an element in the inline dimension.


Try it
------


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-margin-inline-end`](scroll-margin-inline-end)
* [`scroll-margin-inline-start`](scroll-margin-inline-start)


Syntax
------



```
/\* <length> values \*/
scroll-margin-inline: 10px;
scroll-margin-inline: 1em 0.5em;

/\* Global values \*/
scroll-margin-inline: inherit;
scroll-margin-inline: initial;
scroll-margin-inline: revert;
scroll-margin-inline: revert-layer;
scroll-margin-inline: unset;

```
### Values


 `<length>`  An outset from the corresponding edge of the scroll container.

  Description
-----------


The scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-margin-inline-start`](scroll-margin-inline-start): `0`
* [`scroll-margin-inline-end`](scroll-margin-inline-end): `0`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-margin-inline-start`](scroll-margin-inline-start): as specified
* [`scroll-margin-inline-end`](scroll-margin-inline-end): as specified
 |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-inline =   
  [<length>](length)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Simple demonstration



This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.

 #### HTML

 The HTML that represents the blocks is very simple:

 
```
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

```
 #### CSS

 Let's walk through the CSS. The outer container is styled like this:

 
```
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

```
 The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

 The child elements are styled as follows:

 
```
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

```
 The most relevant part here is `scroll-snap-align: end`, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.

 Last of all we specify the scroll margin values, a different one for the second and third child elements:

 
```
.scroller > div:nth-child(2) {
  scroll-margin-inline: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline: 2rem;
}

```
 This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline end edge of the second `<div>`, and `2rems` outside the inline end edge of the third `<div>`.

  **Note:** Here we are setting `scroll-margin` on the start *and* end of the inline axis (x in our case), but only the end edge is really relevant. It would work just as well here to only set a scroll margin on that one edge, for example with `scroll-margin-inline: 0 1rem`, or `scroll-margin-inline-end: 1rem`.

  #### Result

 Try it for yourself:



Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # propdef-scroll-margin-inline](https://w3c.github.io/csswg-drafts/css-scroll-snap/#propdef-scroll-margin-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-inline` | 69 | 79 | 68 | No | 56 | 14.1 | 69 | 69 | 68 | 48 | 14.5 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline>

scroll-margin-inline-end
========================


The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-inline-end: 10px;
scroll-margin-inline-end: 1em;

/\* Global values \*/
scroll-margin-inline-end: inherit;
scroll-margin-inline-end: initial;
scroll-margin-inline-end: revert;
scroll-margin-inline-end: revert-layer;
scroll-margin-inline-end: unset;

```
### Values


 `<length>`  An outset from the inline end edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-inline-end =   
  [<length>](length)    
  

```
Examples
--------


### Simple demonstration



This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.

 #### HTML

 The HTML that represents the blocks is very simple:

 
```
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

```
 #### CSS

 Let's walk through the CSS. The outer container is styled like this:

 
```
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

```
 The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

 The child elements are styled as follows:

 
```
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

```
 The most relevant part here is `scroll-snap-align: end`, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.

 Last of all we specify the scroll margin values, a different one for the second and third child elements:

 
```
.scroller > div:nth-child(2) {
  scroll-margin-inline-end: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 2rem;
}

```
 This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline end edge of the second `<div>`, and `2rems` outside the inline end edge of the third `<div>`.

 #### Result

 Try it for yourself:



Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-inline-end` | 69 | 79 | 68 | No | 56 | 14.1 | 69 | 69 | 68 | 48 | 14.5 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-end>

scroll-margin-inline-start
==========================


The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-inline-start: 10px;
scroll-margin-inline-start: 1em;

/\* Global values \*/
scroll-margin-inline-start: inherit;
scroll-margin-inline-start: initial;
scroll-margin-inline-start: revert;
scroll-margin-inline-start: revert-layer;
scroll-margin-inline-start: unset;

```
### Values


 `<length>`  An outset from the inline start edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-inline-start =   
  [<length>](length)    
  

```
Examples
--------


### Simple demonstration



This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.

 #### HTML

 The HTML that represents the blocks is very simple:

 
```
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

```
 #### CSS

 Let's walk through the CSS. The outer container is styled like this:

 
```
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}

```
 The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

 The child elements are styled as follows:

 
```
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}

```
 The most relevant part here is `scroll-snap-align: start`, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.

 Last of all we specify the scroll margin-values, a different one for the second and third child elements:

 
```
.scroller > div:nth-child(2) {
  scroll-margin-inline-start: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-start: 2rem;
}

```
 This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline start edge of the second `<div>`, and `2rems` outside the inline start edge of the third `<div>`.

 #### Result

 Try it for yourself:



Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-inline-start` | 69 | 79 | 68 | No | 56 | 14.1 | 69 | 69 | 68 | 48 | 14.5 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-inline-start>

scroll-margin-right
===================


The `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-right: 10px;
scroll-margin-right: 1em;

/\* Global values \*/
scroll-margin-right: inherit;
scroll-margin-right: initial;
scroll-margin-right: revert;
scroll-margin-right: revert-layer;
scroll-margin-right: unset;

```
### Values


 `<length>`  An outset from the right edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-right =   
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-right` | 69 | 79 | 68 | No | 56 | 14.111Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 69 | 69 | 68 | 48 | 14.511Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-right>

scroll-margin-left
==================


The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-left: 10px;
scroll-margin-left: 1em;

/\* Global values \*/
scroll-margin-left: inherit;
scroll-margin-left: initial;
scroll-margin-left: revert;
scroll-margin-left: revert-layer;
scroll-margin-left: unset;

```
### Values


 `<length>`  An outset from the left edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-left =   
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-left` | 69 | 79 | 68 | No | 56 | 14.111Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 69 | 69 | 68 | 48 | 14.511Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-left>

scroll-margin-top
=================


The `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.


Try it
------


Syntax
------



```
/\* <length> values \*/
scroll-margin-top: 10px;
scroll-margin-top: 1em;

/\* Global values \*/
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: revert;
scroll-margin-top: revert-layer;
scroll-margin-top: unset;

```
### Values


 `<length>`  An outset from the top edge of the scroll container.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-margin-top =   
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # margin-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#margin-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-margin-top` | 69 | 79 | 68 | No | 56 | 14.111Before version 14.1, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 69 | 69 | 68 | 48 | 14.511Before version 14.5, scroll margin is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 189265](https://webkit.org/b/189265). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top>

scroll-padding-block
====================


The `scroll-padding-block` [shorthand property](shorthand_properties) sets the scroll padding of an element in the block dimension.


Try it
------



 The scroll-padding properties define offsets for the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-padding-block-end`](scroll-padding-block-end)
* [`scroll-padding-block-start`](scroll-padding-block-start)


Syntax
------



```
/\* Keyword values \*/
scroll-padding-block: auto;

/\* <length> values \*/
scroll-padding-block: 10px;
scroll-padding-block: 1em 0.5em;
scroll-padding-block: 10%;

/\* Global values \*/
scroll-padding-block: inherit;
scroll-padding-block: initial;
scroll-padding-block: revert;
scroll-padding-block: revert-layer;
scroll-padding-block: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-padding-block-start`](scroll-padding-block-start): `auto`
* [`scroll-padding-block-end`](scroll-padding-block-end): `auto`
 |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-padding-block-start`](scroll-padding-block-start): as specified
* [`scroll-padding-block-end`](scroll-padding-block-end): as specified
 |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-block =   
  [[](value_definition_syntax#brackets) auto [|](value_definition_syntax#single_bar) [<length-percentage [0,∞]>](length-percentage) []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block](https://w3c.github.io/csswg-drafts/css-scroll-snap/#propdef-scroll-padding-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-block` | 69 | 79 | 68 | No | 56 | 15 | 69 | 69 | 68 | 48 | 15 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block>

scroll-padding-block-end
========================


The `scroll-padding-block-end` property defines offsets for the end edge in the block dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-block-end: auto;

/\* <length> values \*/
scroll-padding-block-end: 10px;
scroll-padding-block-end: 1em;
scroll-padding-block-end: 10%;

/\* Global values \*/
scroll-padding-block-end: inherit;
scroll-padding-block-end: initial;
scroll-padding-block-end: revert;
scroll-padding-block-end: revert-layer;
scroll-padding-block-end: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the block end edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-block-end =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-block-end` | 69 | 79 | 68 | No | 56 | 15 | 69 | 69 | 68 | 48 | 15 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-end>

scroll-padding
==============


The `scroll-padding` [shorthand property](shorthand_properties) sets scroll padding on all sides of an element at once, much like the [`padding`](padding) property does for padding on an element.


Try it
------



 The `scroll-padding-*` properties define offsets for the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars), or to put more breathing room between a targeted element and the edges of the scrollport.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-padding-bottom`](scroll-padding-bottom)
* [`scroll-padding-left`](scroll-padding-left)
* [`scroll-padding-right`](scroll-padding-right)
* [`scroll-padding-top`](scroll-padding-top)


Syntax
------



```
/\* Keyword values \*/
scroll-padding: auto;

/\* <length> values \*/
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;

/\* Global values \*/
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: revert;
scroll-padding: revert-layer;
scroll-padding: unset;

```
### Values


 [`<length-percentage>`](length-percentage)  An inwards offset from the corresponding edge of the scrollport, as a valid [`<length>`](length) or a [`<percentage>`](percentage).

  `auto`  The offset is determined by the user agent. This will generally be `0px`, but the user agent is free to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-padding-bottom`](scroll-padding-bottom): `auto`
* [`scroll-padding-left`](scroll-padding-left): `auto`
* [`scroll-padding-right`](scroll-padding-right): `auto`
* [`scroll-padding-top`](scroll-padding-top): `auto`
 |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-padding-bottom`](scroll-padding-bottom): as specified
* [`scroll-padding-left`](scroll-padding-left): as specified
* [`scroll-padding-right`](scroll-padding-right): as specified
* [`scroll-padding-top`](scroll-padding-top): as specified
 |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding =   
  [[](value_definition_syntax#brackets) auto [|](value_definition_syntax#single_bar) [<length-percentage [0,∞]>](length-percentage) []](value_definition_syntax#brackets)[{1,4}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # scroll-padding](https://w3c.github.io/csswg-drafts/css-scroll-snap/#scroll-padding) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding` | 69 | 79 | 68 | No | 56 | 14.111–14.1Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 69 | 69 | 68 | 48 | 14.511–14.5Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding>

scroll-padding-block-start
==========================


The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-block-start: auto;

/\* <length> values \*/
scroll-padding-block-start: 10px;
scroll-padding-block-start: 1em;
scroll-padding-block-start: 10%;

/\* Global values \*/
scroll-padding-block-start: inherit;
scroll-padding-block-start: initial;
scroll-padding-block-start: revert;
scroll-padding-block-start: revert-layer;
scroll-padding-block-start: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the block start edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-block-start =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-block-start` | 69 | 79 | 68 | No | 56 | 15 | 69 | 69 | 68 | 48 | 15 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block-start>

scroll-padding-bottom
=====================


The `scroll-padding-bottom` property defines offsets for the bottom of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-bottom: auto;

/\* <length> values \*/
scroll-padding-bottom: 10px;
scroll-padding-bottom: 1em;
scroll-padding-bottom: 10%;

/\* Global values \*/
scroll-padding-bottom: inherit;
scroll-padding-bottom: initial;
scroll-padding-bottom: revert;
scroll-padding-bottom: revert-layer;
scroll-padding-bottom: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the bottom edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-bottom =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-bottom` | 69 | 79 | 68 | No | 56 | 14.111–14.1Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 69 | 69 | 68 | 48 | 14.511–14.5Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom>

scroll-padding-inline-start
===========================


The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-inline-start: auto;

/\* <length> values \*/
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;

/\* Global values \*/
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the inline start edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-inline-start =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-inline-start` | 69 | 79 | 68 | No | 56 | 15 | 69 | 69 | 68 | 48 | 15 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-start>

scroll-padding-left
===================


The `scroll-padding-left` property defines offsets for the left of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-left: auto;

/\* <length> values \*/
scroll-padding-left: 10px;
scroll-padding-left: 1em;
scroll-padding-left: 10%;

/\* Global values \*/
scroll-padding-left: inherit;
scroll-padding-left: initial;
scroll-padding-left: revert;
scroll-padding-left: revert-layer;
scroll-padding-left: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the left edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-left =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-left` | 69 | 79 | 68 | No | 56 | 14.111–14.1Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 69 | 69 | 68 | 48 | 14.511–14.5Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left>

scroll-padding-right
====================


The `scroll-padding-right` property defines offsets for the right of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-right: auto;

/\* <length> values \*/
scroll-padding-right: 10px;
scroll-padding-right: 1em;
scroll-padding-right: 10%;

/\* Global values \*/
scroll-padding-right: inherit;
scroll-padding-right: initial;
scroll-padding-right: revert;
scroll-padding-right: revert-layer;
scroll-padding-right: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the top edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-right =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-right` | 69 | 79 | 68 | No | 56 | 14.111–14.1Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 69 | 69 | 68 | 48 | 14.511–14.5Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right>

scroll-padding-top
==================


The `scroll-padding-top` property defines offsets for the top of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-top: auto;

/\* <length> values \*/
scroll-padding-top: 10px;
scroll-padding-top: 1em;
scroll-padding-top: 10%;

/\* Global values \*/
scroll-padding-top: inherit;
scroll-padding-top: initial;
scroll-padding-top: revert;
scroll-padding-top: revert-layer;
scroll-padding-top: unset;

```
### Values


 `[`<length-percentage>`](length-percentage)`  An inwards offset from the top edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-top =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-physical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-physical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-top` | 69 | 79 | 68 | No | 56 | 14.111–14.1Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 69 | 69 | 68 | 48 | 14.511–14.5Scroll padding is not applied for scrolls to fragment target or `scrollIntoView()`, see [bug 179379](https://webkit.org/b/179379). | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top>

scroll-padding-inline
=====================


The `scroll-padding-inline` [shorthand property](shorthand_properties) sets the scroll padding of an element in the inline dimension.


Try it
------



 The scroll-padding properties define offsets for the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-padding-inline-end`](scroll-padding-inline-end)
* [`scroll-padding-inline-start`](scroll-padding-inline-start)


Syntax
------



```
/\* Keyword values \*/
scroll-padding-inline: auto;

/\* <length> values \*/
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;

/\* Global values \*/
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: revert;
scroll-padding-inline: revert-layer;
scroll-padding-inline: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-padding-inline-start`](scroll-padding-inline-start): `auto`
* [`scroll-padding-inline-end`](scroll-padding-inline-end): `auto`
 |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-padding-inline-start`](scroll-padding-inline-start): as specified
* [`scroll-padding-inline-end`](scroll-padding-inline-end): as specified
 |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-inline =   
  [[](value_definition_syntax#brackets) auto [|](value_definition_syntax#single_bar) [<length-percentage [0,∞]>](length-percentage) []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # propdef-scroll-padding-inline](https://w3c.github.io/csswg-drafts/css-scroll-snap/#propdef-scroll-padding-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-inline` | 69 | 79 | 68 | No | 56 | 15 | 69 | 69 | 68 | 48 | 15 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline>

scroll-padding-inline-end
=========================


The `scroll-padding-inline-end` property defines offsets for the end edge in the inline dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-padding-inline-end: auto;

/\* <length> values \*/
scroll-padding-inline-end: 10px;
scroll-padding-inline-end: 1em;
scroll-padding-inline-end: 10%;

/\* Global values \*/
scroll-padding-inline-end: inherit;
scroll-padding-inline-end: initial;
scroll-padding-inline-end: revert;
scroll-padding-inline-end: revert-layer;
scroll-padding-inline-end: unset;

```
### Values


 `<length-percentage>`  An inwards offset from the inline end edge of the scrollport, as a valid length or a percentage.

  `auto`  The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to the scroll container's scrollport |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
scroll-padding-inline-end =   
  auto                       [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # padding-longhands-logical](https://w3c.github.io/csswg-drafts/css-scroll-snap/#padding-longhands-logical) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-padding-inline-end` | 69 | 79 | 68 | No | 56 | 15 | 69 | 69 | 68 | 48 | 15 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-inline-end>

scroll-snap-align
=================


The `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-snap-align: none;
scroll-snap-align: start end; /\* when two values set first is block, second inline \*/
scroll-snap-align: center;

/\* Global values \*/
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

```
### Values



 `none`  The box does not define a snap position in that axis.

  `start`  The start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

  `end`  The end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

  `center`  The center alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

   Safari had the two value syntax in the wrong order, the first value being inline the second block. See [bug #191865](https://webkit.org/b/191865).


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
scroll-snap-align =   
  [[](value_definition_syntax#brackets) none [|](value_definition_syntax#single_bar) start [|](value_definition_syntax#single_bar) end [|](value_definition_syntax#single_bar) center []](value_definition_syntax#brackets)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # scroll-snap-align](https://w3c.github.io/csswg-drafts/css-scroll-snap/#scroll-snap-align) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-snap-align` | 69 | 79 | 68 | No | 56 | 11 | 69 | 69 | 68 | 48 | 11 | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align>

scroll-snap-stop
================


The `scroll-snap-stop` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines whether or not the scroll container is allowed to "pass over" possible snap positions.


Try it
------


Syntax
------



```
/\* Keyword values \*/
scroll-snap-stop: normal;
scroll-snap-stop: always;

/\* Global values \*/
scroll-snap-stop: inherit;
scroll-snap-stop: initial;
scroll-snap-stop: revert;
scroll-snap-stop: revert-layer;
scroll-snap-stop: unset;

```
### Values


 `normal`  When the visual [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) of this element's scroll container is scrolled, it may "pass over" possible snap positions.

  `always`  The scroll container must not "pass over" a possible snap position; and must snap to the first of this elements' snap positions.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
scroll-snap-stop =   
  normal  [|](value_definition_syntax#single_bar)  
  always    
  

```
Examples
--------


### Setting different snap stops



The example below demonstrates the contrast between the `always` and `normal` values of `scroll-snap-stop`. The difference in the two `scroll-snap-stop` values is more noticeable when the `scroll-snap-type` property is set to `mandatory`, which is what is used in this example.

 #### HTML

 
```
<p>scroll-snap-stop: always (X Mandatory)</p>
<div class="x mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on odd child elements</p>
<div class="x mandatory-scroll-snapping always-stop-odd">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (X Mandatory) on even child elements</p>
<div class="x mandatory-scroll-snapping always-stop-even">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (X Mandatory)</p>
<div class="x mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: always (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping always-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<p>scroll-snap-stop: normal (Y Mandatory)</p>
<div class="y mandatory-scroll-snapping normal-stop">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

```
 #### CSS

 
```
/\* setting up mandatory scroll-snap on parent \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

/\* defining scroll-snap alignment on children \*/
div > div {
  scroll-snap-align: center;
}

/\* defining scroll-snap stop on children \*/
.always-stop > div {
  scroll-snap-stop: always;
}

.always-stop-odd > div:nth-of-type(odd) {
  scroll-snap-stop: always;
}

.always-stop-even > div:nth-of-type(even) {
  scroll-snap-stop: always;
}

.normal-stop > div {
  scroll-snap-stop: normal;
}

```
 #### Result

 Scroll from left to right and from top to bottom in the X and Y boxes below, respectively. In the X and Y boxes where the `scroll-snap-stop` property is set to `always`, the scrolling is forced to stop at the snap point even when you scroll fast. However, in the boxes where the `scroll-snap-stop` property is set to `normal`, the snap points are skipped when you scroll fast.

 If required, you can be selective about the items that are `always` stopped at inside the scroll container. This is demonstrated in the example below by targeting odd and even items; you can choose a different strategy based on your requirement. In the example below, scrolling does not "pass over" odd and even items in the second and third boxes, respectively.



Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # scroll-snap-stop](https://w3c.github.io/csswg-drafts/css-scroll-snap/#scroll-snap-stop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-snap-stop` | 75 | 79 | 103 | No | 62 | 15 | 75 | 75 | 103 | 54 | 15 | 11.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* Other related CSS Scroll Snap properties:
	+ <scroll-snap-align>
	+ <scroll-snap-type>
	+ <scroll-behavior>
	+ <scroll-margin>
	+ <scroll-padding>
* [Well-controlled scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/) on web.dev


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop>

scroll-timeline
===============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `scroll-timeline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) is used to define a named timeline that drives the progress of the scrollbar in a container. The name is then referenced in an [`animation-timeline`](animation-timeline) declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action.

 Optionally, the scroll axis of the scrollbar can be specified. The starting scroll position represents 0% progress and the ending scroll position represents 100% progress. If the 0% position and 100% position coincide (i.e., the scroll container has no overflow to scroll), the timeline is inactive.

  **Note:** If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

 

Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`scroll-timeline-name`](scroll-timeline-name)
* [`scroll-timeline-axis`](scroll-timeline-axis)


Syntax
------




```
/\* two values: one each for scroll-timeline-name and scroll-timeline-axis \*/
scroll-timeline: custom_name_for_timeline block;
scroll-timeline: custom_name_for_timeline inline;
scroll-timeline: custom_name_for_timeline vertical;
scroll-timeline: custom_name_for_timeline horizontal;
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none vertical;
scroll-timeline: none horizontal;

/\* one value: scroll-timeline-name \*/
scroll-timeline: none;
scroll-timeline: custom_name_for_timeline;

```
 The `scroll-timeline` shorthand property can be applied to a container element as a combination of the `<scroll-timeline-name>` and `<scroll-timeline-axis>` values. At least one of the values must be specified. If both the values are specified, the order followed must be the `<scroll-timeline-name>` value followed by the `<scroll-timeline-axis>` value.

  **Note:** When only one value is specified, the `scroll-timeline` shorthand property treats it as the `<scroll-timeline-name>` value. As a best practice, avoid using `<scroll-timeline-axis>` keyword values as a `<scroll-timeline-name>` value.

 
### Values


 `<scroll-timeline-name>`  See [`scroll-timeline-name`](scroll-timeline-name).

  `<scroll-timeline-axis>`  See [`scroll-timeline-axis`](scroll-timeline-axis). The default value is `block`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`scroll-timeline-name`](scroll-timeline-name): `none`
* [`scroll-timeline-axis`](scroll-timeline-axis): `block`
 |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`scroll-timeline-name`](scroll-timeline-name): as specified
* [`scroll-timeline-axis`](scroll-timeline-axis): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`scroll-timeline-name`](scroll-timeline-name): Not animatable
* [`scroll-timeline-axis`](scroll-timeline-axis): Not animatable
 |

Formal syntax
-------------



```
scroll-timeline =   
  <'scroll-timeline-name'>  [||](value_definition_syntax#double_bar)  
  <'scroll-timeline-axis'>    
  

```
Examples
--------


### Creating a scroll-driven animation



 In this example, a scroll timeline named `squareTimeline` is defined using the `scroll-timeline-name` property on the element with the ID `container`. This is then applied to the animation on the `#square` element using `animation-timeline: squareTimeline`. 

 #### HTML

 The HTML for the example is shown below.

 
```
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

```
 #### CSS

  The CSS for the container sets it as the source of a scroll timeline named `squareTimeline` using the `scroll-timeline` property. It also sets the scrollbar to use for the timeline as "vertical" (though this was not actually needed as it would have been used by default). 

 The height of the container is set to `300px`, and the container is also set to create a vertical scrollbar if it overflows (the CSS `height` rule on the `stretcher` element below does make the content overflow its container).

 
```
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: squareTimeline vertical;
  position: relative;
}

```
 The CSS below defines a square that rotates according to the timeline provided by the `animation-timeline` property, which is set to the `squareTimeline` timeline named above.

 
```
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms;
  animation-timeline: squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

```
  The `stretcher` CSS rule sets the block height to `600px`, which creates content that overflows the container element, thereby creating scroll bars. Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline. 

 #### Result

 Scroll the vertical bar to see the square animate as you scroll.


 The square animates as you scroll, and the animation duration when using `scroll-timeline` really depends on the scroll speed (nevertheless, the `animation-duration` property has been defined so you can make out the scroll-driven animation).


Specifications
--------------




| Specification |
| --- |
| [Scroll-driven Animations # scroll-timeline-shorthand](https://w3c.github.io/csswg-drafts/scroll-animations/#scroll-timeline-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-timeline` | No | No | 110103 | No | No | No | No | No | No | No | No | No |


See also
--------


* [`animation-timeline`](animation-timeline) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline>

scroll-timeline-name
====================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `scroll-timeline-name` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is used to define a named timeline that drives the progress of the scrollbar in a container. The name is then referenced in an [`animation-timeline`](animation-timeline) declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action.

  By default, the scrollbar in the `block` direction provides the timeline (this is the vertical scrollbar in left-to-right writing mode). The scrollbar axis can be set by applying [`scroll-timeline-axis`](scroll-timeline-axis) on the same element as the `scroll-timeline-name`. 

  **Note:** If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

  The `scroll-timeline-name` (and `scroll-timeline-axis`) property can also be set by using the [`scroll-timeline`](scroll-timeline) shorthand property.



Syntax
------



```
scroll-timeline-name: none;
scroll-timeline-name: custom_name_for_timeline;

```
### Values



Allowed values for `scroll-timeline-name` are:

  `none`  The timeline has no name.

  `<custom-ident>`   An arbitrary custom identifier that can be used to reference the scroll timeline in an [`animation-timeline`](animation-timeline). Possible values are described in [`<custom-ident>`](custom-ident). 

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
scroll-timeline-name =   
  none            [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)    
  

```
Examples
--------


### Creating a named scroll timeline



 In this example, a scroll timeline named `squareTimeline` is defined using the `scroll-timeline-name` property on the element with the ID `container`. This is then applied to the animation on the `#square` element using `animation-timeline: squareTimeline`. 

 #### HTML

 The HTML for the example is shown below.

 
```
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

```
 #### CSS

 The CSS for the container sets it as the source of a scroll timeline named `squareTimeline` using the `scroll-timeline-name` property. No [scrollbar axis](scroll-timeline-axis) is defined here because the vertical axis will be used by default.

 The height of the container is set to `300px`, and the container is also set to create a vertical scrollbar if it overflows (the CSS `height` rule on the `stretcher` element below does make the content overflow its container).

 
```
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: squareTimeline;
  position: relative;
}

```
 The CSS below defines a square that rotates according to the timeline provided by the `animation-timeline` property, which is set to the `squareTimeline` timeline named above.

 
```
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms;
  animation-timeline: squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

```
  The `stretcher` CSS rule sets the block height to `600px`, which creates content that overflows the container element, thereby creating scroll bars. Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline. 

 #### Result

 Scroll the vertical bar to see the square animate as you scroll.



Specifications
--------------




| Specification |
| --- |
| [Scroll-driven Animations # scroll-timeline-name](https://w3c.github.io/csswg-drafts/scroll-animations/#scroll-timeline-name) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-timeline-name` | No | No | 110103 | No | No | No | No | No | No | No | No | No |


See also
--------


* [`animation-timeline`](animation-timeline) property
* [`scroll-timeline`](scroll-timeline) shorthand property
* [`scroll-timeline-axis`](scroll-timeline-axis) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-name>

scrollbar-color
===============



The `scrollbar-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the color of the scrollbar track and thumb.

 The **track** refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.

 The **thumb** refers to the moving part of the scrollbar, which usually floats on top of the track.



Syntax
------



```
/\* Keyword values \*/
scrollbar-color: auto;

/\* <color> values \*/
scrollbar-color: rebeccapurple green; /\* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. \*/

/\* Global values \*/
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;

```
### Values


 `<scrollbar-color>`  Defines the color of the scrollbar.

 

|  |  |
| --- | --- |
| `auto` |  Default platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.  |
| `<color> <color>` |  Applies the first color to the scrollbar thumb, the second to the scrollbar track.  |

  **Note:** User Agents must apply any `scrollbar-color` value set on the root element to the viewport.

   Accessibility concerns
----------------------


When using `scrollbar-color` property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See [Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1](https://www.w3.org/TR/WCAG20-TECHS/G183.html).

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scrolling boxes |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
scrollbar-color =   
  auto        [|](value_definition_syntax#single_bar)  
  [<color>](color_value)[{2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Coloring overflow scrollbars



#### CSS

 
```
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
}

```
 #### HTML

 
```
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Scrollbars Styling Module Level 1 # scrollbar-color](https://w3c.github.io/csswg-drafts/css-scrollbars/#scrollbar-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scrollbar-color` | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 891944](https://crbug.com/891944). | 64On macOS, you need to set the *General* > *Show scroll bars* setting in System Preferences to "Always" for this property to have any effect. | No | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 231590](https://webkit.org/b/231590). | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 891944](https://crbug.com/891944). | 64 | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 231590](https://webkit.org/b/231590). | NoSee [bug 891944](https://crbug.com/891944). |


See also
--------


* [`scrollbar-width`](scrollbar-width)
* [`overflow`](overflow)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color>

scroll-timeline-axis
====================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `scroll-timeline-axis` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is used to specify the scrollbar direction that will be used to provide the timeline for a scroll-driven animation.

  In a scroll-timeline animation, the animation progress is determined by a scrollbar position rather than time or some other dimension. The [`scroll-timeline-name`](scroll-timeline-name) property defines a name that can be used to identify an element as the source of a scroll-timeline; the `scroll-timeline-axis` defines the direction of the scrollbar in the container that will provide the timeline. 

  **Note:** If the element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

  The `scroll-timeline-axis` (and `scroll-timeline-name`) property can also be set using the [`scroll-timeline`](scroll-timeline) shorthand property.



Syntax
------



```
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
scroll-timeline-axis: vertical;
scroll-timeline-axis: horizontal;

```
### Values



Allowed values for the `scroll-timeline-axis` are:

  `block`   Represents the scrollbar in the block axis of the scroll container. This is the default value. The block axis is the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `vertical`, while for vertical writing modes, it is the same as `horizontal`. 

  `inline`   Represents the scrollbar in the inline axis of the scroll container. The inline axis is the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as the `horizontal` axis, while for vertical writing modes, this is the same as `vertical`. 

  `vertical`  Represents the scrollbar in the vertical axis of the scroll container.

  `horizontal`  Represents the scrollbar in the horizontal axis of the scroll container.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `block` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | Not animatable |

Formal syntax
-------------



```
scroll-timeline-axis =   
  block       [|](value_definition_syntax#single_bar)  
  inline      [|](value_definition_syntax#single_bar)  
  vertical    [|](value_definition_syntax#single_bar)  
  horizontal    
  

```
Examples
--------


### Defining the axis of the scroll timeline



In this example, a scroll timeline named `squareTimeline` is defined using the `scroll-timeline-name` property on the element with the ID `container`, and then this name is applied to the animation on the `#square` element using `animation-timeline: squareTimeline`.

 To demonstrate the effect of `scroll-timeline-axis`, a `horizontal` (non-default) scrollbar is used in this example to drive the rotation of the square.

 #### HTML

 The HTML for the example is shown below.

 
```
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

```
 #### CSS

  The CSS for the container sets it as the source of a scroll timeline named `squareTimeline` using the `scroll-timeline-name` property. The scroll axis is set by `scroll-timeline-axis: horizontal;` so that the *horizontal scrollbar* position will determine the animation timeline. 

 The height and width of the container are set to `200px`. The container is also set to create scrollbars if it overflows (the CSS `height` and `width` rules on the `stretcher` element below make the content overflow its container).

 
```
#container {
  height: 200px;
  width: 200px;
  overflow: scroll;
  scroll-timeline-name: squareTimeline;
  scroll-timeline-axis: horizontal;
}

```
 The CSS below defines a square that rotates according to the timeline provided by the `animation-timeline` property, which is set to the `squareTimeline` timeline named above.

 
```
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms;
  animation-timeline: squareTimeline;
  position: absolute;
  bottom: 50px;
}

#stretcher {
  height: 200px;
  width: 200px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

```
  The `stretcher` CSS rule sets the block height and width to values large enough to create content that overflows the container element, thereby creating scroll bars. Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline. 

 #### Result

 Scroll the horizontal bar at the bottom to see the square animate as you scroll.



Specifications
--------------




| Specification |
| --- |
| [Scroll-driven Animations # propdef-scroll-timeline-axis](https://w3c.github.io/csswg-drafts/scroll-animations/#propdef-scroll-timeline-axis) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-timeline-axis` | No | No | 110103 | No | No | No | No | No | No | No | No | No |


See also
--------


* [`animation-timeline`](animation-timeline) property
* [`scroll-timeline`](scroll-timeline) shorthand property
* [`scroll-timeline-name`](scroll-timeline-name) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-timeline-axis>

scrollbar-width
===============


The `scrollbar-width` property allows the author to set the maximum thickness of an element's scrollbars when they are shown.


Syntax
------



```
/\* Keyword values \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/\* Global values \*/
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: revert;
scrollbar-width: revert-layer;
scrollbar-width: unset;

```
### Values


 *<scrollbar-width>*  Defines the width of the scrollbar as a keyword. It must be one of the following values:

 

|  |  |
| --- | --- |
| `auto` | The default scrollbar width for the platform. |
| `thin` |  A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width.  |
| `none` | No scrollbar shown, however the element will still be scrollable. |

  **Note:** User Agents must apply any `scrollbar-width` value set on the root element to the viewport.

   Accessibility concerns
----------------------



Use this property with caution — setting `scrollbar-width` to `thin` or `none` can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.

 WCAG criterion 2.1.1 (Keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. And introduced in WCAG 2.1, criterion 2.5.5 (Target Size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).

 * [MDN Understanding WCAG, Guideline 2.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.1_%E2%80%94_keyboard_accessible_make_all_functionality_available_from_a_keyboard)
* [MDN Understanding WCAG, Guideline 2.5 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.5_input_modalities_make_it_easier_for_users_to_operate_functionality_through_various_inputs_beyond_keyboard)
* [Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
* [Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scrolling boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
scrollbar-width =   
  auto  [|](value_definition_syntax#single_bar)  
  thin  [|](value_definition_syntax#single_bar)  
  none    
  

```
Examples
--------


### Sizing overflow scrollbars



#### CSS

 
```
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

```
 #### HTML

 
```
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Scrollbars Styling Module Level 1 # scrollbar-width](https://w3c.github.io/csswg-drafts/css-scrollbars/#scrollbar-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scrollbar-width` | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 891944](https://crbug.com/891944). | 64 | No | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 231588](https://webkit.org/b/231588). | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 891944](https://crbug.com/891944). | 64 | NoSee [bug 891944](https://crbug.com/891944). | NoSee [bug 231588](https://webkit.org/b/231588). | NoSee [bug 891944](https://crbug.com/891944). |


See also
--------


* [`::-webkit-scrollbar`](::-webkit-scrollbar)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width>

::selection
===========


The `::selection` CSS [pseudo-element](pseudo-elements) applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).


Try it
------


Allowable properties
--------------------



Only certain CSS properties can be used with `::selection`:

 * [`color`](color)
* [`background-color`](background-color)
* [`text-decoration`](text-decoration) and its associated properties
* [`text-shadow`](text-shadow)
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color), [`-webkit-text-fill-color`](-webkit-text-fill-color) and [`-webkit-text-stroke-width`](-webkit-text-stroke-width)

 In particular, [`background-image`](background-image) is ignored.


Syntax
------



```
::selection {
  /\* ... \*/
}

```
Examples
--------


### HTML



```
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

```
### CSS




```
/\* Make selected text gold on a red background \*/
::selection {
  color: gold;
  background-color: red;
}

/\* Make selected text in a paragraph white on a blue background \*/
p::selection {
  color: white;
  background-color: blue;
}

```

### Result


Accessibility concerns
----------------------



**Don't override selected text styles for purely aesthetic reasons** — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

 If overridden, it is important to ensure that the **contrast ratio** between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

 Color contrast ratio is found by comparing the luminosity of the selected text and the selected text background colors. To meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/), text content must have a contrast ratio of **4.5:1**, or 3:1 for larger text such as headings. (WCAG defines large text as between `18.66px` and `24px` and [bold](font-weight), or `24px` or larger.)

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)


Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # selectordef-selection](https://w3c.github.io/csswg-drafts/css-pseudo/#selectordef-selection) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::selection` | 1 | 12 | 621 | 9 | 9.5 | 1.1 | 37 | 18 | 624 | 14 | No | 1.0 |


See also
--------


* [`pointer-events`](pointer-events) - control which events are active on the element


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::selection>

sepia()
=======


The `sepia()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a [`<filter-function>`](../filter-function).


Try it
------


Syntax
------



```
sepia(amount)

```
### Parameters


 `amount`  The amount of the conversion, specified as a [`<number>`](../number) or a [`<percentage>`](../percentage). A value of `100%` is completely sepia, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) is `0`.

  Examples
--------


### Examples of correct values for sepia()



```
sepia(0)     /\* No effect \*/
sepia(.65)   /\* 65% sepia \*/
sepia(100%)  /\* Completely sepia \*/

```
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 1 # funcdef-filter-sepia](https://drafts.fxtf.org/filter-effects/#funcdef-filter-sepia) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `sepia` | 18 | 12 | 35 | No | 15 | 6 | 4.4 | 53 | 35 | 14 | 6 | 6.0 |


See also
--------



The other [`<filter-function>`](../filter-function) functions available to be used in values of the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties include:

 * [`blur()`](blur)
* [`brightness()`](brightness)
* [`contrast()`](contrast)
* [`drop-shadow()`](drop-shadow)
* [`grayscale()`](grayscale)
* [`hue-rotate()`](hue-rotate)
* [`invert()`](invert)
* [`opacity()`](opacity)
* [`saturate()`](saturate)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia>

scroll-snap-type
================


The `scroll-snap-type` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how strictly snap points are enforced on the scroll container in case there is one.


Try it
------



 Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.

 
```
/\* Keyword values \*/
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/\* Optional mandatory | proximity\*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/\* … \*/

/\* Global values \*/
scroll-snap-type: inherit;
scroll-snap-type: initial;
scroll-snap-type: revert;
scroll-snap-type: revert-layer;
scroll-snap-type: unset;

```

Syntax
------


### Values


 `none`  When the visual [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) of this scroll container is scrolled, it must ignore snap points.

  `x`  The scroll container snaps to snap positions in its horizontal axis only.

  `y`  The scroll container snaps to snap positions in its vertical axis only.

  `block`  The scroll container snaps to snap positions in its block axis only.

  `inline`  The scroll container snaps to snap positions in its inline axis only.

  `both`  The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).

  `mandatory`  The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.

  `proximity`  The visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
scroll-snap-type =   
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) x [|](value_definition_syntax#single_bar) y [|](value_definition_syntax#single_bar) block [|](value_definition_syntax#single_bar) inline [|](value_definition_syntax#single_bar) both []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) mandatory [|](value_definition_syntax#single_bar) proximity []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Snapping in different axes



#### HTML

 
```
<div class="holster">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

```
 #### CSS

 
```
/\* setup \*/
html,
body,
.holster {
  height: 100%;
}
.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/\* scroll-snap \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}
/\* appearance fixes \*/
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/\* coloration \*/
.container > div:nth-child(even) {
  background-color: #87ea87;
}

.container > div:nth-child(odd) {
  background-color: #87ccea;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1 # scroll-snap-type](https://w3c.github.io/csswg-drafts/css-scroll-snap/#scroll-snap-type) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-snap-type` | 69 | 7912–79Edge supports an earlier draft of CSS Scroll Snap without axis values. | 9968–99On macOS 12, scroll snapping does not complete reliably. See [bug 1749352](https://bugzil.la/1749352)39–68An earlier draft of CSS Scroll Snap without axis values. | 10Internet Explorer supports an earlier draft of CSS Scroll Snap without axis values. | 56 | 119Older Safari versions support an earlier draft of CSS Scroll Snap without axis values. | 69 | 69 | 6839–68An earlier draft of CSS Scroll Snap without axis values. | 48 | 119Older Safari versions support an earlier draft of CSS Scroll Snap without axis values. | 10.0 |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type>

scrollbar-gutter
================



The `scrollbar-gutter` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

 An element's *scrollbar gutter* is the space between the inner border edge and the outer padding edge, where the browser may display a scrollbar. If no scrollbar is present, the gutter will be painted as an extension of the padding.

 The browser determines whether *classic* scrollbars or *overlay* scrollbars are used:

 * Classic scrollbars are always placed in a gutter, consuming space when present.
* Overlay scrollbars are placed over the content, not in a gutter, and are usually partially transparent.



Syntax
------



```
/\* Initial value \*/
scrollbar-gutter: auto;

/\* "stable" keyword, with optional modifier \*/
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

/\* Global values \*/
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
scrollbar-gutter: revert-layer;
scrollbar-gutter: unset;

```
### Values


 `auto`  The initial value. Classic scrollbars create a gutter when `overflow` is `scroll`, or when `overflow` is `auto` and the box is overflowing. Overlay scrollbars do not consume space.

  `stable`  When using classic scrollbars, the gutter will be present if `overflow` is `auto`, `scroll`, or `hidden` even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.

  `both-edges`  If a gutter would be present on one of the inline start/end edges of the box, another will be present on the opposite edge as well.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | scrolling boxes |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
scrollbar-gutter =   
  auto                   [|](value_definition_syntax#single_bar)  
  stable [&&](value_definition_syntax#double_ampersand) both-edges[?](value_definition_syntax#question_mark)    
  

```
Examples
--------



The examples below show how the different values for the `scrollbar-gutter` property would affect a scrollable `div` element (`.container`) with one or more paragraphs contained within.

  **Note:** In the images for the examples, the user's system settings are set to classic scrollbars (always shown).

 
### Example 1



Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear, a space is reserved for it.

 
```
.container {
  scrollbar-gutter: stable;
}

```
  ![A containing div element with a paragraph of text inside and a space to the right where the scrollbar is] 


### Example 2



Add symmetric spacing to both sides of the box so the content is centered:

 
```
.container {
  scrollbar-gutter: stable both-edges;
}

```
  ![A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left] 


### Example 3



 Align the contents of a non-scrolling element and a scrolling one adjacent to it: This example shows two divs side by side. The one on the left has no scroll, but the one on the right does. Both have `scrollbar-gutter` applied, which also reserves space for the div on the left which doesn't have scrollable content. This is a good technique to use to keep the width of content consistent. 

 
```
.container1 {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.container2 {
  scrollbar-gutter: stable;
}

```
  ![Two adjacent divs containing text, both with space for a scrollbar] 


### Overlay scrollbars



For reference, this image shows the same div as above, but with the user's system settings set to overlay scrollbars. Note here the scrollbar will only show when the user is scrolling and on top of the content, so no space is reserved for it and the `scrollbar-gutter` property has no effect.

  ![One div with text, no visible scrollbar] 


Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # scrollbar-gutter-property](https://w3c.github.io/csswg-drafts/css-overflow/#scrollbar-gutter-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scrollbar-gutter` | 94 | 94 | 97 | No | 80 | NoSee [bug 167335](https://webkit.org/b/167335). | 94 | 94 | 97 | 66 | NoSee [bug 167335](https://webkit.org/b/167335). | 17.0 |


See also
--------


* [`scrollbar-width`](scrollbar-width)
* [`overflow`](overflow)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter>

shape-image-threshold
=====================


The `shape-image-threshold` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the alpha channel threshold used to extract the shape using an image as the value for [`shape-outside`](shape-outside).


Try it
------



 Any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. For example, a value of `0.5` means that the shape will enclose all the pixels that are more than 50% opaque.


Syntax
------



```
/\* <number> value \*/
shape-image-threshold: 0.7;

/\* Global values \*/
shape-image-threshold: inherit;
shape-image-threshold: initial;
shape-image-threshold: revert;
shape-image-threshold: revert-layer;
shape-image-threshold: unset;

```
### Values


 [`<alpha-value>`](alpha-value)  Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. Values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0.0` |
| Applies to | floats |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | The same as the specified value after clipping the [`<number>`](number) to the range [0.0, 1.0]. |
| Animation type | a [number](number#interpolation) |

Formal syntax
-------------



```
shape-image-threshold =   
  <alpha-value>    
  
<alpha-value> =   
  [<number>](number)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Aligning text to a gradient



This example creates a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) block with a gradient background image. The gradient is established as a CSS shape using `shape-outside`, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.

 #### HTML

 
```
<div id="gradient-shape"></div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci,
  libero quae nihil porro debitis laboriosam inventore animi impedit nostrum
  nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta
  repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo
  eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea
  eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius
  alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni
  expedita?
</p>

```
 #### CSS

 
```
#gradient-shape {
  width: 150px;
  height: 150px;
  float: left;
  background-image: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-outside: linear-gradient(30deg, black, transparent 80%, transparent);
  shape-image-threshold: 0.2;
}

```
 The shape is established here using [`background-image`](background-image) with a linear gradient rather than an image file. The same gradient is also used as the image from which the shape is derived for establishing the float area, using the [`shape-outside`](shape-outside) property.

 The 20% opacity threshold for treating gradient pixels as part of the shape is then established using `shape-image-threshold` with a value of `0.2`.

 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # shape-image-threshold-property](https://w3c.github.io/csswg-drafts/css-shapes/#shape-image-threshold-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `shape-image-threshold` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |
| `percentages` | 78 | 79 | 70 | No | No | No | 78 | 78 | No | No | No | 12.0 |


See also
--------


* [CSS Shapes](css_shapes)
* [Overview of CSS Shapes](css_shapes/overview_of_css_shapes)
* [`<basic-shape>`](basic-shape)
* [`shape-outside`](shape-outside)
* [`shape-margin`](shape-margin)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold>

shape-margin
============


The `shape-margin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets a margin for a CSS shape created using [`shape-outside`](shape-outside).


Try it
------



 The margin lets you adjust the distance between the edges of the shape (the **float element**) and the surrounding content.


Syntax
------



```
/\* <length> values \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> value \*/
shape-margin: 60%;

/\* Global values \*/
shape-margin: inherit;
shape-margin: initial;
shape-margin: revert;
shape-margin: revert-layer;
shape-margin: unset;

```
### Values


 `<length-percentage>`  Sets the margin of the shape to a [`<length>`](length) value or to a [`<percentage>`](percentage) of the width of the element's containing block.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | floats |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
shape-margin =   
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Adding a margin to a polygon



#### HTML

 
```
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>

```
 #### CSS

 
```
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # shape-margin-property](https://w3c.github.io/csswg-drafts/css-shapes/#shape-margin-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `shape-margin` | 37 | 79 | 62 | No | 24 | 10.110.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |


See also
--------


* [CSS Shapes](css_shapes)
* [Overview of CSS Shapes](css_shapes/overview_of_css_shapes)
* [`shape-outside`](shape-outside)
* [`shape-image-threshold`](shape-image-threshold)
* [`<basic-shape>`](basic-shape)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin>

sign()
======



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `sign()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) contains one calculation, and returns `-1` if the numeric value of the argument is negative, `+1` if the numeric value of the argument is positive, `0⁺` if the numeric value of the argument is 0⁺, and `0⁻` if the numeric value of the argument is 0⁻.

  **Note:** While `[`abs()`](abs)` returns the absolute value of the argument, `sign()` returns the sign of the argument.

 

Syntax
------



```
/\* property: sign(expression) \*/
top: sign(--value);

```
### Parameters



The `sign(x)` function accepts only one value as its parameter.

  `x`  A calculation which resolves to a number.

  
### Return value



A number representing the sign of `A`:

 * If `x` is positive, returns `1`.
* If `x` is negative, returns `-1`.
* If `x` is positive zero, returns `0`.
* If `x` is negative zero, returns `-0`.
* Otherwise, returns `NaN`.


### Formal syntax



```
<sign()> =   
  sign( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Background image position



For example, in [`background-position`](background-position) positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus `sign(10%)` might return `1` or `-1`, depending on how the percentage is resolved! (Or even `0`, if it's resolved against a zero length.)

 
```
div {
  background-position: sign(10%);
}

```

### Position direction



Another use case is to control the [`position`](position) of the element. Either a positive or a negative value.

 
```
div {
  position: absolute;
  top: calc(100px * sign(var(--value)));
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # sign-funcs](https://w3c.github.io/csswg-drafts/css-values/#sign-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `sign` | No | No | No | No | No | 15.4 | No | No | No | No | 15.4 | No |


See also
--------


* [`abs()`](abs)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/sign>

sin()
=====


The `sin()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the sine of a number, which is a value between `-1` and `1`. The function contains a single calculation that must resolve to either a [`<number>`](number) or an [`<angle>`](angle) by interpreting the result of the argument as radians. That is, `sin(45deg)`, `sin(0.125turn)`, and `sin(3.14159 / 4)` all represent the same value, approximately `0.707`.


Syntax
------



```
/\* Single <angle> values \*/
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/\* Single <number> values \*/
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/\* Other values \*/
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));

```
### Parameter



The `sin(angle)` function accepts only one value as its parameter.

  `angle`  A calculation which resolves to a [`<number>`](number) or an [`<angle>`](angle). When specifying unitless numbers they are interpreted as a number of radians, representing an [`<angle>`](angle)

  
### Return value



The sine of an `angle` will always return a number between `−1` and `1`.

 * If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
* If `angle` is `0⁻`, the result is `0⁻`.


### Formal syntax



```
<sin()> =   
  sin( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Changing box sizes



In this example, `sin(30deg)` will return `0.5`, making the box have a `50px` width and a `50px` height.

 
```
div {
  background-color: red;
  width: calc(sin(30deg) * 100px);
  height: calc(sin(30deg) * 100px);
}

```

### Controlling animation duration



Another use case is to control the [`animation-duration`](animation-duration), reducing the duration based on the sine value. In this case, the animation duration will be `1s`.

 
```
div {
  animation-name: myAnimation;
  animation-duration: calc(sin(0.25turn) * 1s);
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `sin` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`cos()`](cos)
* [`tan()`](tan)
* [`asin()`](asin)
* [`acos()`](acos)
* [`atan()`](atan)
* [`atan2()`](atan2)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/sin>

size
====



The `size` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [at-rule](../at-rule) descriptor, used with the [`@page`](../@page) at-rule, defines the size and orientation of the box which is used to represent a page. Most of the time, this size corresponds to the target size of the printed page if applicable.

 Size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions.



Syntax
------



```
/\* Keyword values for scalable size \*/
size: auto;
size: portrait;
size: landscape;

/\* <length> values \*/
/\* 1 value: height = width \*/
size: 6in;

/\* 2 values: width then height \*/
size: 4in 6in;

/\* Keyword values for absolute size \*/
size: A4;
size: B5;
size: JIS-B4;
size: letter;

/\* Mixing size and orientation \*/
size: A4 portrait;

```
### Values


 `auto`  The user agent decides the size of the page. In most cases, the dimensions and orientation of the target sheet are used.

  `landscape`  The content of the page is displayed in landscape mode (i.e. the longest side of the box is horizontal).

  `portrait`  The content of the page is displayed in portrait mode (i.e. the longest side of the box is vertical). This is the default orientation.

  `<length>`  Any length value (see [`<length>`](../length)). The first value corresponds to the width of the page box and the second one corresponds to its height. If only one value is provided, it is used for both width and height.

  `<page-size>`  A keyword which may be any of the following values:

  A5  This matches the standard, ISO dimensions: 148mm x 210mm.

  A4  This matches the standard, ISO dimensions: 210mm x 297mm. (most frequently used dimensions for personal printing.)

  A3  This matches the standard, ISO dimensions: 297mm x 420mm.

  B5  This matches the standard, ISO dimensions: 176mm x 250mm.

  B4  This matches the standard, ISO dimensions: 250mm x 353mm.

  JIS-B5  This correspond to the JIS standard dimensions: 182mm x 257mm.

  JIS-B4  This correspond to the JIS standard dimensions: 257mm x 364mm.

  letter  This keyword is an equivalent to the dimensions of letter paper in North America i.e. 8.5in x 11in.

  legal  This keyword is an equivalent to the dimensions of legal papers in North America i.e. 8.5in x 14in.

  ledger  This keyword is an equivalent to the dimensions of ledger pages in North America i.e. 11in x 17in.

    Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@page`](../@page) |
| [Initial value](../initial_value) | `auto` |
| [Computed value](../computed_value) | as specified, but with relative lengths converted into absolute lengths |

Formal syntax
-------------



```
size =   
  [<length>](../length)[{1,2}](../value_definition_syntax#curly_braces)                                [|](../value_definition_syntax#single_bar)  
  auto                                         [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) [<page-size>](../page-size) [||](../value_definition_syntax#double_bar) [[](../value_definition_syntax#brackets) portrait [|](../value_definition_syntax#single_bar) landscape []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)    
  

```
Examples
--------


### Specifying size and orientation



```
@page {
  size: A4 landscape;
}

```
### Specifying a custom size



```
@page {
  size: 4in 6in;
}

```
### Nesting inside a @media rule



```
@media print {
  @page {
    size: 50mm 150mm;
  }
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # page-size-prop](https://w3c.github.io/csswg-drafts/css-page/#page-size-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `size` | 15 | 79 | No | No | 15 | No | 37 | 18 | No | 14 | No | 1.5 |
| `jis-b4` | 83 | 83 | No | No | 69 | No | 83 | 83 | No | 59 | No | 13.0 |
| `jis-b5` | 83 | 83 | No | No | 69 | No | 83 | 83 | No | 59 | No | 13.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size>

size-adjust
===========



The `size-adjust` CSS descriptor defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

 The `size-adjust` descriptor behaves in a similar fashion to the [`font-size-adjust`](../font-size-adjust) property. It calculates an adjustment per font by matching ex heights.



Syntax
------



```
size-adjust: 90%;

```
### Values



 `<percentage>`  A [`<percentage>`](../percentage) value with an initial value of 100%.

   All metrics associated with this font are scaled by the given percentage. This includes glyph advances, baseline tables, and overrides provided by [`@font-face`](../@font-face) descriptors.


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `100%` |
| Percentages | as specified |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
size-adjust =   
  [<percentage [0,∞]>](../percentage)    
  

```
Examples
--------


### Overriding metrics of a fallback font



The `size-adjust` property can help when overriding the metrics of a fallback font to better match those of a primary web font.

 
```
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  size-adjust: 90%;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 5 # size-adjust-desc](https://w3c.github.io/csswg-drafts/css-fonts-5/#size-adjust-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `size-adjust` | 92 | 92 | 92 | No | 78 | No | 92 | 92 | 92 | No | No | 16.0 |


See also
--------


* [`font-display`](font-display) descriptor
* [`font-family`](font-family) descriptor
* [`font-weight`](font-weight) descriptor
* [`font-style`](font-style) descriptor
* [`font-stretch`](font-stretch) descriptor
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings) descriptor
* [`src`](src) descriptor
* [`unicode-range`](unicode-range) descriptor
* [`font-size-adjust`](../font-size-adjust) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/size-adjust>

skewX()
=======


 The `skewX()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This transformation is a shear mapping ([transvection](https://en.wikipedia.org/wiki/Shear_mapping)) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. 

   **Note:** `skewX(a)` is equivalent to `skew(a)`. 

 
Syntax
------



```
skewX(a)

```
### Values



 `a`  Is an [`<angle>`](../angle) representing the angle to use to distort the element along the abscissa.

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    1   tan ( a )     0   1    )   |   (    1   tan ( a )   0     0   1   0     0   0   1    )   |   (    1   tan ( a )   0     0   1   0     0   0   1    )   |   (    1   tan ( a )   0   0     0   1   0   0     0   0   1   0     0   0   0   1    )   |
| `[1 0 tan(a) 1 0 0]` |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="skewed">Skewed</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewX(10deg); /\* Equal to skew(10deg) \*/
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-skewx](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-skewx) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `skewX` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
	+ Note: there is no `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX>

::slotted()
===========



The `::slotted()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents any element that has been placed into a slot inside an HTML template (see [Using templates and slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) for more information).

 This only works when used inside CSS placed within a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). Note also that this selector won't select a text node placed into a slot; it only targets actual elements.

 
```
/\* Selects any element placed inside a slot \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Selects any <span> placed inside a slot \*/
::slotted(span) {
  font-weight: bold;
}

```


Syntax
------



```
::slotted(<compound-selector>) {
  /\* ... \*/
}

```
Examples
--------


### Highlighting slotted elements



The following snippets are taken from our [slotted-pseudo-element](https://github.com/mdn/web-components-examples/tree/main/slotted-pseudo-element) demo ([see it live also](https://mdn.github.io/web-components-examples/slotted-pseudo-element/)).

 In this demo we use a simple template with three slots:

 
```
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>

```
 A custom element — `<person-details>` — is defined like so:

 
```
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  }
);

```
 You'll see that when filling the `style` element with content, we select all slotted elements (`::slotted(*)`) and give them a different font and color. This allows them to stand out better next to the slots that haven't been successfully filled.

 The element looks like this when inserted into the page:

 
```
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>

```

Specifications
--------------




| Specification |
| --- |
| [CSS Scoping Module Level 1 # slotted-pseudo](https://w3c.github.io/csswg-drafts/css-scoping/#slotted-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::slotted` | 50 | 79 | 63 | No | 37 | 10 | 50 | 50 | 63 | 37 | 10 | 5.0 |


See also
--------


* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted>

shape-outside
=============


The `shape-outside` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.


Try it
------


Syntax
------




```
/\* Keyword values \*/
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/\* Function values \*/
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path("M100,0 A100,100 0 1,1 100,200 A100,100 0 1,1 100,0");

/\* <url> value \*/
shape-outside: url(image.png);

/\* <gradient> value \*/
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/\* Global values \*/
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

```
 The `shape-outside` property is specified using the values from the list below, which define the *float area* for *float elements*. The float area determines the shape around which inline content (float elements) wrap.


### Values



 `none`  The float area is unaffected. Inline content wraps around the element's margin box, like usual.

  `<shape-box>`  The float area is computed according to the shape of a float element's edges (as defined by the [CSS box model](css_box_model/introduction_to_the_css_box_model)). This can be `margin-box`, `border-box`, `padding-box`, or `content-box`. The shape includes any curvature created by the [`border-radius`](border-radius) property (behavior which is similar to [`background-clip`](background-clip)).

  `margin-box`  Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding [`border-radius`](border-radius) and [`margin`](margin) values. If the `border-radius / margin` ratio is `1` or more, then the margin box corner radius is `border-radius + margin`. If the ratio is less than `1`, then the margin box corner radius is `border-radius + (margin * (1 + (ratio-1)^3))`.

  `border-box`  Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.

  `padding-box`  Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.

  `content-box`  Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of `0` or `border-radius - border-width - padding`.

    [`<basic-shape>`](basic-shape)  The float area is computed based on the shape created by of one of [`inset()`](basic-shape/inset), [`circle()`](basic-shape/circle), [`ellipse()`](basic-shape/ellipse), [`polygon()`](basic-shape/polygon) or, as added in the level 2 specification, `path()`. If a `<shape-box>` is also supplied, it defines the reference box for the `<basic-shape>` function. Otherwise, the reference box defaults to `margin-box`.

  [`<image>`](image)  The float area is extracted and computed based on the alpha channel of the specified [`<image>`](image) as defined by [`shape-image-threshold`](shape-image-threshold).

    **Note:** [User agents](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) must use the potentially CORS-enabled fetch method defined by the HTML specification for all URLs in a `shape-outside` value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value `none` had been specified.

 
Interpolation
-------------



When animating between one `<basic-shape>` and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as [`<length>`](length), [`<percentage>`](percentage), or [`calc()`](calc) where possible. If list values are not one of those types but are identical (such as finding `nonzero` in the same list position in both lists), those values do interpolate.

 * Both shapes must use the same reference box.
* If both shapes are the same type, that type is `ellipse()` or `circle()`, and none of the radii use the `closest-side` or `farthest-side` keywords, interpolate between each value in the shape functions.
* If both shapes are of type `inset()`, interpolate between each value in the shape functions.
* If both shapes are of type `polygon()`, both polygons have the same number of vertices, and use the same `<fill-rule>`, interpolate between each value in the shape functions.
* In all other cases no interpolation occurs.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | floats |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as defined for [`<basic-shape>`](basic-shape) (with [`shape-box`](shape-outside) following, if supplied), the [`<image>`](image) with its URI made absolute, otherwise as specified. |
| Animation type | yes, as specified for [`<basic-shape>`](basic-shape), otherwise no |

Formal syntax
-------------



```
shape-outside =   
  none                              [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<basic-shape>](basic-shape) [||](value_definition_syntax#double_bar) <shape-box> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  <image>                             
  
<shape-box> =   
  <box>       [|](value_definition_syntax#single_bar)  
  margin-box    
  
<image> =   
  <url>       [|](value_definition_syntax#single_bar)  
  [<gradient>](gradient)    
  
<box> =   
  border-box   [|](value_definition_syntax#single_bar)  
  padding-box  [|](value_definition_syntax#single_bar)  
  content-box    
  
<url> =   
  url( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )  [|](value_definition_syntax#single_bar)  
  src( [<string>](string) [<url-modifier>](url-modifier)[\*](value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Funneling text



#### HTML

 
```
<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>

```
 #### CSS

 
```
.main {
  width: 530px;
}

.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}

.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # shape-outside-property](https://w3c.github.io/csswg-drafts/css-shapes/#shape-outside-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `shape-outside` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |
| `circle` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |
| `gradient` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |
| `image` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |
| `inset` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |
| `polygon` | 37 | 79 | 62 | No | 24 | 10.1 | 37 | 37 | 62 | 24 | 10.3 | 3.0 |


See also
--------


* [CSS Shapes](css_shapes)
* [Overview of CSS Shapes](css_shapes/overview_of_css_shapes)
* [Shapes from Box Values](css_shapes/from_box_values)
* [Basic Shapes](css_shapes/basic_shapes)
* [Shapes from Images](css_shapes/shapes_from_images)
* [`<basic-shape>`](basic-shape)
* [`shape-margin`](shape-margin)
* [`shape-image-threshold`](shape-image-threshold)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside>

skew()
======


 The `skew()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that skews an element on the 2D plane. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This transformation is a shear mapping ([transvection](https://en.wikipedia.org/wiki/Shear_mapping)) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle. 

  The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin. Thus, the farther from the origin a point is, the greater the value added to it. 


Syntax
------



 The `skew()` function is specified with either one or two values, which represent the amount of skewing to be applied in each direction. If you only specify one value it is used for the x-axis and there will be no skewing on the y-axis. 

 
```
skew(ax)

skew(ax, ay)

```

### Values



 `ax`   Is an [`<angle>`](../angle) representing the angle to use to distort the element along the x-axis (or abscissa). 

  `ay`   Is an [`<angle>`](../angle) representing the angle to use to distort the element along the y-axis (or ordinate). If not defined, its default value is `0`, resulting in a purely horizontal skewing. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    1   tan ( ax )     tan ( ay )   1    )   |   (    1   tan ( ax )   0     tan ( ay )   1   0     0   0   1    )   |   (    1   tan ( ax )   0     tan ( ay )   1   0     0   0   1    )   |   (    1   tan ( ax )   0   0     tan ( ay )   1   0   0     0   0   1   0     0   0   0   1    )   |
| `[1 tan(ay) tan(ax) 1 0 0]` |


Examples
--------


### Skewing on the x-axis only



#### HTML

 
```
<div>Normal</div>
<div class="skewed">Skewed</div>

```
 #### CSS

 
```
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Equal to skewX(10deg) \*/
  background-color: pink;
}

```
 #### Result



### Skewing on both axes



#### HTML

 
```
<div>Normal</div>
<div class="skewed">Skewed</div>

```
 #### CSS

 
```
body {
  margin: 20px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-skew](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-skew) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `skew` | 1 | 12 | 3.5Firefox 14 removed experimental support for `skew()`, but it was reintroduced in Firefox 15. | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [skewX()](skewx)
* [skewY()](skewy)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
	+ Note: there is no `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew>

speak-as
========


The `speak-as` descriptor specifies how a counter symbol constructed with a given [`@counter-style`](../@counter-style) will be represented in the spoken form. For example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.


Syntax
------



```
/\* Keyword values \*/
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/\* @counter-style name value \*/
speak-as: <counter-style-name>;

```
### Values


 `auto`  If the value of `speak-as` is specified as `auto`, then the effective value of `speak-as` will be determined based on the value of the [`system`](system) descriptor:

 * If the value of `system` is `alphabetic`, the effective value of `speak-as` will be `spell-out`.
* If `system` is `cyclic`, the effective value of `speak-as` will be `bullets`.
* If `system` is `extends`, the value of `speak-as` will be the same as if `speak-as: auto` is specified on the extended style.
* For all other cases, specifying `auto` has the same effect as specifying `speak-as: numbers`.

  `bullets`  A phrase or an audio cue defined by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) for representing an unordered list item will be read out.

  `numbers`  The numerical value of the counter will be read out in the document language.

  `words`  The user agent will generate a counter value as normal and read it out as a word in the document language.

  `spell-out`  The user agent will generate a counter representation as normal and would read it out letter by letter. If the user agent doesn't know how to read out a particular counter symbol, the user agent might read it out as if the value of `speak-as` was `numbers`.

  `<counter-style-name>`  The name of another counter style, specified as a [`<custom-ident>`](../custom-ident). If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the [`fallback`](fallback) descriptor. If the specified style does not exist, `speak-as` defaults to `auto`.

  Accessibility concerns
----------------------



Assistive technology support is very limited for the `speak-as` property. Do not rely on it to convey information critical to understanding the page's purpose.

 [Let's Talk About Speech CSS | CSS Tricks](https://css-tricks.com/lets-talk-speech-css/)


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `auto` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
speak-as =   
  auto                  [|](../value_definition_syntax#single_bar)  
  bullets               [|](../value_definition_syntax#single_bar)  
  numbers               [|](../value_definition_syntax#single_bar)  
  words                 [|](../value_definition_syntax#single_bar)  
  spell-out             [|](../value_definition_syntax#single_bar)  
  [<counter-style-name>](../counter-style-name)    
  

```
Examples
--------


### Setting the spoken form for a counter



#### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-speak-as](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-speak-as) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `speak-as` | No | No | 33 | No | No | No | No | No | 33 | No | No | No |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as>

::spelling-error
================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `::spelling-error` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents a text segment which the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) has flagged as incorrectly spelled.



Allowable properties
--------------------



Only a small subset of CSS properties can be used in a rule with `::spelling-error` in its selector:

 * [`color`](color)
* [`background-color`](background-color)
* [`cursor`](cursor)
* [`caret-color`](caret-color)
* [`outline`](outline) and its longhands
* [`text-decoration`](text-decoration) and its associated properties
* [`text-emphasis-color`](text-emphasis-color)
* [`text-shadow`](text-shadow)


Syntax
------



```
::spelling-error {
  /\* ... \*/
}

```
Examples
--------


### Simple document spell check



In this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.

 #### HTML

 
```
<p contenteditable spellcheck="true">
  My friends are coegdfgfddffbgning to the party tonight.
</p>

```
 #### CSS

 
```
::spelling-error {
  text-decoration: wavy red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error](https://w3c.github.io/csswg-drafts/css-pseudo/#selectordef-spelling-error) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::spelling-error` | No | No | No | No | No | NoSee [bug 175784](https://webkit.org/b/175784). | No | No | No | No | NoSee [bug 175784](https://webkit.org/b/175784). | No |


See also
--------


* [`::grammar-error`](::grammar-error)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::spelling-error>

sqrt()
======



The `sqrt()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is an exponential function that returns the [square root](https://en.wikipedia.org/wiki/Square_root) of a number.

 The function `pow(x, 0.5)` is equivalent to `sqrt(x)`.



Syntax
------



```
/\* A <number> value \*/
width: calc(100px * sqrt(9)); /\* 300px \*/
width: calc(100px * sqrt(25)); /\* 500px \*/
width: calc(100px * sqrt(100)); /\* 1000px \*/

```
### Parameters



The `sqrt(x)` function accepts only one value as its parameter.

  `x`  A calculation which resolves to a [`<number>`](number) greater than or equal to 0.

  
### Return value



Returns a [`<number>`](number) which is the square root of `x`.

 * if `x` is `+∞`, the result is `+∞`.
* If `x` is `0⁻`, the result is `0⁻`.
* If `x` is less than `0`, the result is `NaN`.


### Formal syntax



```
<sqrt()> =   
  sqrt( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # exponent-funcs](https://w3c.github.io/csswg-drafts/css-values/#exponent-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `sqrt` | No | No | 112 | No | No | 15.4 | No | No | 112 | No | 15.4 | No |


See also
--------


* [`pow()`](pow)
* [`hypot()`](hypot)
* [`log()`](log)
* [`exp()`](exp)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/sqrt>

<string>
========


The `<string>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a sequence of characters. Strings are used in numerous CSS properties, such as [`content`](content), [`font-family`](font-family), and [`quotes`](quotes).


Syntax
------



The `<string>` data type is composed of any number of [Unicode](https://en.wikipedia.org/wiki/Unicode) characters surrounded by either double (`"`) or single (`'`) quotes.

 Most characters can be represented literally. All characters can also be represented with their respective [Unicode code points](https://en.wikipedia.org/wiki/Unicode#Code_point_planes_and_blocks) in hexadecimal, in which case they are preceded by a backslash (`\`). For example, `\22` represents a double quote, `\27` a single quote (`'`), and `\A9` the copyright symbol (`©`).

 Importantly, certain characters which would otherwise be invalid can be escaped with a backslash. These include double quotes when used inside a double-quoted string, single quotes when used inside a single-quoted string, and the backslash itself. For example, `\\` will create a single backslash.

 To output new lines, you must escape them with a line feed character such as `\A` or `\00000A`. In your code, however, strings can span multiple lines, in which case each new line must be escaped with a `\` as the last character of the line.

 However, to get new lines, you must also set the [`white-space`](white-space) property to appropriate value.

  **Note:** [HTML entities](https://developer.mozilla.org/en-US/docs/Glossary/Entity) (such as `&nbsp;` or `&#8212;`) cannot be used in a CSS `<string>`.

 
Examples
--------


### Examples of valid strings



```
/\* Simple strings \*/
"This string is demarcated by double quotes."
'This string is demarcated by single quotes.'

/\* Character escaping \*/
"This is a string with \" an escaped double quote."
"This string also has \22 an escaped double quote."
'This is a string with \' an escaped single quote.'
'This string also has \27 an escaped single quote.'
"This is a string with \\ an escaped backslash."

/\* New line in a string \*/
"This string has a \Aline break in it."

/\* String spanning two lines of code (these two strings will have identical output) \*/
"A really long \
awesome string"
"A really long awesome string"

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # strings](https://w3c.github.io/csswg-drafts/css-values/#strings) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `string` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `unicode_escaped_characters` | 1 | 12 | 1 | 6 | 7 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [CSS Units and Values](css_values_and_units)
* [CSS Basic Data Types](css_types)
* [Introduction to CSS: Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/string>

suffix
======


The `suffix` descriptor of the [`@counter-style`](../@counter-style) rule specifies content that will be appended to the marker representation.


Syntax
------



```
/\* <symbol> values \*/
suffix: "";
suffix: ") ";
suffix: url(bullet.png);

```
### Values


 `<symbol>`  Specifies a `<symbol>` that is appended to the marker representation. It may be a [`<string>`](../string), [`<image>`](../image), or [`<custom-ident>`](../custom-ident).

  Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | ". " (full stop followed by a space) |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
suffix =   
  <symbol>    
  
<symbol> =   
  [<string>](../string)        [|](../value_definition_syntax#single_bar)  
  <image>         [|](../value_definition_syntax#single_bar)  
  [<custom-ident>](../custom-ident)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Setting a suffix for a counter



#### HTML

 
```
<ul class="choices">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>None of the above</li>
</ul>

```
 #### CSS

 
```
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.choices {
  list-style: options;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-suffix](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-suffix) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `suffix` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/suffix>

symbols
=======


The `symbols` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) descriptor is used to specify the symbols that the specified counter system will use to construct counter representations.


Syntax
------


The `symbols` descriptor is specified as one or more `<symbol>`s.

### Values


 `<symbol>`  Represents a symbol used within the counter system. This must be one of the following data types:

 * [`<string>`](../string)
* [`<image>`](../image) (Note: This value is "at risk" and may be removed from the specification. It is not yet implemented.)
* [`<custom-ident>`](../custom-ident)

  Description
-----------



A symbol can be a string, image, or identifier. It is used within the [`@counter-style`](../@counter-style) [at-rule](../at-rule).

 
```
symbols: A B C D E;
symbols: "\24B6""\24B7""\24B8"D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("first.svg") url("second.svg") url("third.svg");
symbols: indic-numbers;

```
 The `symbols` descriptor must be specified when the value of the [`system`](system) descriptor is `cyclic`, `numeric`, `alphabetic`, `symbolic`, or `fixed`. When the `additive` system is used, use the [`additive-symbols`](additive-symbols) descriptor instead to specify the symbols.


Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `n/a (required)` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
symbols =   
  <symbol>[+](../value_definition_syntax#plus)    
  
<symbol> =   
  [<string>](../string)        [|](../value_definition_syntax#single_bar)  
  <image>         [|](../value_definition_syntax#single_bar)  
  [<custom-ident>](../custom-ident)    
  
<image> =   
  <url>       [|](../value_definition_syntax#single_bar)  
  [<gradient>](../gradient)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
Examples
--------


### Setting counter symbols



#### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7"D E;
}

.list {
  list-style: symbols-example;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-symbols](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-symbols) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `symbols` | 91Does not support `<image>` as a value for the `symbols` descriptor. | 91Does not support `<image>` as a value for the `symbols` descriptor. | 33Does not support `<image>` as a value for the `symbols` descriptor. | No | 77Does not support `<image>` as a value for the `symbols` descriptor. | No | 91Does not support `<image>` as a value for the `symbols` descriptor. | 91Does not support `<image>` as a value for the `symbols` descriptor. | 33Does not support `<image>` as a value for the `symbols` descriptor. | 64Does not support `<image>` as a value for the `symbols` descriptor. | No | 16.0Does not support `<image>` as a value for the `symbols` descriptor. |


See also
--------


* The `symbols` descriptor is used within the [`@counter-style`](../@counter-style) at-rule.
* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles
* [`url()`](../url) function


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/symbols>

skewY()
=======


 The `skewY()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This transformation is a shear mapping ([transvection](https://en.wikipedia.org/wiki/Shear_mapping)) that distorts each point within an element by a certain angle in the vertical direction. The ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it. 


Syntax
------



```
skewY(a)

```
### Values



 `a`  Is an [`<angle>`](../angle) representing the angle to use to distort the element along the ordinate.

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|   (    1   0     tan ( a )   1    )   |   (    1   0   0     tan ( a )   1   0     0   0   1    )   |   (    1   0   0     tan ( a )   1   0     0   0   1    )   |   (    1   0   0   0     tan ( a )   1   0   0     0   0   1   0     0   0   0   1    )   |
| `[1 tan(a) 0 1 0 0]` |


Examples
--------


### HTML



```
<div>Normal</div>
<div class="skewed">Skewed</div>

```
### CSS



```
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-skewy](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-skewy) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `skewY` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* Individual transform properties:
	+ [`translate`](../translate)
	+ [`scale`](../scale)
	+ [`rotate`](../rotate)
	+ Note: there is no `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY>

@supports
=========


 The `@supports` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> lets you specify CSS declarations that depend on a browser's support for CSS features. Using this at-rule is commonly called a *feature query*. The rule must be placed at the top level of your code or nested inside any other [conditional group at-rule](at-rule#conditional_group_rules). 


Try it
------



 In JavaScript, `@supports` can be accessed via the CSS object model interface [`CSSSupportsRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule).


Syntax
------



 The `@supports` at-rule consists of a block of statements with a *supports condition.* The supports condition is a set of one or more name-value pairs (e.g., `<property>: <value>`). 

 
```
@supports (<supports-condition>) {
  /\* If the condition is true, use the CSS in this block. \*/
}

```
 The conditions can be combined by conjunctions (`and`), disjunctions (`or`), and/or negations (`not`).

 
```
@supports (<supports-condition>) and (<supports-condition>) {
  /\* If both conditions are true, use the CSS in this block. \*/
}

```
  The precedence of operators can be defined with parentheses. Supports conditions can use either a `<property>: <value>` declaration syntax or a `<function()>` syntax. The following sections describe the use of each type of supports condition. 


### Declaration syntax



 The declaration syntax checks if a browser supports the specified `<property>: <value>` declaration. The declaration must be surrounded by parentheses. The following example returns true and applies the CSS style if the browser supports the expression `transform-origin: 5% 5%`: 

 
```
@supports (transform-origin: 5% 5%) {
}

```

### Function syntax



 The function syntax checks if a browser supports values or expressions within the function. The functions supported in the function syntax are described in the following sections. 

 #### 
`selector()`  Experimental

  This function evaluates if a browser supports the specified selector syntax. The following example returns true and applies the CSS style if the browser supports the [child combinator](child_combinator): 

 
```
@supports selector(h2 > p) {
}

```
 #### `font-tech()`

  This function checks if a browser supports the specified font technology for layout and rendering. The following example returns true and applies the CSS style if the browser supports the `COLRv1` font technology: 

 
```
@supports font-tech(color-COLRv1) {
}

```
 The table below describes the available font technologies that can be queried using this function:

 

| Technology | Supports |
| --- | --- |
| `color-colrv0` | Multi-colored glyphs via COLR version 0 table |
| `color-colrv1` | Multi-colored glyphs via COLR version 1 table |
| `color-svg` | SVG multi-colored tables |
| `color-sbix` | Standard bitmap graphics tables |
| `color-cbdt` | Color bitmap data tables |
| `features-opentype` | OpenType `GSUB` and `GPOS` tables |
| `features-aat` | TrueType `morx` and `kerx` tables |
| `features-graphite` | Graphite features, namely `Silf`, `Glat` , `Gloc` , `Feat`, and `Sill` tables |
| `incremental` | Incremental font loading |
| `variations` | Font variations in TrueType and OpenType fonts to control the font axis, weight, glyphs, etc. |
| `palettes` | Font palettes by means of `font-palette` to select one of many color palettes in the font |

 #### `font-format()`

  This function checks if a browser supports the specified font format for layout and rendering. The following example returns true and applies the CSS style if the browser supports the `opentype` font format: 

 
```
@supports font-format(opentype) {
}

```
 The following table describes the available formats that can be queried with this function:

 

| Format | Description | File extensions |
| --- | --- | --- |
| `collection` | OpenType Collection | `.otc`, `.ttc` |
| `embedded-opentype` | Embedded OpenType | `.eot` |
| `opentype` | OpenType | `.ttf`, `.otf` |
| `svg` | SVG Font (deprecated) | `.svg`, `.svgz` |
| `truetype` | TrueType | `.ttf` |
| `woff` | WOFF 1.0 (Web Open Font Format) | `.woff` |
| `woff2` | WOFF 2.0 (Web Open Font Format) | `.woff2` |


### The not operator



 The `not` operator precedes an expression resulting in the negation of the expression. The following returns true if the browser's [`transform-origin`](transform-origin) property considers `10em 10em 10em` **to be invalid:** 

 
```
@supports not (transform-origin: 10em 10em 10em) {
}

```
  As with any operator, the `not` operator can be applied to a declaration of any complexity. The following examples are both valid: 

 
```
@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

```
   **Note:** There is no need to enclose the `not` operator between two parentheses at the top level. To combine it with other operators, like `and` and `or`, the parentheses are required. 

 
### The and operator



The `and` operator creates a new expression from the conjunction of two shorter expressions. It returns true only if **both** of the shorter expressions are also true. The following example returns true if and only if the two shorter expressions are simultaneously true:

 
```
@supports (display: table-cell) and (display: list-item) {
}

```
 Multiple conjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

 
```
@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
 ((display: list-item) and (display: contents)) {
}

```

### The or operator



The `or` operator creates a new expression from the disjunction of two shorter expressions. It returns true if **one or both** of the shorter expressions is also true. The following example returns true if at least one of the two shorter expressions is true:

 
```
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

```
 Multiple disjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

 
```
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

```
  **Note:** When using both `and` and `or` operators, the parentheses must be used to define the order in which they apply. Otherwise, the condition is invalid and the whole rule is ignored.

 
Formal syntax
-------------



```
@supports =   
  @supports <supports-condition> { [<stylesheet>](stylesheet) }    
  
<supports-condition> =   
  not <supports-in-parens>                            [|](value_definition_syntax#single_bar)  
  <supports-in-parens> [[](value_definition_syntax#brackets) and <supports-in-parens> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)  [|](value_definition_syntax#single_bar)  
  <supports-in-parens> [[](value_definition_syntax#brackets) or <supports-in-parens> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)     
  
<supports-in-parens> =   
  ( <supports-condition> )  [|](value_definition_syntax#single_bar)  
  <supports-feature>        [|](value_definition_syntax#single_bar)  
  <general-enclosed>          
  
<supports-feature> =   
  <supports-decl>    
  
<general-enclosed> =   
  [[](value_definition_syntax#brackets) [<function-token>](function-token) [<any-value>](any-value)[?](value_definition_syntax#question_mark) ) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) ( [<any-value>](any-value)[?](value_definition_syntax#question_mark) ) []](value_definition_syntax#brackets)                   
  
<supports-decl> =   
  ( [<declaration>](declaration) )    
  

```
Examples
--------


### Testing for the support of a CSS property



```
@supports (animation-name: test) {
  /\* CSS applied when animations are supported without a prefix \*/
  @keyframes {
    /\* Other at-rules can be nested inside \*/
  }
}

```
### Testing for the support of a given CSS property or a prefixed version



```
@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /\* CSS applied when text-stroke, prefixed or not, is supported \*/
}

```
### Testing for the non-support of a specific CSS property



```
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /\* CSS to provide fallback alternative for text-align-last: justify \*/
}

```
### Testing for the support of a selector



CSS conditional rules provide the ability to test for the support of a selector such as [`:has()`](:has).

 
```
/\* This rule won't be applied in browsers that don't support :has() \*/
ul:has(> li li) {
  /\* CSS is applied when the :has(…) pseudo-class is supported \*/
}

@supports not selector(:has(a, b)) {
  /\* Fallback for when :has() is unsupported \*/
  ul > li,
 ol > li {
    /\* The above expanded for browsers that don't support :has(…) \*/
  }
}

/\* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) \*/
@supports selector(:nth-child(1n of a, b)) {
  /\* This rule needs to be inside the @supports block, otherwise
 it will be partially applied in browsers which don't support
 the `of` argument of :nth-child(…) \*/
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /\* CSS applied when the :is(…) selector and
 the `of` argument of :nth-child(…) are both supported \*/
  }
}

```

### Testing for the support of a font technology



The following example applies the CSS style if the browser supports the `COLRv1` font technology:

 
```
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

@supports font-tech(color-COLRv1) {
  font-family: "Bungee Spice";
}

```
  It's also possible to test for the support of a font technology by using the `tech` function inside the [`@font-face`](@font-face) at-rule. If a browser doesn't support the font technology, a fallback font (`Bungee-fallback.otf`) can be used instead. 

 
```
@font-face {
  font-family: "Bungee Spice";
  src: url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

```

### Testing for the support of a font format



The following example applies the CSS style if the browser supports the `woff2` font format:

 
```
@supports font-format(woff2) {
  font-family: "Open Sans";
  src: url("open-sans.woff2") format("woff2");
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Conditional Rules Module Level 4 # at-supports-ext](https://w3c.github.io/csswg-drafts/css-conditional-4/#at-supports-ext) |
| [CSS Conditional Rules Module Level 3 # at-supports](https://w3c.github.io/csswg-drafts/css-conditional-3/#at-supports) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@supports` | 28 | 12 | 22 | No | 12.1 | 9 | 4.4 | 28 | 22 | 12.1 | 9 | 1.5 |
| `font-format` | No | No | 106 | No | No | No | No | No | 106 | No | No | No |
| `font-tech` | No | No | 106 | No | No | No | No | No | 106 | No | No | No |
| `selector` | 83 | 83 | 69 | No | 69 | 14.1 | 83 | 83 | 79 | NoSee [bug 979041](https://crbug.com/979041). | 14.5 | 13.0 |


See also
--------


* [Using feature queries](css_conditional_rules/using_feature_queries)
* The CSSOM class [`CSSSupportsRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule), and the [`CSS.supports()`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports) method that allows the same check to be performed via JavaScript.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@supports>

syntax
======


The `syntax` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) descriptor is required when using the [`@property`](../@property) [at-rule](../at-rule) and describes the allowable syntax for the property.


Syntax
------



The following are all valid syntax strings:

 
```
syntax: "<color>"; /\* accepts a color \*/

syntax: "<length> | <percentage>"; /\* accepts lengths or percentages but not calc expressions with a combination of the two \*/

syntax: "small | medium | large"; /\* accepts one of these values set as custom idents. \*/

syntax: "\*"; /\* any valid token \*/

```

Values
------



A string with a supported syntax as defined by the specification. Supported syntaxes are a subset of [CSS types](../css_types). These may be used along, or a number of types can be used in combination.

  `"<length>"`  Any valid [`<length>`](../length) values.

  `"<number>"`  Any valid [`<number>`](../number) values.

  `"<percentage>"`  Any valid [`<percentage>`](../percentage) values.

  `"<length-percentage>"`  Any valid [`<length-percentage>`](../length-percentage) values.

  `"<color>"`  Any valid [`<color>`](../color_value) values.

  `"<image>"`  Any valid [`<image>`](../image) values.

  `"<url>"`  Any valid [`url()`](../url) values.

  `"<integer>"`  Any valid [`<integer>`](../integer) values.

  `"<angle>"`  Any valid [`<angle>`](../angle) values.

  `"<time>"`  Any valid [`<time>`](../time) values.

  `"<resolution>"`  Any valid [`<resolution>`](../resolution) values.

  `"<transform-function>"`  Any valid [`<transform-function>`](../transform-function) values.

  `"<custom-ident>"`  Any valid [`<custom-ident>`](../custom-ident) values.

  `"<transform-list>"`  A list of valid [`<transform-function>`](../transform-function) values.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@property`](../@property) |
| [Initial value](../initial_value) | `n/a (required)` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
syntax =   
  [<string>](../string)    
  

```
Examples
--------



Add type checking to `--my-color` [`custom property`](../--*), using the `<color>` syntax:

 Using [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`@property`](../@property) [at-rule](../at-rule):

 
```
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

```
 Using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [`CSS.registerProperty`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty):

 
```
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

```

Specifications
--------------




| Specification |
| --- |
| [CSS Properties and Values API Level 1 # the-syntax-descriptor](https://drafts.css-houdini.org/css-properties-values-api/#the-syntax-descriptor) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `syntax` | 85 | 85 | No | No | 71 | 16.4 | 85 | 85 | No | 60 | 16.4 | 14.0 |


See also
--------


* [CSS Properties and Values API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Properties_and_Values_API)
* [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API)
* [CSS Typed Object Model](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API)
* [CSS Houdini](https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax>

tab-size
========


The `tab-size` CSS property is used to customize the width of tab characters (U+0009).


Try it
------


Syntax
------



```
/\* <integer> values \*/
tab-size: 4;
tab-size: 0;

/\* <length> values \*/
tab-size: 10px;
tab-size: 2em;

/\* Global values \*/
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;

```
### Values


 [`<integer>`](integer)  A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.

  [`<length>`](length)  The width of tabs. Must be nonnegative.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `8` |
| Applies to | block containers |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | the specified integer or an absolute length |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
tab-size =   
  [<number>](number)  [|](value_definition_syntax#single_bar)  
  [<length>](length)    
  

```
Examples
--------


### Expanding by character count



```
pre {
  tab-size: 4; /\* Set tab size to 4 characters wide \*/
}

```
### Collapse tabs



```
pre {
  tab-size: 0; /\* Remove indentation \*/
}

```
### Comparing to the default size



This example compares a default tab size with a custom tab size. Note that [`white-space`](white-space) is set to `pre` to prevent the tabs from collapsing.

 #### HTML

 
```
<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>

```
 #### CSS

 
```
p {
  white-space: pre;
}

.custom {
  tab-size: 3;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # tab-size-property](https://w3c.github.io/csswg-drafts/css-text/#tab-size-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `tab-size` | 21This property is not yet animatable. | 79This property is not yet animatable. | 914Before Firefox 53, this property was not animatable. | No | 1510.5–15 | 7 | 4.4 | 25This property is not yet animatable. | 914Before Firefox 53, this property was not animatable. | 1411–14 | 7 | 1.5This property is not yet animatable. |
| `length` | 42 | 79 | 53 | No | 29 | 13.1 | 56 | 42 | 53 | 29 | 13.4 | 4.0 |


See also
--------


* [`white-space`](white-space)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size>

tan()
=====


The `tan()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is a trigonometric function that returns the tangent of a number, which is a value between `−infinity` and `infinity`. The function contains a single calculation that must resolve to either a [`<number>`](number) or an [`<angle>`](angle) by interpreting the result of the argument as radians.


Syntax
------



```
/\* Single <angle> values \*/
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));

/\* Single <number> values \*/
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 – 1));

/\* Other values \*/
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));

```
### Parameter



The `tan(angle)` function accepts only one value as its parameter.

  `angle`  A calculation which resolves to a [`<number>`](number) or an [`<angle>`](angle). When specifying unitless numbers they are interpreted as a number of radians, representing an [`<angle>`](angle).

  
### Return value



The tangent of an `angle` will always return a number between `−∞` and `+∞`.

 * If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
* If `angle` is `0⁻`, the result is `0⁻`.
* If `angle` is one of the asymptote values (such as `90deg`, `270deg`, etc), the result must be `∞` for `90deg` and all values a multiple of `360deg` from that (such as `-270deg` or `450deg`), and `−∞` for `-90deg` and all values a multiple of `360deg` from that (such as `-450deg` or `270deg`).


### Formal syntax



```
<tan()> =   
  tan( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Examples
--------


### Draw parallelograms



The `tan()` function can be used draw a parallelogram.

 #### HTML

 
```
<div class="parallelogram"></div>

```
 #### CSS

 
```
.parallelogram {
  --w: 400;
  --h: 200;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}
.parallelogram::before {
  --angle: calc(sin(var(--h) / var(--w)));
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skew(calc(0 - var(--angle)));
  background-color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # trig-funcs](https://w3c.github.io/csswg-drafts/css-values/#trig-funcs) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `tan` | 111 | 111 | 108 | No | 97 | 15.4 | 111 | 111 | 108 | No | 15.4 | No |


See also
--------


* [`sin()`](sin)
* [`cos()`](cos)
* [`asin()`](asin)
* [`acos()`](acos)
* [`atan()`](atan)
* [`atan2()`](atan2)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/tan>

:target
=======



The `:target` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents a unique element (the *target element*) with an [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) matching the URL's fragment.

 
```
/\* Selects an element with an ID matching the current URL's fragment \*/
:target {
  border: 2px solid black;
}

```
 For example, the following URL has a fragment (denoted by the *#* sign) that points to an element called `section2`:

 
```
http://www.example.com/index.html#section2

```
 The following element would be selected by a `:target` selector when the current URL is equal to the above:

 
```
<section id="section2">Example</section>

```


Syntax
------



```
:target {
  /\* ... \*/
}

```
Examples
--------


### A table of contents



The `:target` pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.

 #### HTML

 
```
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere">
      This link goes nowhere, because the target doesn't exist.
    </a>
  </li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the link
  above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the links above. Isn't
  that delightful?
</p>

```
 #### CSS

 
```
p:target {
  background-color: gold;
}

/\* Add a pseudo-element inside the target element \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Style italic elements within the target element \*/
p:target i {
  color: red;
}

```
 #### Result



### Pure-CSS lightbox



You can use the `:target` pseudo-class to create a lightbox without using any JavaScript. This technique relies on the ability of anchor links to point to elements that are initially hidden on the page. Once targeted, the CSS changes their `display` so that they are shown.

  **Note:** A more complete pure-CSS lightbox based on the `:target` pseudo-class is [available on GitHub](https://github.com/madmurphy/takefive.css/) ([demo](https://madmurphy.github.io/takefive.css/)).

  #### HTML

 
```
<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
      quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
    </figcaption>
  </figure>
</div>

```
 #### CSS

 
```
/\* Unopened lightbox \*/
.lightbox {
  display: none;
}

/\* Opened lightbox \*/
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/\* Lightbox content \*/
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/\* Close button \*/
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/\* Lightbox overlay \*/
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-target](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-target) |
| [Selectors Level 4 # the-target-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-target-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:target` | 1 | 12 | 1 | 9 | 9.5 | 1.3 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [Using the :target pseudo-class in selectors](css_selectors/using_the_:target_pseudo-class_in_selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:target>

::target-text
=============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `::target-text` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents the text that has been scrolled to if the browser supports [text fragments](https://developer.mozilla.org/en-US/docs/Web/Text_fragments). It allows authors to choose how to highlight that section of text.

 
```
::target-text {
  background-color: pink;
}

```


Syntax
------



```
::target-text {
  /\* ... \*/
}

```
Examples
--------


### Highlighting text fragments




```
::target-text {
  background-color: rebeccapurple;
  color: white;
}

```
 To see this CSS in action follow the link to [scroll-to-text demo](https://mdn.github.io/css-examples/target-text/index.html#:~:text=From%20the%20foregoing%20remarks%20we%20may%20gather%20an%20idea%20of%20the%20importance).


Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # selectordef-target-text](https://w3c.github.io/csswg-drafts/css-pseudo/#selectordef-target-text) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::target-text` | 89 | 89 | No | No | 75 | No | 89 | 89 | No | 63 | No | 15.0 |


See also
--------


* [Text fragments](https://developer.mozilla.org/en-US/docs/Web/Text_fragments)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::target-text>

:target-within
==============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `:target-within` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents an element that is a target element or *contains* an element that is a target. A target element is a unique element with an [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#id) matching the URL's fragment. In other words, it represents an element that is itself matched by the [`:target`](:target) pseudo-class or has a descendant that is matched by `:target`. (This includes descendants in [shadow trees](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).)

 
```
/\* Selects a <div> when one of its descendants is a target \*/
div:target-within {
  background: cyan;
}

```


Syntax
------



```
:target-within {
  /\* ... \*/
}

```
Examples
--------


### Highlighting an article



The `:target-within` pseudo-class can be used to highlight the article if anything inside it has been directly linked to. The `:target` pseudo-class is also being used to show which item has been targeted.

 #### HTML

 
```
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
</ol>

<article>
  <h3>My Fun Article</h3>
  <p id="p1">
    You can target <i>this paragraph</i> using a URL fragment. Click on the link
    above to try out!
  </p>
  <p id="p2">
    This is <i>another paragraph</i>, also accessible from the links above.
    Isn't that delightful?
  </p>
</article>

```
 #### CSS

 
```
article:target-within {
  background-color: gold;
}

/\* Add a pseudo-element inside the target element \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Style italic elements within the target element \*/
p:target i {
  color: red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-target-within-pseudo](https://w3c.github.io/csswg-drafts/selectors/#the-target-within-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:target-within` | No | No | No | No | No | No | No | No | No | No | No | No |


See also
--------


* [`:target`](:target)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:target-within>

text-align
==========


The `text-align` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like [`vertical-align`](vertical-align) but in the horizontal direction.


Try it
------


Syntax
------




```
/\* Keyword values \*/
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;

/\* Character-based alignment in a table column \*/
text-align: ".";
text-align: "." center;

/\* Block alignment values (Non-standard syntax) \*/
text-align: -moz-center;
text-align: -webkit-center;

/\* Global values \*/
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: revert-layer;
text-align: unset;

```
 The `text-align` property is specified in one of the following ways:

 * Using the keyword values `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, or `match-parent`.
* Using a `<string>` value only, in which case the other value defaults to `right`.
* Using both a keyword value and a [`<string>`](#string) value.


### Values


 `start`  The same as `left` if direction is left-to-right and `right` if direction is right-to-left.

  `end`  The same as `right` if direction is left-to-right and `left` if direction is right-to-left.

  `left`  The inline contents are aligned to the left edge of the line box.

  `right`  The inline contents are aligned to the right edge of the line box.

  `center`  The inline contents are centered within the line box.

  `justify`  The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

  
`justify-all`  Experimental 
  Same as `justify`, but also forces the last line to be justified.

  `match-parent`  Similar to `inherit`, but the values `start` and `end` are calculated according to the parent's [`direction`](direction) and are replaced by the appropriate `left` or `right` value.

  
[`<string>`](string)  Experimental 
  When applied to a table cell, specifies the alignment character around which the cell's contents will align.

  Accessibility concerns
----------------------



The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `start`, or a nameless value that acts as `left` if [`direction`](direction) is `ltr`, `right` if [`direction`](direction) is `rtl` if `start` is not supported by the browser. |
| Applies to | block containers |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified, except for the `match-parent` value which is calculated against its parent's `direction` value and results in a computed value of either `left` or `right` |
| Animation type | discrete |

Formal syntax
-------------



```
text-align =   
  start         [|](value_definition_syntax#single_bar)  
  end           [|](value_definition_syntax#single_bar)  
  left          [|](value_definition_syntax#single_bar)  
  right         [|](value_definition_syntax#single_bar)  
  center        [|](value_definition_syntax#single_bar)  
  justify       [|](value_definition_syntax#single_bar)  
  match-parent  [|](value_definition_syntax#single_bar)  
  justify-all     
  

```
Examples
--------


### Start alignment



#### HTML

 
```
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

```
 #### CSS

 
```
.example {
  text-align: start;
  border: solid;
}

```
 #### Result



### Centered text



#### HTML

 
```
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

```
 #### CSS

 
```
.example {
  text-align: center;
  border: solid;
}

```
 #### Result



### Example using "justify"



#### HTML

 
```
<p class="example">
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

```
 #### CSS

 
```
.example {
  text-align: justify;
  border: solid;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1 # text-align](https://w3c.github.io/csswg-drafts/css-logical/#text-align) |
| [CSS Text Module Level 3 # text-align-property](https://w3c.github.io/csswg-drafts/css-text/#text-align-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-align` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `block_alignment_values` | 1 | 79 | 1 | No | 15 | 1.31preview | 37 | 18 | 4 | 14 | 11 | 1.0 |
| `flow_relative_values_start_and_end` | 1 | 79 | 1 | No | 15 | 3.1 | 37 | 18 | 4 | 14 | 2 | 1.0 |
| `match-parent` | 16 | 79 | 40 | No | 15 | 15.4 | 37 | 18 | 40 | 14 | 15.4 | 1.0 |


See also
--------


* [`margin: auto`](margin), [`margin-left: auto`](margin-left), [`vertical-align`](vertical-align)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-align>

system
======



The `system` descriptor specifies the algorithm to be used for converting the integer value of a counter to a string representation. It is used in a [`@counter-style`](../@counter-style) to define the behavior of the defined style.

 If the algorithm specified in the `system` descriptor is unable to construct the representation for a particular counter value, then that value's representation will be constructed using the fallback system provided.



Syntax
------




```
/\* Keyword values \*/
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/\* Combined values \*/
system: fixed 3;
system: extends decimal;

```
 This may take one of three forms:

 * One of the keyword values `cyclic`, `numeric`, `alphabetic`, `symbolic`, `additive`, or `fixed`.
* The keyword value `fixed` along with an integer.
* The keyword value or `extends` along with a [`@counter-style`](../@counter-style) name.

  `cyclic`  Cycles through the list of symbols provided. Once the end of the list of symbols is reached, it will loop back to the beginning and start over. This system is useful for simple bullet styles with just one symbol, or for styles having multiple symbols. At least one symbol must be specified in the `symbols` descriptor, or the counter style is not valid.

  `fixed`  Defines a finite set of symbols are specified. Once the system has looped through all the specified symbols, it will fall back. This system is useful in cases where the counter values are finite. At least one symbol must be specified in the `symbols` descriptor or the counter style is not valid. Also an optional [`<integer>`](../integer) can be specified after the system, as the value of the first symbol. If this integer is omitted, value of the first integer is taken as `1`.

  `symbolic`  Cycles through the provided list of symbols. On each successive pass through the cycle, the symbols used for the counter representation are doubled, tripled, and so on. For example, if the original symbols provided were "◽" and "◾", on each successive pass, they will become "◽◽" and "◾◾", "◽◽◽" and "◾◾◾" and so on. At least one symbol must be specified in the `symbols` descriptor or the counter style is not valid. This counter system works for positive counter values only.

  `alphabetic`  Interprets the specified symbols as digits, to an alphabetic numbering system. If the characters `"a"` to `"z"` are specified as symbols in a counter style, with the `alphabetic` system, then the first 26 counter representations will be `"a"`, `"b"` up to `"z"`. Until this point, the behavior is the same as that of the `symbolic` system, described above. However, after `"z"`, it will continue as `"aa"`, `"ab"`, `"ac"`…

 The `symbols` descriptor must contain at least two symbols or the counter style is not valid. The first counter symbol provided in the `symbols` descriptor is interpreted as `1`, the next as `2`, and so on. This system is also defined strictly over positive counter values.

  `numeric`  Interprets the counter symbols as digits in a [place-value numbering system](https://en.wikipedia.org/wiki/Positional_notation). The numeric system is similar to the `alphabetic` system, described above. The main difference is that in the `alphabetic` system, the first counter symbol given in the `symbols` descriptor is interpreted as `1`, the next as `2`, and so on. However, in the numeric system, the first counter symbol is interpreted as 0, the next as `1`, then `2`, and so on.

 At least two counter symbols must be specified in the `symbols` descriptor or the counter style is not valid.

  `additive`  Used to represent "sign-value" numbering systems, such as Roman numerals, which rather than reuse digits in different positions to obtain different values, define additional digits for larger values. The value of a number in such a system can be found out by adding the digits in the number.

 An additional descriptor called `additive-symbols` must be specified with at least one *additive tuple*, or else the counter style rule will not be valid. An additive tuple is similar to a composite counter symbol, which is made up of two parts: a normal counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights or the system is invalid.

  `extends`  Allows authors to use the algorithm of another counter style, but alter its other aspects. If a counter style rule is using the `extends` system, any unspecified descriptors, and their values will be taken from the extended counter style specified. If the specified counter style name in extends, is not a currently defined counter style name, it will instead extend from the decimal counter style.

 It must not contain a `symbols` or `additive-symbols` descriptor, or else the counter style rule is invalid. If one or more counter styles definitions form a cycle with their extends values, the browser will treat all the participating counter styles as extending from the decimal style.

  
Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@counter-style`](../@counter-style) |
| [Initial value](../initial_value) | `symbolic` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
system =   
  cyclic                            [|](../value_definition_syntax#single_bar)  
  numeric                           [|](../value_definition_syntax#single_bar)  
  alphabetic                        [|](../value_definition_syntax#single_bar)  
  symbolic                          [|](../value_definition_syntax#single_bar)  
  additive                          [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) fixed [<integer>](../integer)[?](../value_definition_syntax#question_mark) []](../value_definition_syntax#brackets)              [|](../value_definition_syntax#single_bar)  
  [[](../value_definition_syntax#brackets) extends [<counter-style-name>](../counter-style-name) []](../value_definition_syntax#brackets)    
  

```
Examples
--------


### Cyclic counter



If your browser supports it, this example will render a list like this:

 
```
◉ One
◉ Two
◉ Three

```
 #### CSS

 
```
@counter-style fisheye {
  system: cyclic;
  symbols: ◉;
  suffix: " ";
}

ul {
  list-style: fisheye;
}

```
 #### Result



### Fixed counter



If your browser supports it, this example will render a list like this:

 
```
➀ One
➁ Two
➂ Three
4 Four
5 Five

```
 #### CSS

 
```
@counter-style circled-digits {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: " ";
}

ul {
  list-style: circled-digits;
}

```
 #### Result



### Symbolic counter



If your browser supports it, this example will render a list like this:

 
```
  a. One
  b. Two
  c. Three
 aa. Four
 bb. Five
 cc. Six
aaa. Seven
bbb. Eight

```
 #### CSS

 
```
@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

```
 #### Result



### Alphabetic counter



If your browser supports it, this example will render a list like this:

 
```
 a. One
 b. Two
 c. Three
aa. Four
ab. Five
ac. Six
ba. Seven
bb. Seven

```
 #### CSS

 
```
@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

```
 #### Result



### Numeric counter



If your browser supports it, this example will render a list like this:

 
```
 b. One
 c. Two
ba. Three
bb. Four
bc. Five
ca. Six
cb. Seven
cc. Eight

```
 The first symbol provided in the `symbols` descriptor is interpreted as `0` here.

 #### CSS

 
```
@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

```
 #### Result



### Numeric counter with numeric symbols



As shown in the following example, if digits from `0` to `9` are specified as symbols, this counter style will render symbols same as the decimal counter style.

 #### CSS

 
```
@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

```
 #### Result



### Additive counter



This example renders a list using Roman numerals. Notice that a `range` is specified. This is because the representation will produce correct Roman numerals only until the counter value of `3999`. Once outside of the range, the rest of the counter representations will be based on the `decimal` style, which is the fall back. If you need to represent counter values as Roman numerals, you could use either one of the predefined counter styles, `upper-roman` or `lower-roman`, rather than recreating the rule yourself.

 #### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style upper-roman {
  system: additive;
  range: 1 3999;
  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL,
    10 X, 9 IX, 5 V, 4 IV, 1 I;
}

ul {
  list-style: upper-roman;
}

```
 #### Result



### Extends example



This example will use the algorithm, symbols, and other properties of the `lower-alpha` counter style, but will remove the period (`'.'`) after the counter representation, and enclose the characters in parenthesis; like `(a)`, `(b)`, etc.

 #### HTML

 
```
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

```
 #### CSS

 
```
@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # counter-style-system](https://w3c.github.io/csswg-drafts/css-counter-styles/#counter-style-system) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `system` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |


See also
--------


* [`list-style`](../list-style), [`list-style-image`](../list-style-image), [`list-style-position`](../list-style-position)
* [`symbols()`](symbols), the functional notation creating anonymous counter styles.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/system>

table-layout
============


The `table-layout` CSS property sets the algorithm used to lay out [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) cells, rows, and columns.


Try it
------


Syntax
------



```
/\* Keyword values \*/
table-layout: auto;
table-layout: fixed;

/\* Global values \*/
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;

```
### Values


 `auto`  By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.

  `fixed`  Table and column widths are set by the widths of `table` and `col` elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

 Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the [`overflow`](overflow) property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | `table` and `inline-table` elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
table-layout =   
  auto   [|](value_definition_syntax#single_bar)  
  fixed    
  

```
Examples
--------


### Fixed-width tables with text-overflow



This example uses a fixed table layout, combined with the [`width`](width) property, to restrict the table's width. The [`text-overflow`](text-overflow) property is used to apply an ellipsis to words that are too long to fit. If the table layout were `auto`, the table would grow to accommodate its contents, despite the specified `width`.

 #### HTML

 
```
<table>
  <tr>
    <td>Ed</td>
    <td>Wood</td>
  </tr>
  <tr>
    <td>Albert</td>
    <td>Schweitzer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>

```
 #### CSS

 
```
table {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # width-layout](https://w3c.github.io/csswg-drafts/css2/#width-layout) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `table-layout` | 14 | 12 | 1 | 5 | 7 | 1 | 1.5 | 18 | 4 | 10.1 | 3 | 1.0 |


See also
--------


* [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout>

text-align-last
===============


The `text-align-last` CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.


Try it
------


Syntax
------



```
/\* Keyword values \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/\* Global values \*/
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: revert-layer;
text-align-last: unset;

```
### Values


 `auto`  The affected line is aligned per the value of [`text-align`](text-align), unless [`text-align`](text-align) is `justify`, in which case the effect is the same as setting `text-align-last` to `start`.

  `start`  The same as `left` if direction is left-to-right and `right` if direction is right-to-left.

  `end`  The same as `right` if direction is left-to-right and `left` if direction is right-to-left.

  `left`  The inline contents are aligned to the left edge of the line box.

  `right`  The inline contents are aligned to the right edge of the line box.

  `center`  The inline contents are centered within the line box.

  `justify`  The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | block containers |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-align-last =   
  auto          [|](value_definition_syntax#single_bar)  
  start         [|](value_definition_syntax#single_bar)  
  end           [|](value_definition_syntax#single_bar)  
  left          [|](value_definition_syntax#single_bar)  
  right         [|](value_definition_syntax#single_bar)  
  center        [|](value_definition_syntax#single_bar)  
  justify       [|](value_definition_syntax#single_bar)  
  match-parent    
  

```
Examples
--------


### Justifying the last line



#### CSS

 
```
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # text-align-last-property](https://w3c.github.io/csswg-drafts/css-text/#text-align-last-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-align-last` | 47 | 12 | 4912–53 | 5.5["IE only supports `text-align-last` when `text-align` is set to `justify`.", "The `start` and `end` values are not supported."] | 34 | 16 | 47 | 47 | 4914–53 | 34 | 16 | 5.0 |


See also
--------


* [`text-align`](text-align)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last>

text-decoration-color
=====================



The `text-decoration-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the color of decorations added to text by [`text-decoration-line`](text-decoration-line).

 The color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value.



Try it
------



 CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the [`text-decoration-line`](text-decoration-line) property), and specifying the line color (with `text-decoration-color`) on a per-element basis.


Syntax
------



```
/\* <color> values \*/
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

/\* Global values \*/
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;

```
### Values


 [`<color>`](color_value)  The color of the line decoration.

  Accessibility concerns
----------------------



It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.

 Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enough to indicate a link has focus.

 * [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
text-decoration-color =   
  [<color>](color_value)    
  

```
Examples
--------


### Basic example




```
<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>

```
 
```
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-decoration-color-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-decoration-color-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration-color` | 57 | 79 | 366–39 | No | 44 | 12.18 | 57 | 57 | 366–39 | 43 | 12.28 | 7.0 |


See also
--------


* When setting multiple line-decoration properties at once, it may be more convenient to use the [`text-decoration`](text-decoration) shorthand property instead.
* The [`<color>`](color_value) data type
* Other color-related properties: [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color>

text-decoration-skip
====================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `text-decoration-skip` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets what parts of an element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

  **Note:** Most other browsers are converging on supporting the simpler [`text-decoration-skip-ink`](text-decoration-skip-ink) property.

  
```
/\* Keyword values \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* Multiple keywords \*/
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/\* Global values \*/
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: revert;
text-decoration-skip: revert-layer;
text-decoration-skip: unset;

```


Syntax
------


### Values


 `none`  Nothing is skipped. Thus, text decoration is drawn for all text content and across atomic inline-level boxes.

  `objects`  The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.

  `spaces`  All spacing is skipped: all [Unicode white space characters](https://www.unicode.org/reports/tr44/#White_Space) and all word separators, plus any adjacent [`letter-spacing`](letter-spacing) or [`word-spacing`](word-spacing).

  `leading-spaces`  The same as `spaces`, except that only leading spaces are skipped.

  `trailing-spaces`  The same as `spaces`, except that only trailing spaces are skipped.

  `edges`  The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)

  ![An example of "text-decoration-skip: edges;".] 

  `box-decoration`  The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a *decorating box* never draws over its own box decoration.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `objects` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-decoration-skip =   
  none  [|](value_definition_syntax#single_bar)  
  auto    
  

```
Examples
--------


### Skipping edges



#### HTML

 
```
<p>Hey, grab a cup of <em>coffee!</em></p>

```
 #### CSS

 
```
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 4 # text-decoration-skipping](https://w3c.github.io/csswg-drafts/css-text-decor-4/#text-decoration-skipping) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration-skip` | 57–64Only supports the deprecated `ink` value. | No | No | No | 44–50Only supports the deprecated `ink` value. | 12.1Supports only `none`, `auto`, and `objects` values.7Supports only `none`, `auto`, and `objects` values. | 57–64Only supports the deprecated `ink` value. | 57–64Only supports the deprecated `ink` value. | No | 43–46Only supports the deprecated `ink` value. | 12.2Supports only `none`, `auto`, and `objects` values.7Supports only `none`, `auto`, and `objects` values. | 7.0–9.0Only supports the deprecated `ink` value. |


See also
--------


* [`text-decoration-skip-ink`](text-decoration-skip-ink)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip>

text-decoration-skip-ink
========================


The `text-decoration-skip-ink` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.


Try it
------



 `text-decoration-skip-ink` is not part of the [`text-decoration`](text-decoration) shorthand.


Syntax
------



```
/\* Single keyword \*/
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/\* Global keywords \*/
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

```
### Values


 `none`  Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.

  `auto`  The default — the browser *may* interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.

  `all`  The browser *must* interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the `auto` behavior might not create interruptions.

  ![An example of "text-decoration-skip-ink".] 

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-decoration-skip-ink =   
  auto  [|](value_definition_syntax#single_bar)  
  none  [|](value_definition_syntax#single_bar)  
  all     
  

```
Examples
--------


### HTML



```
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>

```
### CSS



```
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /\* this is the default anyway \*/
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property](https://w3c.github.io/csswg-drafts/css-text-decor-4/#text-decoration-skip-ink-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration-skip-ink` | 64 | 79 | 70 | No | 50 | 15.4 | 64 | 64 | No | 46 | 15.4 | 9.0 |
| `all` | No | No | 75 | No | No | preview | No | No | No | No | No | No |


See also
--------


* [`text-decoration`](text-decoration)
* [`text-decoration-skip`](text-decoration-skip)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink>

text-decoration-thickness
=========================


The `text-decoration-thickness` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.


Try it
------


Syntax
------



```
/\* Single keyword \*/
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/\* length \*/
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/\* percentage \*/
text-decoration-thickness: 10%;

/\* Global values \*/
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;

```
### Values


 `auto`  The browser chooses an appropriate width for the text decoration line.

  `from-font`  If the font file includes information about a preferred thickness, use that value. If the font file doesn't include this information, behave as if `auto` was set, with the browser choosing an appropriate thickness.

  `<length>`  Specifies the thickness of the text decoration line as a [`<length>`](length), overriding the font file suggestion or the browser default.

  `<percentage>`  Specifies the thickness of the text decoration line as a [`<percentage>`](percentage) of **1em** in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the font size of the element itself |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
text-decoration-thickness =   
  auto          [|](value_definition_syntax#single_bar)  
  from-font     [|](value_definition_syntax#single_bar)  
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Varying thickness



#### HTML

 
```
<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>

```
 #### CSS

 
```
.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 4 # text-decoration-width-property](https://w3c.github.io/csswg-drafts/css-text-decor-4/#text-decoration-width-property) |


 **Note:** The property used to be called `text-decoration-width`, but was updated in 2019 to `text-decoration-thickness`.

 
Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration-thickness` | 8987–89The `text-decoration-thickness` property does not work unless either `text-underline-offset` is set to something other than `auto` or `text-decoration-color` is set to something other than `currentColor`. See [Chromium bug 1154537](https://crbug.com/1154537). | 8987–89The `text-decoration-thickness` property does not work unless either `text-underline-offset` is set to something other than `auto` or `text-decoration-color` is set to something other than `currentColor`. See [Chromium bug 1154537](https://crbug.com/1154537). | 70 | No | 7573–75The `text-decoration-thickness` property does not work unless either `text-underline-offset` is set to something other than `auto` or `text-decoration-color` is set to something other than `currentColor`. See [Chromium bug 1154537](https://crbug.com/1154537). | 12.1 | 8987–89The `text-decoration-thickness` property does not work unless either `text-underline-offset` is set to something other than `auto` or `text-decoration-color` is set to something other than `currentColor`. See [Chromium bug 1154537](https://crbug.com/1154537). | 8987–89The `text-decoration-thickness` property does not work unless either `text-underline-offset` is set to something other than `auto` or `text-decoration-color` is set to something other than `currentColor`. See [Chromium bug 1154537](https://crbug.com/1154537). | No | 63 | 12.2 | 15.0 |
| `percentage` | No | No | 74 | No | No | No | No | No | No | No | No | No |


See also
--------


* [`text-decoration`](text-decoration)
* [`text-underline-offset`](text-underline-offset)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness>

text-combine-upright
====================



The `text-combine-upright` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.

 This is used to produce an effect that is known as tate-chū-yoko 縦中横 in Japanese, or as 橫向文字 in Chinese.



Try it
------


Syntax
------



```
/\* Keyword values \*/
text-combine-upright: none;
text-combine-upright: all;

/\* Digits values \*/
text-combine-upright: digits; /\* fits 2 consecutive digits horizontally inside vertical text \*/
text-combine-upright: digits 4; /\* fits up to 4 consecutive digits horizontally inside vertical text \*/

/\* Global values \*/
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;

```
### Values


 `none`  There is no special processing.

  `all`  Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.

  `digits <integer>?`  Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | non-replaced inline elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | specified keyword, plus integer if 'digits' |
| Animation type | Not animatable |

Formal syntax
-------------



```
text-combine-upright =   
  none                         [|](value_definition_syntax#single_bar)  
  all                          [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) digits [<integer [2,4]>](integer)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Example using "digits"



The digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers.

 #### HTML

 
```
<p lang="ja" class="exampleText">平成20年4月16日に</p>

```
 #### CSS

 
```
.exampleText {
  writing-mode: vertical-lr;
  text-combine-upright: digits 2;
  font: 36px serif;
}

```
 #### Results




| Screenshot | Live sample |
| --- | --- |
|  |  |


### Example using "all"



The all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.

 #### HTML

 
```
<p lang="zh-Hant">
  民國<span class="num">105</span>年<span class="num">4</span>月<span
 class="num"
 >29</span
 >日
</p>

```
 #### CSS

 
```
html {
  writing-mode: vertical-rl;
  font: 24px serif;
}
.num {
  text-combine-upright: all;
}

```
 #### Results




| Screenshot | Live sample |
| --- | --- |
|  |  |


Specifications
--------------




| Specification |
| --- |
| [CSS Writing Modes Level 4 # text-combine-upright](https://w3c.github.io/csswg-drafts/css-writing-modes/#text-combine-upright) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-combine-upright` | 489This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. | 15–7912–79 | 48Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81. | 11 | 3515This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. | 5.1This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`.preview | 48≤37This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. | 4818This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. | 48Before version 81, Firefox implemented the property as animatable. This was corrected to spec in 81. | 3514This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. | 15.45This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. | 5.01.0This property was initially named `-webkit-text-combine` according to a [2011 version of the CSS3 Writing Modes specification](https://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/#text-combine), supporting the values `none` and `horizontal` without `digits`. |
| `digits` | No | 15–7912–79 | No | 11 | No | No | No | No | No | No | No | No |


See also
--------


* [`writing-mode`](writing-mode), [`text-orientation`](text-orientation)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright>

text-decoration-line
====================


The `text-decoration-line` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the kind of decoration that is used on text in an element, such as an underline or overline.


Try it
------



 When setting multiple line-decoration properties at once, it may be more convenient to use the [`text-decoration`](text-decoration) shorthand property instead.


Syntax
------




```
/\* Single keyword \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/\* Multiple keywords \*/
text-decoration-line: underline overline; /\* Two decoration lines \*/
text-decoration-line: overline underline line-through; /\* Multiple decoration lines \*/

/\* Global values \*/
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

```
 The `text-decoration-line` property is specified as `none`, or **one or more** space-separated values from the list below.


### Values


 `none`  Produces no text decoration.

  `underline`  Each line of text has a decorative line beneath it.

  `overline`  Each line of text has a decorative line above it.

  `line-through`  Each line of text has a decorative line going through its middle.

  
`blink`  Deprecated 
  The text blinks (alternates between visible and invisible). Conforming user agents may not blink the text. This value is **deprecated** in favor of [CSS animations](animation).

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-decoration-line =   
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) underline [||](value_definition_syntax#double_bar) overline [||](value_definition_syntax#double_bar) line-through [||](value_definition_syntax#double_bar) blink []](value_definition_syntax#brackets)    
  

```
Examples
--------


### Basic example




```
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>

```
 
```
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-decoration-line-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-decoration-line-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration-line` | 57 | 79 | 366–39 | No | 44 | 12.18 | 57 | 57 | 366–39 | 43 | 12.28 | 7.0 |
| `blink` | 57The `blink` value does not have any effect. | 79The `blink` value does not have any effect. | 26The `blink` value does not have any effect. | No | 44 | 8 | 57The `blink` value does not have any effect. | 57The `blink` value does not have any effect. | 26The `blink` value does not have any effect. | 43 | 8 | 7.0The `blink` value does not have any effect. |


See also
--------


* When setting multiple line-decoration properties at once, it may be more convenient to use the [`text-decoration`](text-decoration) shorthand property instead, which also includes:
	+ [`text-decoration-style`](text-decoration-style)
	+ [`text-decoration-color`](text-decoration-color)
	+ [`text-decoration-thickness`](text-decoration-thickness)
* [`text-underline-offset`](text-underline-offset)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line>

text-decoration-style
=====================


The `text-decoration-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the style of the lines specified by [`text-decoration-line`](text-decoration-line). The style applies to all lines that are set with `text-decoration-line`.


Try it
------



 If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del) or [`<s>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s). As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

 When setting multiple line-decoration properties at once, it may be more convenient to use the [`text-decoration`](text-decoration) shorthand property instead.


Syntax
------



```
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/\* Global values \*/
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;

```
### Values


 solid  Draws a single line.

  double  Draws a double line.

  dotted  Draws a dotted line.

  dashed  Draws a dashed line.

  wavy  Draws a wavy line.

  -moz-none  Non-standard 
  Draws no line. Use [`text-decoration-line`](text-decoration-line)`: none` instead.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `solid` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-decoration-style =   
  solid   [|](value_definition_syntax#single_bar)  
  double  [|](value_definition_syntax#single_bar)  
  dotted  [|](value_definition_syntax#single_bar)  
  dashed  [|](value_definition_syntax#single_bar)  
  wavy      
  

```
Examples
--------


### Setting a wavy underline



The following creates a red wavy underline:

 #### CSS

 
```
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

```
 #### HTML

 
```
<p class="wavy">This text has a wavy red line beneath it.</p>

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-decoration-style-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-decoration-style-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration-style` | 57 | 79 | 366–39 | No | 44 | 12.18 | 57 | 57 | 366–39 | 43 | 12.28 | 7.0 |
| `wavy` | 57 | 79 | 6 | No | 44 | 8 | 57 | 57 | 6 | 43 | 8 | 7.0 |


See also
--------


* When setting multiple line-decoration properties at once, it may be more convenient to use the [`text-decoration`](text-decoration) shorthand property instead.
* [`text-decoration-line`](text-decoration-line)
* [`text-decoration-color`](text-decoration-color)
* [`text-decoration-thickness`](text-decoration-thickness)
* [`text-underline-offset`](text-underline-offset)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style>

text-decoration
===============


The `text-decoration` [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the appearance of decorative lines on text. It is a shorthand for [`text-decoration-line`](text-decoration-line), [`text-decoration-color`](text-decoration-color), [`text-decoration-style`](text-decoration-style), and the newer [`text-decoration-thickness`](text-decoration-thickness) property.


Try it
------



 Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration. For example, in the markup `<p>This text has <em>some emphasized words</em> in it.</p>`, the style rule `p { text-decoration: underline; }` would cause the entire paragraph to be underlined. The style rule `em { text-decoration: none; }` would not cause any change; the entire paragraph would still be underlined. However, the rule `em { text-decoration: overline; }` would cause a second decoration to appear on "some emphasized words".


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`text-decoration-color`](text-decoration-color)
* [`text-decoration-line`](text-decoration-line)
* [`text-decoration-style`](text-decoration-style)
* [`text-decoration-thickness`](text-decoration-thickness)


Syntax
------




```
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

/\* Global values \*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

```
 The `text-decoration` property is specified as one or more space-separated values representing the various longhand text-decoration properties.


### Values


 [`text-decoration-line`](text-decoration-line)  Sets the kind of decoration used, such as `underline` or `line-through`.

  [`text-decoration-color`](text-decoration-color)  Sets the color of the decoration.

  [`text-decoration-style`](text-decoration-style)  Sets the style of the line used for the decoration, such as `solid`, `wavy`, or `dashed`.

  [`text-decoration-thickness`](text-decoration-thickness)  Sets the thickness of the line used for the decoration.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`text-decoration-color`](text-decoration-color): `currentcolor`
* [`text-decoration-style`](text-decoration-style): `solid`
* [`text-decoration-line`](text-decoration-line): `none`
 |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`text-decoration-line`](text-decoration-line): as specified
* [`text-decoration-style`](text-decoration-style): as specified
* [`text-decoration-color`](text-decoration-color): computed color
* [`text-decoration-thickness`](text-decoration-thickness): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`text-decoration-color`](text-decoration-color): a [color](color_value#interpolation)
* [`text-decoration-style`](text-decoration-style): discrete
* [`text-decoration-line`](text-decoration-line): discrete
* [`text-decoration-thickness`](text-decoration-thickness): by computed value type
 |

Formal syntax
-------------



```
text-decoration =   
  <'text-decoration-line'>   [||](value_definition_syntax#double_bar)  
  <'text-decoration-style'>  [||](value_definition_syntax#double_bar)  
  <'text-decoration-color'>    
  

```
Examples
--------


### Demonstration of text-decoration values




```
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

```
 
```
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-decoration-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-decoration-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-decoration` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `blink` | No | No | 1–23 | No | 4–15 | preview | No | No | 4–23 | 10.1–14 | No | No |
| `shorthand` | 57 | 79 | 6 | No | 44 | 8 | 57 | 57 | 6 | 43 | 8 | 7.0 |
| `text-decoration-thickness` | 87 | 87 | 70 | No | 73 | No | 87 | 87 | 79 | 62 | No | 14.0 |


See also
--------


* The individual text-decoration properties are [`text-decoration-line`](text-decoration-line), [`text-decoration-color`](text-decoration-color), [`text-decoration-style`](text-decoration-style), and [`text-decoration-thickness`](text-decoration-thickness).
* The [`text-decoration-skip-ink`](text-decoration-skip-ink), [`text-underline-offset`](text-underline-offset), and [`text-underline-position`](text-underline-position) properties also affect text-decoration, but are not included in the shorthand.
* The [`list-style`](list-style) attribute controls the appearance of items in HTML [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) and [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) lists.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration>

text-emphasis
=============


The `text-emphasis` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property applies emphasis marks to text (except spaces and control characters). It is a [shorthand](shorthand_properties) for [`text-emphasis-style`](text-emphasis-style) and [`text-emphasis-color`](text-emphasis-color).


Try it
------



 The `text-emphasis` property is quite different from [`text-decoration`](text-decoration). The `text-decoration` property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendants.

 The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and `text-emphasis` may affect line height when the current leading is not enough for the marks.

  **Note:** `text-emphasis` doesn't reset the value of [`text-emphasis-position`](text-emphasis-position). This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, use the property [`text-emphasis-position`](text-emphasis-position).

 
Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`text-emphasis-color`](text-emphasis-color)
* [`text-emphasis-style`](text-emphasis-style)


Syntax
------



```
/\* Initial value \*/
text-emphasis: none; /\* No emphasis marks \*/

/\* <string> value \*/
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "\*" #555;
text-emphasis: "foo"; /\* Should NOT use. It may be computed to or rendered as 'f' only \*/

/\* Keywords value \*/
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/\* Keywords value combined with a color \*/
text-emphasis: filled sesame #555;

/\* Global values \*/
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;

```
### Values


 `none`  No emphasis marks.

  `filled`  The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.

  `open`  The shape is hollow.

  `dot`  Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).

  `circle`  Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`). This is the default shape in horizontal writing modes when no other shape is given.

  `double-circle`  Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).

  `triangle`  Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).

  `sesame`  Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`). This is the default shape in vertical writing modes when no other shape is given.

  `<string>`  Display the given string as marks. Authors should not specify more than one *character* in `<string>`. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

  `<color>`  Defines the color of the mark. If no color is present, it defaults to `currentcolor`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`text-emphasis-style`](text-emphasis-style): `none`
* [`text-emphasis-color`](text-emphasis-color): `currentcolor`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`text-emphasis-style`](text-emphasis-style): as specified
* [`text-emphasis-color`](text-emphasis-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`text-emphasis-color`](text-emphasis-color): a [color](color_value#interpolation)
* [`text-emphasis-style`](text-emphasis-style): discrete
 |

Formal syntax
-------------



```
text-emphasis =   
  <'text-emphasis-style'>  [||](value_definition_syntax#double_bar)  
  <'text-emphasis-color'>    
  

```
Examples
--------


### A heading with emphasis shape and color



This example draws a heading with triangles used to emphasize each character.

 #### CSS

 
```
h2 {
  text-emphasis: triangle #d55;
}

```
 #### HTML

 
```
<h2>This is important!</h2>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-emphasis-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-emphasis-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-emphasis` | 9925 | 9979 | 46 | No | 15 | 77 | 4.4 | 9925 | 46 | 14 | 77 | 18.01.5 |


See also
--------


* The longhand properties [`text-emphasis-style`](text-emphasis-style), [`text-emphasis-color`](text-emphasis-color).
* The [`text-emphasis-position`](text-emphasis-position) property allowing to define the position of the emphasis marks.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis>

text-emphasis-color
===================


The `text-emphasis-color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the color of emphasis marks. This value can also be set using the [`text-emphasis`](text-emphasis) shorthand.


Try it
------


Syntax
------



```
/\* Initial value \*/
text-emphasis-color: currentcolor;

/\* <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

/\* Global values \*/
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;

```
### Values


 `<color>`  Defines the color of the emphasis marks. If no color is present, it defaults to `currentcolor`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
text-emphasis-color =   
  [<color>](color_value)    
  

```
Examples
--------


### Emphasis with a color and custom character



#### CSS

 
```
em {
  text-emphasis-color: green;
  text-emphasis-style: "\*";
}

```
 #### HTML

 
```
<p>Here's an example:</p>

<em>This has emphasis marks!</em>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-emphasis-color-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-emphasis-color-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-emphasis-color` | 9925 | 9979 | 46 | No | 15 | 77 | 4.4 | 9925 | 46 | 14 | 77 | 18.01.5 |


See also
--------


* The [`<color>`](color_value) data type
* The other emphasis mark related properties: [`text-emphasis-style`](text-emphasis-style), [`text-emphasis`](text-emphasis), and [`text-emphasis-position`](text-emphasis-position).
* Other color-related properties: [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`outline-color`](outline-color), [`text-emphasis-color`](text-emphasis-color), [`text-shadow`](text-shadow), [`caret-color`](caret-color), and [`column-rule-color`](column-rule-color)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color>

text-emphasis-position
======================


The `text-emphasis-position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased.


Try it
------


Syntax
------



```
/\* Initial value \*/
text-emphasis-position: over right;

/\* Keywords value \*/
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/\* Global values \*/
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

```
### Values


 `over`  Draws marks over the text in horizontal writing mode.

  `under`  Draws marks under the text in horizontal writing mode.

  `right`  Draws marks to the right of the text in vertical writing mode.

  `left`  Draws marks to the left of the text in vertical writing mode.

  Description
-----------



The preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is `over right`. In Chinese, on the other hand, the preferred position is `under right`. The informative table below summarizes the preferred emphasis mark positions for Chinese, Mongolian and Japanese:

 

Preferred emphasis mark and ruby position| Language | Preferred position | Illustration |
| --- | --- | --- |
| Horizontal | Vertical |
| Japanese | over | right | Emphasis marks appear over each emphasized character in horizontal Japanese text. | Emphasis marks appear on the right of each emphasized character in vertical Japanese text. |
| Korean |
| Mongolian |
| Chinese | under | right | Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text. |

  **Note:** The `text-emphasis-position` cannot be set, and therefore are not reset either, using the [`text-emphasis`](text-emphasis) shorthand property.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `over right` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-emphasis-position =   
  [[](value_definition_syntax#brackets) over [|](value_definition_syntax#single_bar) under []](value_definition_syntax#brackets)   [&&](value_definition_syntax#double_ampersand)  
  [[](value_definition_syntax#brackets) right [|](value_definition_syntax#single_bar) left []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  

```
Examples
--------


### Preferring ruby over emphasis marks



Some editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule:

 
```
ruby {
  text-emphasis: none;
}

```

### Preferring emphasis marks over ruby



Some other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern:

 
```
em {
  text-emphasis: dot; /\* Set text-emphasis for <em> elements \*/
}

em rt {
  display: none; /\* Hide ruby inside <em> elements \*/
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-emphasis-position-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-emphasis-position-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-emphasis-position` | 9925 | 9979 | 46 | No | 15 | 77 | 4.4 | 9925 | 46 | 14 | 77 | 18.01.5 |
| `left_and_right` | 62 | 79 | 46 | No | 49 | 8 | 62 | 62 | 46 | 46 | 8 | 8.0 |


See also
--------


* The longhand properties [`text-emphasis-style`](text-emphasis-style), [`text-emphasis-color`](text-emphasis-color), and the corresponding shorthand property [`text-emphasis`](text-emphasis).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position>

text-emphasis-style
===================


The `text-emphasis-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the appearance of emphasis marks. It can also be set, and reset, using the [`text-emphasis`](text-emphasis) shorthand.


Try it
------


Syntax
------



```
/\* Initial value \*/
text-emphasis-style: none; /\* No emphasis marks \*/

/\* <string> values \*/
text-emphasis-style: "x";
text-emphasis-style: "点";
text-emphasis-style: "\25B2";
text-emphasis-style: "\*";
text-emphasis-style: "foo"; /\* Should NOT be used. It may be computed to or rendered as 'f' only \*/

/\* Keyword values \*/
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: filled sesame;
text-emphasis-style: open sesame;

/\* Global values \*/
text-emphasis-style: inherit;
text-emphasis-style: initial;
text-emphasis-style: revert;
text-emphasis-style: revert-layer;
text-emphasis-style: unset;

```
### Values


 `none`  No emphasis marks.

  `filled`  The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.

  `open`  The shape is hollow.

  `dot`  Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).

  `circle`  Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`).

  `double-circle`  Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).

  `triangle`  Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).

  `sesame`  Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`).

  `<string>`  Display the given string as marks. Authors should not specify more than one *character* in `<string>`. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-emphasis-style =   
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) filled [|](value_definition_syntax#single_bar) open []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) dot [|](value_definition_syntax#single_bar) circle [|](value_definition_syntax#single_bar) double-circle [|](value_definition_syntax#single_bar) triangle [|](value_definition_syntax#single_bar) sesame []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [<string>](string)                                              
  

```
Examples
--------


### Basic example



```
h2 {
  -webkit-text-emphasis-style: sesame;
  text-emphasis-style: sesame;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-emphasis-style-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-emphasis-style-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-emphasis-style` | 9925 | 9979 | 46 | No | 15 | 77 | 4.4 | 9925 | 46 | 14 | 77 | 18.01.5 |


See also
--------


* The related properties [`text-emphasis-color`](text-emphasis-color), [`text-emphasis`](text-emphasis).
* The [`text-emphasis-position`](text-emphasis-position) property allowing to define the position of the emphasis marks.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style>

text-justify
============


The `text-justify` CSS property sets what type of justification should be applied to text when [`text-align`](text-align)`: justify;` is set on an element.


Syntax
------



```
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /\* Deprecated value \*/

/\* Global values \*/
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

```
### Values


 `none`  The text justification is turned off. This has the same effect as not setting [`text-align`](text-align) at all, although it is useful if you need to turn justification on and off for some reason.

  `auto`  The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., English, CJK languages, etc.). This is the default justification used if `text-justify` is not set at all.

  `inter-word`  The text is justified by adding space between words (effectively varying [`word-spacing`](word-spacing)), which is most appropriate for languages that separate words using spaces, like English or Korean.

  `inter-character`  The text is justified by adding space between characters (effectively varying [`letter-spacing`](letter-spacing)), which is most appropriate for languages like Japanese.

  
`distribute`  Deprecated 
  Exhibits the same behavior as `inter-character`; this value is kept for backwards compatibility.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | inline-level and table-cell elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-justify =   
  auto             [|](value_definition_syntax#single_bar)  
  none             [|](value_definition_syntax#single_bar)  
  inter-word       [|](value_definition_syntax#single_bar)  
  inter-character    
  

```
Examples
--------


### Demonstration of the different values of text-justify




```
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # text-justify-property](https://w3c.github.io/csswg-drafts/css-text/#text-justify-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-justify` | 32`inter-word` and `distribute` (deprecated) values are supported, but `distribute` behavior is buggy. | 12Standard values `inter-character` and `none` are supported. The deprecated `distribute` value is also supported. | 55 | 11Standard values `inter-character` and `none` are supported. The deprecated `distribute` value is also supported. | 19`inter-word` and `distribute` (deprecated) values are supported, but `distribute` behavior is buggy. | NoSee [bug 9945](https://webkit.org/b/99945). | No | 32`inter-word` and `distribute` (deprecated) values are supported, but `distribute` behavior is buggy. | 55 | No | NoSee [bug 9945](https://webkit.org/b/99945). | No |


See also
--------


* [`text-align`](text-align)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify>

text-orientation
================


The `text-orientation` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the orientation of the text characters in a line. It only affects text in vertical mode (when [`writing-mode`](writing-mode) is not `horizontal-tb`). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.


Try it
------


Syntax
------




```
/\* Keyword values \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/\* Global values \*/
text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;

```
 The `text-orientation` property is specified as a single keyword from the list below.


### Values


 `mixed`  Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.

  `upright`  Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of [`direction`](direction) is forced to be `ltr`.

  `sideways`  Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.

  `sideways-right`  An alias to `sideways` that is kept for compatibility purposes.

  `use-glyph-orientation`  On SVG elements, this keyword leads to use the value of the deprecated SVG properties `glyph-orientation-vertical` and `glyph-orientation-horizontal`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `mixed` |
| Applies to | all elements, except table row groups, rows, column groups, and columns |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-orientation =   
  mixed     [|](value_definition_syntax#single_bar)  
  upright   [|](value_definition_syntax#single_bar)  
  sideways    
  

```
Examples
--------


### HTML



```
<p>Lorem ipsum dolet semper quisquam.</p>

```
### CSS



```
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Writing Modes Level 4 # text-orientation](https://w3c.github.io/csswg-drafts/css-writing-modes/#text-orientation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-orientation` | 4811 | 7979 | 41 | No | 3515 | 145.1 | 48≤37 | 4818 | 41 | 3514 | 145 | 5.01.0 |
| `sideways` | No | No | 44`sideways-right` has become an alias of `sideways`. | No | No | 7 | No | No | 44`sideways-right` has become an alias of `sideways`. | No | 7 | No |


See also
--------


* The other vertical-script related CSS properties: [`writing-mode`](writing-mode), [`text-combine-upright`](text-combine-upright), and [`unicode-bidi`](unicode-bidi).
* [CSS Logical properties](css_logical_properties)
* [Styling vertical text (Chinese, Japanese, Korean and Mongolian)](https://www.w3.org/International/articles/vertical-text/)
* Extensive browsers support test results: <https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation>


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation>

text-rendering
==============



The `text-rendering` CSS property provides information to the rendering engine about what to optimize for when rendering text.

 The browser makes trade-offs among speed, legibility, and geometric precision.

 
```
/\* Keyword values \*/
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/\* Global values \*/
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
text-rendering: revert-layer;
text-rendering: unset;

```
  **Note:** The `text-rendering` property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.

  One very visible effect is `optimizeLegibility`, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's *Calibri*, *Candara*, *Constantia*, and *Corbel*, or the *DejaVu* font family).



Syntax
------


### Values


 
`auto`  Non-standard 
  The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.

  `optimizeSpeed`  The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

  `optimizeLegibility`  The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

  
`geometricPrecision`  Non-standard 
  The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good.

 In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

 But the `geometricPrecision` property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

  **Note:** WebKit precisely applies the specified value, but Gecko treats the value the same as `optimizeLegibility`.

   Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | text elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-rendering =   
  auto                [|](value_definition_syntax#single_bar)  
  optimizeSpeed       [|](value_definition_syntax#single_bar)  
  optimizeLegibility  [|](value_definition_syntax#single_bar)  
  geometricPrecision    
  

```
Examples
--------


### Automatic application of optimizeLegibility



This demonstrates how `optimizeLegibility` is used by browsers automatically when the `font-size` is smaller than `20px`.

 #### HTML

 
```
<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

```
 #### CSS

 
```
.small {
  font: 19.9px "Constantia", "Times New Roman", "Georgia", "Palatino", serif;
}
.big {
  font: 20px "Constantia", "Times New Roman", "Georgia", "Palatino", serif;
}

```
 #### Result



### optimizeSpeed vs. optimizeLegibility



This example shows the difference between the appearance of `optimizeSpeed` and `optimizeLegibility` (in your browser; other browsers may vary).

 #### HTML

 
```
<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

```
 #### CSS

 
```
p {
  font: 1.5em "Constantia", "Times New Roman", "Georgia", "Palatino", serif;
}

.speed {
  text-rendering: optimizeSpeed;
}
.legibility {
  text-rendering: optimizeLegibility;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Scalable Vector Graphics (SVG) 2 # TextRenderingProperty](https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-rendering` | 4["This property is only supported on Windows and Linux.", "Initial versions had bugs on Windows and Linux that broke [font substitution](https://crbug.com/114719), [small-caps](https://crbug.com/51973), [letter-spacing](https://crbug.com/55458) or caused [text to overlap](https://crbug.com/149548)."] | 79["This property is only supported on Windows and Linux.", "Initial versions had bugs on Windows and Linux that broke [font substitution](https://crbug.com/114719), [small-caps](https://crbug.com/51973), [letter-spacing](https://crbug.com/55458) or caused [text to overlap](https://crbug.com/149548)."] | 1["This property is only supported on Windows and Linux.", "The `optimizeSpeed` option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See [bug 595688](https://bugzil.la/595688) for details."] | No | 15 | 5 | 3From version 3 to 4.3, there is a serious bug where `text-rendering: optimizeLegibility` causes custom web fonts to not render. This was fixed in version 4.4. | 18["This property is only supported on Windows and Linux.", "Initial versions had bugs on Windows and Linux that broke [font substitution](https://crbug.com/114719), [small-caps](https://crbug.com/51973), [letter-spacing](https://crbug.com/55458) or caused [text to overlap](https://crbug.com/149548)."] | 46 | 14 | 4.2 | 1.0This property is only supported on Windows and Linux. Samsung Internet is not on Windows or Linux. |
| `auto` | 4Chrome treats `auto` as `optimizeSpeed`. | 79Edge treats `auto` as `optimizeSpeed`. | 1If the font size is 20 pixels or higher, Firefox treats `auto` as `optimizeLegibility`. For smaller text, Firefox treats `auto` as `optimizeSpeed`. The 20-pixel threshold can be changed with the `browser.display.auto_quality_min_font_size` preference. | No | 15Opera treats `auto` as `optimizeSpeed`. | 5Safari treats `auto` as `optimizeSpeed`. See [WebKit bug 41363](https://webkit.org/b/41363). | ≤37WebView treats `auto` as `optimizeSpeed`. | 18Chrome treats `auto` as `optimizeSpeed`. | 46If the font size is 20 pixels or higher, Firefox treats `auto` as `optimizeLegibility`. For smaller text, Firefox treats `auto` as `optimizeSpeed`. The 20-pixel threshold can be changed with the `browser.display.auto_quality_min_font_size` preference. | 14Opera treats `auto` as `optimizeSpeed`. | 4.2Safari treats `auto` as `optimizeSpeed`. See [WebKit bug 41363](https://webkit.org/b/41363). | 1.0Samsung Internet treats `auto` as `optimizeSpeed`. |
| `geometricPrecision` | 13Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. | 79Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. | 1Firefox treats `geometricPrecision` the same as `optimizeLegibility`. | No | 15Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. | 6 | 37Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. | 18Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. | 46Firefox treats `geometricPrecision` the same as `optimizeLegibility`. | 14Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. | 6 | 1.0Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |


See also
--------


* [Drawing text in a `<canvas>`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)
* [CSS Text Decoration](css_text_decoration) CSS module
* Related CSS properties
	+ [`text-decoration`](text-decoration) (and its longhand properties, such as [`text-decoration-line`](text-decoration-line), [`text-decoration-style`](text-decoration-style), and [`text-decoration-thickness`](text-decoration-thickness))
	+ [`text-emphasis`](text-emphasis) (and its longhand properties, including [`text-emphasis-color`](text-emphasis-color), [`text-emphasis-position`](text-emphasis-position), and [`text-emphasis-style`](text-emphasis-style))
	+ [`text-shadow`](text-shadow)
	+ [`text-transform`](text-transform)
* The [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) `[text-rendering](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering)` attribute
* [SVG and CSS](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering>

text-overflow
=============


The `text-overflow` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.


Try it
------



 The `text-overflow` property doesn't force an overflow to occur. To make text overflow its container, you have to set other CSS properties: [`overflow`](overflow) and [`white-space`](white-space). For example:

 
```
overflow: hidden;
white-space: nowrap;

```
 The `text-overflow` property only affects content that is overflowing a block container element in its *inline* progression direction (not text overflowing at the bottom of a box, for example).


Syntax
------



The `text-overflow` property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

 
```
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/\* Global values \*/
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

```
 * one of the keyword values: `clip`, `ellipsis`, `fade`
* the function `fade()`, which is passed a [`<length>`](length) or a [`<percentage>`](percentage) to control the fade distance
* a `<string>`.


### Values


 `clip`  The default for this property. This keyword value will truncate the text at the limit of the [content area](css_box_model/introduction_to_the_css_box_model), therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify `text-overflow` as an empty string, if that is supported in your target browsers: `text-overflow: '';`.

  `ellipsis`  This keyword value will display an ellipsis (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) to represent clipped text. The ellipsis is displayed inside the [content area](css_box_model/introduction_to_the_css_box_model), decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.

  
`<string>`  Experimental 
  The [`<string>`](string) to be used to represent clipped text. The string is displayed inside the [content area](css_box_model/introduction_to_the_css_box_model), shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.

  
`fade`  Experimental 
  This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.

  
`fade( <length> | <percentage> )`  Experimental 
  This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.

 The argument determines the distance over which the fade effect is applied. The [`<percentage>`](percentage) is resolved against the width of the line box. Values lower than `0` are clipped to `0`. Values greater than the width of the line box are clipped to the width of the line box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `clip` |
| Applies to | block container elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-overflow =   
  clip      [|](value_definition_syntax#single_bar)  
  ellipsis    
  

```
Examples
--------


### One-value syntax



This example shows different values for `text-overflow` applied to a paragraph, for left-to-right and right-to-left text.

 #### HTML

 
```
<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

```
 #### CSS

 
```
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

```
 #### Result



### Two-value syntax



 This example shows the two-value syntax for `text-overflow`, where you can define different overflow behavior for the start and end of the text. To show the effect we have to scroll the line so the start of the line is also hidden. 

 #### HTML

 
```
<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

```
 #### CSS

 
```
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /\* Both of the following are required for text-overflow \*/
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

```
 #### JavaScript

 
```
// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # text-overflow](https://w3c.github.io/csswg-drafts/css-overflow/#text-overflow) |


A previous version of this interface reached the *Candidate Recommendation* status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the *Working Draft* level, explaining why browsers implemented this property unprefixed, though not at the CR state.


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-overflow` | 1 | 12 | 7Until Firefox 10, handling of `text-overflow` on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as `text-overflow: ellipsis;`), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction. | 86 | 119–15 | 1.3 | ≤37 | 18 | 7Until Firefox 10, handling of `text-overflow` on blocks with inline overflow on both horizontal sides was incorrect. Before Firefox 10, if only one value was specified (such as `text-overflow: ellipsis;`), text was ellipsed on both sides of the block, instead of only the end edge based on the block's text direction. | 1110.1–14 | 1 | 1.0 |
| `string` | No | No | 9 | No | No | No | No | No | 9 | No | No | No |
| `two_value_syntax` | No | No | 9 | No | No | No | No | No | 9 | No | No | No |


See also
--------


* Related CSS properties: [`overflow`](overflow), [`white-space`](white-space)
* CSS properties that control line breaks in words: [`overflow-wrap`](overflow-wrap), [`word-break`](word-break)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow>

text-shadow
===========


The `text-shadow` CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its [`decorations`](text-decoration). Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.


Try it
------


Syntax
------




```
/\* offset-x | offset-y | blur-radius | color \*/
text-shadow: 1px 1px 2px black;

/\* color | offset-x | offset-y | blur-radius \*/
text-shadow: #fc0 1px 0 10px;

/\* offset-x | offset-y | color \*/
text-shadow: 5px 5px #558abb;

/\* color | offset-x | offset-y \*/
text-shadow: white 2px 5px;

/\* offset-x | offset-y
/\* Use defaults for color and blur-radius \*/
text-shadow: 5px 10px;

/\* Global values \*/
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;

```
 This property is specified as a comma-separated list of shadows.

 Each shadow is specified as two or three `<length>` values, followed optionally by a `<color>` value. The first two `<length>` values are the `<offset-x>` and `<offset-y>` values. The third, optional, `<length>` value is the `<blur-radius>`. The `<color>` value is the shadow's color.

 When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

 This property applies to both [`::first-line`](::first-line) and [`::first-letter`](::first-letter) <pseudo-elements>.


### Values


 [`<color>`](color_value)  Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

  `<offset-x> <offset-y>`  Required. These [`<length>`](length) values specify the shadow's distance from the text. `<offset-x>` specifies the horizontal distance; a negative value places the shadow to the left of the text. `<offset-y>` specifies the vertical distance; a negative value places the shadow above the text. If both values are `0`, the shadow is placed directly behind the text, although it may be partly visible due to the effect of `<blur-radius>`.

  `<blur-radius>`  Optional. This is a [`<length>`](length) value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to `0`.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | a color plus three absolute lengths |
| Animation type | a [shadow list](box-shadow#interpolation) |

Formal syntax
-------------



```
text-shadow =   
  none                            [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [<color>](color_value)[?](value_definition_syntax#question_mark) [&&](value_definition_syntax#double_ampersand) [<length>](length)[{2,3}](value_definition_syntax#curly_braces) []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Simple shadow




```
.red-text-shadow {
  text-shadow: red 0 -2px;
}

```
 
```
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

```


### Multiple shadows




```
.white-text-with-blue-shadow {
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  color: white;
  font: 1.5em Georgia, serif;
}

```
 
```
<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-shadow-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-shadow-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-shadow` | 2 | 12 | 3.5["Firefox versions before 57 have a bug whereby [`transition`](https://developer.mozilla.org/docs/Web/CSS/transition)s will not work when transitioning from a `text-shadow` with a color specified to a `text-shadow` without a color specified ([bug 726550](https://bugzil.la/726550)).", "From Firefox 4, the blur radius is capped at 300 for performance reasons.", "Firefox theoretically supports infinite text-shadows (don't try it).", "If the `<color>` value is unspecified, then Firefox uses the value of the element's [`color`](https://developer.mozilla.org/docs/Web/CSS/color) property."] | 10 | 9.5["Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.", "Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom)."] | 1.1["In Safari, any shadows that do not explicitly specify a color are transparent.", "Safari 1.1 to 3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows."] | 37 | 18 | 4["Firefox versions before 57 have a bug whereby [`transition`](https://developer.mozilla.org/docs/Web/CSS/transition)s will not work when transitioning from a `text-shadow` with a color specified to a `text-shadow` without a color specified ([bug 726550](https://bugzil.la/726550)).", "From Firefox 4, the blur radius is capped at 300 for performance reasons.", "Firefox theoretically supports infinite text-shadows (don't try it).", "If the `<color>` value is unspecified, then Firefox uses the value of the element's [`color`](https://developer.mozilla.org/docs/Web/CSS/color) property."] | 14 | 1["In Safari, any shadows that do not explicitly specify a color are transparent.", "Safari iOS 1 and 2 only support one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari iOS 3 (WebKit 528) and later support multiple text-shadows."] | 1.0 |


See also
--------


* The [`<color>`](color_value) data type (for specifying the shadow color)
* [`box-shadow`](box-shadow)
* [`drop-shadow()`](filter-function/drop-shadow)
* [Applying color to HTML elements using CSS](css_colors/applying_color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow>

text-size-adjust
================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `text-size-adjust` [CSS](https://developer.mozilla.org/en-US/docs/Web/API/CSS) property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

 
```
/\* Keyword values \*/
text-size-adjust: none;
text-size-adjust: auto;

/\* <percentage> value \*/
text-size-adjust: 80%;

/\* Global values \*/
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: revert;
text-size-adjust: revert-layer;
text-size-adjust: unset;

```
 Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

 Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The `text-size-adjust` property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.



Syntax
------


The `text-size-adjust` property is specified as `none`, `auto`, or a `<percentage>`.

### Values


 `none`  Disables the browser's inflation algorithm.

  `auto`  Enables the browser's inflation algorithm. This value is used to cancel a `none` value previously set with CSS.

  `<percentage>`  Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` for smartphone browsers supporting inflation, `none` in other cases (and then not modifiable). |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| Percentages | yes, refer to the corresponding size of the text font |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-size-adjust =   
  auto                [|](value_definition_syntax#single_bar)  
  none                [|](value_definition_syntax#single_bar)  
  [<percentage [0,∞]>](percentage)    
  

```
Examples
--------


### Basic disabling usage



As hinted at above, on a properly designed responsive site the `text-size-adjust` behavior is not needed, so developers can elect to turn it off by specifying a value of none:

 
```
p {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control](https://w3c.github.io/csswg-drafts/css-size-adjust/#adjustment-control) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-size-adjust` | 54 | 7912–79 | No | No | 41 | No | 54 | 54 | 4914 | 41 | 1 | 6.0 |
| `percentages` | 54 | 12 | No | No | 41 | No | 54 | 54 | No | 41 | No | 6.0 |


See also
--------


* [Apple's documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)
* [Google Chrome behavior description](https://docs.google.com/document/d/1PPcEwAhXJJ1TQShor29KWB17KJJq7UJOM34oHwYP3Zg/edit)
* [Gecko's behavior description](https://dbaron.org/log/20111126-font-inflation), by L. David Baron


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust>

top
===


The `top` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property participates in specifying the vertical position of a [positioned element](position). It has no effect on non-positioned elements.


Try it
------



 The effect of `top` depends on how the element is positioned (i.e., the value of the [`position`](position) property):

 * When `position` is set to `absolute` or `fixed`, the `top` property specifies the distance between the element's outer margin of top edge and the inner border of the top edge of its containing block.
* When `position` is set to `relative`, the `top` property specifies the distance the element's top edge is moved below its normal position.
* When `position` is set to `sticky`, the `top` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `top` property has *no effect*.

 When both `top` and [`bottom`](bottom) are specified, `position` is set to `absolute` or `fixed`, *and* [`height`](height) is unspecified (either `auto` or `100%`) both the `top` and `bottom` distances are respected. In all other situations, if [`height`](height) is constrained in any way or `position` is set to `relative`, the `top` property takes precedence and the `bottom` property is ignored.


Syntax
------



```
/\* <length> values \*/
top: 3px;
top: 2.4em;

/\* <percentage>s of the height of the containing block \*/
top: 10%;

/\* Keyword value \*/
top: auto;

/\* Global values \*/
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

```
### Values


 [`<length>`](length)  A negative, null, or positive [`<length>`](length) that represents:

 * for *absolutely positioned elements*, the distance to the top edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved below its normal position.

  [`<percentage>`](percentage)  A [`<percentage>`](percentage) of the containing block's height.

  `auto`  Specifies that:

 * for *absolutely positioned elements*, the position of the element is based on the [`bottom`](bottom) property, while `height: auto` is treated as a height based on the content; or if `bottom` is also `auto`, the element is positioned where it should vertically be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the [`bottom`](bottom) property; or if `bottom` is also `auto`, the element is not moved vertically at all.

  `inherit`  Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a [`<length>`](length), [`<percentage>`](percentage), or the `auto` keyword.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the height of the containing block |
| [Computed value](computed_value) | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
top =   
  auto                 [|](value_definition_syntax#single_bar)  
  <length-percentage>    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### A positioned element set 10% from the top




```
body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}

```
 
```
<div>The size of this content is determined by the position of its edges.</div>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 3 # insets](https://w3c.github.io/csswg-drafts/css-position/#insets) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `top` | 1 | 12 | 1 | 5In Internet Explorer versions before 7, when both `top` and `bottom` are specified, the element position is overconstrained and the `top` property has precedence; the computed value of `bottom` is set to `-top`, while its specified value is ignored. | 6 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`inset`](inset), the shorthand for all related properties: [`top`](top), [`bottom`](bottom), [`left`](left), and [`right`](right)
* The mapped logical properties: [`inset-block-start`](inset-block-start), [`inset-block-end`](inset-block-end), [`inset-inline-start`](inset-inline-start), and [`inset-inline-end`](inset-inline-end) and the shorthands [`inset-block`](inset-block) and [`inset-inline`](inset-inline)
* [`position`](position)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/top>

text-indent
===========


The `text-indent` CSS property sets the length of empty space (indentation) that is put before lines of text in a block.


Try it
------



 Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.


Syntax
------



```
/\* <length> values \*/
text-indent: 3mm;
text-indent: 40px;

/\* <percentage> value
 relative to the containing block width \*/
text-indent: 15%;

/\* Keyword values \*/
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/\* Global values \*/
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
text-indent: unset;

```
### Values


 [`<length>`](length)  Indentation is specified as an absolute [`<length>`](length). Negative values are allowed. See [`<length>`](length) values for possible units.

  [`<percentage>`](percentage)  Indentation is a [`<percentage>`](percentage) of the containing block's width.

  `each-line`  Indentation affects the first line of the block container as well as each line after a *forced line break*, but does not affect lines after a *soft wrap break*.

  `hanging`  Inverts which lines are indented. All lines *except* the first line will be indented.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | block containers |
| [Inherited](inheritance) | yes |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | the percentage as specified or the absolute length, plus any keywords as specified |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
text-indent =   
  [[](value_definition_syntax#brackets) <length-percentage> []](value_definition_syntax#brackets)  [&&](value_definition_syntax#double_ampersand)  
  hanging[?](value_definition_syntax#question_mark)                 [&&](value_definition_syntax#double_ampersand)  
  each-line[?](value_definition_syntax#question_mark)                 
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Simple indent



#### HTML

 
```
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

```
 #### CSS

 
```
p {
  text-indent: 5em;
  background: powderblue;
}

```
 #### Result



### Skipping indentation on the first paragraph



A common typographic practice when paragraph indentation is present is to skip the indentation for the first paragraph. As the *The Chicago Manual of Style* puts it, "the first line of text following a subhead may begin flush left or be indented by the usual paragraph indention."

 Treating first paragraphs differently from subsequent paragraphs can be done using the [adjacent sibling combinator](adjacent_sibling_combinator), as in the following example:

 #### HTML

 
```
<h2>Lorem ipsum</h2>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
  venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
  metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
  blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
  non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
  amet porttitor dui interdum.
</p>

<p>
  Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
  tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
  facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
  odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
  efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
  gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>

<h2>Donec ullamcorper elit nisl</h2>

<p>
  Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
  in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
  nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
  vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
  malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
  Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
  eleifend id. Ut at quam velit.
</p>

<p>
  Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
  sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
  iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
  ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
  libero, sed euismod ipsum ullamcorper sed.
</p>

```
 #### CSS

 
```
p {
  text-align: justify;
  margin: 1em 0 0 0;
}
p + p {
  text-indent: 2em;
  margin: 0;
}

```
 #### Result



### Percentage indent



#### HTML

 
```
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

```
 #### CSS

 
```
p {
  text-indent: 30%;
  background: plum;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # text-indent-property](https://w3c.github.io/csswg-drafts/css-text/#text-indent-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-indent` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `each-line` | No | No | No | No | No | No | No | No | No | No | No | No |
| `hanging` | No | No | No | No | No | No | No | No | No | No | No | No |


See also
--------


* [Learn to style HTML using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS)
* Related CSS properties:
	+ [`text-justify`](text-justify)
	+ [`text-orientation`](text-orientation)
	+ [`text-overflow`](text-overflow)
	+ [`text-rendering`](text-rendering)
	+ [`text-transform`](text-transform)
	+ [`hanging-punctuation`](hanging-punctuation)
* [CSS Text Decoration](css_text_decoration) CSS module
* [CSS Text module](css_text)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent>

text-transform
==============


The `text-transform` 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. It also can help improve legibility for ruby.


Try it
------



 The `text-transform` property takes into account language-specific case mapping rules such as the following:

 * In Turkic languages, like Turkish (`tr`), Azerbaijani (`az`), Crimean Tatar (`crh`), Volga Tatar (`tt`), and Bashkir (`ba`), there are two kinds of `i`, with and without the dot, and two case pairings: `i`/`İ` and `ı`/`I`.
* In German (`de`), the `ß` becomes `SS` in uppercase.
* In Dutch (`nl`), the `ij` digraph becomes `IJ`, even with `text-transform: capitalize`, which only puts the first letter of a word in uppercase.
* In Greek (`el`), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (`άι`/`ΑΪ`).
* In Greek (`el`), the lowercase sigma character has two forms: `σ` and `ς`. `ς` is used only when sigma terminates a word. When applying `text-transform: lowercase` to an uppercase sigma (`Σ`), the browser needs to choose the right lowercase form based on context.
* in Irish (`ga`), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example `text-transform: uppercase` will change `ar aon tslí` to `AR AON tSLÍ` and not, as one might expect, `AR AON TSLÍ` (Firefox only). In some cases, a hyphen is also removed upon uppercasing: `an t-uisce` transforms to `AN tUISCE` (and the hyphen is correctly reinserted by `text-transform: lowercase`).

 The language is defined by the [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) HTML attribute or the [`xml:lang`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xml:lang) XML attribute.

  **Note:** Support for language-specific cases varies between browsers, so check the [browser compatibility table](#browser_compatibility).

 
Syntax
------




```
/\* Keyword values \*/
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/\* Global values \*/
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;

```
  `capitalize`  Is a keyword that converts the first *letter* of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text). A letter is defined as a character that is part of Unicode's Letter or Number general categories  Experimental ; thus, any punctuation marks or symbols at the beginning of a word are ignored.

  **Note:** Authors should not expect `capitalize` to follow language-specific title casing conventions (such as skipping articles in English).

   **Note:** The `capitalize` keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered `-` and `_` as letters, but other browsers did not. Both Webkit and Gecko incorrectly considered letter-based symbols like `ⓐ` to be real letters.) By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The `capitalize` line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.

   `uppercase`  Is a keyword that converts all characters to uppercase.

  `lowercase`  Is a keyword that converts all characters to lowercase.

  `none`  Is a keyword that prevents the case of all characters from being changed.

  `full-width`  Is a keyword that forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

  `full-size-kana`  Generally used for [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby) annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.

  
Accessibility concerns
----------------------



Large sections of text set with a `text-transform` value of `uppercase` may be difficult for people with cognitive concerns such as Dyslexia to read.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-transform =   
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) capitalize [|](value_definition_syntax#single_bar) uppercase [|](value_definition_syntax#single_bar) lowercase []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) full-width [||](value_definition_syntax#double_bar) full-size-kana  [|](value_definition_syntax#single_bar)  
  math-auto                                           [|](value_definition_syntax#single_bar)  
  math-bold                                           [|](value_definition_syntax#single_bar)  
  math-italic                                         [|](value_definition_syntax#single_bar)  
  math-bold-italic                                    [|](value_definition_syntax#single_bar)  
  math-double-struck                                  [|](value_definition_syntax#single_bar)  
  math-bold-fraktur                                   [|](value_definition_syntax#single_bar)  
  math-script                                         [|](value_definition_syntax#single_bar)  
  math-bold-script                                    [|](value_definition_syntax#single_bar)  
  math-fraktur                                        [|](value_definition_syntax#single_bar)  
  math-sans-serif                                     [|](value_definition_syntax#single_bar)  
  math-bold-sans-serif                                [|](value_definition_syntax#single_bar)  
  math-sans-serif-italic                              [|](value_definition_syntax#single_bar)  
  math-sans-serif-bold-italic                         [|](value_definition_syntax#single_bar)  
  math-monospace                                      [|](value_definition_syntax#single_bar)  
  math-initial                                        [|](value_definition_syntax#single_bar)  
  math-tailed                                         [|](value_definition_syntax#single_bar)  
  math-looped                                         [|](value_definition_syntax#single_bar)  
  math-stretched                                        
  

```
Examples
--------


### Example using "none"




```
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: none;
}
strong {
  float: right;
}

```
 This demonstrates no text transformation.



### Example using "capitalize" (general)




```
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

```
 This demonstrates text capitalization.



### Example using "capitalize" (punctuation)




```
<p>
  Initial String
  <strong
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
 >
</p>
<p>
  text-transform: capitalize
  <strong
 ><span
 >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

```
 This demonstrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.



### Example using "capitalize" (Symbols)




```
<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

```
 
```
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

```
 This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.



### Example using "capitalize" (Dutch ij digraph)




```
<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
 ><span lang="nl"
 >The Dutch word: "ijsland" starts with a digraph.</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

```
 This demonstrates how the Dutch *ij* digraph must be handled like one single letter.



### Example using "uppercase" (general)




```
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

```
 This demonstrates transforming the text to uppercase.



### Example using "uppercase" (Greek vowels)




```
<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
 ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
 >
</p>

```
 
```
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

```
 This demonstrates how Greek vowels except disjunctive *eta* should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.



### Example using "lowercase" (general)




```
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

```
 This demonstrates transforming the text to lowercase.



### Example using "lowercase" (Greek Σ)




```
<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
 ><span
 >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

```
 This demonstrates how the Greek character sigma (`Σ`) is transformed into the regular lowercase sigma (`σ`) or the word-final variant (`ς`), according the context.



### Example using "lowercase" (Lithuanian)




```
<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>

```
 
```
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

```
 This demonstrates how the Lithuanian letters `Ĩ` and `J́` retain their dot when transformed to lowercase.



### Example using "full-width" (general)




```
<p>
  Initial String
  <strong
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
 >
</p>
<p>
  text-transform: full-width
  <strong
 ><span
 >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
 ></strong
 >
</p>

```
 
```
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

```
 Some characters exist in two formats: normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.



### Example using "full-width" (Japanese half-width katakana)




```
<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>

```
 
```
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

```
 The Japanese half-width katakana was used to represent katakana in 8-bit character codes. Unlike regular (full-width) katakana characters, a letter with dakuten (voiced sound mark) is represented as two code points, the body of letter and dakuten. The `full-width` combines these into a single code point when converting these characters into full-width.



### Example using "full-size-kana"




```
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
</p>

```
 
```
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # text-transform](https://w3c.github.io/csswg-drafts/css-text/#text-transform) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-transform` | 1The `text-transform` property does not work for `::first-line` pseudo-elements (nor for the one-colon syntax). See [Chromium bug 129669](https://crbug.com/129669). | 12 | 1 | 4 | 7Since Opera 15, the `text-transform` property does not work for `::first-line` pseudo-elements (nor for the one-colon syntax). See [Chromium bug 129669](https://crbug.com/129669). | 1The `text-transform` property does not work for `::first-line` pseudo-elements (also not for the old one-colon syntax). See [WebKit bug 3409](https://webkit.org/b/3409). | 4.4The `text-transform` property does not work for `::first-line` pseudo-elements (nor for the one-colon syntax). See [Chromium bug 129669](https://crbug.com/129669). | 18The `text-transform` property does not work for `::first-line` pseudo-elements (nor for the one-colon syntax). See [Chromium bug 129669](https://crbug.com/129669). | 4 | 11 | 1The `text-transform` property does not work for `::first-line` pseudo-elements (also not for the old one-colon syntax). See [WebKit bug 3409](https://webkit.org/b/3409). | 1.0The `text-transform` property does not work for `::first-line` pseudo-elements (nor for the one-colon syntax). See [Chromium bug 129669](https://crbug.com/129669). |
| `capitalize` | 1 | 12 | 1Before Firefox 14, some punctuation characters could interfere with correct capitalization. See [bug 731536](https://bugzil.la/731536). | 4 | 7 | 1 | 4.4 | 18 | 4Before Firefox 14, some punctuation characters could interfere with correct capitalization. See [bug 731536](https://bugzil.la/731536). | 11 | 1 | 1.0 |
| `dutch_ij_digraph` | No | No | 14 | No | No | No | No | No | 14 | No | No | No |
| `full-size-kana` | No | No | 64 | No | No | No | No | No | 64 | No | No | No |
| `full-width` | No | No | 19 | No | No | No | No | No | 19 | No | No | No |
| `greek_accented_characters` | 34 | 79 | 15 | No | 21 | No | 4.4 | 34 | 15 | 21 | No | 2.0 |
| `lowercase_sigma` | 30 | 12 | 14 | 4 | 17 | 6 | 4.4 | 30 | 14 | 18 | 6 | 2.0 |
| `math-auto` | 10984 | 10984 | No | No | 9570 | No | 109 | 10984 | No | 74 | No | No |
| `turkic_is` | 31 | 12 | 14 | 4 | 18 | 8 | 4.4.3 | 31 | 14 | 18 | 8 | 2.0 |
| `uppercase_eszett` | 1 | 18 | 1 | No | 7 | 1 | 4.4 | 18 | 4 | 11 | 1 | 1.0 |


See also
--------


* [`font-variant`](font-variant)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform>

text-underline-offset
=====================


The `text-underline-offset` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the offset distance of an underline text decoration line (applied using [`text-decoration`](text-decoration)) from its original position.


Try it
------



 `text-underline-offset` is not part of the [`text-decoration`](text-decoration) shorthand. While an element can have multiple `text-decoration` lines, `text-underline-offset` only impacts underlining, and **not** other possible line decoration options such as `overline` or `line-through`.


Syntax
------




```
/\* Single keyword \*/
text-underline-offset: auto;

/\* length \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* percentage \*/
text-underline-offset: 20%;

/\* Global values \*/
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

```
 The `text-underline-offset` property is specified as a single value from the list below.


### Values


 `auto`  The browser chooses the appropriate offset for underlines.

  `<length>`  Specifies the offset of underlines as a [`<length>`](length), overriding the font file suggestion and the browser default. It is recommended to use `em` units so the offset scales with the font size.

  `<percentage>`  Specifies the offset of underlines as a [`<percentage>`](percentage) of **1 em** in the element's font. A percentage inherits as a relative value, and so therefore scales with changes in the font. For a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| Percentages | refer to the font size of the element itself |
| [Computed value](computed_value) | as specified |
| Animation type | by computed value type |

Formal syntax
-------------



```
text-underline-offset =   
  auto          [|](value_definition_syntax#single_bar)  
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Demonstration of text-underline-offset




```
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>

```
 
```
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 4 # underline-offset](https://w3c.github.io/csswg-drafts/css-text-decor-4/#underline-offset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-underline-offset` | 87 | 87 | 70 | No | 73 | 12.1 | 87 | 87 | No | No | 12.2 | 14.0 |
| `percentage` | No | No | 74 | No | No | No | No | No | No | No | No | No |


See also
--------


* [`text-decoration`](text-decoration)
* [`text-decoration-thickness`](text-decoration-thickness)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset>

text-underline-position
=======================


The `text-underline-position` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the position of the underline which is set using the [`text-decoration`](text-decoration) property's `underline` value.


Try it
------


Syntax
------



```
/\* Single keyword \*/
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/\* Multiple keywords \*/
text-underline-position: under left;
text-underline-position: right under;

/\* Global values \*/
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

```
### Values


 `auto`  The [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) uses its own algorithm to place the line at or under the alphabetic baseline.

  `from-font`  If the font file includes information about a preferred position, use that value. If the font file doesn't include this information, behave as if `auto` was set, with the browser choosing an appropriate position.

  `under`  Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. This is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.

  `left`  In vertical writing-modes, this keyword forces the line to be placed on the *left* side of the text. In horizontal writing-modes, it is a synonym of `under`.

  `right`  In vertical writing-modes, this keyword forces the line to be placed on the *right* side of the text. In horizontal writing-modes, it is a synonym of `under`.

  
`auto-pos`  Non-standard   Experimental 
  A synonym of `auto`, which should be used instead.

  
`above`  Non-standard 
  Forces the line to be above the text. When used with East-Asian text, using the `auto` keyword will lead to a similar effect.

  
`below`  Non-standard 
  Forces the line to be below the text. When used with alphabetic text, using the `auto` keyword will lead to a similar effect.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
text-underline-position =   
  auto                           [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) under [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) []](value_definition_syntax#brackets)    
  

```
Examples
--------


### A simple example



Let's take a couple of simple example paragraphs:

 
```
<p class="horizontal">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

<p class="vertical">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac
  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor
  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.
</p>

```
 Our CSS looks like this:

 
```
p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

```
 In this example we set both the paragraphs to have a thick underline. In the horizontal text we use `text-underline-position: under;` to put the underline below all the descenders.

 In the text with a vertical [`writing-mode`](writing-mode) set, we can then use values of `left` or `right` to make the underline appear on the left or right of the text as required.

 The live example looks like this:



### Setting text-underline-position globally



Because the `text-underline-position` property inherits and is not reset by the [`text-decoration`](text-decoration) shorthand property, it may be appropriate to set its value at a global level. For example, the `under` value may be appropriate for a document with lots of chemical and mathematical formulas, which make a large use of subscripts.

 
```
:root {
  text-underline-position: under;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3 # text-underline-position-property](https://w3c.github.io/csswg-drafts/css-text-decor/#text-underline-position-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `text-underline-position` | 33 | 12 | 74 | 6 | 20 | 12.19 | 4.4.3 | 33 | No | 20 | No | 2.0 |
| `above_below` | No | 12–79 | 74 | 6 | No | No | No | No | No | No | No | No |
| `auto-pos` | No | 12–79 | No | 6 | No | No | No | No | No | No | No | No |
| `from-font` | 87 | 87 | 74 | No | No | preview | 87 | 87 | No | No | No | 14.0 |
| `left_right` | 71 | 79 | 74 | No | 58 | No | 71 | 71 | No | 50 | No | 10.0 |
| `under` | 33 | 79 | 74 | No | 20 | 12.1 | 4.4.3 | 33 | No | 20 | No | 2.0 |


See also
--------


* The [`text-decoration`](text-decoration) property is a shorthand for setting most text-decoration properties, including [`text-decoration-line`](text-decoration-line), [`text-decoration-color`](text-decoration-color), and [`text-decoration-style`](text-decoration-style). However, it does not set `text-underline-position`.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position>

<time-percentage>
=================


The `<time-percentage>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a value that can be either a [`<time>`](time) or a [`<percentage>`](percentage).


Syntax
------


Refer to the documentation for [`<time>`](time) and [`<percentage>`](percentage) for details of the individual syntaxes allowed by this type.

Formal syntax
-------------



```
<time-percentage> =   
  [<time>](time)        [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Use in calc()


Where a `<time-percentage>` is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a [`calc()`](calc) expression.

### Valid percentages



```
50%
+50%        Optional plus sign
-50%        Negative percentages are not valid for all properties that accept percentages

```
### Invalid percentages



```
50 %        Space not allowed between the number and the percentage sign

```
### Valid times



```
12s         Positive integer
-456ms      Negative integer
4.3ms       Non-integer
14mS        The unit is case-insensitive, although capital letters are not recommended.
+0s         Zero with a leading + and a unit
-0ms        Zero with a leading - and a unit

```
### Invalid times



```
0           Although unitless zero is allowed for <length>s, it's invalid for <time>s.
12.0        This is a <number>, not a <time>, because it's missing a unit.
7 ms        No space is allowed between the number and the unit.

```
Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # mixed-percentages](https://w3c.github.io/csswg-drafts/css-values/#mixed-percentages) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `time-percentage` | 1 | 12 | 4 | 9 | 10.1 | 3.1 | 2 | 18 | 4 | 10.1 | 2 | 1.0 |


See also
--------


* [`<percentage>`](percentage)
* [`<time>`](time)
* [CSS Values and Units](css_values_and_units)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/time-percentage>

touch-action
============



The `touch-action` CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

 
```
/\* Keyword values \*/
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/\* Global values \*/
touch-action: inherit;
touch-action: initial;
touch-action: revert;
touch-action: revert-layer;
touch-action: unset;

```
 By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using [Pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) will receive a [`pointercancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointercancel_event) event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in [`pointermove`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointermove_event) and [`pointerup`](https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerup_event) listeners for the remaining gestures. Applications using [Touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) disable the browser handling of gestures by calling [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault), but should also use `touch-action` to ensure the browser knows the intent of the application before any event listeners have been invoked.

 When a gesture is started, the browser intersects the `touch-action` values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, `touch-action` is typically applied only to top-level elements which have some custom behavior, without needing to specify `touch-action` explicitly on any of that element's descendants.

  **Note:** After a gesture starts, changes to `touch-action` will not have any impact on the behavior of the current gesture.

 

Syntax
------



The `touch-action` property may be specified as either:

 * One of the keywords `auto`, `none`, [`manipulation`](#manipulation), *or*
* One of the keywords `pan-x`, `pan-left`, `pan-right`, and/or one of the keywords `pan-y`, `pan-up`, `pan-down`, plus optionally the keyword `pinch-zoom`.


### Values


 `auto`  Enable browser handling of all panning and zooming gestures.

  `none`  Disable browser handling of all panning and zooming gestures.

  `pan-x`  Enable single-finger horizontal panning gestures. May be combined with **pan-y**, **pan-up**, **pan-down** and/or **pinch-zoom**.

  `pan-y`  Enable single-finger vertical panning gestures. May be combined with **pan-x**, **pan-left**, **pan-right** and/or **pinch-zoom**.

  `manipulation`  Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of **click** events when the user taps the screen. This is an alias for "**pan-x pan-y pinch-zoom**" (which, for compatibility, is itself still valid).

  
`pan-left`, `pan-right`, `pan-up`, `pan-down`  Experimental 
  Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (**pan-up**) means that the user is dragging their finger downward on the screen surface, and likewise **pan-left** means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, **"pan-left pan-right**" is invalid since "**pan-x**" is simpler, but "**pan-left pan-down**" is valid).

  `pinch-zoom`  Enable multi-finger panning and zooming of the page. This may be combined with any of the **pan-** values.

  Accessibility concerns
----------------------



A declaration of `touch-action: none;` may inhibit operating a browser's zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
touch-action =   
  auto                                                [|](value_definition_syntax#single_bar)  
  none                                                [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) pan-x [|](value_definition_syntax#single_bar) pan-left [|](value_definition_syntax#single_bar) pan-right []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) [[](value_definition_syntax#brackets) pan-y [|](value_definition_syntax#single_bar) pan-up [|](value_definition_syntax#single_bar) pan-down []](value_definition_syntax#brackets) [||](value_definition_syntax#double_bar) pinch-zoom []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  manipulation                                          
  

```
Examples
--------


### Disabling all gestures



The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.

 #### HTML

 
```
<div id="map"></div>

```
 #### CSS

 
```
#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Compatibility Standard # touch-action](https://compat.spec.whatwg.org/#touch-action) |
| [Pointer Events # the-touch-action-css-property](https://w3c.github.io/pointerevents/#the-touch-action-css-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `touch-action` | 36 | 12 | 52Not applicable to Firefox platforms that support neither pointer nor touch events. | 1110 | 23 | 13 | 37 | 36 | 52 | 24 | 9.3 | 3.0 |
| `axis-pan` | 36 | 12 | 52Not applicable to Firefox platforms that support neither pointer nor touch events. | 1110 | 23 | 13 | 37 | 36 | 52 | 24 | 13 | 3.0 |
| `double-tap-zoom` | No | 12–79 | No | 1110 | No | No | No | No | No | No | No | No |
| `manipulation` | 36 | 12 | 52Not applicable to Firefox platforms that support neither pointer nor touch events. | 1110 | 23 | 13 | 37 | 36 | 52 | 24 | 9.3 | 3.0 |
| `none` | 36 | 12 | 52Not applicable to Firefox platforms that support neither pointer nor touch events. | 1110 | 23 | 13 | 37 | 36 | 52 | 24 | 13 | 3.0 |
| `pinch-zoom` | 56 | 12 | 85Not applicable to Firefox platforms that support neither pointer nor touch events. | 1110 | 43 | 13 | 56 | 56 | 85Not applicable to Firefox platforms that support neither pointer nor touch events. | 43 | 13 | 6.0 |
| `unidirectional-pan` | 55 | 79 | NoSee [bug 1285685](https://bugzil.la/1285685). | No | 42 | No | 55 | 55 | NoSee [bug 1285685](https://bugzil.la/1285685). | 42 | No | 6.0 |


See also
--------


* [`pointer-events`](pointer-events)
* [`Pointer Events`](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
* WebKit Blog [More Responsive Tapping on iOS](https://webkit.org/blog/5610/more-responsive-tapping-on-ios/)
* Google Developers Blog [Making touch scrolling fast by default](https://developer.chrome.com/blog/scrolling-intervention/)
* [Scroll Snap](css_scroll_snap)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action>

transform
=========


 The `transform` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS [visual formatting model](visual_formatting_model). 


Try it
------



  If the property has a value different than `none`, a [stacking context](css_positioning/understanding_z_index/the_stacking_context) will be created. In that case, the element will act as a [containing block](containing_block) for any `position: fixed;` or `position: absolute;` elements that it contains. 

   **Warning:** Only transformable elements can be `transform`ed. That is, all elements whose layout is governed by the CSS box model except for: [non-replaced inline boxes](visual_formatting_model#inline-level_elements_and_inline_boxes), [table-column boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col), and [table-column-group boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup). 

 
Syntax
------




```
/\* Keyword values \*/
transform: none;

/\* Function values \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/\* Multiple function values \*/
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/\* Global values \*/
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

```
 The `transform` property may be specified as either the keyword value `none` or as one or more `<transform-function>` values.

 If [`perspective()`](transform-function/perspective) is one of multiple function values, it must be listed first.


### Values


 [`<transform-function>`](transform-function)   One or more of the [CSS transform functions](transform-function) to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively [applied in order from right to left](#transform-order). 

  `none`  Specifies that no transform should be applied.

  Accessibility concerns
----------------------



 Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide. 

 Also, consider making use of the [`prefers-reduced-motion`](@media/prefers-reduced-motion) media feature — use it to write a [media query](media_queries) that will turn off animations if the user has reduced animation specified in their system preferences.

 Find out more:

 * [MDN Understanding WCAG, Guideline 2.3 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%E2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
* [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the size of bounding box |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
transform =   
  none              [|](value_definition_syntax#single_bar)  
  <transform-list>    
  
<transform-list> =   
  [<transform-function>](transform-function)[+](value_definition_syntax#plus)    
  

```
Examples
--------


### Translating and rotating an element



#### HTML

 
```
<div>Transformed element</div>

```
 #### CSS

 
```
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

```
 #### Result



### Transform order



The order of transform functions matters. In this example, two boxes are rotated and translated by the same values; only the transform function order is different.

 #### HTML

 
```
<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

```
 #### CSS

 
```
.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

```
 #### Result


 When an element is rotated before being translated, the translate direction is on the rotated axis. The axis as indicated with the dotted lines.


### More examples


Please see [Using CSS transforms](css_transforms/using_css_transforms) and [`<transform-function>`](transform-function) for more examples.

Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # transform-functions](https://w3c.github.io/csswg-drafts/css-transforms-2/#transform-functions) |
| [CSS Transforms Module Level 1 # transform-property](https://w3c.github.io/csswg-drafts/css-transforms/#transform-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `3d` | 12 | 12 | 16 | 10 | 15 | 4 | 3 | 18 | 16 | 14 | 3.2 | 1.0 |
| `transform` | 361 | 1212 | 4916 | 1110Internet Explorer does not support the global values `initial` and `unset`.9Internet Explorer 5.5 or later supports a proprietary [Matrix Filter](https://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx) which can be used to achieve a similar effect. | 231512.1–1510.5–15 | 93.1 | 4.42Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a `-webkit-transform`. | 3618 | 4916 | 241412.1–1411–14 | 93.2 | 3.01.0 |


See also
--------


* [Using CSS transforms](css_transforms/using_css_transforms)
* [`<transform-function>`](transform-function) data type with all the transform functions explained.
* Individual CSS properties: [`translate`](translate), [`rotate`](rotate)), and [`scale`](scale) (there is no `skew` property).
* Online tool to visualize CSS Transform functions: [CSS Transform Playground](https://css-transform.moro.es/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform>

transform-box
=============



The `transform-box` CSS property defines the layout box to which the [`transform`](transform), individual transform properties [`translate`](translate),[`scale`](scale), and [`rotate`](rotate), and [`transform-origin`](transform-origin) properties relate.

 
```
/\* Keyword values \*/
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

/\* Global values \*/
transform-box: inherit;
transform-box: initial;
transform-box: revert;
transform-box: revert-layer;
transform-box: unset;

```


Syntax
------


The `transform-box` property is specified as one of the keyword values listed below.

### Values


 `content-box`  The content box is used as the reference box. The reference box of a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) is the border box of its table wrapper box, not its table box.

  `border-box`  The border box is used as the reference box. The reference box of a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) is the border box of its table wrapper box, not its table box.

  `fill-box`  The object bounding box is used as the reference box.

  `stroke-box`  The stroke bounding box is used as the reference box.

  `view-box`  The nearest [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG) viewport is used as the reference box. If a `[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)` attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute, and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `view-box` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
transform-box =   
  content-box  [|](value_definition_syntax#single_bar)  
  border-box   [|](value_definition_syntax#single_bar)  
  fill-box     [|](value_definition_syntax#single_bar)  
  stroke-box   [|](value_definition_syntax#single_bar)  
  view-box       
  

```
Examples
--------


### SVG transform-origin scoping



In this example we have an SVG:

 
```
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
 id="box"
 x="10"
 y="10"
 width="10"
 height="10"
 rx="1"
 ry="1"
 stroke="black"
 fill="none" />
  </g>
</svg>

```
 In the CSS we have an animation that uses a transform to rotate the rectangle infinitely. `transform-box: fill-box` is used to make the `transform-origin` the center of the bounding box, so the rectangle spins in place. Without it, the transform origin is the center of the SVG canvas, and so you get a very different effect.

 
```
svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#box {
  transform-origin: 50% 50%; /\* anything other than `0 0` to see the effect \*/
  transform-box: fill-box;
  animation: rotateBox 3s linear infinite;
}

@keyframes rotateBox {
  to {
    transform: rotate(360deg);
  }
}

```
 Full credit for this example goes to [Pogany](https://codepen.io/giaco); see [this codepen](https://codepen.io/giaco/pen/OwowJQ) for a live version.


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # transform-box](https://w3c.github.io/csswg-drafts/css-transforms/#transform-box) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transform-box` | 64 | 79 | 55 | No | 51 | 11 | 64 | 64 | 55 | 47 | 11 | 9.0 |


See also
--------


* [Using CSS transforms](css_transforms/using_css_transforms)
* [`transform`](transform), [`transform-origin`](transform-origin)
* Individual transform properties:
	+ [`translate`](translate)
	+ [`scale`](scale)
	+ [`rotate`](rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box>

transition-duration
===================


The `transition-duration` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the length of time a transition animation should take to complete. By default, the value is `0s`, meaning that no animation will occur.


Try it
------



 You may specify multiple durations; each duration will be applied to the corresponding property as specified by the [`transition-property`](transition-property) property, which acts as a master list. If the number of specified durations is less than in the master list, the user agent repeats the list of durations. If the number of specified durations is more than in the master list, the list is truncated to the right size. In both the cases, the CSS declaration stays valid.


Syntax
------



```
/\* <time> values \*/
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/\* Global values \*/
transition-duration: inherit;
transition-duration: initial;
transition-duration: revert;
transition-duration: revert-layer;
transition-duration: unset;

```
### Values


 `<time>`  Is a [`<time>`](time) denoting the amount of time the transition from the old value of a property to the new value should take. A time of `0s` indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0s` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
transition-duration =   
  [<time [0s,∞]>](time)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Example showing different durations



#### HTML

 
```
<div class="box duration-1">0.5 seconds</div>

<div class="box duration-2">2 seconds</div>

<div class="box duration-3">4 seconds</div>

<button id="change">Change</button>

```
 #### CSS

 
```
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color font-size transform color;
  transition-timing-function: ease-in-out;
}

.duration-1 {
  transition-duration: 0.5s;
}

.duration-2 {
  transition-duration: 2s;
}

.duration-3 {
  transition-duration: 4s;
}

```
 #### JavaScript

 
```
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transitions # transition-duration-property](https://w3c.github.io/csswg-drafts/css-transitions/#transition-duration-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transition-duration` | 261 | 1212 | 49164 | 1010 | 1512.110–15 | 93.1 | 4.42 | 2618 | 49164 | 1412.110.1–14 | 92 | 1.51.0 |


See also
--------


* [Using CSS transitions](css_transitions/using_css_transitions)
* [`transition`](transition)
* [`transition-property`](transition-property)
* [`transition-timing-function`](transition-timing-function)
* [`transition-delay`](transition-delay)
* [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration>

transform-origin
================


The `transform-origin` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the origin for an element's transformations.


Try it
------



 The transform origin is the point around which a transformation is applied. For example, the transform origin of the [`rotate()`](transform-function/rotate) function is the center of rotation.

 In effect, this property wraps a pair of translations around the element's other transformations. The first translation moves the transform origin to the true origin at   ( 0 , 0 )  . Then the other transformations are applied, and because the transform origin is at   ( 0 , 0 )  , those transformations act about the transform origin. Finally, the opposite translation is applied, moving the transform origin back to its original location. Consequently, this definition 

 
```
transform-origin: -100% 50%;
transform: rotate(45deg);

```
 results in the same transformation as

 
```
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

```
 Reading from right to left, `translate(100%, -50%)` is the translation to bring the transform origin to the true origin, `rotate(45deg)` is the original transformation, and `translate(-100%, 50%)` is the translation to restore the transform origin to its original location.

 By default, the origin of a transform is `center`.


Syntax
------




```
/\* One-value syntax \*/
transform-origin: 2px;
transform-origin: bottom;

/\* x-offset | y-offset \*/
transform-origin: 3cm 2px;

/\* x-offset-keyword | y-offset \*/
transform-origin: left 2px;

/\* x-offset-keyword | y-offset-keyword \*/
transform-origin: right top;

/\* y-offset-keyword | x-offset-keyword \*/
transform-origin: top right;

/\* x-offset | y-offset | z-offset \*/
transform-origin: 2px 30% 10px;

/\* x-offset-keyword | y-offset | z-offset \*/
transform-origin: left 5px -3px;

/\* x-offset-keyword | y-offset-keyword | z-offset \*/
transform-origin: right bottom 2cm;

/\* y-offset-keyword | x-offset-keyword | z-offset \*/
transform-origin: bottom right 2cm;

/\* Global values \*/
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;

```
 The `transform-origin` property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding [initial values](initial_value).

 If a single [`<length>`](length) or [`<percentage>`](percentage) value is defined, it represents the horizontal offset.

 If two or more values are defined and either no value is a keyword, or the only used keyword is `center`, then the first value represents the horizontal offset and the second represents the vertical offset.

 * One-value syntax:
	+ The value must be a [`<length>`](length), a [`<percentage>`](percentage), or one of the keywords `left`, `center`, `right`, `top`, and `bottom`.
* Two-value syntax:
	+ One value must be a [`<length>`](length), a [`<percentage>`](percentage), or one of the keywords `left`, `center`, and `right`.
	+ The other value must be a [`<length>`](length), a [`<percentage>`](percentage), or one of the keywords `top`, `center`, and `bottom`.
* Three-value syntax:
	+ The first two values are the same as for the two-value syntax.
	+ The third value must be a [`<length>`](length). It always represents the Z offset.


### Values



 *x-offset*  Is a [`<length>`](length) or a [`<percentage>`](percentage) describing how far from the left edge of the box the origin of the transform is set.

  *offset-keyword*  Is one of the `left`, `right`, `top`, `bottom`, or `center` keyword describing the corresponding offset.

  *y-offset*  Is a [`<length>`](length) or a [`<percentage>`](percentage) describing how far from the top edge of the box the origin of the transform is set.

  *x-offset-keyword*  Is one of the `left`, `right`, or `center` keyword describing how far from the left edge of the box the origin of the transform is set.

  *y-offset-keyword*  Is one of the `top`, `bottom`, or `center` keyword describing how far from the top edge of the box the origin of the transform is set.

  *z-offset*  Is a [`<length>`](length) (and never a [`<percentage>`](percentage) which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

   The keywords are convenience shorthands and match the following [`<percentage>`](percentage) values:

 

| Keyword | Value |
| --- | --- |
| `left` | `0%` |
| `center` | `50%` |
| `right` | `100%` |
| `top` | `0%` |
| `bottom` | `100%` |


Formal definition
-----------------





|  |  |
| --- | --- |
| [Initial value](initial_value) | `50% 50% 0` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the size of bounding box |
| [Computed value](computed_value) | for [`<length>`](length) the absolute value, otherwise a percentage |
| Animation type | simple list of length, percentage, or calc |

  **Note:** The initial value of `transform-origin` is `0 0` for all SVG elements except for root `<svg>` elements and `<svg>` elements that are a direct child of a [foreignObject](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject), and whose `transform-origin` is `50% 50%`, like other CSS elements. See the [SVG transform-origin](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin) attribute for more information.

 
Formal syntax
-------------



```
transform-origin =   
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) top [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) left [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) right [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) top [|](value_definition_syntax#single_bar) center [|](value_definition_syntax#single_bar) bottom [|](value_definition_syntax#single_bar) <length-percentage> []](value_definition_syntax#brackets) [<length>](length)[?](value_definition_syntax#question_mark)  [|](value_definition_syntax#single_bar)  
  [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) left [|](value_definition_syntax#single_bar) right []](value_definition_syntax#brackets) [&&](value_definition_syntax#double_ampersand) [[](value_definition_syntax#brackets) center [|](value_definition_syntax#single_bar) top [|](value_definition_syntax#single_bar) bottom []](value_definition_syntax#brackets) []](value_definition_syntax#brackets) [<length>](length)[?](value_definition_syntax#question_mark)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### A demonstration of various transform values



This example shows the effect of choosing different `transform-origin` values for a variety of transformation functions.



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # transform-origin-property](https://w3c.github.io/csswg-drafts/css-transforms/#transform-origin-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transform-origin` | 361 | 1212 | 49163.5 | 109 | 231512.1–1510.5–15 | 92 | ≤374.4 | 3618 | 49164 | 241512.1–1511–14 | 91 | 3.01.0 |
| `support_in_svg` | 19 | 17 | 43Keywords and percentages refer to the canvas instead of the object itself. See [bug 1209061](https://bugzil.la/1209061). | No | 15 | 6Only supported for transformations applied using the CSS `transform` property (e.g. `.className { transform: rotate(45deg); transform-origin: center; }`). It has no effect on transformations applied using the `transform` SVG attribute (e.g. `<rect style="transform-origin: center;" transform="rotate(45)" />`). | 4.4 | 25 | 43Keywords and percentages refer to the canvas instead of the object itself. See [bug 1209061](https://bugzil.la/1209061). | 14 | 6Only supported for transformations applied using the CSS `transform` property (e.g. `.className { transform: rotate(45deg); transform-origin: center; }`). It has no effect on transformations applied using the `transform` SVG attribute (e.g. `<rect style="transform-origin: center;" transform="rotate(45)" />`). | 1.5 |
| `three_value_syntax` | 12 | 12 | 10 | 9 | 15 | 5 | ≤37 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [Using CSS transforms](css_transforms/using_css_transforms)
* <https://css-tricks.com/almanac/properties/t/transform-origin/>


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin>

transition-delay
================


The `transition-delay` CSS property specifies the duration to wait before starting a property's [transition effect](css_transitions/using_css_transitions) when its value changes.


Try it
------



 The delay may be zero, positive, or negative:

 * A value of `0s` (or `0ms`) will begin the transition effect immediately.
* A positive value will delay the start of the transition effect for the given length of time.
* A negative value will begin the transition effect immediately, and partway through the effect. In other words, the effect will be animated as if it had already been running for the given length of time.

 You may specify multiple delays, which is useful when transitioning multiple properties. Each delay will be applied to the corresponding property as specified by the [`transition-property`](transition-property) property, which acts as a master list. If there are fewer delays specified than in the master list, the list of delay values will be repeated until there are enough. If there are more delays, the list of delay values will be truncated to match the number of properties. In both cases, the CSS declaration remains valid.


Syntax
------



```
/\* <time> values \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

/\* Global values \*/
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;

```
### Values


 [`<time>`](time)  Denotes the amount of time to wait between a property's value changing and the start of the transition effect.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0s` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
transition-delay =   
  [<time>](time)[#](value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Example showing different delays



#### HTML

 
```
<div class="box delay-1">0.5 seconds</div>

<div class="box delay-2">2 seconds</div>

<div class="box delay-3">4 seconds</div>

<button id="change">Change</button>

```
 #### CSS

 
```
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}

```
 #### JavaScript

 
```
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transitions # transition-delay-property](https://w3c.github.io/csswg-drafts/css-transitions/#transition-delay-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transition-delay` | 261 | 1212 | 49164 | 1010 | 1512.111.6–15 | 94 | 4.42 | 2618 | 49164 | 1412.112–14 | 92 | 1.51.0 |


See also
--------


* [Using CSS transitions](css_transitions/using_css_transitions)
* [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) API


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay>

transition-property
===================


The `transition-property` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the CSS properties to which a [transition effect](css_transitions/using_css_transitions) should be applied.


Try it
------



  **Note:** The [set of properties that can be animated](css_animated_properties) is subject to change. As such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results.

  If you specify a shorthand property (e.g., [`background`](background)), all of its longhand sub-properties that can be animated will be.


Syntax
------



```
/\* Keyword values \*/
transition-property: none;
transition-property: all;

/\* <custom-ident> values \*/
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/\* Multiple values \*/
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property: all, -moz-specific, sliding;

/\* Global values \*/
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

```
### Values


 `none`  No properties will transition.

  `all`  All properties that can transition will.

  [`<custom-ident>`](custom-ident)  A string identifying the property to which a transition effect should be applied when its value changes.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | all |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
transition-property =   
  none                           [|](value_definition_syntax#single_bar)  
  <single-transition-property>[#](value_definition_syntax#hash_mark)    
  
<single-transition-property> =   
  all             [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)    
  

```
Examples
--------


### Simple example



This example performs a four-second font size transition when the user hovers over the element, the `transition-property` is the `font-size`.

 #### HTML

 
```
<a class="target">Hover over me</a>

```
 #### CSS

 
```
.target {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
}

.target:hover {
  font-size: 36px;
}

```

 You will find more examples of `transition-property` included in the main [CSS transitions](css_transitions/using_css_transitions) article.


Specifications
--------------




| Specification |
| --- |
| [CSS Transitions # transition-property-property](https://w3c.github.io/csswg-drafts/css-transitions/#transition-property-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `IDENT_value` | 1 | 12 | 16 | 10 | 15 | 4 | ≤37 | 18 | 16 | 14 | 3 | 1.0 |
| `transition-property` | 261 | 1212 | 49164 | 1010 | 1512.111.6–15 | 93.1 | ≤374.4 | 2618 | 49164 | 1412.112–14 | 92 | 1.51.0 |


See also
--------


* [Using CSS transitions](css_transitions/using_css_transitions)
* [`transition`](transition)
* [`transition-duration`](transition-duration)
* [`transition-timing-function`](transition-timing-function)
* [`transition-delay`](transition-delay)
* [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property>

transition-timing-function
==========================


The `transition-timing-function` CSS property sets how intermediate values are calculated for CSS properties being affected by a [transition effect](css_transitions/using_css_transitions).


Try it
------



 This, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration.

 This acceleration curve is defined using one [`<easing-function>`](easing-function) for each property to be transitioned.

 You may specify multiple easing functions; each one will be applied to the corresponding property as specified by the [`transition-property`](transition-property) property, which acts as a `transition-property` list. If there are fewer easing functions specified than in the `transition-property` list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property. If there are more easing functions, the list is truncated to the right size. In both cases, the CSS declaration stays valid.


Syntax
------



```
/\* Keyword values \*/
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/\* Function values \*/
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Steps Function keywords \*/
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/\* Multiple timing functions \*/
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Global values \*/
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

```
### Values


 `<easing-function>`  Each [`<easing-function>`](easing-function) represents the easing function to link to the corresponding property to transition, as defined in [`transition-property`](transition-property).

 The non-step keyword values (ease, linear, ease-in-out, etc.) each represent cubic Bézier curve with fixed four point values, with the cubic-bezier() function value allowing for a non-predefined value. The step timing functions divides the input time into a specified number of intervals that are equal in length. It is defined by a number of steps and a step position.

  `ease`  Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the transition, slowing back down at the end.

  `linear`  Equal to `cubic-bezier(0.0, 0.0, 1.0, 1.0)`, transitions at an even speed.

  `ease-in`  Equal to `cubic-bezier(0.42, 0, 1.0, 1.0)`, starts off slowly, with the transition speed increasing until complete.

  `ease-out`  Equal to `cubic-bezier(0, 0, 0.58, 1.0)`, starts transitioning quickly, slowing down the transition continues. •

  `ease-in-out`  Equal to `cubic-bezier(0.42, 0, 0.58, 1.0)`, starts transitioning slowly, speeds up, and then slows down again.

  `cubic-bezier(p1, p2, p3, p4)`  An author-defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

  `steps( n, <jumpterm>)`  Displays the transition along *n stops along the transition, displaying each stop for* equal lengths of time. For example, if *n* is 5, there are 5 steps. Whether the transition holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:

  `jump-start`  Denotes a left-continuous function, so that the first jump happens when the transition begins;

  `jump-end`  Denotes a right-continuous function, so that the last jump happens when the animation ends;

  `jump-none`  There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration

  `jump-both`  Includes pauses at both the 0% and 100% marks, effectively adding a step during the transition time.

  `start`  Same as `jump-start.`

  `end`  Same as `jump-end.`

    `step-start`  Equal to `steps(1, jump-start)`

  `step-end`  Equal to `steps(1, jump-end)`

    Accessibility concerns
----------------------



Some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to inform users as to what actions have occurred. Animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships. However, some animations can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD) and certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

 Consider providing a mechanism for pausing or disabling animation, as well as using the [Reduced Motion Media Query](@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for no animated experiences.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `ease` |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
transition-timing-function =   
  <easing-function>[#](value_definition_syntax#hash_mark)    
  
<easing-function> =   
  linear                          [|](value_definition_syntax#single_bar)  
  <linear-easing-function>        [|](value_definition_syntax#single_bar)  
  <cubic-bezier-easing-function>  [|](value_definition_syntax#single_bar)  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                [|](value_definition_syntax#single_bar)  
  ease-in                                             [|](value_definition_syntax#single_bar)  
  ease-out                                            [|](value_definition_syntax#single_bar)  
  ease-in-out                                         [|](value_definition_syntax#single_bar)  
  cubic-bezier( [<number [0,1]>](number) , [<number>](number) , [<number [0,1]>](number) , [<number>](number) )    
  
<step-easing-function> =   
  step-start                                [|](value_definition_syntax#single_bar)  
  step-end                                  [|](value_definition_syntax#single_bar)  
  steps( [<integer>](integer) [[](value_definition_syntax#brackets), <step-position> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<linear-stop-list> =   
  [[](value_definition_syntax#brackets) <linear-stop> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<step-position> =   
  jump-start  [|](value_definition_syntax#single_bar)  
  jump-end    [|](value_definition_syntax#single_bar)  
  jump-none   [|](value_definition_syntax#single_bar)  
  jump-both   [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end           
  
<linear-stop> =   
  [<number>](number)               [&&](value_definition_syntax#double_ampersand)  
  <linear-stop-length>[?](value_definition_syntax#question_mark)    
  
<linear-stop-length> =   
  [<percentage>](percentage)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Cubic-Bezier examples




```
.ease {
  transition-timing-function: ease;
}
.easein {
  transition-timing-function: ease-in;
}
.easeout {
  transition-timing-function: ease-out;
}
.easeinout {
  transition-timing-function: ease-in-out;
}
.linear {
  transition-timing-function: linear;
}
.cb {
  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
}

```


### Step examples




```
.jump-start {
  transition-timing-function: steps(5, jump-start);
}
.jump-end {
  transition-timing-function: steps(5, jump-end);
}
.jump-none {
  transition-timing-function: steps(5, jump-none);
}
.jump-both {
  transition-timing-function: steps(5, jump-both);
}
.step-start {
  transition-timing-function: step-start;
}
.step-end {
  transition-timing-function: step-end;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Transitions # transition-timing-function-property](https://w3c.github.io/csswg-drafts/css-transitions/#transition-timing-function-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transition-timing-function` | 261 | 1212 | 49164 | 1010 | 1512.111.6–15 | 93.1 | ≤374.4 | 2618 | 49164 | 1412.112–14 | 92 | 1.51.0 |
| `jump` | 77 | 79 | 65 | No | 64 | 14 | 77 | 77 | 65 | 55 | 14 | 12.0 |


See also
--------


* [Using CSS transitions](css_transitions/using_css_transitions)
* [`<easing-function>`](easing-function)
* [`transition`](transition)
* [`transition-property`](transition-property)
* [`transition-duration`](transition-duration)
* [`transition-delay`](transition-delay)
* [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function>

translate
=========


The `translate` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property allows you to specify translation transforms individually and independently of the [`transform`](transform) property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.


Try it
------


Syntax
------



```
/\* Keyword values \*/
translate: none;

/\* Single values \*/
translate: 100px;
translate: 50%;

/\* Two values \*/
translate: 100px 200px;
translate: 50% 105px;

/\* Three values \*/
translate: 50% 105px 5rem;

/\* Global values \*/
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;

```
### Values


 Single [`<length-percentage>`](length-percentage) value  A [`<length>`](length) or [`<percentage>`](percentage) that specifies a translation along the X-axis. Equivalent to a `translate()` (2D translation) function with a single value specified.

  Two [`<length-percentage>`](length-percentage) values  Two [`<length>`](length) or [`<percentage>`](percentage) that specify the X and Y axis translation values (respectively) of a 2D translation. Equivalent to a `translate()` (2D translation) function with two values specified.

  Three values  Two [`<length-percentage>`](length-percentage) and single [`<length>`](length) values that specify the X, Y, and Z axis translation values (respectively) of a 3D translation. Equivalent to a `translate3d()` (3D translation) function.

  `none`  Specifies that no translation should be applied.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the size of bounding box |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a transform |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
translate =   
  none                                                [|](value_definition_syntax#single_bar)  
  <length-percentage> [[](value_definition_syntax#brackets) <length-percentage> [<length>](length)[?](value_definition_syntax#question_mark) []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark)    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Translating an element on hover



 This example shows how to use the `translate` property to move an element in three axes. The first box is moved along the X axis and the second box is moved along the X and Y axes. The third box is moved along the X, Y and Z axes and has the appearance of moving toward the viewer because of the addition of [`perspective`](perspective) to the parent element. 

 #### HTML

 
```
<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>

```
 #### CSS

 
```
.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # individual-transforms](https://w3c.github.io/csswg-drafts/css-transforms-2/#individual-transforms) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `translate` | 104 | 104 | 72 | No | 90 | 14.1 | 104 | 104 | 79 | 71 | 14.5 | 20.0 |


See also
--------



* [`scale`](scale)
* [`rotate`](rotate)
* [`transform`](transform)

 Note: skew is not an independent transform value




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/translate>

translate()
===========


 The `translate()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) repositions an element in the horizontal and/or vertical directions. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction. 


Syntax
------



```
/\* Single <length-percentage> values \*/
transform: translate(200px);
transform: translate(50%);

/\* Double <length-percentage> values \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

```
### Values



 Single `<length-percentage>` values   This value is a [`<length>`](../length) or [`<percentage>`](../percentage) representing the abscissa (horizontal, x-coordinate) of the translating vector. The ordinate (vertical, y-coordinate) of the translating vector will be set to `0`. For example, `translate(2px)` is equivalent to `translate(2px, 0)`. A percentage value refers to the width of the reference box defined by the [`transform-box`](../transform-box) property. 

  Double `<length-percentage>` values   This value describes two [`<length>`](../length) or [`<percentage>`](../percentage) values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector. A percentage as first value refers to the width, as second part to the height of the reference box defined by the [`transform-box`](../transform-box) property. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix.  |   (    1   0   tx     0   1   ty     0   0   1    )   |   (    1   0   tx     0   1   ty     0   0   1    )   |   (    1   0   0   tx     0   1   0   ty     0   0   1   0     0   0   0   1    )   |
| `[1 0 0 1 tx ty]` |


### Formal syntax



```
translate(<length-percentage>, <length-percentage>?)

```
Examples
--------


### Using a single-axis translation



#### HTML

 
```
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

```
 #### CSS

 
```
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* Equal to: translateX(10px) or translate(10px, 0) \*/
  transform: translate(10px);
  background-color: pink;
}

```
 #### Result



### Combining y-axis and x-axis translation



#### HTML

 
```
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

```
 #### CSS

 
```
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-translate](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-translate) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `translate` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`translate`](../translate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate>

translateX()
============


 The `translateX()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) repositions an element horizontally on the 2D plane. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



   **Note:** `translateX(tx)` is equivalent to `translate(tx, 0)` or `translate3d(tx, 0, 0)`. 

 
Syntax
------



```
/\* <length-percentage> values \*/
transform: translateX(200px);
transform: translateX(50%);

```
### Values



 `<length-percentage>`   Is a [`<length>`](../length) or [`<percentage>`](../percentage) representing the abscissa of the translating vector. A percentage value refers to the width of the reference box defined by the [`transform-box`](../transform-box) property. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix.  |   (    1   0   t     0   1   0     0   0   1    )   |   (    1   0   t     0   1   0     0   0   1    )   |   (    1   0   0   t     0   1   0   0     0   0   1   0     0   0   0   1    )   |
| `[1 0 0 1 t 0]` |


### Formal syntax



```
translateX(<length-percentage>)

```
Examples
--------


### HTML



```
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

```
### CSS



```
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateX(10px); /\* Equal to translate(10px) \*/
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-translatex](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-translatex) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `translateX` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`translate()`](translate)
* [`translateY()`](translatey)
* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`translate`](../translate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX>

<transform-function>
====================


The `<transform-function>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a transformation that affects an element's appearance. Transformation [functions](css_functions) can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the [`transform`](transform) property.


Syntax
------


The `<transform-function>` data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

### Matrix transformation


 [`matrix()`](transform-function/matrix)  Describes a homogeneous 2D transformation matrix.

  [`matrix3d()`](transform-function/matrix3d)  Describes a 3D transformation as a 4×4 homogeneous matrix.

  ### Perspective


 [`perspective()`](transform-function/perspective)  Sets the distance between the user and the z=0 plane.

  ### Rotation


 [`rotate()`](transform-function/rotate)  Rotates an element around a fixed point on the 2D plane.

  [`rotate3d()`](transform-function/rotate3d)  Rotates an element around a fixed axis in 3D space.

  [`rotateX()`](transform-function/rotatex)  Rotates an element around the horizontal axis.

  [`rotateY()`](transform-function/rotatey)  Rotates an element around the vertical axis.

  [`rotateZ()`](transform-function/rotatez)  Rotates an element around the z-axis.

  ### Scaling (resizing)


 [`scale()`](transform-function/scale)  Scales an element up or down on the 2D plane.

  [`scale3d()`](transform-function/scale3d)  Scales an element up or down in 3D space.

  [`scaleX()`](transform-function/scalex)  Scales an element up or down horizontally.

  [`scaleY()`](transform-function/scaley)  Scales an element up or down vertically.

  [`scaleZ()`](transform-function/scalez)  Scales an element up or down along the z-axis.

  ### Skewing (distortion)


 [`skew()`](transform-function/skew)  Skews an element on the 2D plane.

  [`skewX()`](transform-function/skewx)  Skews an element in the horizontal direction.

  [`skewY()`](transform-function/skewy)  Skews an element in the vertical direction.

  ### Translation (moving)


 [`translate()`](transform-function/translate)  Translates an element on the 2D plane.

  [`translate3d()`](transform-function/translate3d)  Translates an element in 3D space.

  [`translateX()`](transform-function/translatex)  Translates an element horizontally.

  [`translateY()`](transform-function/translatey)  Translates an element vertically.

  [`translateZ()`](transform-function/translatez)  Translates an element along the z-axis.

  Description
-----------


Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the [Cartesian coordinate system](https://en.wikipedia.org/wiki/Cartesian_coordinate_system), although [homogeneous coordinates](https://en.wikipedia.org/wiki/Homogeneous_coordinates) are also sometimes used.

### Cartesian coordinates



In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation `(x, y)`.

  ![A cartesian plane showing the negative Y and positive X axis starting from origin with three points P1, P2 and P3 with corresponding X and Y values] 

 In CSS (and most computer graphics), the origin `(0, 0)` represents the *top-left* corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be `(2, 5)`, while a point 3 units to the left and 12 units up would be `(-3, -12)`.


### Transformation functions



Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

    (    a   c     b   d    )   

 The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

    (    a   c     b   d    )   (    x     y    )  =  (    a x + c y     b x + d y    )   

 It is even possible to apply several transformations in a row:

    (     a 1     c 1       b 1     d 1     )   (     a 2     c 2       b 2     d 2     )  =  (     a 1   a 2  +  c 1   b 2     a 1   c 2  +  c 1   d 2       b 1   a 2  +  d 1   b 2     b 1   c 2  +  d 1   d 2     )   

 With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

 However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector `(tx, ty)` must be expressed separately, as two additional parameters.

  **Note:** Though trickier than Cartesian coordinates, [homogeneous coordinates](https://en.wikipedia.org/wiki/Homogeneous_coordinates) in [projective geometry](https://en.wikipedia.org/wiki/Projective_geometry) lead to 3×3 transformation matrices, and can express translations as linear functions.

   **Note:** Transform functions are used with the `transform` property but not with individual transform properties-[`translate`](translate), [`scale`](scale), and [`rotate`](rotate).

 
Examples
--------


### Transform function comparison



The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.

 Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using `transform3d()`, to allow you to see the effect of all the transforms.

 #### HTML

 
```
<main>
  <section id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </section>

  <div class="select-form">
    <label for="transfunction">Select a transform function</label>
    <select id="transfunction">
      <option selected>Choose a function</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>

```
 #### CSS

 
```
main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}

```
 #### JavaScript

 
```
const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  } else {
    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
    setTimeout(() => {
      example.style.transform = "rotate3d(1, 1, 1, 30deg)";
    }, 2000);
  }
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # transform-functions](https://w3c.github.io/csswg-drafts/css-transforms/#transform-functions) |
| [CSS Transforms Module Level 2 # transform-functions](https://w3c.github.io/csswg-drafts/css-transforms-2/#transform-functions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transform-function` | 1 | 12 | 3.5 | 9Internet Explorer 9 supports 2D but not 3D transforms. In version 9, mixing 2D and 3D transform functions invalidates the entire property. | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `matrix` | 1 | 12 | 3.5Before Firefox 16, the translation values of `matrix()` could be [`<length>`](https://developer.mozilla.org/docs/Web/CSS/length)s, in addition to the standard [`<number>`](https://developer.mozilla.org/docs/Web/CSS/number). | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `matrix3d` | 12 | 12 | 10Before Firefox 16, the translation values of `matrix3d()` could be [`<length>`](https://developer.mozilla.org/docs/Web/CSS/length)s, in addition to the standard [`<number>`](https://developer.mozilla.org/docs/Web/CSS/number). | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `perspective` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `rotate` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `rotate3d` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `rotateX` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `rotateY` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `rotateZ` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `scale` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `scale3d` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `scaleX` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `scaleY` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `scaleZ` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `skew` | 1 | 12 | 3.5Firefox 14 removed experimental support for `skew()`, but it was reintroduced in Firefox 15. | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `skewX` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `skewY` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `translate` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `translate3d` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |
| `translateX` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `translateY` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |
| `translateZ` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* CSS [`transform`](transform) property
* Individual transform properties:
	+ [`translate`](translate)
	+ [`scale`](scale)
	+ [`rotate`](rotate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function>

transform-style
===============


The `transform-style` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.


Try it
------



 If flattened, the element's children will not exist on their own in the 3D-space.

 As this property is not inherited, it must be set for all non-leaf descendants of the element.


Syntax
------



```
/\* Keyword values \*/
transform-style: flat;
transform-style: preserve-3d;

/\* Global values \*/
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

```
### Values


 `flat`  Indicates that the children of the element are lying in the plane of the element itself.

  `preserve-3d`  Indicates that the children of the element should be positioned in the 3D-space.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `flat` |
| Applies to | transformable elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
transform-style =   
  flat         [|](value_definition_syntax#single_bar)  
  preserve-3d    
  

```
Examples
--------


### Transform style demonstration



In this example we have a 3D cube created using transforms. The parent container of the cube faces has `transform-style: preserve-3d` set on it by default, so it is transformed in the 3D space and you can see it as intended.

 We also provide a checkbox allowing you to toggle between this, and `transform-style: flat`. In this alternative state, the cube faces are all flattened onto the plane of their parent, and you might not be able to see them at all, depending on the browser you are using.

 #### HTML

 
```
<section id="example-element">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

<div class="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>

```
 #### CSS

 
```
#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

```
 #### JavaScript

 
```
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # transform-style-property](https://w3c.github.io/csswg-drafts/css-transforms-2/#transform-style-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transform-style` | 3612 | 1212 | 491610 | No | 2315 | 94 | 4.43 | 3618 | 491610 | 2414 | 92 | 3.01.0 |


See also
--------


* [Using CSS transforms](css_transforms/using_css_transforms)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style>

transition
==========


The `transition` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is a [shorthand property](shorthand_properties) for [`transition-property`](transition-property), [`transition-duration`](transition-duration), [`transition-timing-function`](transition-timing-function), and [`transition-delay`](transition-delay).


Try it
------



 Transitions enable you to define the transition between two states of an element. Different states may be defined using <pseudo-classes> like [`:hover`](:hover) or [`:active`](:active) or dynamically set using JavaScript.


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`transition-delay`](transition-delay)
* [`transition-duration`](transition-duration)
* [`transition-property`](transition-property)
* [`transition-timing-function`](transition-timing-function)


Syntax
------




```
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-right 4s;

/\* property name | duration | delay \*/
transition: margin-right 4s 1s;

/\* property name | duration | easing function \*/
transition: margin-right 4s ease-in-out;

/\* property name | duration | easing function | delay \*/
transition: margin-right 4s ease-in-out 1s;

/\* Apply to 2 properties \*/
transition: margin-right 4s, color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out;

/\* Global values \*/
transition: inherit;
transition: initial;
transition: revert;
transition: revert-layer;
transition: unset;

```
 The `transition` property is specified as one or more single-property transitions, separated by commas.

 Each single-property transition describes the transition that should be applied to a single property (or the special values `all` and `none`). It includes:

 * zero or one value representing the property to which the transition should apply. This may be any one of:
	+ the keyword `none`
	+ the keyword `all`
	+ a [`<custom-ident>`](custom-ident) naming a CSS property.
* zero or one [`<easing-function>`](easing-function) value representing the easing function to use
* zero, one, or two [`<time>`](time) values. The first value that can be parsed as a time is assigned to the [`transition-duration`](transition-duration), and the second value that can be parsed as a time is assigned to [`transition-delay`](transition-delay).

 See [how things are handled](css_transitions/using_css_transitions#when_property_value_lists_are_of_different_lengths) when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`transition-delay`](transition-delay): `0s`
* [`transition-duration`](transition-duration): `0s`
* [`transition-property`](transition-property): all
* [`transition-timing-function`](transition-timing-function): `ease`
 |
| Applies to | all elements, [`::before`](::before) and [`::after`](::after) <pseudo-elements> |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`transition-delay`](transition-delay): as specified
* [`transition-duration`](transition-duration): as specified
* [`transition-property`](transition-property): as specified
* [`transition-timing-function`](transition-timing-function): as specified
 |
| Animation type | discrete |

Formal syntax
-------------



```
transition =   
  <single-transition>[#](value_definition_syntax#hash_mark)    
  
<single-transition> =   
  [[](value_definition_syntax#brackets) none [|](value_definition_syntax#single_bar) <single-transition-property> []](value_definition_syntax#brackets)  [||](value_definition_syntax#double_bar)  
  [<time>](time)                                   [||](value_definition_syntax#double_bar)  
  <easing-function>                        [||](value_definition_syntax#double_bar)  
  [<time>](time)                                     
  
<single-transition-property> =   
  all             [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)    
  
<easing-function> =   
  linear                          [|](value_definition_syntax#single_bar)  
  <linear-easing-function>        [|](value_definition_syntax#single_bar)  
  <cubic-bezier-easing-function>  [|](value_definition_syntax#single_bar)  
  <step-easing-function>            
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                [|](value_definition_syntax#single_bar)  
  ease-in                                             [|](value_definition_syntax#single_bar)  
  ease-out                                            [|](value_definition_syntax#single_bar)  
  ease-in-out                                         [|](value_definition_syntax#single_bar)  
  cubic-bezier( [<number [0,1]>](number) , [<number>](number) , [<number [0,1]>](number) , [<number>](number) )    
  
<step-easing-function> =   
  step-start                                [|](value_definition_syntax#single_bar)  
  step-end                                  [|](value_definition_syntax#single_bar)  
  steps( [<integer>](integer) [[](value_definition_syntax#brackets), <step-position> []](value_definition_syntax#brackets)[?](value_definition_syntax#question_mark) )    
  
<linear-stop-list> =   
  [[](value_definition_syntax#brackets) <linear-stop> []](value_definition_syntax#brackets)[#](value_definition_syntax#hash_mark)    
  
<step-position> =   
  jump-start  [|](value_definition_syntax#single_bar)  
  jump-end    [|](value_definition_syntax#single_bar)  
  jump-none   [|](value_definition_syntax#single_bar)  
  jump-both   [|](value_definition_syntax#single_bar)  
  start       [|](value_definition_syntax#single_bar)  
  end           
  
<linear-stop> =   
  [<number>](number)               [&&](value_definition_syntax#double_ampersand)  
  <linear-stop-length>[?](value_definition_syntax#question_mark)    
  
<linear-stop-length> =   
  [<percentage>](percentage)[{1,2}](value_definition_syntax#curly_braces)    
  

```
Examples
--------


### Simple example



This example performs a four-second font size transition with a one-second delay when the user hovers over the element.

 #### HTML

 
```
<a class="target">Hover over me</a>

```
 #### CSS

 
```
.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}

```

 There are several more examples of CSS transitions included in the [Using CSS transitions](css_transitions/using_css_transitions) article.


Specifications
--------------




| Specification |
| --- |
| [CSS Transitions # transition-shorthand-property](https://w3c.github.io/csswg-drafts/css-transitions/#transition-shorthand-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `transition` | 261 | 1212 | 4916["Before Firefox 57, transitions do not work when transitioning from a [`text-shadow`](https://developer.mozilla.org/docs/Web/CSS/text-shadow) with a color specified to a `text-shadow` without a color specified (see [bug 726550](https://bugzil.la/726550)).", "Before Firefox 57, cancelling a filling animation (for example, with `animation-fill-mode: forwards` set) can trigger a transition set on the same element, although only once (see [bug 1192592](https://bugzil.la/1192592) and [these test cases](https://bug1192592.bmoattachments.org/attachment.cgi?id=8843824) for more information).", "Before Firefox 57, the [`background-position`](https://developer.mozilla.org/docs/Web/CSS/background-position) property can't be transitioned between two values containing different numbers of [`<position>`](https://developer.mozilla.org/docs/Web/CSS/position_value) values, for example `background-position: 10px 10px;` and `background-position: 20px 20px, 30px 30px;` (see [bug 1390446](https://bugzil.la/1390446))."]4 | 1010 | 1512.110.1–15 | 93.1 | 4.42 | 2618 | 4916["Before Firefox 57, transitions do not work when transitioning from a [`text-shadow`](https://developer.mozilla.org/docs/Web/CSS/text-shadow) with a color specified to a `text-shadow` without a color specified (see [bug 726550](https://bugzil.la/726550)).", "Before Firefox 57, cancelling a filling animation (for example, with `animation-fill-mode: forwards` set) can trigger a transition set on the same element, although only once (see [bug 1192592](https://bugzil.la/1192592) and [these test cases](https://bug1192592.bmoattachments.org/attachment.cgi?id=8843824) for more information).", "Before Firefox 57, the [`background-position`](https://developer.mozilla.org/docs/Web/CSS/background-position) property can't be transitioned between two values containing different numbers of [`<position>`](https://developer.mozilla.org/docs/Web/CSS/position_value) values, for example `background-position: 10px 10px;` and `background-position: 20px 20px, 30px 30px;` (see [bug 1390446](https://bugzil.la/1390446))."]4 | 1412.110.1–14 | 92 | 1.51.0 |
| `gradients` | No | 12–79 | No | 10 | No | preview | No | No | No | No | No | No |


See also
--------


* [Using CSS transitions](css_transitions/using_css_transitions)
* [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transition>

translate3d()
=============


 The `translate3d()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) repositions an element in 3D space. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This transformation is characterized by a three-dimensional vector. Its coordinates define how much the element moves in each direction. 


Syntax
------



```
translate3d(tx, ty, tz)

```
### Values



 `tx`   Is a [`<length>`](../length) or [`<percentage>`](../percentage) representing the abscissa of the translating vector. 

  `ty`   Is a [`<length>`](../length) or [`<percentage>`](../percentage) representing the ordinate of the translating vector. 

  `tz`   Is a [`<length>`](../length) representing the z component of the translating vector. It can't be a [`<percentage>`](../percentage) value; in that case the property containing the transform is considered invalid. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |  A translation is not a linear transformation in ℝ^3 and can't be represented using a Cartesian-coordinate matrix.  |   (    1   0   0   tx     0   1   0   ty     0   0   1   tz     0   0   0   1    )   |


Examples
--------


### Using a single axis translation



#### HTML

 
```
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

```
 #### CSS

 
```
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* Equivalent to perspective(500px) translateX(10px) \*/
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

```
 #### Result



### Combining z-axis and x-axis translation



#### HTML

 
```
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

```
 #### CSS

 
```
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-translate3d](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-translate3d) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `translate3d` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`translate`](../translate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d>

translateY()
============


 The `translateY()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) repositions an element vertically on the 2D plane. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



   **Note:** `translateY(ty)` is equivalent to `translate(0, ty)` or `translate3d(0, ty, 0)`. 

 
Syntax
------



```
/\* <length-percentage> values \*/
transform: translateY(200px);
transform: translateY(50%);

```
### Values



 `<length-percentage>`   The value is a [`<length>`](../length) or [`<percentage>`](../percentage) representing the ordinate of the translating vector. A percentage value refers to the height of the reference box defined by the [`transform-box`](../transform-box) property. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix.  |   (    1   0   0     0   1   t     0   0   1    )   |   (    1   0   0     0   1   t     0   0   1    )   |   (    1   0   0   0     0   1   0   t     0   0   1   0     0   0   0   1    )   |
| `[1 0 0 1 0 t]` |


### Formal syntax



```
translateY(<length-percentage>)

```
Examples
--------


### HTML



```
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

```
### CSS



```
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1 # funcdef-transform-translatey](https://w3c.github.io/csswg-drafts/css-transforms/#funcdef-transform-translatey) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `translateY` | 1 | 12 | 3.5 | 9 | 10.5 | 3.1 | 2 | 18 | 4 | 11 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`translate`](../translate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY>

translateZ()
============


 The `translateZ()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a [`<transform-function>`](../transform-function) data type. 


Try it
------



  This transformation is defined by a [`<length>`](../length) which specifies how far inward or outward the element or elements move. 

  In the above interactive examples, [`perspective: 550px;`](../perspective) (to create a 3D space) and [`transform-style: preserve-3d;`](../transform-style) (so the children, the 6 sides of the cube, are also positioned in the 3D space), have been set on the cube. 

   **Note:** `translateZ(tz)` is equivalent to `translate3d(0, 0, tz)`. 

 
Syntax
------



```
translateZ(tz)

```
### Values



 `tz`   A [`<length>`](../length) representing the z-component of the translating vector. A positive value moves the element towards the viewer, and a negative value farther away. 

   

| Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
| --- | --- | --- | --- |
|  This transformation applies to the 3D space and can't be represented on the plane.  |  A translation is not a linear transformation in ℝ^3 and can't be represented using a Cartesian-coordinate matrix.  |   (    1   0   0   0     0   1   0   0     0   0   1   t     0   0   0   1    )   |


Examples
--------


 In this example, two boxes are created. One is positioned normally on the page, without being translated at all. The second is altered by applying perspective to create a 3D space, then moved towards the user. 

### HTML



```
<div>Static</div>
<div class="moved">Moved</div>

```
### CSS




```
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

```
  What really matters here is the class "moved"; let's take a look at what it does. First, the [`perspective()`](perspective) function positions the viewer relative to the plane that lies where z=0 (in essence, the surface of the screen). A value of `500px` means the user is 500 pixels "in front of" the imagery located at z=0. 

  Then, the `translateZ()` function moves the element 200 pixels "outward" from the screen, toward the user. This has the effect of making the element appear larger when viewed on a 2D display, or closer when viewed using a VR headset or other 3D display device. 

  Note if the `perspective()` value is less than the `translateZ()` value, such as `transform: perspective(200px) translateZ(300px);` the transformed element will not be visible as it is further than the user's viewport. The smaller the difference between the perspective and translateZ values, the closer the user is to the element and the larger the translated element will seem. 

  **Note:** As the composition of transforms isn't commutative, the order you write the different functions is significant. In particular, in general, you want `perspective()` to be placed before `translateZ()`.

 
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 2 # funcdef-translatez](https://w3c.github.io/csswg-drafts/css-transforms-2/#funcdef-translatez) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `translateZ` | 12 | 12 | 10 | 10 | 15 | 4 | 3 | 18 | 10 | 14 | 3.2 | 1.0 |


See also
--------


* [`transform`](../transform)
* [`<transform-function>`](../transform-function)
* [`translate`](../translate)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ>

unicode-range
=============


The `unicode-range` CSS descriptor sets the specific range of characters to be used from a font defined by [`@font-face`](../@font-face) and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.


Syntax
------



```
/\* <unicode-range> values \*/
unicode-range: U+26; /\* single codepoint \*/
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /\* codepoint range \*/
unicode-range: U+4??; /\* wildcard range \*/
unicode-range: U+0025-00FF, U+4??; /\* multiple values \*/

```
### Values


 ***single codepoint***  A single Unicode character code point, for example `U+26`.

  ***codepoint range***  A range of Unicode code points. So for example, `U+0025-00FF` means *include all characters in the range `U+0025` to `U+00FF`*.

  ***wildcard range***  A range of Unicode code points containing wildcard characters, that is using the `'?'` character, so for example `U+4??` means *include all characters in the range `U+400` to `U+4FF`*.

  Description
-----------


The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.

Formal definition
-----------------




|  |  |
| --- | --- |
| Related [at-rule](../at-rule) | [`@font-face`](../@font-face) |
| [Initial value](../initial_value) | `U+0-10FFFF` |
| [Computed value](../computed_value) | as specified |

Formal syntax
-------------



```
unicode-range =   
  <urange>[#](../value_definition_syntax#hash_mark)    
  
<urange> =   
  u '+' [<ident-token>](../ident-token) '?'[\*](../value_definition_syntax#asterisk)            [|](../value_definition_syntax#single_bar)  
  u [<dimension-token>](../dimension-token) '?'[\*](../value_definition_syntax#asterisk)            [|](../value_definition_syntax#single_bar)  
  u [<number-token>](../number-token) '?'[\*](../value_definition_syntax#asterisk)               [|](../value_definition_syntax#single_bar)  
  u [<number-token>](../number-token) [<dimension-token>](../dimension-token)  [|](../value_definition_syntax#single_bar)  
  u [<number-token>](../number-token) [<number-token>](../number-token)     [|](../value_definition_syntax#single_bar)  
  u '+' '?'[+](../value_definition_syntax#plus)                            
  

```
Examples
--------


### Using a different font for a single character



In this example we create a simple HTML containing a single [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, *Helvetica*, for the text, and a serif font, *Times New Roman*, for the ampersand.

 In the CSS we are in effect defining a completely separate [`@font-face`](../@font-face) that only includes a single character in it, meaning that only this character will be styled with this font. We could also have done this by wrapping the ampersand in a [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) and applying a different font just to that, but that is an extra element and rule set.

 #### HTML

 
```
<div>Me & You = Us</div>

```
 #### CSS

 
```
@font-face {
  font-family: "Ampersand";
  src: local("Times New Roman");
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # unicode-range-desc](https://w3c.github.io/csswg-drafts/css-fonts/#unicode-range-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `unicode-range` | 1 | 12 | 36 | 9 | 15 | 3.1 | ≤37 | 18 | 36 | 14 | 3 | 1.0 |


See also
--------


* [`font-display`](font-display)
* [`font-family`](font-family)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-weight`](font-weight)
* [`font-feature-settings`](../font-feature-settings)
* [`font-variation-settings`](font-variation-settings)
* [`src`](src)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range>

unset
=====



The `unset` CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its [initial value](initial_value) if not. In other words, it behaves like the [`inherit`](inherit) keyword in the first case, when the property is an [inherited property](inheritance#inherited_properties), and like the [`initial`](initial) keyword in the second case, when the property is a [non-inherited property](inheritance#non-inherited_properties).

 `unset` can be applied to any CSS property, including the CSS shorthand property [`all`](all).



Examples
--------


### Color



[`color`](color#formal_definition) is an inherited property.

 #### HTML

 
```
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>

```
 #### CSS

 
```
.foo {
  color: blue;
}

.bar {
  color: green;
}

p {
  color: red;
}

.bar p {
  color: unset;
}

```
 #### Result



### Border



[`border`](border#formal_definition) is a non-inherited property.

 #### HTML

 
```
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has a black border (initial default, not inherited).</p>
</div>

```
 #### CSS

 
```
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 4 # inherit-initial](https://w3c.github.io/csswg-drafts/css-cascade/#inherit-initial) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `unset` | 41 | 13 | 27 | No | 28 | 9.1 | 41 | 41 | 27 | 28 | 9.3 | 4.0 |


See also
--------


* Use the [`initial`](initial) keyword to set a property to its initial value.
* Use the [`inherit`](inherit) keyword to make an element's property the same as its parent.
* Use the [`revert`](revert) keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use the [`revert-layer`](revert-layer) keyword to reset a property to the value established in a previous cascade layer.
* The [`all`](all) property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/unset>

url()
=====



The `url()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The `url()` function can be passed as a parameter of another CSS functions, like the [`attr()`](attr) function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The `url()` functional notation is the value for the `<url>` data type.

  **Note:** There is a difference between a [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI) and a [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL). A URI identifies a resource. A URL is a type of URI, and describes the *location* of a resource. A URI can be either a URL or a name ([URN](https://developer.mozilla.org/en-US/docs/Glossary/URN)) of a resource.

 In CSS Level 1, the `url()` functional notation described only true URLs. In CSS Level 2, the definition of `url()` was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that `url()` could be used to create a `<uri>` CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, `url()` denotes only true `<url>`s.

  
```
/\* Simple usage \*/
url(https://example.com/images/myImg.jpg);
url;
url(myFont.woff);
url(#IDofSVGpath);

/\* associated properties \*/
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/\* Properties with fallbacks \*/
cursor: url(pointer.cur), pointer;

/\* Associated short-hand properties \*/
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/\* As a parameter in another CSS function \*/
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent));

/\* as part of a non-shorthand multiple value \*/
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/\* at-rules \*/
@document url("https://www.example.com/") { /\* … \*/ } 
    Experimental

@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);

```
 Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

  The `url()` function can be included as a value for [`background`](background), [`background-image`](background-image), [`border`](border), [`border-image`](border-image), [`border-image-source`](border-image-source), [`content`](content), [`cursor`](cursor), [`filter`](filter), [`list-style`](list-style), [`list-style-image`](list-style-image), [`mask`](mask), [`mask-image`](mask-image), [`offset-path`](offset-path), [src](@font-face/src) as part of a <@font-face> block, and [@counter-style/symbol](@counter-style/symbols) 



Syntax
------


### Values


 `<string>`  A string which may specify a URL or the ID of an SVG shape.

  <url>  A URL, which is a relative or absolute address, or pointer, to the web resource to be included, or a data URL, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:

 
```
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

```
 If you choose to write the URL without quotes, use a backslash (`\`) before any parentheses, whitespace characters, single quotes (`'`) and double quotes (`"`) that are part of the URL.

  path  References the ID of an [SVG shape](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) — `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect` — using the shape's geometry as the path.

    
`<url-modifier>`  Experimental 
  In the future, the `url()` function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string. This is not supported and not fully defined in the specification.

  ### Formal syntax



```
url( <string> <url-modifier>\* )

```
Examples
--------


### A url used in the background property



```
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}

```
### A url loading an image as a list bullet



```
ul {
  list-style: square url(http://www.example.com/redball.png);
}

```
### Usage in the content property



#### HTML

 
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

```
 #### CSS

 
```
li::after {
  content: " - " url(star.gif);
}

```
 #### Result



### Using a data URL



#### HTML

 
```
<div class="background"></div>

```
 #### CSS

 
```
.background {
  background: yellow;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}

```


### Usage in filters



When a URL is used as a path for a filter, the URL must be one of the following:

 1. The path to an SVG file with the ID of the filter appended.
2. the ID of the filter, if the SVG already exists on the page.

 
```
.blur {
  filter: url(my-file.svg#svg-blur); /\* the URL of an SVG file used as a filter \*/
}

.inline-blur {
  filter: url(#svg-blur); /\* the ID of an SVG that is embedded in the HTML page \*/
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # urls](https://w3c.github.io/csswg-drafts/css-values/#urls) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `url` | 1 | 12 | 1 | 3 | 3.5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [`<gradient>`](gradient)
* [`element()`](element())
* [`image()`](image/image)
* [`image-set()`](image/image-set)
* [`cross-fade()`](cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/url>

user-select
===========


The `user-select` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)), except in textboxes.


Try it
------


Syntax
------




```
/\* Keyword values \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/\* Global values \*/
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;

```
  **Note:** `user-select` is not an inherited property, though the initial `auto` value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers *do* implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium has chosen to [fix the issues](https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de) to make the final behavior meet the specifications.

 
### Values



 `none`  The text of the element and its sub-elements is not selectable. Note that the [`Selection`](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object can contain these elements.

  `auto`  The used value of `auto` is determined as follows:

 * On the `::before` and `::after` pseudo elements, the used value is `none`
* If the element is an editable element, the used value is `contain`
* Otherwise, if the used value of `user-select` on the parent of this element is `all`, the used value is `all`
* Otherwise, if the used value of `user-select` on the parent of this element is `none`, the used value is `none`
* Otherwise, the used value is `text`

  `text`  The text can be selected by the user.

  `all`  The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

  `contain`  Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

    **Note:** CSS UI 4 [renames `user-select: element` to `contain`](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05).

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
user-select =   
  auto     [|](value_definition_syntax#single_bar)  
  text     [|](value_definition_syntax#single_bar)  
  none     [|](value_definition_syntax#single_bar)  
  contain  [|](value_definition_syntax#single_bar)  
  all        
  

```
Examples
--------


### HTML



```
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>

```
### CSS




```
.unselectable {
  -webkit-user-select: none; /\* Safari \*/
  -ms-user-select: none; /\* IE 10+ \*/
  user-select: none;
}

.all {
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

```
  **Note:** `-webkit-user-select: all;` doesn't work in Safari; use only "none" or "text", or else it will allow typing in the `<html>` container. See the [browser compatibility table](#browser-compatibility) for up-to-date information.

 
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Basic User Interface Module Level 4 # content-selection](https://w3c.github.io/csswg-drafts/css-ui/#content-selection) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `user-select` | 541 | 791212–79 | 69491 | 10 | 4115 | 32–3 | 54≤37 | 5418 | 79494 | 4114 | 3 | 6.01.0 |
| `all` | 53 | 79 | 1 | No | 40 | 16 | 53 | 53 | 4 | 41 | 16 | 6.0 |
| `auto` | 1 | 12 | 1 | 10 | 15 | 2 | ≤37 | 18 | 4 | 14 | 3 | 1.0 |
| `contain` | No | 12–79 | No | 10 | No | No | No | No | No | No | No | No |
| `none` | 1 | 12 | 211–65 | 10 | 15 | 2 | ≤37 | 18 | 214–65 | 14 | 3 | 1.0 |
| `text` | 1 | 12 | 1 | 10 | 15 | 2Allows typing in the `<html>` container. | ≤37 | 18 | 4 | 14 | 3Allows typing in the `<html>` container. | 1.0 |


See also
--------


* [Polyfill for `user-select: contain`](https://github.com/github/user-select-contain-polyfill)
* [`::selection`](::selection) pseudo-element
* The JavaScript [`Selection`](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/user-select>

:user-valid (:-moz-ui-valid)
============================



The `:user-valid` CSS [pseudo-class](pseudo-classes) represents any validated form element whose value validates correctly based on its [validation constraints](https://developer.mozilla.org/en-US/docs/Learn/Forms#constraint_validation). However, unlike [`:valid`](:valid) it only matches once the user has interacted with it.

  **Note:** The pseudo-class behaves in the same way as the non-standard `:-moz-ui-valid` pseudo-class.

  This pseudo-class is applied according to the following rules:

 * If the control does not have focus, and the value is valid, apply this pseudo-class.
* If the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class.
* If the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke.
* If the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form.

 The result is that if the control was valid when the user started interacting with it, the validity styling is changed only when the user shifts focus to another control. However, if the user is trying to correct a previously-flagged value, the control shows immediately when the value becomes valid. Required items are flagged as invalid only if the user changes them or attempts to submit an unchanged invalid value.



Syntax
------



```
:user-valid {
  /\* ... \*/
}

```
Examples
--------


### Setting a color and symbol on :user-valid



 In the following example, the green border and ✅ only display once the user has interacted with the field. Try changing the email address to another valid email to see it in action. 

 
```
<form>
  <label for="email">Email *: </label>
  <input
 id="email"
 name="email"
 type="email"
 value="test@example.com"
 required />
  <span></span>
</form>

```
 
```
input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}

```


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # user-valid-pseudo](https://w3c.github.io/csswg-drafts/selectors/#user-valid-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:user-valid` | NoSee [bug 1156069](https://crbug.com/1156069). | NoSee [bug 1156069](https://crbug.com/1156069). | 884 | No | NoSee [bug 1156069](https://crbug.com/1156069). | 16.4 | NoSee [bug 1156069](https://crbug.com/1156069). | NoSee [bug 1156069](https://crbug.com/1156069). | 884 | NoSee [bug 1156069](https://crbug.com/1156069). | 16.4 | NoSee [bug 1156069](https://crbug.com/1156069). |


See also
--------


* [`:valid`](:valid)
* [`:invalid`](:invalid)
* [`:required`](:required)
* [`:optional`](:optional)
* [`:user-invalid`](:user-invalid)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid>

unicode-bidi
============


The `unicode-bidi` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property, together with the [`direction`](direction) property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The `unicode-bidi` property overrides this algorithm and allows the developer to control the text embedding.


Try it
------



 The `unicode-bidi` and [`direction`](direction) properties are the only properties that are not affected by the [`all`](all) shorthand.

  **Warning:** This property is intended for Document Type Definition (DTD) designers. Web designers and similar authors **should not** override it.

 
Syntax
------



```
/\* Keyword values \*/
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/\* Global values \*/
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: revert;
unicode-bidi: revert-layer;
unicode-bidi: unset;

```
### Values


 `normal`  The element does not offer an additional level of embedding with respect to the bidirectional algorithm. For inline elements, implicit reordering works across element boundaries.

  `embed`  If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the [`direction`](direction) property.

  `bidi-override`  For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the [`direction`](direction) property; the implicit part of the bidirectional algorithm is ignored.

  `isolate`  This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore *isolated* from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several `U+FFFC Object Replacement Character`, i.e. like an image.

  `isolate-override`  This keyword applies the isolation behavior of the `isolate` keyword to the surrounding content and the override behavior of the `bidi-override` keyword to the inner content.

  `plaintext`   This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the [`direction`](direction) property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm. This value allows the display of data that is already formatted using a tool following the Unicode Bidirectional Algorithm. 

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements, though some values have no effect on non-inline elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
unicode-bidi =   
  normal            [|](value_definition_syntax#single_bar)  
  embed             [|](value_definition_syntax#single_bar)  
  isolate           [|](value_definition_syntax#single_bar)  
  bidi-override     [|](value_definition_syntax#single_bar)  
  isolate-override  [|](value_definition_syntax#single_bar)  
  plaintext           
  

```
Examples
--------


### CSS



```
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}

```
### HTML



```
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [CSS Writing Modes Level 4 # unicode-bidi](https://w3c.github.io/csswg-drafts/css-writing-modes/#unicode-bidi) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `unicode-bidi` | 2 | 12 | 1 | 5.5 | 9.2 | 1.3 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `isolate` | 4816["Avoiding using `-webkit-isolate`. It can lock up older versions of Safari (up to version 9) and Chrome (up to version 47).", "Since Chrome 19, the syntax from a previous version of the specification, where the `isolate` keyword could be used together with `bidi-override`, is allowed."] | 7979 | 5010–54From Firefox 10 to Firefox 16 (inclusive), the `isolate` keyword could be used together with `bidi-override`, which was the syntax from a previous version of the specification. From Firefox 17, only one value is allowed. Use `isolate-override` instead the previous `isolate bidi-override`. | No | 3515["Avoiding using `-webkit-isolate`. It can lock up older versions of Opera (up to version 34).", "The syntax from a previous version of the specification, where the `isolate` keyword could be used together with `bidi-override`, is allowed."] | 116Avoiding using `-webkit-isolate`. It can lock up older versions of Safari (up to version 9) and Chrome (up to version 47). | 48 | 48 | 5010–54From Firefox 10 to Firefox 16 (inclusive), the `isolate` keyword could be used together with `bidi-override`, which was the syntax from a previous version of the specification. From Firefox 17, only one value is allowed. Use `isolate-override` instead the previous `isolate bidi-override`. | 35 | 116Avoiding using `-webkit-isolate`. It can lock up older versions of Safari (up to version 9) and Chrome (up to version 47). | 5.0 |
| `isolate-override` | 48 | 79 | 5017–54 | No | 35 | 117 | 48 | 48 | 5017–54 | 35 | 117 | 5.0 |
| `plaintext` | 48 | 79 | 5010–54["Before Firefox 50, the `plaintext` value was ignored for vertical writing modes ([bug 1302734](https://bugzil.la/1302734)).", "Before Firefox 15, `plaintext` didn't do anything to an inline element. The specification changed and the implementation was changed in Firefox 15."] | No | 35 | 116 | 48 | 48 | 5010–54["Before Firefox 50, the `plaintext` value was ignored for vertical writing modes ([bug 1302734](https://bugzil.la/1302734)).", "Before Firefox 15, `plaintext` didn't do anything to an inline element. The specification changed and the implementation was changed in Firefox 15."] | 35 | 116 | 5.0 |


See also
--------


* [`direction`](direction)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi>

:user-invalid (:-moz-ui-invalid)
================================



The `:user-invalid` CSS [pseudo-class](pseudo-classes) represents any validated form element whose value isn't valid based on their [validation constraints](https://developer.mozilla.org/en-US/docs/Learn/Forms#constraint_validation), after the user has interacted with it.

 The `:user-invalid` pseudo-class must match an [`:invalid`](:invalid), [`:out-of-range`](:out-of-range), or blank-but [`:required`](:required) element between the time the user has attempted to submit the form and before the user has interacted again with the form element.

  **Note:** The pseudo-class behaves in the same way as the non-standard `:-moz-ui-invalid` pseudo-class.

 

Syntax
------



```
:user-invalid {
  /\* ... \*/
}

```
Examples
--------


### Setting a color and symbol on :user-invalid



 In the following example, the red border and ❌ only display once the user has interacted with the field. Try typing something other than an email address to see it in action. 

 
```
<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>

```
 
```
input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

```


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # user-invalid-pseudo](https://w3c.github.io/csswg-drafts/selectors/#user-invalid-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:user-invalid` | NoSee [bug 1156069](https://crbug.com/1156069). | NoSee [bug 1156069](https://crbug.com/1156069). | 884 | No | NoSee [bug 1156069](https://crbug.com/1156069). | 16.4 | NoSee [bug 1156069](https://crbug.com/1156069). | NoSee [bug 1156069](https://crbug.com/1156069). | 884 | NoSee [bug 1156069](https://crbug.com/1156069). | 16.4 | NoSee [bug 1156069](https://crbug.com/1156069). |


See also
--------


* [`:valid`](:valid)
* [`:invalid`](:invalid)
* [`:required`](:required)
* [`:optional`](:optional)
* [`:user-valid`](:user-valid)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid>

:visited
========


The `:visited` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The `:visited` pseudo-class applies only [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and [`<area>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area) elements that have an `href` attribute.


Try it
------



 Styles defined by the `:visited` and unvisited [`:link`](:link) pseudo-classes can be overridden by any subsequent user-action pseudo-classes ([`:hover`](:hover) or [`:active`](:active)) that have at least equal specificity. To style links appropriately, put the `:visited` rule after the `:link` rule but before the `:hover` and `:active` rules, as defined by the *LVHA-order*: `:link` — `:visited` — `:hover` — `:active`. The `:visited` pseudo-class and `:link` pseudo-class are mutually exclusive.


Privacy restrictions
--------------------



For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

 * Allowable CSS properties are [`color`](color), [`background-color`](background-color), [`border-color`](border-color), [`border-bottom-color`](border-bottom-color), [`border-left-color`](border-left-color), [`border-right-color`](border-right-color), [`border-top-color`](border-top-color), [`column-rule-color`](column-rule-color), [`outline-color`](outline-color), [`text-decoration-color`](text-decoration-color), and [`text-emphasis-color`](text-emphasis-color).
* Allowable SVG attributes are `[fill](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)` and `[stroke](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)`.
* The alpha component of the allowed styles will be ignored. The alpha component of the element's non-`:visited` state will be used instead. In Firefox when the alpha component is `0`, the style set in `:visited` will be ignored entirely.
* Although these styles can change the appearance of colors to the end user, the [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method will lie and always return the value of the non-`:visited` color.
* The [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element is never matched by `:visited`.

  **Note:** For more information on these limitations and the reasons behind them, see [Privacy and the :visited selector](Privacy_and_the_:visited_selector).

 
Syntax
------



```
:visited {
  /\* ... \*/
}

```
Examples
--------


Properties that would otherwise have no color or be transparent cannot be modified with `:visited`. Of the properties that can be set with this pseudo-class, your browser probably has a default value for `color` and `column-rule-color` only. Thus, if you want to modify the other properties, you'll need to give them a base value outside the `:visited` selector.

### HTML



```
<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>

```
### CSS



```
a {
  /\* Specify non-transparent defaults to certain properties,
 allowing them to be styled with the :visited state \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-visited](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-visited) |
| [Selectors Level 4 # link](https://w3c.github.io/csswg-drafts/selectors/#link) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:visited` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `not_match_link` | 1 | 12 | 87 | No | 15 | 15 | 4.4 | 18 | 87 | 14 | 15 | 1.0 |
| `privacy_measures` | 6 | 12 | 4 | 8 | 15 | 5 | 37 | 18 | 4 | 14 | 4.2 | 1.0 |


See also
--------


* [Privacy and the :visited selector](Privacy_and_the_:visited_selector)
* Link-related pseudo-classes: [`:link`](:link), [`:active`](:active), [`:hover`](:hover)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:visited>

:valid
======


The `:valid` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) represents any [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) or other [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) element whose contents [validate](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.


Try it
------



 This pseudo-class is useful for highlighting correct fields for the user.


Syntax
------



```
:valid {
  /\* ... \*/
}

```
Examples
--------


### Indicating valid and invalid form fields



In this example, we use structures like this, which include extra `<span>`s to generate content on; we'll use these to provide indicators of valid/invalid data:

 
```
<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

```
 To provide these indicators, we use the following CSS:

 
```
input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

```
 We set the `<span>`s to `position: relative` so that we can position the generated content relative to them. We then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. To add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid.

  **Note:** We've used `::before` to add these labels, as we were already using `::after` for the "required" labels.

  You can try it below:


 Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.


Accessibility concerns
----------------------



The color green is commonly used to indicate valid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-valid](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-valid) |
| [Selectors Level 4 # validity-pseudos](https://w3c.github.io/csswg-drafts/selectors/#validity-pseudos) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:valid` | 10 | 12 | 4 | 10 | 10 | 5 | 37 | 18 | 4 | 10.1 | 5 | 1.0 |
| `form` | 40 | 79 | 13 | No | 27 | 9 | 40 | 40 | 14 | 27 | 9 | 4.0 |


See also
--------


* Other validation-related pseudo-classes: [`:required`](:required), [`:optional`](:optional), [`:invalid`](:invalid)
* [Form data validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
* Accessing the [validity state](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) from JavaScript


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:valid>

var()
=====


The `var()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) can be used to insert the value of a [custom property](--*) (sometimes called a "CSS variable") instead of any part of a value of another property.


Try it
------



 The `var()` function cannot be used in property names, selectors or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)


Syntax
------



The first argument to the function is the name of the custom property to be substituted. An optional second argument to the function serves as a fallback value. If the custom property referenced by the first argument is invalid, the function uses the second value.



```
<var()> =   
  var( [<custom-property-name>](custom-property-name) , [<declaration-value>](declaration-value)[?](value_definition_syntax#question_mark) )    
  

```
  **Note:** The syntax of the fallback, like that of custom properties, allows commas. For example, `var(--foo, red, blue)` defines a fallback of `red, blue`; that is, anything between the first comma and the end of the function is considered a fallback value.

 
### Values


 `<custom-property-name>`  A custom property's name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.

  `<declaration-value>`  The custom property's fallback value, which is used in case the custom property is invalid in the used context. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. `)`, `]`, or `}`, top-level semicolons, or exclamation marks. The fallback value can itself be a custom property using the `var()` syntax.

  **Note:** `var(--a,)` is valid, specifying that if the `--a` custom property is invalid or missing, the `var()` should be replaced with nothing.

   Examples
--------


### Using a custom property set on :root



#### CSS

 
```
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

```
 #### Result


 Here, the value of the `background-color` property has been set via the custom property `--main-bg-color`. So the background color of the HTML body will be pink.


### Using a custom property before it is set



#### CSS

 
```
body {
  background-color: var(--main-bg-color);
}

:root {
  --main-bg-color: pink;
}

```
 #### Result


 In this example, the background color of the HTML body will be pink even though the custom property is set later.


### Using a custom property set in another file



#### HTML

 
```
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="1.css"></link>
    <link rel="stylesheet" href="2.css"></link>
  </head>
  <body>
  </body>
</html>

```
 #### CSS

 
```
/\* 1.css \*/
body {
  background-color: var(--main-bg-color);
}

```
 
```
/\* 2.css \*/
:root {
  --main-bg-color: pink;
}

```
 #### Result


 The background color of the HTML body will be pink in this case even though the custom property is declared in another file.


### Custom properties with fallbacks for use when the property has not been set



#### HTML

 
```
<div class="component">
  <h1 class="header">Header</h1>
  <p class="text">Text</p>
</div>

```
 #### CSS

 
```
/\* In the component's style: \*/
.component .header {
  /\* header-color isn't set, and so remains blue, the fallback value \*/
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/\* In the larger application's style: \*/
.component {
  --text-color: #080;
}

```
 #### Result


 Since `--header-color` isn't set, the text "Header" will be blue, the fallback value.


### Using a custom property as a fallback



#### CSS

 
```
:root {
  --backup-bg-color: teal;
}

body {
  background-color: var(--main-bg-color, var(--backup-bg-color, white));
}

```
 #### Result


 Since `--main-bg-color` isn't set, the body's `background-color` will fall back to `--backup-bg-color`, which is teal.


Specifications
--------------




| Specification |
| --- |
| [CSS Custom Properties for Cascading Variables Module Level 1 # using-variables](https://w3c.github.io/csswg-drafts/css-variables/#using-variables) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `var()` | 49 | 15 | 31 | No | 36 | 9.1 | 50 | 49 | 31 | 36 | 9.3 | 5.0 |


See also
--------


* [`env(…)`](env) – read‑only environment variables controlled by the user‑agent.
* [Using CSS variables](using_css_custom_properties)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/var()>

vertical-align
==============


The `vertical-align` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets vertical alignment of an inline, inline-block or table-cell box.


Try it
------



 The vertical-align property can be used in two contexts:

 * To vertically align an inline element's box inside its containing line box. For example, it could be used to [vertically position an image in a line of text](#vertical_alignment_in_a_line_box).
* To vertically align [the content of a cell in a table](#vertical_alignment_in_a_table_cell).

 Note that `vertical-align` only applies to inline, inline-block and table-cell elements: you can't use it to vertically align [block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements).


Syntax
------




```
/\* Keyword values \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* <length> values \*/
vertical-align: 10em;
vertical-align: 4px;

/\* <percentage> values \*/
vertical-align: 20%;

/\* Global values \*/
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

```
 The `vertical-align` property is specified as one of the values listed below.


### Values for inline elements



#### Parent-relative values

 These values vertically align the element relative to its parent element:

  `baseline`  Aligns the baseline of the element with the baseline of its parent. The baseline of some [replaced elements](replaced_element), like [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea), is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

  `sub`  Aligns the baseline of the element with the subscript-baseline of its parent.

  `super`  Aligns the baseline of the element with the superscript-baseline of its parent.

  `text-top`  Aligns the top of the element with the top of the parent element's font.

  `text-bottom`  Aligns the bottom of the element with the bottom of the parent element's font.

  `middle`  Aligns the middle of the element with the baseline plus half the x-height of the parent.

  [`<length>`](length)  Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

  [`<percentage>`](percentage)  Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the [`line-height`](line-height) property. A negative value is allowed.

   #### Line-relative values

 The following values vertically align the element relative to the entire line:

  `top`  Aligns the top of the element and its descendants with the top of the entire line.

  `bottom`  Aligns the bottom of the element and its descendants with the bottom of the entire line.

   For elements that do not have a baseline, the bottom margin edge is used instead.


### Values for table cells



 
`baseline` (and `sub`, `super`, `text-top`, `text-bottom`, `<length>`, and `<percentage>`)  Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

  `top`  Aligns the top padding edge of the cell with the top of the row.

  `middle`  Centers the padding box of the cell within the row.

  `bottom`  Aligns the bottom padding edge of the cell with the bottom of the row.

   Negative values are allowed.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `baseline` |
| Applies to | inline-level and table-cell elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | no |
| Percentages | refer to the [`line-height`](line-height) of the element itself |
| [Computed value](computed_value) | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
vertical-align =   
  [[](value_definition_syntax#brackets) first [|](value_definition_syntax#single_bar) last []](value_definition_syntax#brackets)        [||](value_definition_syntax#double_bar)  
  <'alignment-baseline'>  [||](value_definition_syntax#double_bar)  
  <'baseline-shift'>        
  

```
Examples
--------


### Basic example



#### HTML

 
```
<div>
  An <img src="frame\_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>

```
 #### CSS

 
```
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}

```
 #### Result



### Vertical alignment in a line box



#### HTML

 
```
<p>
top:         <img style="vertical-align: top" src="star.png" alt="star"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:       <img style="vertical-align: super" src="star.png" alt="star"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>

```
 #### Result



### Vertical alignment in a table cell



#### HTML

 
```
<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>
        There is a theory which states that if ever anyone discovers exactly
        what the Universe is for and why it is here, it will instantly disappear
        and be replaced by something even more bizarre and inexplicable.
      </p>
      <p>
        There is another theory which states that this has already happened.
      </p>
    </td>
  </tr>
</table>

```
 #### CSS

 
```
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align](https://w3c.github.io/csswg-drafts/css2/#propdef-vertical-align) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `vertical-align` | 1 | 12 | 1 | 4 | 4 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Typical use cases of Flexbox, section "Center item"](css_flexible_box_layout/typical_use_cases_of_flexbox#center_item)
* [`line-height`](line-height), [`text-align`](text-align), [`margin`](margin)
* [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
* [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align>

visibility
==========


The `visibility` CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).


Try it
------



 To both hide an element *and remove it from the document layout*, set the [`display`](display) property to `none` instead of using `visibility`.


Syntax
------




```
/\* Keyword values \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

/\* Global values \*/
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

```
 The `visibility` property is specified as one of the keyword values listed below.


### Values


 `visible`  The element box is visible.

  `hidden`  The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have `visibility` set to `visible`. The element cannot receive focus (such as when navigating through [tab indexes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)).

  `collapse`  The `collapse` keyword has different effects for different elements:

 * For [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if `[`display`](display): none` were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
* Collapsed flex items and ruby annotations are hidden, and the space they would have occupied is removed.
* For other elements, `collapse` is treated the same as `hidden`.

  Accessibility concerns
----------------------


Using a `visibility` value of `hidden` on an element will remove it from the [accessibility tree](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis). This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

Interpolation
-------------


When animated, visibility values are interpolated between *visible* and *not-visible*. One of the start or ending values must therefore be `visible` or no [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) can happen. The value is interpolated as a discrete step, where values of the timing function between `0` and `1` map to `visible` and other values of the timing function (which occur only at the start/end of the transition or as a result of `cubic-bezier()` functions with y values outside of [0, 1]) map to the closer endpoint.

Notes
-----


* Support for `visibility: collapse` is missing or partially incorrect in some modern browsers. It may not be correctly treated like `visibility: hidden` on elements other than table rows and columns.
* `visibility: collapse` may change the layout of a table if the table has nested tables within the cells that are collapsed, unless `visibility: visible` is specified explicitly on nested tables.
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `visible` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | a [visibility](visibility#interpolation) |

Formal syntax
-------------



```
visibility =   
  visible   [|](value_definition_syntax#single_bar)  
  hidden    [|](value_definition_syntax#single_bar)  
  collapse    
  

```
Examples
--------


### Basic example



#### HTML

 
```
<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">
  The third paragraph is visible. Notice the second paragraph is still occupying
  space.
</p>

```
 #### CSS

 
```
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

```


### Table example



#### HTML

 
```
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

```
 #### CSS

 
```
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Display Module Level 3 # visibility](https://w3c.github.io/csswg-drafts/css-display/#visibility) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `visibility` | 1 | 12 | 1 | 4["Internet Explorer doesn't support `visibility: initial`.", "Internet Explorer doesn't support `visibility: unset`.", "Up to Internet Explorer 7, descendants of `hidden` elements will still be invisible even if they have `visibility` set to `visible`."] | 4 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `collapse` | 1["Chrome treats `visibility: collapse` like `hidden`, leaving a white gap.", "Chrome supports the `collapse` value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | 12 | 1["Firefox doesn't hide borders when hiding [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements if `border-collapse: collapse` is set.", "Before Firefox 88, `collapse` is not supported on ruby annotations."] | 10 | 4["Opera treats `visibility: collapse` like `hidden`, leaving a white gap.", "Opera supports the `collapse` value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | 1.3["Safari treats `visibility: collapse` like `hidden`, leaving a white gap.", "Safari supports the collapse value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | ≤37["WebView treats `visibility: collapse` like `hidden`, leaving a white gap.", "WebView supports the `collapse` value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | 18["Chrome treats `visibility: collapse` like `hidden`, leaving a white gap.", "Chrome supports the `collapse` value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | 4["Firefox doesn't hide borders when hiding [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements if `border-collapse: collapse` is set.", "Before Firefox 88, `collapse` is not supported on ruby annotations."] | 10.1["Opera treats `visibility: collapse` like `hidden`, leaving a white gap.", "Opera supports the `collapse` value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | 1["Safari treats `visibility: collapse` like `hidden`, leaving a white gap.", "Safari supports the collapse value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] | 1.0["Samsung Internet treats `visibility: collapse` like `hidden`, leaving a white gap.", "Samsung Internet supports the `collapse` value only on [`<tr>`](https://developer.mozilla.org/docs/Web/HTML/Element/tr), [`<thead>`](https://developer.mozilla.org/docs/Web/HTML/Element/thead), [`<tbody>`](https://developer.mozilla.org/docs/Web/HTML/Element/tbody), and [`<tfoot>`](https://developer.mozilla.org/docs/Web/HTML/Element/tfoot), but not on [`<col>`](https://developer.mozilla.org/docs/Web/HTML/Element/col) and [`<colgroup>`](https://developer.mozilla.org/docs/Web/HTML/Element/colgroup) elements."] |


See also
--------


* [`display`](display)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/visibility>

:where()
========


The `:where()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.


Try it
------



 The difference between `:where()` and [`:is()`](:is) is that `:where()` always has 0 <specificity>, whereas `:is()` takes on the specificity of the most specific selector in its arguments.


### Forgiving Selector Parsing



The specification defines `:is()` and `:where()` as accepting a [forgiving selector list](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list).

 In CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using `:is()` or `:where()` instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.

 
```
:where(:valid, :unsupported) {
  /\* … \*/
}

```
 Will still parse correctly and match `:valid` even in browsers which don't support `:unsupported`, whereas:

 
```
:valid,
:unsupported {
  /\* … \*/
}

```
 Will be ignored in browsers which don't support `:unsupported` even if they support `:valid`.


Examples
--------


### Comparing :where() and :is()



This example shows how `:where()` works, and also illustrates the difference between `:where()` and `:is()`.

 Take the following HTML:

 
```
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

```
 In this somewhat-contrived example, we have two articles that each contain a section, an aside, and a footer. They differ by the classes used to mark the child elements.

 To make selecting the links inside them simpler, but still distinct, we *could* use `:is()` or `:where()`, in the following manner:

 
```
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

```
 However, what if we later want to override the color of links in the footers using a simple selector?

 
```
footer a {
  color: blue;
}

```
 This won't work for the red links, because the selectors inside `:is()` count towards the specificity of the overall selector, and class selectors have a higher specificity than element selectors.

 However, selectors inside `:where()` have specificity 0, so the orange footer link will be overridden by our simple selector.

  **Note:** You can also find this example on GitHub; see [is-where](https://mdn.github.io/css-examples/is-where/).

 

Syntax
------



```
:where(<complex-selector-list>) {
  /\* ... \*/
}

```
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # zero-matches](https://w3c.github.io/csswg-drafts/selectors/#zero-matches) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:where` | 88 | 88 | 78 | No | 74 | 14 | 88 | 88 | 79 | 63 | 14 | 15.0 |
| `forgiving_selector_list` | 88 | 88 | 82 | No | 74 | 14 | 88 | 88 | 82 | 63 | 14 | 15.0 |


See also
--------


* [`:is()`](:is)
* [Selector list](selector_list)
* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:where>

word-break
==========


The `word-break` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether line breaks appear wherever the text would otherwise overflow its content box.


Try it
------


Syntax
------




```
/\* Keyword values \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /\* deprecated \*/

/\* Global values \*/
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

```
 The `word-break` property is specified as a single keyword chosen from the list of values below.


### Values



 `normal`  Use the default line break rule.

  `break-all`  To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

  `keep-all`  Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for `normal`.

  
`break-word`  Deprecated 
  Has the same effect as `word-break: normal` and `overflow-wrap: anywhere`, regardless of the actual value of the [`overflow-wrap`](overflow-wrap) property.

    **Note:** In contrast to `word-break: break-word` and `overflow-wrap: break-word` (see [`overflow-wrap`](overflow-wrap)), `word-break: break-all` will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

   **Note:** While `word-break: break-word` is deprecated, it has the same effect, when specified, as `word-break: normal` and `overflow-wrap: anywhere` — regardless of the actual value of the [`overflow-wrap`](overflow-wrap) property.

 
Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
word-break =   
  normal      [|](value_definition_syntax#single_bar)  
  keep-all    [|](value_definition_syntax#single_bar)  
  break-all   [|](value_definition_syntax#single_bar)  
  break-word    
  

```
Examples
--------


### HTML



```
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

```
### CSS




```
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # word-break-property](https://w3c.github.io/csswg-drafts/css-text/#word-break-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `word-break` | 1 | 12 | 15 | 8Don't use `-ms-word-break`, which is a synonym for `word-break`.5.5No version of Internet Explorer supports the `initial` value. | 15 | 3 | ≤37 | 18 | 15 | 14 | 2 | 1.0 |
| `break-word` | 1 | 79 | 67 | No | 15 | 3 | ≤37 | 18 | 67 | 14 | 2 | 1.0 |
| `keep-all` | 44 | 12 | 15 | 5.5 | 31 | 9 | 44 | 44 | 15 | 32 | 9 | 4.0 |


See also
--------


* [`overflow-wrap`](overflow-wrap)
* [`hyphens`](hyphens)
* [`line-break`](line-break)
* [Guide to wrapping and breaking text](css_text/wrapping_text)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/word-break>

word-spacing
============


The `word-spacing` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the length of space between words and between tags.


Try it
------


Syntax
------



```
/\* Keyword value \*/
word-spacing: normal;

/\* <length> values \*/
word-spacing: 3px;
word-spacing: 0.3em;

/\* Global values \*/
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

```
### Values


 `normal`  The normal inter-word spacing, as defined by the current font and/or the browser.

  [`<length>`](length)  Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.

  Examples
--------


### HTML



```
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>

```
### CSS




```
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

```


Accessibility concerns
----------------------



A large positive or negative `word-spacing` value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the beginning and end of each word is unrecognizable.

 Legible `word-spacing` must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line). |
| [Inherited](inheritance) | yes |
| Percentages | refer to the width of the affected glyph |
| [Computed value](computed_value) | absolute [`<length>`](length) |
| Animation type | a [length](length#interpolation) |

Formal syntax
-------------



```
word-spacing =   
  normal    [|](value_definition_syntax#single_bar)  
  [<length>](length)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # word-spacing-property](https://w3c.github.io/csswg-drafts/css-text/#word-spacing-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `word-spacing` | 1 | 12 | 1 | 6 | 3.5 | 1 | 4.4 | 18 | 4 | 14 | 1 | 1.0 |
| `percentages` | No | No | 45 | No | No | 7 | No | No | 45 | No | 7 | No |
| `svg` | 1 | 12 | 72 | 9 | 7 | 5.1 | ≤37 | 18 | No | 14 | 5 | 1.0 |


See also
--------


* [`letter-spacing`](letter-spacing)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing>

z-index
=======


The `z-index` CSS property sets the z-order of a [positioned](position) element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.


Try it
------



 For a positioned box (that is, one with any `position` other than `static`), the `z-index` property specifies:

 1. The stack level of the box in the current [stacking context](css_positioning/understanding_z_index/the_stacking_context).
2. Whether the box establishes a local stacking context.


Syntax
------




```
/\* Keyword value \*/
z-index: auto;

/\* <integer> values \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* Negative values to lower the priority \*/

/\* Global values \*/
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

```
 The `z-index` property is specified as either the keyword `auto` or an `<integer>`.


### Values


 `auto`  The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is `0`.

  `<integer>`  This [`<integer>`](integer) is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | positioned elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | an [integer](integer#interpolation) |
| Creates [stacking context](css_positioning/understanding_z_index/the_stacking_context) | yes |

Formal syntax
-------------



```
z-index =   
  auto       [|](value_definition_syntax#single_bar)  
  [<integer>](integer)  [|](value_definition_syntax#single_bar)  
  inherit      
  

```
Examples
--------


### Visually layering elements



#### HTML

 
```
<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>

```
 #### CSS

 
```
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* put .gold-box above .green-box and .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* put .green-box above .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index](https://w3c.github.io/csswg-drafts/css2/#z-index) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `z-index` | 1 | 12 | 1 | 4 | 4 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `negative_values` | 1 | 12 | 3 | 4 | 4 | 1 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* CSS [`position`](position) property
* [Understanding CSS z-indexes](css_positioning/understanding_z_index)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/z-index>

white-space
===========


The `white-space` CSS property sets how [white space](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace) inside an element is handled.


Try it
------



 The property specifies two things:

 * Whether and how white space is [collapsed](#collapsing_of_white_space).
* Whether lines may wrap at soft-wrap opportunities.

  **Note:** To make words break *within themselves*, use [`overflow-wrap`](overflow-wrap), [`word-break`](word-break), or [`hyphens`](hyphens) instead.

 
Syntax
------




```
/\* Keyword values \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/\* Global values \*/
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

```
 The `white-space` property is specified as a single keyword chosen from the list of values below.


### Values



 `normal`  Sequences of white space are [collapsed](#collapsing_of_white_space). Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

  `nowrap`  [Collapses](#collapsing_of_white_space) white space as for `normal`, but suppresses line breaks (text wrapping) within the source.

  `pre`  Sequences of white space are preserved. Lines are only broken at newline characters in the source and at [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br) elements.

  `pre-wrap`  Sequences of white space are preserved. Lines are broken at newline characters, at [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br), and as necessary to fill line boxes.

  `pre-line`  Sequences of white space are [collapsed](#collapsing_of_white_space). Lines are broken at newline characters, at [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br), and as necessary to fill line boxes.

  `break-spaces`  The behavior is identical to that of `pre-wrap`, except that:

 * Any sequence of preserved white space always takes up space, including at the end of the line.
* A line breaking opportunity exists after every preserved white space character, including between white space characters.
* Such preserved spaces take up space and do not hang, and thus affect the box's intrinsic sizes (min-content size and max-content size).

   The following table summarizes the behavior of the various `white-space` values:

 

|  | New lines | Spaces and tabs | Text wrapping | End-of-line spaces | End-of-line other space separators |
| --- | --- | --- | --- | --- | --- |
| `normal` | Collapse | Collapse | Wrap | Remove | Hang |
| `nowrap` | Collapse | Collapse | No wrap | Remove | Hang |
| `pre` | Preserve | Preserve | No wrap | Preserve | No wrap |
| `pre-wrap` | Preserve | Preserve | Wrap | Hang | Hang |
| `pre-line` | Preserve | Collapse | Wrap | Remove | Hang |
| `break-spaces` | Preserve | Preserve | Wrap | Wrap | Wrap |

  **Note:** There is a distinction made between **spaces** and **other space separators**. These are defined as follows:

  spaces  Spaces (U+0020), tabs (U+0009), and segment breaks (such as newlines).

  other space separators  All other space separators defined in Unicode, other than those already defined as spaces.

   Where white space is said to *hang*, this can affect the size of the box when measured for intrinsic sizing.

 
Collapsing of white space
-------------------------


The CSS Text specification contains a [Collapsing and Transformation](https://drafts.csswg.org/css-text-3/#white-space-phase-1) section that precisely defines what "white space is collapsed" means, including an example with an illustration. Usually, it means reducing sequences of multiple white-space characters down to a single space character — though in some cases it means reducing them to no character (the empty string).

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
white-space =   
  normal        [|](value_definition_syntax#single_bar)  
  pre           [|](value_definition_syntax#single_bar)  
  nowrap        [|](value_definition_syntax#single_bar)  
  pre-wrap      [|](value_definition_syntax#single_bar)  
  break-spaces  [|](value_definition_syntax#single_bar)  
  pre-line        
  

```
Examples
--------


### Basic example



```
code {
  white-space: pre;
}

```
### Line breaks inside <pre> elements



```
pre {
  white-space: pre-wrap;
}

```
### In action



#### HTML

 
```
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Text Module Level 3 # white-space-property](https://w3c.github.io/csswg-drafts/css-text/#white-space-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `white-space` | 1 | 12 | 1 | 5.5 | 4 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `break-spaces` | 76 | 79 | 69 | No | 62 | 13.1 | 76 | 76 | No | 54 | 13.4 | 12.0 |
| `nowrap` | 1 | 12 | 1 | 5.5 | 4 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `pre` | 1 | 12 | 1 | 6 | 4 | 1 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `pre-line` | 1 | 12 | 3.5 | 8 | 9.5 | 3 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `pre-wrap` | 1 | 12 | 31–3.6 | 8From Internet Explorer 5.5 to 7, `word-wrap: break-word;` can be used for line breaks in `pre` elements. | 8 | 3 | 37 | 18 | 4 | 14 | 1 | 1.0 |
| `svg_support` | No | 12–79 | 36 | 10 | No | No | No | No | 36 | No | No | No |
| `textarea_support` | 1 | 12 | 36 | 5.5 | 4 | 1 | 37 | 18 | 36 | 14 | 1 | 1.0 |


See also
--------


* Properties that define how words break *within themselves*: [`overflow-wrap`](overflow-wrap), [`word-break`](word-break), [`hyphens`](hyphens)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/white-space>

widows
======



The `widows` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the minimum number of lines in a block container that must be shown at the *top* of a [page](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media), region, or [column](css_columns).

 
```
/\* <integer> values \*/
widows: 2;
widows: 3;

/\* Global values \*/
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;

```
 In typography, a *widow* is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.)



Syntax
------


### Values


 [`<integer>`](integer)  The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `2` |
| Applies to | block container elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
widows =   
  [<integer [0,∞]>](integer)    
  

```
Examples
--------


### Controlling column widows



#### HTML

 
```
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>

```
 #### CSS

 
```
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3 # widows-orphans](https://w3c.github.io/csswg-drafts/css-break/#widows-orphans) |
| [CSS Multi-column Layout Module Level 1 # filling-columns](https://w3c.github.io/csswg-drafts/css-multicol/#filling-columns) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `widows` | 25 | 12 | No | 8 | 9.2 | 1.3 | 4.4 | 25 | No | 14 | 1 | 1.5 |


See also
--------


* [`orphans`](orphans)
* [Paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/widows>

will-change
===========



The `will-change` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed. These kinds of optimizations can increase the responsiveness of a page by doing potentially expensive work before they are actually required.

  **Warning:** `will-change` is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.

  
```
/\* Keyword values \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* Example of <custom-ident> \*/
will-change: opacity; /\* Example of <custom-ident> \*/
will-change: left, top; /\* Example of two <animatable-feature> \*/

/\* Global values \*/
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

```
 Proper usage of this property can be a bit tricky:

 * *Don't apply will-change to too many elements.* The browser already tries as hard as it can to optimize everything. Some of the stronger optimizations that are likely to be tied to `will-change` end up using a lot of a machine's resources, and when overused like this can cause the page to slow down or consume a lot of resources.
* *Use sparingly.* The normal behavior for optimizations that the browser make is to remove the optimizations as soon as it can and revert back to normal. But adding `will-change` directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have otherwise. So it is a good practice to switch `will-change` on and off using script code before and after the change occurs.
* *Don't apply will-change to elements to perform premature optimization*. If your page is performing well, don't add the `will-change` property to elements just to wring out a little more speed. `will-change` is intended to be used as something of a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems. Excessive use of `will-change` will result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. This will lead to worse performance.
* *Give it sufficient time to work*. This property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. Then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. So it is important to give the browser some time to actually do the optimizations. Find some way to predict at least slightly ahead of time that something will change, and set `will-change` then.
* *Be aware, that will-change may actually influence the visual appearance of elements*, when used with property values, that create a [stacking context](css_positioning/understanding_z_index/the_stacking_context) (e.g. will-change: opacity), as the stacking context is created up front.



Syntax
------


### Values



 `auto`  This keyword expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does.

   The `<animatable-feature>` can be one of the following values:

  `scroll-position`  Indicates that the author expects to animate or change the scroll position of the element in the near future.

  `contents`  Indicates that the author expects to animate or change something about the element's contents in the near future.

  [`<custom-ident>`](custom-ident)  Indicates that the author expects to animate or change the property with the given name on the element in the near future. If the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to. It cannot be one of the following values: `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, or `contents`. The spec doesn't define the behavior of particular value, but it is common for `transform` to be a compositing layer hint. [Chrome currently takes two actions](https://github.com/operasoftware/devopera/pull/330), given particular CSS property idents: establish a new compositing layer or a new [stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context).

  
### Via stylesheet



It may be appropriate to include `will-change` in your style sheet for an application that does page flips on key presses like an album or a slide deck presentation where the pages are large and complex. This will let browser prepare the transition ahead of time and allow for snappy transitions between the pages as soon as the key is pressed. But use caution with the `will-change` property directly in stylesheets. It may cause the browser to keep the optimization in memory for much longer than it is needed.

 
```
.slide {
  will-change: transform;
}

```

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
will-change =   
  auto                    [|](value_definition_syntax#single_bar)  
  <animateable-feature>[#](value_definition_syntax#hash_mark)    
  
<animateable-feature> =   
  scroll-position  [|](value_definition_syntax#single_bar)  
  contents         [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)     
  

```
Examples
--------


### Via script



This is an example showing how to apply the `will-change` property through scripting, which is probably what you should be doing in most cases.

 
```
const el = document.getElementById("element");

// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Will Change Module Level 1 # will-change](https://w3c.github.io/csswg-drafts/css-will-change/#will-change) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `will-change` | 36 | 79 | 36 | No | 24 | 9.1 | 37 | 36 | 36 | 24 | 9.3 | 3.0 |


See also
--------


* [`transform`](transform)
* Individual transform properties:
	+ [`translate`](translate)
	+ [`scale`](scale)
	+ [`rotate`](rotate)
	+ Note: there is no individual `skew` property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/will-change>

writing-mode
============


The `writing-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (`html` element for HTML documents).


Try it
------



 This property specifies the *block flow direction*, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content.


Syntax
------




```
/\* Keyword values \*/
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/\* Global values \*/
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

```
 The `writing-mode` property is specified as one of the values listed below. The flow direction in horizontal scripts is also affected by the [directionality of that script](https://www.w3.org/International/questions/qa-scripts.en), either left-to-right (`ltr`, like English and most other languages) or right-to-left (`rtl`, like Hebrew or Arabic).


### Values


 `horizontal-tb`  For `ltr` scripts, content flows horizontally from left to right. For `rtl` scripts, content flows horizontally from right to left. The next horizontal line is positioned below the previous line.

  `vertical-rl`  For `ltr` scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the left of the previous line. For `rtl` scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the right of the previous line.

  `vertical-lr`  For `ltr` scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the right of the previous line. For `rtl` scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the left of the previous line.

  
`sideways-rl`  Experimental 
  For `ltr` scripts, content flows vertically from top to bottom. For `rtl` scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the right.

  
`sideways-lr`  Experimental 
  For `ltr` scripts, content flows vertically from bottom to top. For `rtl` scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the left.

  
`lr`  Deprecated 
  Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.

  
`lr-tb`  Deprecated 
  Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.

  
`rl`  Deprecated 
  Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.

  
`tb`  Deprecated 
  Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead.

  
`tb-lr`  Deprecated 
  Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead.

  
`tb-rl`  Deprecated 
  Deprecated except for SVG1 documents. For CSS, use `vertical-rl` instead.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `horizontal-tb` |
| Applies to | all elements except table row groups, table column groups, table rows, and table columns |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
writing-mode =   
  horizontal-tb  [|](value_definition_syntax#single_bar)  
  vertical-rl    [|](value_definition_syntax#single_bar)  
  vertical-lr    [|](value_definition_syntax#single_bar)  
  sideways-rl    [|](value_definition_syntax#single_bar)  
  sideways-lr      
  

```
Examples
--------


### Using multiple writing modes



This example demonstrates all of the writing modes, showing each with text in various languages.

 #### HTML

 The HTML is a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with each writing mode in a row with a column showing text in various scripts using that writing mode.

 
```
<table>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="example Text1"><span>我家没有电脑。</span></td>
    <td class="example Text1"><span>Example text</span></td>
    <td class="example Text1"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text1"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="example Text2"><span>我家没有电脑。</span></td>
    <td class="example Text2"><span>Example text</span></td>
    <td class="example Text2"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text2"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="example Text3"><span>我家没有电脑。</span></td>
    <td class="example Text3"><span>Example text</span></td>
    <td class="example Text3"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text3"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="example Text4"><span>我家没有电脑。</span></td>
    <td class="example Text4"><span>Example text</span></td>
    <td class="example Text4"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text4"><span>1994年に至っては</span></td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="example Text5"><span>我家没有电脑。</span></td>
    <td class="example Text5"><span>Example text</span></td>
    <td class="example Text5"><span>מלל ארוך לדוגמא</span></td>
    <td class="example Text5"><span>1994年に至っては</span></td>
  </tr>
</table>

```
 #### CSS

 The CSS that adjusts the directionality of the content looks like this:

 
```
.example.Text1 span,
.example.Text1 {
  writing-mode: horizontal-tb;
}

.example.Text2 span,
.example.Text2 {
  writing-mode: vertical-lr;
}

.example.Text3 span,
.example.Text3 {
  writing-mode: vertical-rl;
}

.example.Text4 span,
.example.Text4 {
  writing-mode: sideways-lr;
}

.example.Text5 span,
.example.Text5 {
  writing-mode: sideways-rl;
}

```
 #### Result

 This image shows what the output should look like, in case your browser's support for `writing-mode` is incomplete:

  ![A 6 rows by 5 columns table showing the various directional flow of text and number adjusted using the vertical-lr or rl, horizontal-lr or rl, sideways-lr or rl horizontal-tb CSS properties. The flow is applied to different languages] 



Specifications
--------------




| Specification |
| --- |
| [CSS Writing Modes Level 4 # block-flow](https://w3c.github.io/csswg-drafts/css-writing-modes/#block-flow) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `writing-mode` | 488 | 1212 | 41Firefox 42 added support for bidirectional and RTL scripts in vertical modes. | 9Internet Explorer's implementation differs from the specification.9Internet Explorer's implementation differs from the specification. | 3515 | 10.15.1 | 483 | 4818 | 41Firefox 42 added support for bidirectional and RTL scripts in vertical modes. | 3514 | 10.35 | 5.01.0 |
| `horizontal_vertical_values` | 48 | 79 | 43 | No | 35 | 9 | 48 | 48 | 43 | 35 | 9 | 5.0 |
| `sideways_values` | No | No | 43 | No | No | No | No | No | 43 | No | No | No |
| `svg_values` | 48 | 12 | 43 | 9 | 35 | 10.1 | 48 | 48 | 43 | 35 | 10.3 | 5.0 |


See also
--------


* SVG [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/writing-mode) attribute
* [`direction`](direction)
* [`unicode-bidi`](unicode-bidi)
* [`text-orientation`](text-orientation)
* [`text-combine-upright`](text-combine-upright)
* [CSS Logical properties](css_logical_properties)
* [Styling vertical text (Chinese, Japanese, Korean and Mongolian)](https://www.w3.org/International/articles/vertical-text/)
* Extensive browsers support test results: <https://w3c.github.io/i18n-tests/results/writing-mode-vertical>


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode>

CSS selectors
=============



**CSS selectors** define the pattern to select elements to which a set of CSS rules are then applied.

 CSS selectors can be grouped into the following categories based on the type of elements they can select.



Basic selectors
---------------


 [Universal selector](universal_selectors)  Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

 **Syntax:** `*` `ns|*` `*|*`

 **Example:** `*` will match all the elements of the document.

  [Type selector](type_selectors)  Selects all elements that have the given node name.

 **Syntax:** `elementname`

 **Example:** `input` will match any [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element.

  [Class selector](class_selectors)  Selects all elements that have the given `class` attribute.

 **Syntax:** `.classname`

 **Example:** `.index` will match any element that has `class="index"`.

  [ID selector](id_selectors)  Selects an element based on the value of its `id` attribute. There should be only one element with a given ID in a document.

 **Syntax:** `#idname`

 **Example:** `#toc` will match the element that has `id="toc"`.

  [Attribute selector](attribute_selectors)  Selects all elements that have the given attribute.

 **Syntax:** `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`

 **Example:** `[autoplay]` will match all elements that have the `autoplay` attribute set (to any value).

  Grouping selectors
------------------


 [Selector list](selector_list)  The `,` selector is a grouping method that selects all the matching nodes.

 **Syntax:** `A, B`

 **Example:** `div, span` will match both [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) and [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) elements.

  Combinators
-----------


 [Descendant combinator](descendant_combinator)  The " " (space) combinator selects nodes that are descendants of the first element.

 **Syntax:** `A B`

 **Example:** `div span` will match all [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) elements that are inside a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) element.

  [Child combinator](child_combinator)  The `>` combinator selects nodes that are direct children of the first element.

 **Syntax:** `A > B`

 **Example:** `ul > li` will match all [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) elements that are nested directly inside a [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) element.

  [General sibling combinator](general_sibling_combinator)  The `~` combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

 **Syntax:** `A ~ B`

 **Example:** `p ~ span` will match all [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) elements that follow a [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p), immediately or not.

  [Adjacent sibling combinator](adjacent_sibling_combinator)  The `+` combinator matches the second element only if it *immediately* follows the first element.

 **Syntax:** `A + B`

 **Example:** `h2 + p` will match the first [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element that *immediately* follows an [h2](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) element.

  
[Column combinator](column_combinator)  Experimental 
  The `||` combinator selects nodes which belong to a column.

 **Syntax:** `A || B`

 **Example:** `col || td` will match all [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) elements that belong to the scope of the [`<col>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).

  Pseudo-classes and pseudo-elements
----------------------------------


 [Pseudo classes](pseudo-classes)  The `:` pseudo allow the selection of elements based on state information that is not contained in the document tree.

 **Example:** `a:visited` will match all [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) elements that have been visited by the user.

  [Pseudo elements](pseudo-elements)  The `::` pseudo represent entities that are not included in HTML.

 **Example:** `p::first-line` will match the first line of all [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) elements.

  Structure of a selector
-----------------------



The term 'selector' can refer to one of the following:

  Simple selector  A selector with a single component, such as a single id selector or type selector, that's not used in combination with or contains any other selector component or combinator. A given element is said to match a simple selector when that simple selector accurately describes the element. All [basic selectors](#basic_selectors), attributes, and single [pseudo-classes and pseudo-elements](#pseudo-classes_and_pseudo-elements) are simple selectors.

  Compound selector  A sequence of [simple selectors](#simple_selector) that are not separated by a [combinator](#combinators). A compound selector represents a set of simultaneous conditions on a single element. A given element is said to match a compound selector when the element matches all the simple selectors in the compound selector.

 In a compound selector, the [type selector](type_selectors) or a [universal selector](universal_selectors) in a compound selector must come first in the sequence of selectors. Only one type selector or universal selector is allowed in the sequence. Since whitespace represents the [descendant combinator](descendant_combinator), no whitespace is allowed between the simple selectors in a compound selector.

 **Example:** `a#selected {...}`

  Complex selector  A sequence of one or more simple and/or [compound selectors](#compound_selector) that are separated by [combinators](#combinators). A complex selector represents a set of simultaneous conditions on a set of elements. These conditions apply in the context of relationships described by the combinators. A given element is said to match a complex selector when the element matches compound selectors and the combinators between the compound selectors.

 **Examples:** `a#selected > .icon {...}`, `.box h2 + p {...}`, `a .icon {...}`

  Relative selector  A selector representing an element relative to one or more anchor elements preceded by a combinator. Relative selectors that don't begin with an explicit [combinator](#combinators) have an implied [descendant combinator](descendant_combinator).

 **Examples:** `+ div#topic > #reference {...}`, `> .icon {...}`, `dt:has(+ img) ~ dd {...}`

  [Selector list](selector_list)  A comma-separated list of [simple](#simple_selector), [compound](#compound_selector), or [complex](#complex_selector) selectors. If the constituent selector type of a selector list is important but unspecified, it is called a *complex selector list*. A given element is said to match a selector list when the element matches any (at least one) of the selectors in that selector list. Read more about when a selector list is deemed [invalid](selector_list#invalid_selector_list) and how to construct a [forgiving selector list](selector_list#forgiving_selector_list).

 **Example:** `#main, article.heading {...}`

  
Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4](https://drafts.csswg.org/selectors/)  |


See the [pseudo-class](pseudo-classes#specifications) and [pseudo-element](pseudo-elements#specifications) specification tables for details on those.


See also
--------


* [`:has()` pseudo class](:has)
* [CSS Specificity](specificity)
* [Selector list](selector_list)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors>

Universal selectors
===================



The CSS **universal selector** (`*`) matches elements of any type.

 
```
/\* Selects all elements \*/
\* {
  color: green;
}

```
 The universal selector is a special [type selector](type_selectors) and can therefore be namespaced when using [`@namespace`](@namespace). This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

 * `ns|*` - matches all elements in namespace *ns*
* `*|*` - matches all elements
* `|*` - matches all elements without any declared namespace



Syntax
------




```
\* { style properties }

```
 The asterisk is optional with simple selectors. For instance, `*.warning` and `.warning` are equivalent.


Examples
--------


### CSS



```
\* [lang^="en"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/\* automatically clear the next sibling after a floating element \*/
.floating + \* {
  clear: left;
}

```
### HTML



```
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

```
### Result


### Namespaces



In this example the selector will only match elements in the example namespace.

 
```
@namespace example url(http://www.example.com);
example|\* {
  color: blue;
}

```

Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-universal-selector](https://w3c.github.io/csswg-drafts/selectors/#the-universal-selector) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Universal_selectors` | 1 | 12 | 1 | 7 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `namespaces` | 1 | 12 | 1 | 9 | 8 | 1.3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [CSS Selectors](css_selectors)
* [Learn CSS: Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors>

Type selectors
==============



The CSS **type selector** matches elements by node name. In other words, it selects all elements of the given type within a document.

 
```
/\* All <a> elements. \*/
a {
  color: red;
}

```
 Type selectors can be namespaced when using [`@namespace`](@namespace). This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies.

 * `ns|h1` - matches `<h1>` elements in namespace *ns*
* `*|h1` - matches all `<h1>` elements
* `|h1` - matches all `<h1>` elements without any declared namespace



Syntax
------



```
element { style properties }

```
Examples
--------


### CSS



```
span {
  background-color: skyblue;
}

```
### HTML



```
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>

```
### Result


### Namespaces



In this example the selector will only match `<h1>` elements in the example namespace.

 
```
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}

```

Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # type-selectors](https://w3c.github.io/csswg-drafts/selectors/#type-selectors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Type_selectors` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `namespaces` | 1 | 12 | 1 | 9 | 8 | 1.3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [CSS Selectors](css_selectors)
* [Learn CSS: Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors>

width
=====


The `width` CSS property sets an element's width. By default, it sets the width of the [content area](css_box_model/introduction_to_the_css_box_model#content_area), but if [`box-sizing`](box-sizing) is set to `border-box`, it sets the width of the [border area](css_box_model/introduction_to_the_css_box_model#border_area).


Try it
------



 The [`min-width`](min-width) and [`max-width`](max-width) properties override `width`.


Syntax
------



```
/\* <length> values \*/
width: 300px;
width: 25em;

/\* <percentage> value \*/
width: 75%;

/\* Keyword values \*/
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/\* Global values \*/
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

```
### Values


 [`<length>`](length)  Defines the width as an absolute value.

  [`<percentage>`](percentage)  Defines the width as a percentage of the containing block's width.

  `auto`  The browser will calculate and select a width for the specified element.

  `max-content`  The intrinsic preferred width.

  `min-content`  The intrinsic minimum width.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.

  Accessibility concerns
----------------------



Ensure that elements set with a `width` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | a percentage or `auto` or the absolute length |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
width =   
  auto                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Default width




```
p.goldie {
  background: gold;
}

```
 
```
<p class="goldie">The Mozilla community produces a lot of great software.</p>

```


### Example using pixels and ems




```
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

```
 
```
<div class="px\_length">Width measured in px</div>
<div class="em\_length">Width measured in em</div>

```


### Example with percentage




```
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

```
 
```
<div class="percent">Width in percentage</div>

```


### Example using "max-content"




```
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
  width: max-content;
}

```
 
```
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

```


### Example using "min-content"




```
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
  width: min-content;
}

```
 
```
<p class="minblue">The Mozilla community produces a lot of great software.</p>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # width-height-keywords](https://w3c.github.io/csswg-drafts/css-sizing-4/#width-height-keywords) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `width` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `animatable` | 26 | 12 | 16 | 11 | 15 | 7 | 4.4 | 26 | 16 | 14 | 7 | 1.5 |
| `fill` | 46 | 79 | No | No | 33 | 12 | 46 | 46 | No | 33 | 12 | 5.0 |
| `fit-content` | 46221–48 | 7979 | 943 | No | 331515–35 | 1172 | 464.44.4–48 | 462518–48 | 944 | 331414–35 | 1171 | 5.01.51.0–5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 4622 | 7979 | 663 | No | 44 | 112 | 46 | 46 | 664 | 43 | 111 | 5.0 |
| `min-content` | 461–48 | 79 | 663 | No | 3315–35 | 112 | 464.4–48 | 4618–48 | 664 | 3314–35 | 111 | 5.01.0–5.0 |
| `stretch` | 22 | 79 | 3 | No | 15 | 7 | 4.4 | 25 | 4 | 14 | 7 | 5.0 |


See also
--------


* [The box model](css_box_model/introduction_to_the_css_box_model)
* [`height`](height)
* [`box-sizing`](box-sizing)
* [`min-width`](min-width), [`max-width`](max-width)
* The mapped logical properties: [`block-size`](block-size), [`inline-size`](inline-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/width>

ID selectors
============



The CSS **ID selector** matches an element based on the value of the element's [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute. In order for the element to be selected, its `id` attribute must match exactly the value given in the selector.

 
```
/\* The element with id="demo" \*/
#demo {
  border: red 2px solid;
}

```


Syntax
------




```
#id\_value { style properties }

```
 Note that syntactically (but not specificity-wise), this is equivalent to the following [`attribute selector`](attribute_selectors):

 
```
[id=id\_value] { style properties }

```

Examples
--------


### CSS



```
#identified {
  background-color: skyblue;
}

```
### HTML



```
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # id-selectors](https://w3c.github.io/csswg-drafts/selectors/#id-selectors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ID_selectors` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [CSS Selectors](css_selectors)
* [Learn CSS: Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors>

Class selectors
===============



The [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) **class selector** matches elements based on the contents of their [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#class) attribute.

 
```
/\* All elements with class="spacious" \*/
.spacious {
  margin: 2em;
}

/\* All <li> elements with class="spacious" \*/
li.spacious {
  margin: 2em;
}

/\* All <li> elements with a class list that includes both "spacious" and "elegant" \*/
/\* For example, class="elegant retro spacious" \*/
li.spacious.elegant {
  margin: 2em;
}

```


Syntax
------




```
.class\_name { style properties }

```
 Note that this is equivalent to the following [`attribute selector`](attribute_selectors):

 
```
[class~=class\_name] { style properties }

```

Examples
--------


### CSS



```
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

```
### HTML



```
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
  This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # class-html](https://w3c.github.io/csswg-drafts/selectors/#class-html) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Class_selectors` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [CSS Selectors](css_selectors)
* [Learn CSS: Selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors>

Selector list
=============


The CSS **selector list** (`,`) selects all the matching nodes. A selector list is a comma-separated list of selectors.


Description
-----------



When multiple selectors share the same declarations, they can be grouped together into a comma-separated list. Selector lists can also be passed as parameters to some functional CSS pseudo-classes. White space may appear before and/or after the comma.

 The following three declarations are equivalent:

 
```
span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

```
 
```
span,
div {
  border: red 2px solid;
}

```
 
```
:is(span, div) {
  border: red 2px solid;
}

```

Examples
--------


When applying the same styles to elements matching different criteria, grouping the selectors in a comma-separated list can improve consistency while reducing the size of style sheets.

### Single line grouping



This example shows grouping selectors in a single line using a comma-separated list.

 
```
h1, h2, h3, h4, h5, h6 {
  font-family: helvetica;
}

```

### Multi line grouping



This example shows grouping selectors in multiple lines using a comma-separated list.

 
```
#main,
.content,
article,
h1 + p {
  font-size: 1.1em;
}

```

Valid and invalid selector lists
--------------------------------


An invalid selector represents, and therefore matches, nothing. When a selector list contains an invalid selector, the entire style block is ignored, except for the [`:is()`](:is) and [`:where()`](:where) pseudo-classes that accept [forgiving selector lists](#forgiving-selector-list).

### Invalid selector list



A downside to using a selector list is that a single unsupported selector in the selector list invalidates the entire rule.

 Consider the following two CSS rule sets:

 
```
h1 {
  font-family: sans-serif;
}
h2:invalid-pseudo {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

```
 
```
h1,
h2:invalid-pseudo,
h3 {
  font-family: sans-serif;
}

```
 They are not equivalent. In the first rule set, styles will be applied on the `h1` and `h3` elements, but the `h2:invalid-pseudo` rule will not be parsed. In the second rule set, because one selector in the list is invalid, the entire rule will not be parsed. Because of this, no style will be applied to the `h1` and `h3` elements as when any selector in a list of selectors in invalid, the entire style block will be ignored.


### Forgiving selector list



A way to remedy the [invalid selector list](#invalid_selector_list) problem is to use the [`:is()`](:is) or the [`:where()`](:where) pseudo-class, which accept a forgiving selector list. Each selector in a forgiving selector list is parsed individually. So any invalid selectors in the list are ignored and the valid ones are used.

 Carrying on from the previous example, the following two CSS rule sets are now equivalent:

 
```
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}

```
 
```
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}

```
 The difference between the two is that the specificity of `:is()` is its most specific argument, whereas the `:where()` selector and the forgiving selector list parameter do not add any specificity weight.


### Relative selector list



A relative selector list is a comma-separated selector list parsed as [relative selectors](css_selectors#relative_selector), which begin with an explicit or implied combinator.

 
```
h2:has(+ p, + ul.red) {
  font-style: italic;
}

```
 In the above example, the italic style will be applied to any `h2` heading that is immediately followed by `<p>` or `<ul class="red">`. Note that pseudo-elements and the `:has()` selector are not valid within the [`:has()`](:has) relative selector list.


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # grouping](https://w3c.github.io/csswg-drafts/selectors/#grouping) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Selector_list` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* The [`:is()`](:is) and [`:where()`](:where) pseudo-classes accept forgiving selector lists.
* The [`:not()`](:not) pseudo-class accepts a regular selector list
* The [`:has()`](:has) pseudo-class accepts a relative selector list.
* [CSS selectors](css_selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list>

Adjacent sibling combinator
===========================



The **adjacent sibling combinator** (`+`) separates two selectors and matches the second element only if it *immediately* follows the first element, and both are children of the same parent [`element`](https://developer.mozilla.org/en-US/docs/Web/API/Element).

 
```
/\* Paragraphs that come immediately after any image \*/
img + p {
  font-weight: bold;
}

```


Syntax
------



```
former\_element + target\_element { style properties }

```
Examples
--------


### CSS



```
li:first-of-type + li {
  color: red;
}

```
### HTML



```
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # adjacent-sibling-combinators](https://w3c.github.io/csswg-drafts/selectors/#adjacent-sibling-combinators) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Adjacent_sibling_combinator` | 1 | 12 | 1 | 7["Before Internet Explorer 10, the combinator only works in standards mode.", "Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector.", "In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus."] | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [General sibling combinator](general_sibling_combinator)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator>

General sibling combinator
==========================



The **general sibling combinator** (`~`) separates two selectors and matches *all iterations* of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent [element](https://developer.mozilla.org/en-US/docs/Glossary/Element).

 
```
/\* Paragraphs that are siblings of and
 subsequent to any image \*/
img ~ p {
  color: red;
}

```


Syntax
------



```
former\_element ~ target\_element { style properties }

```
Examples
--------


### CSS



```
p ~ span {
  color: red;
}

```
### HTML



```
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code…</code>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # general-sibling-combinators](https://w3c.github.io/csswg-drafts/selectors/#general-sibling-combinators) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `General_sibling_combinator` | 1 | 12 | 1 | 7Before Internet Explorer 10, the combinator only works in standards mode. | 9 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |


See also
--------


* [Adjacent sibling combinator](adjacent_sibling_combinator)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator>

Child combinator
================



The **child combinator** (`>`) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

 
```
/\* List items that are children of the "my-things" list \*/
ul.my-things > li {
  margin: 2em;
}

```
 Elements matched by the second selector must be the immediate children of the elements matched by the first selector. This is stricter than the [descendant combinator](descendant_combinator), which matches all 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.



Syntax
------



```
selector1 > selector2 { style properties }

```
Examples
--------


### CSS



```
span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

```
### HTML



```
<div>
  <span>
    Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # child-combinators](https://w3c.github.io/csswg-drafts/selectors/#child-combinators) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Child_combinator` | 1 | 12 | 1 | 7Before Internet Explorer 10, the combinator only works in standards mode. | 4 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Descendant combinator](descendant_combinator)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator>

Column combinator
=================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The **column combinator** (`||`) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.

 
```
/\* Table cells that belong to the "selected" column \*/
col.selected||td {
  background: gray;
}

```


Syntax
------



```
column-selector||cell-selector {
  /\* style properties \*/
}

```
Examples
--------


### HTML



```
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>

    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>

```
### CSS



```
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # the-column-combinator](https://w3c.github.io/csswg-drafts/selectors/#the-column-combinator) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Column_combinator` | No | No | NoSee [bug 1605558](https://bugzil.la/1605558). | No | No | No | No | No | NoSee [bug 1605558](https://bugzil.la/1605558). | No | No | No |


See also
--------


* [`<col>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col)
* [`<colgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup)
* [`grid`](grid)
* [`:nth-col`](:nth-col)
* [`:nth-last-col`](:nth-last-col)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator>

Comments
========


A CSS **comment** is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. By design, comments have no effect on the layout of a document.


Syntax
------



Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines.

 
```
/\* Comment \*/

```

Examples
--------



```
/\* A one-line comment \*/

/\*
A comment
which stretches
over several
lines
\*/

/\* The comment below is used to
 disable specific styling \*/
/\*
span {
 color: blue;
 font-size: 1.5em;
}
\*/

```
Notes
-----


The `/* */` comment syntax is used for both single and multiline comments. There is no other way to specify comments in external style sheets. However, when using the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element, you may use `<!-- -->` to hide CSS from older browsers, although this is not recommended. As with most programming languages that use the `/* */` comment syntax, comments cannot be nested. In other words, the first instance of `*/` that follows an instance of `/*` closes the comment.

Specifications
--------------


* [CSS 2.1 Syntax and basic data types #comments](https://www.w3.org/TR/CSS21/syndata.html#comments)
See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Comments>

Inheritance
===========



In CSS, **inheritance** controls what happens when no value is specified for a property on an element.

 CSS properties can be categorized in two types:

 * **inherited properties**, which by default are set to the [computed value](computed_value) of the parent element
* **non-inherited properties**, which by default are set to [initial value](initial_value) of the property

 Refer to [any CSS property](reference#index) definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").



Inherited properties
--------------------



When no value for an **inherited property** has been specified on an element, the element gets the [computed value](computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](initial_value) given in the property's summary.

 A typical example of an inherited property is the [`color`](color) property. Consider the following style rules and the markup:

 
```
p {
  color: green;
}

```
 
```
<p>This paragraph has <em>emphasized text</em> in it.</p>

```

 The words "emphasized text" will appear green, since the `em` element has inherited the value of the [`color`](color) property from the `p` element. It does *not* get the initial value of the property (which is the color that is used for the root element when the page specifies no color).


Non-inherited properties
------------------------



When no value for a **non-inherited property** has been specified on an element, the element gets the [initial value](initial_value) of that property (as specified in the property's summary).

 A typical example of a non-inherited property is the [`border`](border) property. Consider the following style rules and the markup:

 
```
p {
  border: medium solid;
}

```
 
```
<p>This paragraph has <em>emphasized text</em> in it.</p>

```

 The words "emphasized text" will not have another border (since the initial value of [`border-style`](border-style) is `none`).


Notes
-----



The [`inherit`](inherit) keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.

 You can control inheritance for all properties at once using the [`all`](all) shorthand property, which applies its value to all properties. For example:

 
```
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

```
 This reverts the style of the paragraphs' [`font`](font) property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a [`font-weight`](font-weight) of `"bold"`.


### Overriding inheritance, an example



Using our previous example with [`border`](border), if we explicitly set the inheritance with `inherit`, we get the following:

 
```
p {
  border: medium solid;
}

em {
  border: inherit;
}

```
 
```
<p>This paragraph has <em>emphasized text</em> in it.</p>

```

 We can see here another border around the word "emphasized text".


See also
--------


* CSS values for controlling inheritance: [`inherit`](inherit), [`initial`](initial), [`revert`](revert), [`revert-layer`](revert-layer), and [`unset`](unset)
* [Introducing the CSS cascade](cascade)
* [Cascade, specificity, and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Inheritance>

Attribute selectors
===================



The CSS **attribute selector** matches elements based on the presence or value of a given attribute.

 
```
/\* <a> elements with a title attribute \*/
a[title] {
  color: purple;
}

/\* <a> elements with an href matching "https://example.org" \*/
a[href="https://example.org"]
{
  color: green;
}

/\* <a> elements with an href containing "example" \*/
a[href\*="example"] {
  font-size: 2em;
}

/\* <a> elements with an href ending ".org" \*/
a[href$=".org"] {
  font-style: italic;
}

/\* <a> elements whose class attribute contains the word "logo" \*/
a[class~="logo"] {
  padding: 2px;
}

```


Syntax
------


 `[attr]`  Represents elements with an attribute name of *attr*.

  `[attr=value]`  Represents elements with an attribute name of *attr* whose value is exactly *value*.

  `[attr~=value]`  Represents elements with an attribute name of *attr* whose value is a whitespace-separated list of words, one of which is exactly *value*.

  `[attr|=value]`  Represents elements with an attribute name of *attr* whose value can be exactly *value* or can begin with *value* immediately followed by a hyphen, `-` (U+002D). It is often used for language subcode matches.

  `[attr^=value]`  Represents elements with an attribute name of *attr* whose value is prefixed (preceded) by *value*.

  `[attr$=value]`  Represents elements with an attribute name of *attr* whose value is suffixed (followed) by *value*.

  `[attr*=value]`  Represents elements with an attribute name of *attr* whose value contains at least one occurrence of *value* within the string.

  `[attr operator value i]`  Adding an `i` (or `I`) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

  
`[attr operator value s]`  Experimental 
  Adding an `s` (or `S`) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

  Examples
--------


### Links



#### CSS

 
```
a {
  color: blue;
}

/\* Internal links, beginning with "#" \*/
a[href^="#"] {
  background-color: gold;
}

/\* Links with "example" anywhere in the URL \*/
a[href\*="example"] {
  background-color: silver;
}

/\* Links with "insensitive" anywhere in the URL,
 regardless of capitalization \*/
a[href\*="insensitive" i] {
  color: cyan;
}

/\* Links with "cAsE" anywhere in the URL,
with matching capitalization \*/
a[href\*="cAsE" s] {
  color: pink;
}

/\* Links that end in ".org" \*/
a[href$=".org"] {
  color: red;
}

/\* Links that start with "https" and end in ".org" \*/
a[href^="https"][href$=".org"] {
  color: green;
}

```
 #### HTML

 
```
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>

```
 #### Result



### Languages



#### CSS

 
```
/\* All divs with a `lang` attribute are bold. \*/
div[lang] {
  font-weight: bold;
}

/\* All divs without a `lang` attribute are italicized. \*/
div:not([lang]) {
  font-style: italic;
}

/\* All divs in US English are blue. \*/
div[lang~="en-us"] {
  color: blue;
}

/\* All divs in Portuguese are green. \*/
div[lang="pt"] {
  color: green;
}

/\* All divs in Chinese are red, whether
 simplified (zh-Hans-CN) or traditional (zh-Hant-TW). \*/
div[lang|="zh"] {
  color: red;
}

/\* All divs with a Traditional Chinese
 `data-lang` are purple. \*/
/\* Note: You could also use hyphenated attributes
 without double quotes \*/
div[data-lang="zh-Hant-TW"] {
  color: purple;
}

```
 #### HTML

 
```
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-Hans-CN">世界您好！</div>
<div lang="zh-Hant-TW">世界您好！</div>
<div data-lang="zh-Hant-TW">世界您好！</div>

```
 #### Result



### HTML ordered lists



 The HTML specification requires the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type) attribute to be matched case-insensitively because it is primarily used in the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element. Note that if the modifiers are not supported by the user agent, then the selector will not match. 

 #### CSS

 
```
/\* Case-sensitivity depends on document language \*/
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="b" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="B" s] {
  list-style-type: upper-alpha;
  background: grey;
}

ol[type="c" i] {
  list-style-type: upper-alpha;
  background: green;
}

```
 #### HTML

 
```
<ol type="A">
  <li>
    Red background for case-insensitive matching (default for the type selector)
  </li>
</ol>
<ol type="b">
  <li>Lime background if `s` modifier is supported (case-sensitive match)</li>
</ol>
<ol type="B">
  <li>Grey background if `s` modifier is supported (case-sensitive match)</li>
</ol>
<ol type="C">
  <li>
    Green background if `i` modifier is supported (case-insensitive match)
  </li>
</ol>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # attribute-selectors](https://w3c.github.io/csswg-drafts/selectors/#attribute-selectors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Attribute_selectors` | 1 | 12 | 1 | 7 | 9 | 3 | ≤37 | 18 | 4 | 14 | 1 | 1.0 |
| `case_insensitive_modifier` | 49 | 79 | 47 | No | 36 | 9 | 49 | 49 | 47 | 36 | 9 | 5.0 |
| `case_sensitive_modifier` | NoSee [bug 1041095](https://crbug.com/1041095). | NoSee [bug 1041095](https://crbug.com/1041095). | 66 | No | NoSee [bug 1041095](https://crbug.com/1041095). | No | NoSee [bug 1041095](https://crbug.com/1041095). | NoSee [bug 1041095](https://crbug.com/1041095). | 66 | NoSee [bug 1041095](https://crbug.com/1041095). | No | NoSee [bug 1041095](https://crbug.com/1041095). |


See also
--------


* [`attr()`](attr)
* Selecting a single element: [`Document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), [`DocumentFragment.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelector), or [`Element.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)
* Selecting all matching elements: [`Document.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), [`DocumentFragment.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/querySelectorAll), or [`Element.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>

Descendant combinator
=====================



The **descendant combinator** — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called *descendant selectors*.

 
```
/\* List items that are descendants of the "my-things" list \*/
ul.my-things li {
  margin: 2em;
}

```
 The descendant combinator is technically one or more [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS) white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.



Syntax
------



```
selector1 selector2 {
  /\* property declarations \*/
}

```
Examples
--------


### CSS



```
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

```
### HTML



```
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # descendant-combinators](https://w3c.github.io/csswg-drafts/selectors/#descendant-combinators) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Descendant_combinator` | 1Since Chrome 61, `>>>` is aliased to this selector [since its use as the 'shadow-piercing descendant combinator' was deprecated](https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#make_shadow-piercing_descendant_combinator_behave_like_descendent_combinator). | 12 | 1 | 3 | 3.5 | 1 | 4.4Since Chrome 61, `>>>` is aliased to this selector [since its use as the 'shadow-piercing descendant combinator' was deprecated](https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#make_shadow-piercing_descendant_combinator_behave_like_descendent_combinator). | 18Since Chrome 61, `>>>` is aliased to this selector [since its use as the 'shadow-piercing descendant combinator' was deprecated](https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#make_shadow-piercing_descendant_combinator_behave_like_descendent_combinator). | 4 | 10.1 | 1 | 1.0Since Samsung Internet 8.0, `>>>` is aliased to this selector [since its use as the 'shadow-piercing descendant combinator' was deprecated](https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#make_shadow-piercing_descendant_combinator_behave_like_descendent_combinator). |
| `two_greater_than_syntax` | No | No | No | No | No | 10–11.1 | No | No | No | No | 10–11.3 | No |


See also
--------


* [Child combinator](child_combinator)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator>

Introducing the CSS Cascade
===========================



The **cascade** is an algorithm that defines how user agents combine property values originating from different sources. The cascade defines the origin and layer that takes precedence when declarations in more than one [origin](#origin_types) or [cascade layer](@layer) set a value for a property on an element.

 The cascade lies at the core of CSS, as emphasized by the name: ***Cascading*** Style Sheets. When a [selector](css_selectors) matches an element, the property value from the origin with the highest precedence gets applied, even if the selector from a lower precedence origin or layer has greater <specificity>.

 This article explains what the cascade is and the order in which [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS) [declarations](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) cascade, covering cascade layers and origin type. Understanding origin precedence is key to understanding the cascade.



Origin types
------------



The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations come from different origin types: **[User-agent stylesheets](#user-agent_stylesheets)**, **[Author stylesheets](#author_stylesheets)**, and **[User stylesheets](#user_stylesheets)**.

 Though style sheets come from these different origins and can be within different [layers](@layer) in each of these origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact. Before addressing the interactions, let's define some terms:


### User-agent stylesheets



User-agent, or browsers, have basic style sheets that give default styles to any document. These style sheets are named **user-agent stylesheets**. Most browsers use actual stylesheets for this purpose, while others simulate them in code. The end result is the same.

 Some browsers let users modify the user-agent stylesheet, but this is rare and not something that can be controlled.

 Although some constraints on user-agent stylesheets are set by the HTML specification, browsers have a lot of latitude: that means some differences exist between browsers. To simplify the development process, Web developers may use a CSS reset stylesheet, such as [normalize.css](https://github.com/necolas/normalize.css), which sets common properties values to a known state for all browsers before beginning to make alterations to suit their specific needs.

 Unless the user-agent stylesheet includes an [`!important`](specificity#the_!important_exception) next to a property, making it "important", styles declared by author styles, including a reset style sheet, take precedence over the user-agent styles, regardless of the specificity of the associated selector.


### Author stylesheets


**Author stylesheets** are the most common type of style sheet; these are the styles written by web developers. These styles can reset user-agent styles, as noted above, and define the styles for the design of a given web page or application. The author, or web developer, defines the styles for the document using one or more linked or imported stylesheets, [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) blocks, and inline styles defined with the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#style) attribute. These author styles define the look and feel of the website — its theme.

### User stylesheets


In most browsers, the user (or reader) of the website can choose to override styles using a custom **user stylesheet** designed to tailor the experience to the user's wishes. Depending on the user agent, [user styles can be configured](https://www.thoughtco.com/user-style-sheet-3469931) directly or added via browser extensions.

### Cascade layers



The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of [cascade layers](@layer) within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](@import) or [`@layer`](@layer), styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer.

 Let's take a look at cascading origin type before diving into cascade layers within each origin type.


Cascading order
---------------



The cascading algorithm determines how to find the value to apply for each property for each document element. The following steps apply to the cascading algorithm:

 1. **Relevance**: It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate `media` at-rule.
2. **Origin and importance**: Then it sorts these rules according to their importance, that is, whether or not they are followed by `!important`, and by their origin. Ignoring layers for the moment, the cascade order is as follows: 

| Order (low to high) | Origin | Importance |
| --- | --- | --- |
| 1 | user-agent (browser) | normal |
| 2 | user | normal |
| 3 | author (developer) | normal |
| 4 | CSS @keyframe animations |  |
| 5 | author (developer) | `!important` |
| 6 | user | `!important` |
| 7 | user-agent (browser) | `!important` |
| 8 | CSS transitions |  |
3. **Specificity:** In case of equality with an origin, the <specificity> of a rule is considered to choose one value or another. The specificity of the selectors are compared, and the declaration with the highest specificity wins.
4. **Order of appearance**: In the origin with precedence, if there are competing values for a property that are in style block matching selectors of equal specificity, the last declaration in the style order is applied.

 The cascade is in ascending order, meaning animations have precedence of normal values, whether those are declared in user, author, or user-agent styles, important values take precedence over animations, and transitions have precedence over important values.

  **Note:** **Transitions and animations**

 Property values set by animation [`@keyframes`](@keyframes) are more important than all normal styles (those with no [`!important`](specificity#the_!important_exception) set).

 Property values being set in a [`transition`](transition) take precedence over all other values set, even those marked with `!important`.

  The cascade algorithm is applied *before* the specificity algorithm, meaning if `:root p { color: red;}` is declared in the user stylesheet (line 2) and a less specific `p {color: blue;}` is in the author stylesheet (line 3), the paragraphs will be blue.


Basic example
-------------



Before taking a deeper look at how cascade layers impact the cascade, let's look at an example involving multiple sources of CSS across the various origins, and work through the steps of the cascade algorithm:

 Here we have a user agent style sheet, two author style sheets, and a user stylesheet, with no inline styles within the HTML:

 **User-agent CSS:**

 
```
li {
  margin-left: 10px;
}

```
 **Author CSS 1:**

 
```
li {
  margin-left: 0;
} /\* This is a reset \*/

```
 **Author CSS 2:**

 
```
@media screen {
  li {
    margin-left: 3px;
  }
}

@media print {
  li {
    margin-left: 1px;
  }
}

@layer namedLayer {
  li {
    margin-left: 5px;
  }
}

```
 **User CSS:**

 
```
.specific {
  margin-left: 1em;
}

```
 **HTML:**

 
```
<ul>
  <li class="specific">1<sup>st</sup></li>
  <li>2<sup>nd</sup></li>
</ul>

```
 In this case, declarations inside `li` and `.specific` rules should apply.

 Once again, there are four steps in the cascade algorithm, in order:

 1. Relevance
2. Origin and importance
3. Specificity
4. Order of appearance

 The `1px` is for print media. Due to lack of *relevance* based on its media type, it is removed from consideration.

 No declaration is marked as `!important`, so the precedence order is author style sheets over user style sheets over user-agent stylesheet. Based on *origin and importance*, the `1em` from the user stylesheet and the `10px` from the user-agent stylesheet are removed from consideration.

 Note that even though the user style on `.specific` of `1em` has a higher specificity, it's a normal declaration in a user style sheet. As such, it has a lower precedence than any author styles, and gets removed by the origin and importance step of the algorithm before specificity even comes into play.

 There are three declarations in author stylesheets:

 
```
li {
  margin-left: 0;
} /\* from author css 1 \*/

```
 
```
@media screen {
  li {
    margin-left: 3px;
  }
}

```
 
```
@layer namedLayer {
  li {
    margin-left: 5px;
  }
}

```
 The last one, the `5px` is part of a cascade layer. Normal declarations in layers have lower precedence than normal styles not in a layer within the same origin type. This is also removed by step 2 of the algorithm, *origin and importance*.

 This leaves the `0` and the `3px`, which both have the same selector, hence the same *specificity*.

 We then look at *order of appearance*. The second one, the last of the two unlayered author styles, wins.

 
```
margin-left: 3px;

```
  **Note:** The declaration defined in the user CSS, while it may have greater specificity, is not chosen as the cascade algorithm's *origin and importance* is applied before the *specificity* algorithm. The declaration defined in a cascade layer, though it may come later in the code, will not have precedence either as normal styles in cascade layers have less precedence than normal unlayered styles. *Order of appearance* only matters when both origin, importance, and specificity are equal.

 
Author styles: inline styles, layers, and precedence
----------------------------------------------------



The [table in Cascading order](#cascading_order) provided a precedence order overview. The table summarized the user-agent, user, and author origin type styles in two lines each with "origin type - normal" and "origin type - !important". The precedence within each origin type is more nuanced. Styles can be contained within layers within their origin type, and, with author styles, there is also the issue of where inline styles land in the cascade order.

 The order in which layers are declared is important in determining precedence. Normal styles in a layer take precedence over styles declared in prior layers; with normal styles declared outside of any layer taking precedence over normal layered styles regardless of specificity.

 In this example, the author used CSS's [`@import`](@import) rule to import five external style sheets within a [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) information element.

 
```
<style>
 @import unlayeredStyles.css;
 @import AStyles.css layer(A);
 @import moreUnlayeredStyles.css;
 @import BStyles.css layer(B);
 @import CStyles.css layer(C);
 p {
 color: red;
 padding: 1em !important;
 }
</style>

```
 and then in the body of the document we have inline styles:

 
```
<p style="line-height: 1.6em; text-decoration: overline !important;">Hello</p>

```
  In the CSS code block above, three cascade layers named "A", "B", and "C", were created, in that order. Three stylesheets were imported directly into layers and two were imported without creating or being assigned to a layer. The "All unlayered styles" in the list below (normal author style precedence - order 4) includes styles from these two stylesheets and the additional unlayered CSS style blocks. In addition, there are two inline styles, a normal `line-height` declaration and an important `text-decoration` declaration: 

 

| Order (low to high) | Author style | Importance |
| --- | --- | --- |
| 1 | A - first layer | normal |
| 2 | B - second layer | normal |
| 3 | C - last layer | normal |
| 4 | All unlayered styles | normal |
| 5 | inline `style` | normal |
| 6 | animations |  |
| 7 | All unlayered styles | `!important` |
| 8 | C - last layer | `!important` |
| 9 | B - second layer | `!important` |
| 10 | A - first layer | `!important` |
| 11 | inline `style` | `!important` |
| 12 | transitions |  |

 In all origin types, the non important styles contained in layers have the lowest precedence. In our example, the normal styles associated with the first declared layer (A) have lower precedence than normal styles in the second declared layer (B), which have lower precedence than normal styles in the third declared layer (C). These layered styles have lower precedence than all normal unlayered styles, which includes normal styles from `unlayeredStyles.css`, `moreUnlayeredStyles.css`, and the `color` of `p` in the `<style>` itself.

 If any of the layered styles in A, B, or C, have selectors with higher specificity matching an element, similar to `:root body p { color: black;}`, it doesn't matter. Those declarations are removed from consideration because of *origin*; normal layered styles have less precedence than normal unlayered styles. If, however, the more specific selector `:root body p { color: black;}` was found in `unlayeredStyles.css`, as both *origin and importance* have the same precedence, *specificity* would mean the more specific, black declaration would win.

 The layer order of precedence is inverted for styles declared as `!important`. Important styles declared in a layer take precedence over important styles declared outside of a layer. Important styles in the first declared layer (A) take precedence over important declarations found in layer B, which takes precedence over C, which have precedence over important declarations in the unlayered styles.


### Inline styles



Only relevant to author styles are inline styles, declared with the `style` attribute. Normal inline styles take precedence over any other normal author styles, no matter the specificity of the selector. If `line-height: 2;` were declared in a `:root body p` selector block in any of the five imported stylesheets, the line height would still be `1.6`.

 Normal inline styles take precedence over any other normal author styles unless the property is being altered by a CSS animation.

 All important inline styles take precedence over all author styles, important and not, inline and not, layered and not. Important styles also take precedence over animated properties, but not transitioning properties. Three things can override an important inline style: 1) an important user style, 2) an important user agent style, or 3) a property value being transitioned.


### Importance and layers



The origin type precedence order is inverted for important styles. Important styles declared outside of any cascade layer have lower precedence than those declared as part of a layer. Important values that come in early layers have precedence over important styles declared in subsequent cascade layers.

 Take for example the following CSS:

 
```
p {
  color: red;
}
@layer B {
  :root p {
    color: blue;
  }
}

```
 Even though the red is declared first and has a less specific selector, because unlayered CSS takes precedence over layered CSS, the paragraph will be red. Had we included an inline style on the paragraph setting it to a different color, such as `<p style="color: black">`, the paragraph would be black.

 When we add `!important` to this bit of CSS, the precedence order is reversed with the stylesheet:

 
```
p {
  color: red !important;
}
@layer B {
  :root p {
    color: blue !important;
  }
}

```
 Now the paragraph will be blue. The `!important` in the earliest declared layer takes precedence of subsequent layers and unlayered important declarations. If the inline style contained !important, such as `<p style="color: black !important">`, again the paragraph would be black. Inline importance does take precedence over all other author declared `!important` declarations, no matter the specificity.

  **Note:** `!important` reverses the precedence of cascade layers. For this reason, rather than using `!important` to override external styles, import frameworks, third party styles, widget stylesheets, etc., into layers, demoting their precedence. `!important` should only be used sparingly, if ever, to guard required styles against later overrides, in the first declared layer.

  Styles that are transitioning take precedence over all important styles, no matter who or how they are declared.


Complete cascade order
----------------------



Now that we have a better understanding of origin type and cascade layer precedence, we realize the table in [Cascading order](#cascading_order) could have more accurately been represented by the following table:

 

| Precedence Order(low to high) | Style Origin | Importance |
| --- | --- | --- |
| 1 | user-agent - first declared layer | normal |
| user-agent - last declared layer |
| user-agent - unlayered styles |
| 2 | user - first declared layer | normal |
| user - last declared layer |
| user - unlayered styles |
| 3 | author - first declared layer | normal |
| author - last declared layer |
| author - unlayered styles |
| inline `style` |
| 4 | animations |  |
| 5 | author - unlayered styles | `!important` |
| author - last declared layer |
| author - first declared layer |
| inline `style` |
| 6 | user - unlayered styles | `!important` |
| user - last declared layer |
| user - first declared layer |
| 7 | user-agent - unlayered styles | `!important` |
| user-agent - last declared layer |
| user-agent - first declared layer |
| 8 | transitions |  |


Which CSS entities participate in the cascade
---------------------------------------------



Only CSS property/value pair declarations participate in the cascade. This means that [at-rules](at-rule) containing entities other than declarations, such as a [`@font-face`](@font-face) rule containing *descriptors*, don't participate in the cascade.

 For the most part, the properties and descriptors defined in at-rules don't participate in the cascade. Only at-rules as a whole participate in the cascade. For example, within a `@font-face` rule, font names are identified by [`font-family`](@font-face/font-family) descriptors. If several `@font-face` rules with the same descriptor are defined, only the most appropriate `@font-face`, as a whole, is considered. If more than one are identically appropriate, the entire `@font-face` declarations are compared using steps 1, 2, and 4 of the algorithm (there is no specificity when it comes to at-rules).

 While the declarations contained in most at-rules — such as those in [`@media`](@media), [`@document`](@document), or [`@supports`](@supports) — participate in the cascade, the at-rule may make an entire selector not relevant, as we saw with the print style in the [basic example](#basic_example).

 Declarations in [`@keyframes`](@keyframes) don't participate in the cascade. As with `@font-face`, only the `@keyframes` as a whole is selected via the cascade algorithm. The [precedence order of animation is described below](#css_animations_and_the_cascade).

 When it comes to [`@import`](@import), the `@import` doesn't participate itself in the cascade, but all of the imported styles do participate. If the `@import` defines a [named or anonymous layer](@layer), the contents of the imported stylesheet are placed into the specified layer. All other CSS imported with `@import` is treated as the last declared layer. This was discussed above.

 Finally, [`@charset`](@charset) obeys specific algorithms and isn't affected by the cascade algorithm.


CSS animations and the cascade
------------------------------



[CSS animations](css_animations), using [`@keyframes`](@keyframes) at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single [`@keyframes`](@keyframes), and never mixes multiple ones together.

 If the several keyframe animations are defined with the same animation name, the last defined `@keyframes` in the origin and layer with the greatest precedence. Only one `@keyframes` definition is used, even if the `@keyframes` animate different property. `@keyframes` with the same name are never combined.

 
```
p {
  animation: infinite 5s alternate repeatedName;
}
@keyframes repeatedName {
  from {
    font-size: 1rem;
  }
  to {
    font-size: 3rem;
  }
}

@layer A {
  @keyframes repeatedName {
    from {
      background-color: yellow;
    }
    to {
      background-color: orange;
    }
  }
}
@layer B {
  @keyframes repeatedName {
    from {
      color: white;
    }
    to {
      color: black;
    }
  }
}

```
 In this example, there are three separate animation declaration named `repeatedName`. When `animation: infinite 5s alternate repeatedName` is applied to the paragraph, only one animation is applied: the keyframe animation defined in the unlayered CSS takes precedence over the layered keyframe animation declarations based on origin and cascade layer precedence order. In this example, only the element's font size will be animated.

  **Note:** There are no important animations, as property declarations in a [`@keyframes`](@keyframes) block that contain `!important` as part of the value are ignored.

 
Resetting styles
----------------



After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property [`all`](all) lets you quickly set (almost) everything in CSS back to a known state.

 `all` lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.


Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 4](https://drafts.csswg.org/css-cascade/)  |


See also
--------


* [A very simple introduction to the CSS cascade](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade>

Shorthand properties
====================



***Shorthand properties*** are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

 The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS [`background`](background) property is a shorthand property that's able to define the values of [`background-color`](background-color), [`background-image`](background-image), [`background-repeat`](background-repeat), and [`background-position`](background-position). Similarly, the most common font-related properties can be defined using the shorthand [`font`](font), and the different margins around a box can be defined using the [`margin`](margin) shorthand.



Tricky edge cases
-----------------


There are a few edge cases to keep in mind when using shorthand properties.

### Omitting properties



A value which is not specified is set to its initial value. That means that it **overrides** previously set values. For example:

 
```
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

```
 This will not set the color of the background to `red` but to the default value for [`background-color`](background-color), which is `transparent`.

 Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword `inherit` can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword `inherit`.


### Ordering properties



Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values.

 Two important cases here are:

 * properties related to the edges of a box, like [`border-style`](border-style), [`margin`](margin) or [`padding`](padding)
* properties related to the corners of a box, like [`border-radius`](border-radius)

 #### Edges of a box

 Shorthands handling properties related to edges of a box, like [`border-style`](border-style), [`margin`](margin) or [`padding`](padding), always use a consistent 1-to-4-value syntax representing those edges:

 * **1-value syntax:** `border-width: 1em` — The single value represents all edges: ![Box edges with one-value syntax]
* **2-value syntax:** `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones: ![Box edges with two-value syntax]
* **3-value syntax:** `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge: ![Box edges with three-value syntax]
* **4-value syntax:** `border-width: 1em 2em 3em 4em` — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top: ![Box edges with four-value syntax] The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word *trouble*: TRBL. You can also remember it as the order that the hands would rotate on a clock: `1em` starts in the 12 o'clock position, then `2em` in the 3 o'clock position, then `3em` in the 6 o'clock position, and `4em` in the 9 o'clock position.

 #### Corners of a box

 Similarly, shorthands handling properties related to corners of a box, like [`border-radius`](border-radius), always use a consistent 1-to-4-value syntax representing those corners:

 * **1-value syntax:** `border-radius: 1em` — The single value represents all corners: ![Box corners with one-value syntax]
* **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top left and bottom right corner, the second the top right and bottom left ones: ![Box corners with two-value syntax]
* **3-value syntax:** `border-radius: 1em 2em 3em` — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner: ![Box corners with three-value syntax]
* **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left: ![Box corners with four-value syntax]


Background properties
---------------------



Consider a background with the following properties

 
```
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

```
 These four declarations can be shortened to just one:

 
```
background: #000 url(images/bg.gif) no-repeat left top;

```
 (The shorthand form is actually the equivalent of the longhand properties above plus `background-attachment: scroll` and, in CSS3, some additional properties.)

 See [`background`](background) for more detailed information, including CSS3 properties.


Font properties
---------------



Consider the following declarations:

 
```
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;

```
 These 5 statements can be shortened to the following:

 
```
font: italic bold 0.8em/1.2 Arial, sans-serif;

```
 This shorthand declaration is actually equivalent to the longhand declarations above plus `font-variant: normal`, `font-size-adjust: none`, and `font-stretch: normal`.


Border properties
-----------------



With borders, the width, color, and style can be simplified into one declaration. For example, consider the following CSS:

 
```
border-width: 1px;
border-style: solid;
border-color: #000;

```
 It can be simplified as:

 
```
border: 1px solid #000;

```

Margin and padding properties
-----------------------------



Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. Consider the following CSS declarations:

 
```
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

```
 They are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

 
```
margin: 10px 5px 10px 5px;

```
 Margin shorthand rules for one, two, three and four value declarations are:

 * When **one** value is specified, it applies the same margin to **all four sides**.
* When **two** values are specified, the first margin applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first margin applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).


Position properties
-------------------



With position, the shorthand versions of top, right, bottom and left can be simplified into one declaration. For example, consider the following CSS:

 
```
top: 0;
right: 20px;
bottom: 0;
left: 20px;

```
 It can be simplified as:

 
```
inset: 0 20px 0 20px;

```
 Just like margins and paddings, the inset values are ordered clockwise - top, right, bottom, then left (TRBL).


The universal shorthand property
--------------------------------



CSS provides a universal shorthand property, [`all`](all), which applies its value to every property in the document. Its purpose is to change the properties' inheritance model.

 See [Cascade and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) or [Introducing the CSS Cascade](cascade) for more information about how inheritance works in CSS.


See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Replaced elements](replaced_element)
* Shorthand properties:
	+ [`all`](all)
	+ [`animation`](animation)
	+ [`background`](background)
	+ [`border`](border)
	+ [`border-block-end`](border-block-end)
	+ [`border-block-start`](border-block-start)
	+ [`border-bottom`](border-bottom)
	+ [`border-color`](border-color)
	+ [`border-image`](border-image)
	+ [`border-inline-end`](border-inline-end)
	+ [`border-inline-start`](border-inline-start)
	+ [`border-left`](border-left)
	+ [`border-radius`](border-radius)
	+ [`border-right`](border-right)
	+ [`border-style`](border-style)
	+ [`border-top`](border-top)
	+ [`border-width`](border-width)
	+ [`column-rule`](column-rule)
	+ [`columns`](columns)
	+ [`contain-intrinsic-size`](contain-intrinsic-size)
	+ [`flex`](flex)
	+ [`flex-flow`](flex-flow)
	+ [`font`](font)
	+ [`gap`](gap)
	+ [`grid`](grid)
	+ [`grid-area`](grid-area)
	+ [`grid-column`](grid-column)
	+ [`grid-row`](grid-row)
	+ [`grid-template`](grid-template)
	+ [`inset`](inset)
	+ [`list-style`](list-style)
	+ [`margin`](margin)
	+ [`mask`](mask)
	+ [`offset`](offset)
	+ [`outline`](outline)
	+ [`overflow`](overflow)
	+ [`padding`](padding)
	+ [`place-content`](place-content)
	+ [`place-items`](place-items)
	+ [`place-self`](place-self)
	+ [`scroll-margin`](scroll-margin)
	+ [`scroll-padding`](scroll-padding)
	+ [`scroll-timeline`](scroll-timeline)
	+ [`text-decoration`](text-decoration)
	+ [`text-emphasis`](text-emphasis)
	+ [`transition`](transition)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties>

Specificity
===========



**Specificity** is the algorithm used by browsers to determine the [CSS declaration](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS#css_syntax) that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a [CSS selector](reference#selectors) to determine which rule from competing CSS declarations gets applied to an element.

  **Note:** Browsers consider specificity **after** determining [cascade origin and importance](cascade). In other words, for competing property declarations, specificity is relevant and compared only between selectors from the one [cascade origin and layer](@layer) that has precedence for the property. Order of appearance becomes relevant when the selector specificities of the competing declarations in the cascade layer with precedence are equal.

 

How is specificity calculated?
------------------------------



Specificity is an algorithm that calculates the weight that is applied to a given CSS declaration. The weight is determined by the number of [selectors of each weight category](#selector_weight_categories) in the selector matching the element (or pseudo-element). If there are two or more declarations providing different property values for the same element, the declaration value in the style block having the matching selector with the greatest algorithmic weight gets applied.

 The specificity algorithm is basically a three-column value of three categories or weights - ID, CLASS, and TYPE - corresponding to the three types of selectors. The value represents the count of selector components in each weight category and is written as *ID - CLASS - TYPE*. The three columns are created by counting the number of selector components for each selector weight category in the selectors that match the element.


### Selector weight categories



The selector weight categories are listed here in the order of decreasing specificity:

  ID column  Includes only [ID selectors](id_selectors), such as `#example`. For each ID in a matching selector, add 1-0-0 to the weight value.

  CLASS column  Includes [class selectors](class_selectors), such as `.myClass`, attribute selectors like `[type="radio"]` and `[lang|="fr"]`, and pseudo-classes, such as `:hover`, `:nth-of-type(3n)`, and `:required`. For each class, attribute selector, or pseudo-class in a matching selector, add 0-1-0 to the weight value.

  TYPE column  Includes [type selectors](type_selectors), such as `p`, `h1`, and `td`, and pseudo-elements like `::before`, `::placeholder`, and all other selectors with double-colon notation. For each type or pseudo-element in a matching selector, add 0-0-1 to the weight value.

  No value  The universal selector ([`*`](universal_selectors)) and the pseudo-class [`:where()`](:where) and its parameters aren't counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value.

   Combinators, such as [`+`](adjacent_sibling_combinator), [`>`](child_combinator), [`~`](general_sibling_combinator), [" "](descendant_combinator), and [`||`](column_combinator), may make a selector more specific in what is selected but they don't add any value to the specificity weight.

 The negation pseudo-class, [`:not()`](:not), itself has no weight. Neither do the [`:is()`](:is) or the [`:has()`](:has) pseudo-classes. The parameters in these selectors, however, do. The values of both come from the parameter in the list of parameters that has the highest specificity. The [`:not()`, `:is()` and `:has()` exceptions](#the_is_not_and_has_exceptions) are discussed below.

 #### Matching selector

 The specificity weight comes from the matching selector. Take this CSS selector with three comma-separated selectors as an example:

 
```
[type="password"],
input:focus,
:root #myApp input:required {
  color: blue;
}

```
 The `[type="password"]` selector in the above selector list, with a specificity weight of `0-1-0`, applies the `color: blue` declaration to all password input types.

 All inputs, no matter the type, when receiving focus, match the second selector in the list, `input:focus`, with a specificity weight of `0-1-1`; this weight is made up of the `:focus` pseudo-class (0-1-0) and the `input` type (0-0-1). If the password input has focus, it will match `input:focus`, and the specificity weight for the `color: blue` style declaration will be `0-1-1`. When that password doesn't have focus, the specificity weight remains at `0-1-0`.

 The specificity for a required input nested in an element with attribute `id="myApp"` is `1-2-1`, based on one ID, two pseudo-classes, and one element type.

 If the password input type with `required` is nested in an element with `id="myApp"` set, the specificity weight will be `1-2-1`, based on one ID, two pseudo-classes, and one element type, whether or not it has focus. Why is the specificity weight `1-2-1` rather than `0-1-1` or `0-1-0` in this case? Because the specificity weight comes from the matching selector with the greatest specificity weight. The weight is determined by comparing the values in the three columns, from left to right.

 
```
[type="password"]             /\* 0-1-0 \*/
input:focus                   /\* 0-1-1 \*/
:root #myApp input:required   /\* 1-2-1 \*/

```

### Three-column comparison



Once the specificity values of the relevant selectors are determined, the number of selector components in each column are compared, from left to right.

 
```
#myElement {
  color: green; /\* 1-0-0 - WINS!! \*/
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /\* 0-4-0 \*/
}

```
 The first column is the value of the *ID* component, which is the number of IDs in each selector. The numbers in the *ID* columns of competing selectors are compared. The selector with the greater value in the *ID* column wins no matter what the values are in the other columns. In the above example, even though the yellow selector has more components in total, only the value of the first column matters.

 If the number in the *ID* columns of competing selectors is the same, then the next column, *CLASS*, is compared, as shown below.

 
```
#myElement {
  color: yellow; /\* 1-0-0 \*/
}
#myApp [id="myElement"] {
  color: green; /\* 1-1-0 - WINS!! \*/
}

```
 The *CLASS* column is the count of class names, attribute selectors, and pseudo-classes in the selector. When the *ID* column value is the same, the selector with the greater value in the *CLASS* column wins, no matter the value in the *TYPE* column. This is shown in the example below.

 
```
:root input {
  color: green; /\* 0-1-1 - WINS because CLASS column is greater \*/
}
html body main input {
  color: yellow; /\* 0-0-4 \*/
}

```
 If the numbers in the *CLASS* and *ID* columns in competing selectors are the same, the *TYPE* column becomes relevant. The *TYPE* column is the number of element types and pseudo-elements in the selector. When the first two columns have the same value, the selector with the greater number in the *TYPE* column wins.

 If the competing selectors have the same values in all the three columns, the proximity rule comes into play, wherein the last declared style gets precedence.

 
```
input.myClass {
  color: yellow; /\* 0-1-1 \*/
}
:root input {
  color: green; /\* 0-1-1 WINS because it comes later \*/
}

```

### The `:is()`, `:not()` and `:has()` exceptions



The matches-any pseudo-class [`:is()`](:is), the relational pseudo-class [`:has()`](:has), and the negation pseudo-class [`:not()`](:not) are *not* considered as pseudo-classes in the specificity weight calculation. They themselves don't add any weight to the specificity equation. However, the selector parameters passed into the pseudo-class parenthesis are part of the specificity algorithm; the weight of the matches-any and negation pseudo-class in the specificity value calculation is the weight of the parameter's [weight](#selector_weight_categories).

 
```
p {
  /\* 0-0-1 \*/
}
:is(p) {
  /\* 0-0-1 \*/
}

h2:nth-last-of-type(n + 2) {
  /\* 0-1-1 \*/
}
h2:has(~ h2) {
  /\* 0-0-2 \*/
}

div.outer p {
  /\* 0-1-2 \*/
}
div:not(.inner) p {
  /\* 0-1-2 \*/
}

```
 Note that in the above CSS pairing, the specificity weight provided by the `:is()`, `:has()` and `:not()` pseudo-classes is the value of the selector parameter, not of the pseudo-class.

 All three of these pseudo-classes accept complex selector lists, a list of comma-separated selectors, as a parameter. This feature can be used to increase a selector's specificity:

 
```
:is(p, #fakeId) {
  /\* 1-0-0 \*/
}
h1:has(+ h2, > #fakeId) {
  /\* 1-0-1 \*/
}
p:not(#fakeId) {
  /\* 1-0-1 \*/
}
div:not(.inner, #fakeId) p {
  /\* 1-0-2 \*/
}

```
 In the above CSS code block, we have included `#fakeId` in the selectors. This `#fakeId` adds `1-0-0` to the specificity weight of each paragraph.

 Generally, you want to keep specificity down to a minimum, but if you need to increase an element's specificity for a particular reason, these three pseudo-classes can help.

 
```
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /\* 3-0-1 \*/
}

```
 In this example, all links will be blue, unless overridden by a link declaration with 3 or more IDs, a color value matching an `a` includes the [`!important` flag](#the_!important_exception), or if the link has an [inline style](#inline_styles) color declaration. If you use such a technique, add a comment to explain why the hack was needed.


### Inline styles



Inline styles added to an element (e.g., `style="font-weight: bold;"`) always overwrite any normal styles in author stylesheets, and therefore, can be thought of as having the highest specificity. Think of inline styles as having a specificity weight of `1-0-0-0`.

 The only way to override inline styles is by using `!important`.

 Many JavaScript frameworks and libraries add inline styles. Using `!important` with a very targeted selector, such as an attribute selector using the inline style, is one way to override these inline styles.

 
```
<p style="color: purple">…</p>

```
 
```
p[style\*="purple"] {
  color: rebeccapurple !important;
}

```
 Make sure to include a comment with every inclusion of the important flag so code maintainers understand why a CSS anti-pattern was used.


### The `!important` exception



CSS declarations marked as important override any other declarations within the same cascade layer and origin. Although technically, [`!important`](important) has nothing to do with specificity, it interacts directly with specificity and the cascade. It reverses the <cascade> order of stylesheets.

 If declarations from the same origin and cascade layer conflict and one property value has the `!important` flag set, the important declaration is applied no matter the specificity. When conflicting declarations from the same origin and cascade layer with the `!important` flag are applied to the same element, the declaration with a greater specificity is applied.

 Using `!important` to override specificity is considered a **bad practice** and should be avoided for this purpose. Understanding and effectively using specificity and the cascade can remove any need for the `!important` flag.

 Instead of using `!important` to override foreign CSS (from external libraries, like Bootstrap or normalize.css), import the third-party scripts directly into [cascade layers](@layer). If you must use `!important` in your CSS, comment your usage so future code maintainers know why the declaration was marked important and know not to override it. But definitely, don't use `!important` when writing plugins or frameworks that other developers will need to incorporate without being able to control.


### The `:where()` exception



The specificity-adjustment pseudo-class [`:where()`](:where) always has its specificity replaced with zero, `0-0-0`. It enables making CSS selectors very specific in what element is targeted without any increase to specificity.

 In creating third-party CSS to be used by developers who don't have access to edit your CSS, it's considered a good practice to create CSS with the lowest possible specificity. For example, if your theme includes the following CSS:

 
```
:where(#defaultTheme) a {
  /\* 0-0-1 \*/
  color: red;
}

```
 Then the developer implementing the widget can easily override the link color using only type selectors.

 
```
footer a {
  /\* 0-0-2 \*/
  color: blue;
}

```

Tips for handling specificity headaches
---------------------------------------


Instead of using `!important`, consider using cascade layers and using low weight specificity throughout your CSS so that styles are easily overridden with slightly more specific rules. Using semantic HTML helps provide anchors from which to apply styling.

### Making selectors specific with and without adding specificity



By indicating the section of the document you're styling before the element you're selecting, the rule becomes more specific. Depending on how you add it, you can add some, a lot, or no specificity, as shown below:

 
```
<main id="myContent">
  <h1>Text</h1>
</main>

```
 
```
#myContent h1 {
  color: green; /\* 1-0-1 \*/
}
[id="myContent"] h1 {
  color: yellow; /\* 0-1-1 \*/
}
:where(#myContent) h1 {
  color: blue; /\* 0-0-1 \*/
}

```
 No matter the order, the heading will be green because that rule is the most specific.

 #### Reducing ID specificity

 Specificity is based on the form of a selector. Including the `id` of an element as an attribute selector rather than an id selector is a good way to make an element more specific without adding an overabundance of specificity. In the previous example, the selector `[id="myContent"]` counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.

 You can also include the `id` or any part of a selector as a parameter in the `:where()` specificity-adjustment pseudo class if you need to make a selector more specific but don't want to add any specificity at all.


### Increasing specificity by duplicating selector



As a special case for increasing specificity, you can duplicate weights from the *CLASS* or *ID* columns. Duplicating id, class, pseudo-class or attribute selectors within a compound selector will increase specificity when overriding very specific selectors over which you have no control.

 
```
#myId#myId#myId span {
  /\* 3-0-1 \*/
}
.myClass.myClass.myClass span {
  /\* 0-3-1 \*/
}

```
 Use this sparingly, if at all. If using selector duplication, always comment your CSS.

 By using `:is()` and `:not()` (and also `:has()`), you can increase specificity even if you can't add an `id` to a parent element:

 
```
:not(#fakeID#fakeId#fakeID) span {
  /\* 3-0-1 \*/
}
:is(#fakeID#fakeId#fakeID, span) {
  /\* 3-0-0 \*/
}

```

### Precedence over third-party CSS



Leveraging cascade layers is the standard way of enabling one set of styles to take precedence over another set of styles; cascade layers enable this without using specificity! Normal (not important) author styles imported into cascade layers have lower precedence than unlayered author styles.

 If styles are coming from a stylesheet you can't edit or don't understand and you need to override styles, a strategy is to import the styles you don't control into a cascade layer. Styles in subsequently declared layers take precedence, with unlayered styles having precedence over all layered styles from the same origin.

 When two selectors from different layers match the same element, origin and importance take precedence; the specificity of the selector in the losing stylesheet is irrelevant.

 
```
<style>
 @import TW.css layer();
 p,
 p \* {
 font-size: 1rem;
 }
</style>

```
 In the above example, all paragraph text, including the nested content, will be `1rem` no matter how many class names the paragraphs have that match the TW stylesheet.


### Avoiding and overriding `!important`



The best approach is to not use `!important`. The above explanations on specificity should be helpful in avoiding using the flag and removing it altogether when encountered.

 To remove the perceived need for `!important`, you can do one of the following:

 * Increase the specificity of the selector of the formerly `!important` declaration so that it is greater than other declarations
* Give it the same specificity and put it after the declaration it is meant to override
* Reduce the specificity of the selector you are trying to override.

 All these methods are covered in preceding sections.

 If you're unable to remove `!important` flags from an authors style sheet, the only solution to overriding the important styles is by using `!important`. Creating a [cascade layer](@layer) of important declaration overrides is an excellent solution. Two ways of doing this include:

 #### Method 1

 1. Create a separate, short style sheet containing only important declarations specifically overriding any important declarations you were unable to remove.
2. Import this stylesheet as the first import in your CSS using `layer()`, including the `@import` statement, before linking to other stylesheets. This is to ensure that the important overrides is imported as the first layer.

 
```
<style>
 @import importantOverrides.css layer();
</style>

```
 #### Method 2

 1. At the beginning of your stylesheet declarations, create a named cascade layer, like so: 
```
@layer importantOverrides;

```
2. Each time you need to override an important declaration, declare it within the named layer. Only declare important rules within the layer. 
```
[id="myElement"] p {
  /\* normal styles here \*/
}
@layer importantOverrides {
  [id="myElement"] p {
    /\* important style here \*/
  }
}

```

 The specificity of the selector of the important style within the layer can be low, as long as it matches the element you are trying to override. Normal layers should be declared outside the layer because layered styles have lower precedence than unlayered styles.


### Tree proximity ignorance



The proximity of an element to other elements that are referenced in a given selector has no impact on specificity.

 
```
body h1 {
  color: green;
}

html h1 {
  color: purple;
}

```
 The `<h1>` elements will be purple because when declarations have the same specificity, the last declared selector has precedence.


### Directly targeted elements vs. inherited styles



Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. Given the following CSS and HTML:

 
```
#parent {
  color: green;
}

h1 {
  color: purple;
}

```
 
```
<html lang="en">
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>

```
 The `h1` will be purple because the `h1` selector targets the element specifically, while the green is inherited from the `#parent` declarations.


Examples
--------



In the following CSS, we have three selectors targeting [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements to set a color. For a given input, the specificity weight of the color declaration having precedence is the matching selector with the greatest weight:

 
```
#myElement input.myClass {
  color: red;
} /\* 1-1-1 \*/
input[type="password"]:required {
  color: blue;
} /\* 0-2-1 \*/
html body main input {
  color: green;
} /\* 0-0-4 \*/

```
 If the above selectors all target the same input, the input will be red, as the first declaration has the highest value in the *ID* column.

 The last selector has four *TYPE* components. While it has the highest integer value, no matter how many elements and pseudo-elements are included, even if there were 150, TYPE components never have precedence over *CLASS* components. The column values are compared starting from left to right when column values are equal.

 Had we converted the id selector in the example code above to an attribute selector, the first two selectors would have the same specificity, as shown below:

 
```
[id="myElement"] input.myClass {
  color: red;
} /\* 0-2-1 \*/
input[type="password"]:required {
  color: blue;
} /\* 0-2-1 \*/

```
 When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. If both selectors match the same [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), the color will be blue.


Additional notes
----------------



A few things to remember about specificity:

 1. Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity only matters for declarations of the same importance and same origin and [cascade layer](@layer). If matching selectors are in different origins, the <cascade> determines which declaration takes precedence.
2. When two selectors in the same cascade layer and origin have the same specificity, proximity is important; the last selector wins.
3. As per CSS rules, [directly targeted elements](#directly_targeted_elements_vs._inherited_styles) will always take precedence over rules which an element inherits from its ancestor.
4. [Proximity of elements](#tree_proximity_ignorance) in the document tree has no effect on the specificity.


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # specificity-rules](https://drafts.csswg.org/selectors/#specificity-rules) |


See also
--------


* ["Specificity" in "Cascade and inheritance"](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#specificity_2)
* [SpeciFISHity](https://specifishity.com)
* [Specificity Calculator](https://specificity.keegan.st/): An interactive website to test and understand your own CSS rules
* [*ID-CLASS-TYPE* exercise](https://estelle.github.io/CSS/selectors/exercises/specificity.html) a specificity quiz
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity>

Computed value
==============



The **computed value** of a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is the value that is transferred from parent to child during inheritance. It is calculated from the [specified value](specified_value) by:

 1. Handling the special values [`inherit`](inherit), [`initial`](initial), [`revert`](revert), [`revert-layer`](revert-layer), and [`unset`](unset).
2. Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table.

 The computation needed to reach a property's computed value typically involves converting relative values (such as those in `em` units or percentages) to absolute values. For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size).

 However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the [used value](used_value) is determined.

  **Note:** The [`getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) DOM API returns the [resolved value](resolved_value), which may either be the computed value or the [used value](used_value), depending on the property.

 

Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value](https://www.w3.org/TR/CSS22/cascade.html#computed-value) |


See also
--------


* [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value>

Specified value
===============



The **specified value** of a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules:

 1. If the document's style sheet explicitly specifies a value for the property, the given value will be used.
2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.
3. If none of the above pertain, the element's [initial value](initial_value) will be used.



Examples
--------


### HTML



```
<p>My specified color is given explicitly in the CSS.</p>

<div>
  The specified values of all my properties default to their initial values,
  because none of them are given in the CSS.
</div>

<div class="fun">
  <p>
    The specified value of my font family is not given explicitly in the CSS, so
    it is inherited from my parent. However, the border is not an inheriting
    property.
  </p>
</div>

```
### CSS



```
.fun {
  border: 1px dotted pink;
  font-family: fantasy;
}

p {
  color: green;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value](https://www.w3.org/TR/CSS22/cascade.html#specified-value) |


See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/specified_value>

Value definition syntax
=======================



**CSS value definition syntax**, a formal grammar, is used for defining the set of valid values for a CSS property or function. In addition to this syntax, the set of valid values can be further restricted by semantic constraints (for example, for a number to be strictly positive).

 The definition syntax describes which values are allowed and the interactions between them. A component can be a *keyword*, some characters considered as a *literal*, or a value of a given CSS data type or of another CSS property.



Component value types
---------------------


### Keywords



#### Generic keywords

 A keyword with a predefined meaning appears literally, without quotation marks. For example: `auto`, `smaller` or `ease-in`.

 #### The specific case of `inherit`, `initial` and `unset`

 All CSS properties accept the keywords `inherit`, `initial` and `unset`, that are defined throughout CSS. They are not shown in the value definition, and are implicitly defined.


### Literals



In CSS, a few characters can appear on their own, like the slash ('`/`') or the comma ('`,`'), and are used in a property definition to separate its parts. The comma is often used to separate values in enumerations, or parameters in mathematical-like functions; the slash often separates parts of the value that are semantically different, but have a common syntax. Typically, the slash is used in shorthand properties; to separate components that are of the same type, but belong to different properties.

 Both symbols appear literally in a value definition.


### Data types



#### Basic data types

 Some kind of data are used throughout CSS, and are defined once for all values in the specification. Called *basic data types*, they are represented with their name surrounded by the symbol '`<`' and '`>`': [`<angle>`](angle), [`<string>`](string), …

 #### Non-terminal data types

 Less common data types, called *non-terminal data types*, are also surrounded by '`<`' and '`>`'.

 Non-terminal data types are of two kinds:

 * data types *sharing the same name of a property*, put between quotes. In this case, the data type shares the same set of values as the property. They are often used in the definition of shorthand properties.
* data type *not sharing the same name of a property*. These data types are very close to the basic data types. They only differ from the basic data types in the physical location of their definition. In this case, the definition is usually physically very close to the definition of the property using them.


Component value combinators
---------------------------


### Brackets



*Brackets* enclose several entities, combinators, and multipliers, then transform them as a single component. They are used to **group components to bypass the precedence rules**.

 
```
bold [ thin && <length> ]

```
 This example matches the following values:

 * `bold thin 2vh`
* `bold 0 thin`
* `bold thin 3.5em`

 But not:

 * `thin bold 3em`, as `bold` is juxtaposed with the component defined by the brackets, it must appear before it.


### Juxtaposition



Placing several keywords, literals or data types, next to one another, only separated by one or several spaces, is called *juxtaposition*. All juxtaposed components are **mandatory and should appear in the exact order**.

 
```
bold <length>, thin

```
 This example matches the following values:

 * `bold 1em, thin`
* `bold 0, thin`
* `bold 2.5cm, thin`
* `bold 3vh, thin`

 But not:

 * `thin 1em, bold`, as the entities must be in the expressed order
* `bold 1em thin`, as the entities are mandatory; the comma, a literal, must be present
* `bold 0.5ms, thin`, as the `ms` values are not [`<length>`](length)


### Double ampersand



Separating two or more components, by a *double ampersand*, `&&`, means that all these entities are **mandatory but may appear in any order**.

 
```
bold && <length>

```
 This example matches the following values:

 * `bold 1em`
* `bold 0`
* `2.5cm bold`
* `3vh bold`

 But not:

 * `bold`, as both components must appear in the value.
* `bold 1em bold`, as both components must appear only one time.

  **Note:** juxtaposition has precedence over the double ampersand, meaning that `bold thin && <length>` is equivalent to `[ bold thin ] && <length>`. It describes `bold thin <length>` or `<length> bold thin` but not `bold <length> thin`.

 
### Double bar



Separating two or more components by a *double bar*, `||`, means that all entities are options: **at least one of them must be present, and they may appear in any order**. Typically this is used to define the different values of a [shorthand property](shorthand_properties).

 
```
<'border-width'> || <'border-style'> || <'border-color'>

```
 This example matches the following values:

 * `1em solid blue`
* `blue 1em`
* `solid 1px yellow`

 But not:

 * `blue yellow`, as a component must appear at most one single time.
* `bold`, as it isn't a keyword allowed as value of any of the entity.

  **Note:** the double ampersand has precedence over the double bar, meaning that `bold || thin && <length>` is equivalent to `bold || [ thin && <length> ]`. It describes `bold`, `thin <length>`, `bold thin <length>`, or `thin <length> bold` but not `<length> bold thin` as bold, if not omitted, must be placed before or after the whole `thin && <length>` component.

 
### Single bar



Separating two or more entities by a *single bar*, `|`, means that all entities are exclusive options: **exactly one of these options must be present**. This is typically used to separate a list of possible keywords.

 
```
<percentage> | <length> | left | center | right | top | bottom

```
 This example matches the following values:

 * `3%`
* `0`
* `3.5em`
* `left`
* `center`
* `right`
* `top`
* `bottom`

 But not:

 * `center 3%`, as only one of the components must be present.
* `3em 4.5em`, as a component must be present at most one time.

  **Note:** the double bar has precedence over the single bar, meaning that `bold | thin || <length>` is equivalent to `bold | [ thin || <length> ]`. It describes `bold`, `thin`, `<length>`, `<length> thin`, or `thin <length>` but not `bold <length>` as only one entity from each side of the `|` combinator can be present.

 
Component value multipliers
---------------------------



A multiplier is a sign that indicates how many times a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

 Note that multipliers cannot be added and have precedence over all combinators.


### Asterisk (`*`)



The *asterisk multiplier* indicates that the entity may appear **zero, one or several times**.

 
```
bold smaller*

```
 This example matches the following values:

 * `bold`
* `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`, and so on.

 But not:

 * `smaller`, as `bold` is juxtaposed, and must appear before any `smaller` keyword.


### Plus (`+`)



The *plus multiplier* indicates that the entity may appear **one or several times**.

 
```
bold smaller+

```
 This example matches the following values:

 * `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`, and so on.

 But not:

 * `bold`, as `smaller` must appear at least one time.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword.


### Question mark (`?`)



The *question mark multiplier* indicates that the entity is optional, and **must appear zero or one time**.

 
```
bold smaller?

```
 This example matches the following values:

 * `bold`
* `bold smaller`

 But not:

 * `bold smaller smaller`, as `smaller` must appear at most one time.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword.


### Curly braces (`{ }`)



The *curly braces multiplier*, enclosing two integers separated by a comma, A and B, indicates that the entity **must appear at least A times and at most B times**.

 
```
bold smaller{1,3}

```
 This example matches the following values:

 * `bold smaller`
* `bold smaller smaller`
* `bold smaller smaller smaller`

 But not:

 * `bold`, as `smaller` must appear at least one time.
* `bold smaller smaller smaller smaller`, as `smaller` must appear at most three times.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword


### Hash mark (`#`)



The *hash mark multiplier* indicates that the entity may be repeated one or more times (for example, the plus multiplier), but each occurrence is separated by a comma (',').

 
```
bold smaller#

```
 This example matches the following values:

 * `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller`, and so on.

 But not:

 * `bold`, as `smaller` must appear at least one time.
* `bold smaller smaller smaller`, as the different occurrences of `smaller` must be separated by commas.
* `smaller`, as `bold` is juxtaposed and must appear before any `smaller` keyword.

 The hash mark may optionally be followed by curly braces to indicate precisely how many times the repetition occurs.

 
```
bold smaller#{1,3}

```
 This example matches the following values:

 * `bold smaller`
* `bold smaller, smaller`
* `bold smaller, smaller, smaller`

 But not:

 * `bold smaller, smaller, smaller, smaller`, as `smaller` must appear at most three times.

 
```
bold smaller#{2}

```
 This example matches the following value:

 * `bold smaller, smaller`

 But not:

 * `bold smaller`, as `smaller` must appear exactly two times.


### Exclamation point (`!`)



The *exclamation point multiplier* after a group indicates that the group is required, and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

 
```
[ bold? smaller? ]!

```
 This example matches the following values:

 * `bold`
* `smaller`
* `bold smaller`

 But not:

 * neither `bold` nor `smaller`, as one of them must appear.
* `smaller bold`, as `bold` is juxtaposed and must appear before the `smaller` keyword.
* `bold smaller bold`, as `bold` and `smaller` may only appear once.


Summary
-------




| Sign | Name | Description | Example |
| --- | --- | --- | --- |
| Combinators |
| --- |
|  | Juxtaposition | Components are mandatory and should appear in that order | `solid <length>` |
| `&&` | Double ampersand | Components are mandatory but may appear in any order | `<length> && <string>` |
| `||` | Double bar |  At least one of the components must be present, and they may appear in any order.  | `<'border-image-outset'> || <'border-image-slice'>` |
| `|` | Single bar | Exactly one of the components must be present | `smaller | small | normal | big | bigger` |
| `[ ]` | Brackets | Group components to bypass precedence rules | `bold [ thin && <length> ]` |
| Multipliers |
|  | No multiplier | Exactly 1 time | `solid` |
| `*` | Asterisk | 0 or more times | `bold smaller*` |
| `+` | Plus sign | 1 or more times | `bold smaller+` |
| `?` | Question mark | 0 or 1 time (that is *optional)* | `bold smaller?` |
| `{A,B}` | Curly braces | At least `A` times, at most `B` times | `bold smaller{1,3}` |
| `#` | Hash mark |  1 or more times, but each occurrence separated by a comma ('`,`')  | `bold smaller#` |
| `!` | Exclamation point | Group must produce at least 1 value | `[ bold? smaller? ]!` |

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # value-defs](https://drafts.csswg.org/css-values/#value-defs) |


See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ **Value definition syntax**
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax>

Actual value
============


The **actual value** of a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is the [used value](used_value) of that property after any necessary approximations have been applied. For example, a [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer.


Calculating a property's actual value
-------------------------------------



The [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) performs four steps to calculate a property's actual (final) value:

 1. First, the [specified value](specified_value) is determined based on the result of [cascading](cascade), <inheritance>, or using the [initial value](initial_value).
2. Next, the [computed value](computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
3. Then, layout is calculated, resulting in the [used value](used_value).
4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.


Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value](https://www.w3.org/TR/CSS22/cascade.html#actual-value) |


See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/actual_value>

Initial value
=============



The **initial value** of a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not:

 * For [inherited properties](inheritance#inherited_properties), the initial value is used on the *root element only*, as long as no [specified value](specified_value) is supplied.
* For [non-inherited properties](inheritance#non-inherited_properties), the initial value is used on *all elements*, as long as no [specified value](specified_value) is supplied.

 You can explicitly specify the initial value by using the [`initial`](initial) keyword.

  **Note:** The initial value should not be confused with the value specified by the browser's style sheet.

 

Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value](https://www.w3.org/TR/CSS22/cascade.html#specified-value) |


See also
--------


* [`initial`](initial)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value>

Layout mode
===========



A [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) **layout mode**, sometimes called *layout*, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:

 * *[Normal flow](css_flow_layout)* — all elements are part of normal flow until you do something to take them out of it. Normal flow includes *block layout*, designed for laying out boxes such as paragraphs and *inline layout*, which lays out inline items such as text.
* [*Table layout*](css_table), designed for laying out tables.
* *Float layout*, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.
* [*Positioned layout*](css_positioning), designed for positioning elements without much interaction with other elements.
* [*Multi-column layout*](css_columns), designed for laying content out in columns as in a newspaper.
* [*Flexible box layout*](css_flexible_box_layout), designed for laying out complex pages that can be resized smoothly.
* [*Grid layout*](css_grid_layout), designed for laying out elements relative to a fixed grid.

  **Note:** Not all [CSS properties](index) apply to all *layout modes*. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.

 

See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode>

CSS values and units
====================


Every CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types — values and units — that CSS properties accept. Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.


Textual data types
------------------



* [`<custom-ident>`](custom-ident)
* Pre-defined keywords as an `<ident>`
* [`<string>`](string)
* [`url()`](url)

 Text data types are either `<string>`, a quoted series of characters, or an `<ident>`, a "CSS Identifier" which is an unquoted string. A `<string>` must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as `<ident>` or `<custom-ident>`, must be unquoted.

 In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a [`<custom-ident>`](custom-ident), [`<string>`](string), or both.

 When both quoted and unquoted user defined text values are permitted, the specification will list `<custom-ident> | <string>`, meaning quotes are optional, such as is the case with animation names:

 
```
@keyframe validIdent {
  /\* keyframes go here \*/
}
@keyframe 'validString' {
  /\* keyframes go here \*/
}

```
 Some text values are not valid if encompassed in quotes. For example, the value of [`grid-area`](grid-area) can be a `<custom-ident>`, so if we had a grid area named `content` we would use it without quotes:

 
```
.item {
  grid-area: content;
}

```
 In comparison, a data type that is a [`<string>`](string), such as a string value of the [`content`](content) property, must be quoted:

 
```
.item::after {
  content: "This is my content.";
}

```
 While you can generally create any name you want, including using emojis, the identifier can't be `none`, `unset`, `initial`, or `inherit`, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the [`<custom-ident>`](custom-ident) and [`<string>`](string) reference pages for more details.


### Pre-defined keyword values



Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.

 When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for [`float`](float).

 
```
left | right | none | inline-start | inline-end

```
 Such values are used without quotes:

 
```
.box {
  float: left;
}

```

### CSS-wide values



In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values [`initial`](initial), [`inherit`](inherit), [`unset`](unset), [`revert`](revert), and [`revert-layer`](revert-layer), which explicitly specify defaulting behaviors.

  [`initial`](initial)  Represents the value specified as the property's initial value.

  [`inherit`](inherit)  Represents the computed value of the property on the element's parent, provided it is inherited.

  [`unset`](unset)  Acts as either `inherit` or `initial`, depending on whether the property is inherited or not.

  [`revert`](revert)  Resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

  [`revert-layer`](revert-layer)  Rolls back the value of a property in a [cascade layer](@layer) to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.

  
### URLs



A [`url()`](url) type uses functional notation, which accepts a `<string>` that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.

 
```
.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

```
 The parameter for `url()` can be either quoted or unquoted. If unquoted, it is parsed as a `<url-token>`, which has extra requirements including the escaping of certain characters. See [`url()`](url) for more information.


Numeric data types
------------------


* [`<integer>`](integer)
* [`<number>`](number)
* [`<dimension>`](dimension)
* [`<percentage>`](percentage)
### Integers


An integer is one or more decimal digits, `0` through `9`, such as `1024` or `-55`. An integer may be preceded by a `+` or `-` symbol, with no space between the symbol and the integer.

### Numbers


A [`<number>`](number) represents a real number, which may or may not have a decimal point with a fractional component, for example `0.255`, `128` or `-1.2`. Numbers may also be preceded by a `+` or `-` symbol.

### Dimensions



A [`<dimension>`](dimension) is a `<number>` with a unit attached to it, for example `45deg`, `100ms`, or `10px`. The attached unit identifier is case insensitive. There is never a space or any other characters between the number and the unit identifier: i.e. `1 cm` is not valid.

 CSS uses dimensions to specify:

 * [`<length>`](length) (Distance units)
* [`<angle>`](angle)
* [`<time>`](time)
* [`<frequency>`](frequency)
* [`<flex>`](flex_value)
* [`<resolution>`](resolution)

 These are all covered in subsections below.

 #### Distance units

 Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the [`<length>`](length) type. There are two types of lengths in CSS: relative and absolute.

  Relative length units specify a length in relation to something else. For example, `em` is relative to the font size on the element and `vh` is relative to the viewport height. 

 

| Unit | Relative to |
| --- | --- |
| `em` | Font size of the element. |
| `ex` | x-height of the element's font. |
| `cap` | Cap height (the nominal height of capital letters) of the element's font. |
| `ch` | Average character advance of a narrow glyph in the element's font, as represented by the "0" (ZERO, U+0030) glyph. |
| `ic` | Average character advance of a full width glyph in the element's font, as represented by the "水" (CJK water ideograph, U+6C34) glyph. |
| `rem` | Font size of the root element. |
| `lh` | Line height of the element. |
| `rlh` | Line height of the root element. |
| `vw` | 1% of viewport's width. |
| `vh` | 1% of viewport's height. |
| `vi` | 1% of viewport's size in the root element's inline axis. |
| `vb` | 1% of viewport's size in the root element's block axis. |
| `vmin` | 1% of viewport's smaller dimension. |
| `vmax` | 1% of viewport's larger dimension. |

  Container query length units specify a length relative to the dimensions of a [query container](css_container_queries). For example, `cqw` is relative to the width of the query container and `cqh` is relative to the height of the query container. 

 

| Unit | Relative to |
| --- | --- |
| `cqw` | 1% of a query container's width |
| `cqh` | 1% of a query container's height |
| `cqi` | 1% of a query container's inline size |
| `cqb` | 1% of a query container's block size |
| `cqmin` | The smaller value of `cqi` or `cqb` |
| `cqmax` | The larger value of `cqi` or `cqb` |

 Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, `mm` is a physical millimeter, 1/10th of a centimeter.

 

| Unit | Name | Equivalent to |
| --- | --- | --- |
| `cm` | Centimeters | 1cm = 96px/2.54 |
| `mm` | Millimeters | 1mm = 1/10th of 1cm |
| `Q` | Quarter-millimeters | 1Q = 1/40th of 1cm |
| `in` | Inches | 1in = 2.54cm = 96px |
| `pc` | Picas | 1pc = 1/6th of 1in |
| `pt` | Points | 1pt = 1/72th of 1in |
| `px` | Pixels | 1px = 1/96th of 1in |

 When including a length value, if the length is `0`, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

 #### Angle units

 Angle values are represented by the type [`<angle>`](angle) and accept the following values:

 

| Unit | Name | Description |
| --- | --- | --- |
| `deg` | Degrees | There are 360 degrees in a full circle. |
| `grad` | Gradians | There are 400 gradians in a full circle. |
| `rad` | Radians | There are 2π radians in a full circle. |
| `turn` | Turns | There is 1 turn in a full circle. |

 #### Time units

 Time values are represented by the type [`<time>`](time). When including a time value, the unit identifier — the `s` or `ms` — is required. It accepts the following values.

 

| Unit | Name | Description |
| --- | --- | --- |
| `s` | Seconds |  |
| `ms` | Milliseconds | There are 1,000 milliseconds in a second. |

 #### Frequency units

 Frequency values are represented by the type [`<frequency>`](frequency). It accepts the following values.

 

| Unit | Name | Description |
| --- | --- | --- |
| `Hz` | Hertz | Represents the number of occurrences per second. |
| `kHz` | KiloHertz | A kiloHertz is 1000 Hertz. |

 `1Hz`, which can also be written as `1hz` or `1HZ`, is one cycle per second.

 #### Flex units

 Flex units are represented by the type [`<flex>`](flex_value). It accepts the following value.

 

| Unit | Name | Description |
| --- | --- | --- |
| `fr` | Flex | Represents a flexible length within a grid container |

 #### Resolution units

 Resolution units are represented by the type [`<resolution>`](resolution). They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

 

| Unit | Description |
| --- | --- |
| `dpi` | Dots per inch. |
| `dpcm` | Dots per centimeter. |
| `dppx`, `x` | Dots per px unit. |


### Percentages



A [`<percentage>`](percentage) is a type that represents a fraction of some other value.

 Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

 As an example, if you specify the [`width`](width) of a box as a percentage, it refers to the percentage of the box's parent's computed width:

 
```
.box {
  width: 50%;
}

```

### Mixing percentages and dimensions



Some properties accept a dimension that could be either one of two types, for example a `<length>` **or** a `<percentage>`. In this case the allowed value is detailed in the specification as a combination unit, e.g. [`<length-percentage>`](length-percentage). Other possible combinations are as follows:

 * [`<frequency-percentage>`](frequency-percentage)
* [`<angle-percentage>`](angle-percentage)
* [`<time-percentage>`](time-percentage)


### Special data types (defined in other specs)



* [`<color>`](color_value)
* [`<image>`](image)
* [`<position>`](position_value)

 #### Color

 The [`<color>`](color_value) value specifies the color of an element feature (e.g. it's background color), and is defined in the [CSS Color Module](https://drafts.csswg.org/css-color-3/).

 #### Image

 The [`<image>`](image) value specifies all the different types of image that can be used in CSS, and is defined in the [CSS Image Values and Replaced Content Module](https://www.w3.org/TR/css-images-4/).

 #### Position

 The [`<position>`](position_value) type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a [`background-position`](background-position) and therefore specified in the [CSS Backgrounds and Borders specification](https://www.w3.org/TR/css-backgrounds-3/).


### Functional notation



* [`calc()`](calc)
* [`min()`](min)
* [`max()`](max)
* [`minmax()`](minmax)
* [`clamp()`](clamp)
* `toggle()`
* [`attr()`](attr)

 [Functional notation](css_functions) is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis `(` followed by the argument(s) to the notation followed by a right parenthesis `)`. Functions can take multiple arguments, which are formatted similarly to a CSS property value.

 White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for `min()`, `max()`, `minmax()`, and `clamp()` functions.)

 Some legacy functional notations such as `rgba()` use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.


Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4](https://drafts.csswg.org/css-values/)  |
| [CSS Color Module Level 4](https://drafts.csswg.org/css-color/)  |
| [CSS Images Module Level 3](https://drafts.csswg.org/css-images/)  |


See also
--------


* [CSS Basic Data Types](css_types)
* [Introduction to CSS: Values and Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
* [Trigonometric functions in CSS](https://web.dev/css-trig-functions/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units>

Resolved value
==============



The **resolved value** of a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is the value returned by [`getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle).

 For most properties, it is the [computed value](computed_value), but for a few legacy properties (including [`width`](width) and [`height`](height)), it is instead the [used value](used_value). See the specification link below for more per-property details.



Specifications
--------------




| Specification |
| --- |
| [CSS Object Model (CSSOM) # resolved-values](https://drafts.csswg.org/cssom/#resolved-values) |


See also
--------


* [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value>

Used value
==========



The **used value** of a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is its value after all calculations have been performed on the [computed value](computed_value).

 After the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., [`width`](width), [`line-height`](line-height)) are in pixels. The used values of shorthand properties (e.g., [`background`](background)) are consistent with those of their component properties (e.g., [`background-color`](background-color) or [`background-size`](background-size)) and with [`position`](position) and [`float`](float).

  **Note:** The [`getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) DOM API returns the [resolved value](resolved_value), which may either be the [computed value](computed_value) or the used value, depending on the property.

 

Example
-------


This example computes and displays the used `width` value of three elements (updates on resize):

### HTML



```
<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

```
### CSS



```
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/\* Make results easier to see \*/
div {
  border: 1px solid red;
  padding: 8px;
}

```
### JavaScript



```
function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);

```
### Result


Difference from computed value
------------------------------



CSS 2.0 defined only *computed value* as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., `display`, `font-size`, or `line-height`), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from [CSS 2.1 Changes: Specified, computed, and actual values](https://www.w3.org/TR/CSS2/changes.html#q21.36)):

 * `background-position`
* `bottom`, `left`, `right`, `top`
* `height`, `width`
* `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
* `min-height`, `min-width`
* `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
* `text-indent`


Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # used-value](https://www.w3.org/TR/CSS22/cascade.html#used-value) |


See also
--------


* [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- **Used values**
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/used_value>

Introduction to the CSS basic box model
=======================================



When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard **CSS basic box model**. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

 Every box is composed of four parts (or *areas*), defined by their respective edges: the *content edge*, *padding edge*, *border edge*, and *margin edge*.

  ![CSS Box model] 



Content area
------------



The **content area**, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the *content width* (or *content-box width*) and the *content height* (or *content-box height*). It often has a background color or background image.

 If the [`box-sizing`](../box-sizing) property is set to `content-box` (default) and if the element is a block element, the content area's size can be explicitly defined with the [`width`](../width), [`min-width`](../min-width), [`max-width`](../max-width), [`height`](../height), [`min-height`](../min-height), and [`max-height`](../max-height) properties.


Padding area
------------



The **padding area**, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the *padding-box width* and the *padding-box height*.

 The thickness of the padding is determined by the [`padding-top`](../padding-top), [`padding-right`](../padding-right), [`padding-bottom`](../padding-bottom), [`padding-left`](../padding-left), and shorthand [`padding`](../padding) properties.


Border area
-----------



The **border area**, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the *border-box width* and the *border-box height*.

 The thickness of the borders are determined by the [`border-width`](../border-width) and shorthand [`border`](../border) properties. If the [`box-sizing`](../box-sizing) property is set to `border-box`, the border area's size can be explicitly defined with the [`width`](../width), [`min-width`](../min-width), [`max-width`](../max-width), [`height`](../height), [`min-height`](../min-height), and [`max-height`](../max-height) properties. When there is a background ([`background-color`](../background-color) or [`background-image`](../background-image)) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the [`background-clip`](../background-clip) CSS property.


Margin area
-----------



The **margin area**, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the *margin-box width* and the *margin-box height*.

 The size of the margin area is determined by the [`margin-top`](../margin-top), [`margin-right`](../margin-right), [`margin-bottom`](../margin-bottom), [`margin-left`](../margin-left), and shorthand [`margin`](../margin) properties. When [margin collapsing](mastering_margin_collapsing) occurs, the margin area is not clearly defined since margins are shared between boxes.

 Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the [`line-height`](../line-height) property, even though the borders and padding are still displayed around the content.


Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3 # intro](https://drafts.csswg.org/css-box/#intro) |


See also
--------


* [Layout and the containing block](../containing_block)
* [Introducing the CSS Cascade](../cascade)
* [Cascade, specificity, and inheritance](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
* CSS key concepts:
	+ [CSS syntax](../syntax)
	+ [At-rules](../at-rule)
	+ [Comments](../comments)
	+ [Specificity](../specificity)
	+ [Inheritance](../inheritance)
	+ [Layout modes](../layout_mode)
	+ [Visual formatting models](../visual_formatting_model)
	+ [Margin collapsing](mastering_margin_collapsing)
	+ Values
		- [Initial values](../initial_value)
		- [Computed values](../computed_value)
		- [Used values](../used_value)
		- [Actual values](../actual_value)
	+ [Value definition syntax](../value_definition_syntax)
	+ [Shorthand properties](../shorthand_properties)
	+ [Replaced elements](../replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model>

Mastering margin collapsing
===========================



The [top](../margin-top) and [bottom](../margin-bottom) margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as **margin collapsing**. Note that the margins of [floating](../float) and [absolutely positioned](../position#types_of_positioning) elements never collapse.

 Margin collapsing occurs in three basic cases:

  Adjacent siblings  The margins of adjacent siblings are collapsed (except when the latter sibling needs to be [cleared](../clear) past floats).

  No content separating parent and descendants  If there is no border, padding, inline part, [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) created, or *[clearance](../clear)* to separate the [`margin-top`](../margin-top) of a block from the [`margin-top`](../margin-top) of one or more of its descendant blocks; or no border, padding, inline content, [`height`](../height), or [`min-height`](../min-height) to separate the [`margin-bottom`](../margin-bottom) of a block from the [`margin-bottom`](../margin-bottom) of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.

  Empty blocks  If there is no border, padding, inline content, [`height`](../height), or [`min-height`](../min-height) to separate a block's [`margin-top`](../margin-top) from its [`margin-bottom`](../margin-bottom), then its top and bottom margins collapse.

   Some things to note:

 * More complex margin collapsing (of more than two margins) occurs when the above cases are combined.
* These rules apply even to margins that are zero, so the margin of a descendant ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.
* When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.
* When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.
* Collapsing margins is only relevant in the vertical direction.
* Margins don't collapse in a container with `display` set to `flex` or `grid`.



Examples
--------


### HTML



```
<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>

```
### CSS



```
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # collapsing-margins](https://www.w3.org/TR/CSS22/box.html#collapsing-margins) |


See also
--------


* CSS key concepts:
	+ [CSS syntax](../syntax)
	+ [At-rules](../at-rule)
	+ [Comments](../comments)
	+ [Specificity](../specificity)
	+ [Inheritance](../inheritance)
	+ [Box model](introduction_to_the_css_box_model)
	+ [Layout modes](../layout_mode)
	+ [Visual formatting models](../visual_formatting_model)
	+ Values
		- [Initial values](../initial_value)
		- [Computed values](../computed_value)
		- [Used values](../used_value)
		- [Actual values](../actual_value)
	+ [Value definition syntax](../value_definition_syntax)
	+ [Shorthand properties](../shorthand_properties)
	+ [Replaced elements](../replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing>

Replaced elements
=================



In [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), a **replaced element** is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

 Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.

 The only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box. See [Controlling object position within the content box](#controlling_object_position_within_the_content_box) for further information.



Replaced elements
-----------------



Typical replaced elements are:

 * [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
* [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
* [`<embed>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed)
* [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)

 Some elements are treated as replaced elements only in specific cases:

 * [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)
* [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
* [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)
* [`<object>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)
* [`<applet>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/applet)

 HTML spec also says that an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element can be replaced, because [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements of the `"image"` type are replaced elements similar to [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). However, other form controls, including other types of [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "Widgets").

 Objects inserted using the CSS [`content`](content) property are *anonymous replaced elements*. They are "anonymous" because they don't exist in the HTML markup.


Using CSS with replaced elements
--------------------------------



CSS handles replaced elements specifically in some cases, like when calculating margins and some `auto` values.

 Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties, such as [`vertical-align`](vertical-align). Only replaced elements can ever have intrinsic dimensions.


### Controlling object position within the content box



Certain CSS properties can be used to specify how the object contained within the replaced element should be positioned within the element's box area. These are defined by the [CSS Images](https://drafts.csswg.org/css-images/) specification:

  [`object-fit`](object-fit)  Specifies how the replaced element's content object should be fitted to the containing element's box.

  [`object-position`](object-position)  Specifies the alignment of the replaced element's content object within the element's box.

  
See also
--------


* [HTML Spec](https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)
* [Void elements](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element>

The stacking context
====================


The **stacking context** is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.


Description
-----------



In the previous article of this guide, [Using z-index](adding_z-index), we showed that the rendering order of certain elements is influenced by their `z-index` value. This occurs because these elements have special properties which cause them to form a *stacking context*.

 A stacking context is formed, anywhere in the document, by any element in the following scenarios:

 * Root element of the document (`<html>`).
* Element with a [`position`](../../position) value `absolute` or `relative` and [`z-index`](../../z-index) value other than `auto`.
* Element with a [`position`](../../position) value `fixed` or `sticky` (sticky for all mobile browsers, but not older desktop browsers).
* Element that is a child of a [flex](../../css_flexible_box_layout/basic_concepts_of_flexbox) container, with [`z-index`](../../z-index) value other than `auto`.
* Element that is a child of a [`grid`](../../grid) container, with [`z-index`](../../z-index) value other than `auto`.
* Element with an [`opacity`](../../opacity) value less than `1` (See [the specification for opacity](https://www.w3.org/TR/css-color-3/#transparency)).
* Element with a [`mix-blend-mode`](../../mix-blend-mode) value other than `normal`.
* Element with any of the following properties with value other than `none`:
	+ [`transform`](../../transform)
	+ [`filter`](../../filter)
	+ [`backdrop-filter`](../../backdrop-filter)
	+ [`perspective`](../../perspective)
	+ [`clip-path`](../../clip-path)
	+ [`mask`](../../mask) / [`mask-image`](../../mask-image) / [`mask-border`](../../mask-border)
* Element with an [`isolation`](../../isolation) value `isolate`.
* Element with a [`will-change`](../../will-change) value specifying any property that would create a stacking context on non-initial value (see [this post](https://dev.opera.com/articles/css-will-change-property/)).
* Element with a [`contain`](../../contain) value of `layout`, or `paint`, or a composite value that includes either of them (i.e. `contain: strict`, `contain: content`).

 Within a stacking context, child elements are stacked according to the same rules explained just above. Importantly, the `z-index` values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

 In summary:

 * Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
* Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
* Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

  **Note:** The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements because only certain elements create stacking contexts. We can say that elements that do not create their own stacking contexts are *assimilated* by the parent stacking context.

 
Example
-------



 ![Example of stacking rules modified using z-index] 

 In this example, every positioned element creates its own stacking context, because of their positioning and `z-index` values. The hierarchy of stacking contexts is organized as follows:

 * Root
	+ DIV #1
	+ DIV #2
	+ DIV #3
		- DIV #4
		- DIV #5
		- DIV #6

 It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV #3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.

 DIV #4 is rendered under DIV #1 because DIV #1's z-index (5) is valid within the stacking context of the root element, while DIV #4's z-index (6) is valid within the stacking context of DIV #3. So, DIV #4 is under DIV #1, because DIV #4 belongs to DIV #3, which has a lower z-index value.

 For the same reason DIV #2 (`z-index`: 2) is rendered under DIV#5 (`z-index`: 1) because DIV #5 belongs to DIV #3, which has a higher z-index value.

 DIV #3's z-index is 4, but this value is independent from z-index of DIV #4, DIV #5 and DIV #6, because it belongs to a different stacking context.

 An easy way to figure out the *rendering order* of stacked elements along the z-axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1).

 In our example (sorted according to the final rendering order):

 * Root
	+ DIV #2: (`z-index`: 2)
	+ DIV #3: (`z-index`: 4)
		- DIV #5: (`z-index`: 1), stacked under an element (`z-index`: 4), which results in a rendering order of 4.1
		- DIV #6: (`z-index`: 3), stacked under an element (`z-index`: 4), which results in a rendering order of 4.3
		- DIV #4: (`z-index`: 6), stacked under an element (`z-index`: 4), which results in a rendering order of 4.6
	+ DIV #1: (`z-index`: 5)


### HTML



```
<div id="div1">
  <h1>Division Element #1</h1>
  <code>
    position: relative;<br />
    z-index: 5;
  </code>
</div>

<div id="div2">
  <h1>Division Element #2</h1>
  <code>
    position: relative;<br />
    z-index: 2;
  </code>
</div>

<div id="div3">
  <div id="div4">
    <h1>Division Element #4</h1>
    <code>
      position: relative;<br />
      z-index: 6;
    </code>
  </div>

  <h1>Division Element #3</h1>
  <code>
    position: absolute;<br />
    z-index: 4;
  </code>

  <div id="div5">
    <h1>Division Element #5</h1>
    <code>
      position: relative;<br />
      z-index: 1;
    </code>
  </div>

  <div id="div6">
    <h1>Division Element #6</h1>
    <code>
      position: absolute;<br />
      z-index: 3;
    </code>
  </div>
</div>

```
### CSS



```
\* {
  margin: 0;
}
html {
  padding: 20px;
  font: 12px/20px Arial, sans-serif;
}
div {
  opacity: 0.7;
  position: relative;
}
h1 {
  font: inherit;
  font-weight: bold;
}
#div1,
#div2 {
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
}
#div1 {
  z-index: 5;
  margin-bottom: 190px;
}
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4,
#div5 {
  border: 1px dashed #996;
  background-color: #ffc;
}
#div4 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
#div5 {
  z-index: 1;
  margin-top: 15px;
  padding: 5px 10px;
}
#div6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 125px;
  border: 1px dashed #009;
  padding-top: 125px;
  background-color: #ddf;
  text-align: center;
}

```
Result
------


See also
--------


* [Stacking without the z-index property](stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
* [Stacking with floated blocks](stacking_and_float): How floating elements are handled with stacking.
* [Using z-index](adding_z-index): How to use `z-index` to change default stacking.
* [Stacking context example 1](stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level
* [Stacking context example 2](stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels
* [Stacking context example 3](stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context>

Visual formatting model
=======================



In CSS The **Visual Formatting Model** describes how user agents take the document tree, and process and display it for visual media. This includes [continuous media](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_Media) such as a computer screen and [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media) such as a book or document printed by browser print functions. Most of the information applies equally to continuous and paged media.

 In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

 * Box dimensions and type.
* Positioning scheme (normal flow, float, and absolute positioning).
* Relationships between elements in the document tree.
* External information (e.g., viewport size, intrinsic dimensions of images, etc.).

 Much of the information about the visual formatting model is defined in CSS2, however, various level 3 specifications have added to this information. When reading specifications you will often find references to the model as defined in CSS2, so an understanding of the model and the terms used to describe it in CSS2 is valuable when reading other layout specifications.

 In this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on MDN for further details.



The role of the viewport
------------------------



In continuous media, the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) is the viewing area of the browser window. User agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.

 If the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. We most often see this as scrolling in the **block dimension** — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the **inline dimension** too.


Box generation
--------------



**Box generation** is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect their visual formatting. The type of the box generated depends on the value of the CSS [`display`](display) property.

 Initially defined in CSS2, the `display` property is extended in the [CSS Display Module Level 3](https://www.w3.org/TR/css-display-3/). In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.

 CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the **box tree**, which represents the formatting structure of the rendered document. Each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.

 Then, for each element, CSS generates zero or more boxes as specified by that element's `display` property value.

  **Note:** Boxes are often referred to by their display type — e.g. a box generated by an element with `display: block` is called a "block box" or just a "block". Note however that block boxes, block-level boxes and box containers are all subtly different; see the [Block boxes](#block_boxes) section below for more details.

 
### The principal box



When an element generates one or more boxes, one of them is the **principal box**, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.

 Some elements may generate additional boxes in addition to the principal box, for example `display: list-item` generates more than one box (e.g. a **principal block box** and a **child marker box**). And some values (such as `none` or `contents`) cause the element and/or its descendants to not generate any boxes at all.


### Anonymous boxes



An **anonymous box** is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare `display: flex` on a parent element, and directly inside there is a run of text not contained in another element. In order to fix the box tree, an anonymous box is created around that run of text. It will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target.


 The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a `<div>`; in the middle of my string is a `<p>` element containing part of the text.


 The string is split into three boxes in the box tree. The part of the string before the paragraph element is wrapped in an anonymous box, then we have the `<p>`, which generates a box, and then another anonymous box.

 Something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. In my examples, I am using a direct child selector to target the children of the container. This does not change the anonymous boxes, as they are not "elements" as such.

 **Inline anonymous boxes** are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with `<em></em>`. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the `<em>` element, then a final anonymous inline box. As with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the `<em>` can; they just inherit the styles of their container.

 Other formatting contexts also create anonymous boxes. [Grid Layout](css_grid_layout) behaves in the same way as the [flexbox](css_flexible_box_layout) example above, turning strings of text into a grid item with an anonymous box. [Multiple-column](css_columns) layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targeted. [Table layout](css_table) will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with `display: table-row`.


### Line boxes



**Line boxes** are the boxes that wrap each line of text. You can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color.

 In the following example, the line boxes following the floated `<div>` are shortened to wrap around the float. The background of the box runs behind the float, as the floated item has been taken out of flow.



Positioning schemes and in-flow and out-of-flow elements
--------------------------------------------------------


In CSS, a box may be laid out according to three positioning schemes — **normal flow**, **floats**, or **absolute positioning**.

### Normal flow



In CSS, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes.

 Read more about [flow layout](css_flow_layout) in CSS.


### Floats



In the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. Content may flow along the side of a float.

 Find out more about [floats](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats).


### Absolute positioning



In the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow entirely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning).

 An element is called **out of flow** if it is floated, absolutely positioned, or is the root element. An element is called **in-flow** if it is not out of the flow.

 Read about [CSS Positioned Layout](css_positioning).


Formatting contexts and the display property
--------------------------------------------



Boxes can be described as having an **outer display type**, which is `block` or `inline`. This outer display type refers to how the box behaves alongside other elements on the page.

 Boxes also have an inner display type, dictating how their children behave. For normal block and inline layout, or normal flow, this display type is `flow`. This means that the child elements will also be either `block` or `inline`.

 However, the inner display type might be something like `grid` or `flex`, in which case the direct children will display as a grid, or flex items. In such a case the element is described as creating a grid or flex [formatting context](css_flow_layout/intro_to_formatting_contexts). In many ways this is similar to a block formatting context, however, the children behave as flex or grid items rather than items in normal flow.

 The interactions between block-level and inline-level boxes are described in the MDN documentation for [`display`](display).

 In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.

 * [CSS Grid Layout](css_grid_layout)
* [CSS Flexible Box Layout](css_flexible_box_layout)
* [CSS Table Layout](css_table)
* [Lists](css_lists_and_counters)


### Independent formatting contexts



Elements either participate in the formatting context of their containing block or establish an independent formatting context. A grid container, for example, establishes a new **Grid Formatting Context** for its children.

 **Independent formatting contexts** contain floats, and margins do not collapse across formatting context boundaries. Therefore, creating a new block formatting context can ensure that floats and margins remain inside a box. To do this, add `display: flow-root` to the box on which you wish to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context).

 The following example shows the effect of `display: flow-root`. The box with the black background appears to wrap round the floated item and text. If you remove `display: flow-root` from the editable CSS the floated item will poke out of the bottom of the box as it is no longer contained.



### Block boxes



In specifications, block boxes, block-level boxes, and block containers are all referred to as **block boxes** in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.

 #### Block containers

 A **block container** either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. For this reason, we see the behavior explained above, where anonymous boxes are introduced to ensure all of the items can participate in a block or inline formatting context. An element is a block container only if it contains block-level or inline-level boxes.

 #### Inline-level and block-level boxes

 These are the boxes contained inside the block container that are participating in inline or block layout, respectively.

 #### Block boxes

 A block box is a block-level box that is also a block container. As described in CSS `display`, it is possible for a box to be a block-level box, but not also a block container (it might be a flex or grid container for example).


See also
--------


* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ **Visual formatting models**
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model>

:modal
======


The `:modal` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the `:modal` pseudo-class at the same time, but only one of them will be active and able to receive input.


Syntax
------



```
:modal {
  /\* ... \*/
}

```
Usage notes
-----------



Examples of elements that will prevent user interaction with the rest of the page and will be selected by the `:modal` pseudo-class include:

 * The [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element opened with the `showModal()` API.
* The element selected by the [`:fullscreen`](:fullscreen) pseudo-class when opened with the `requestFullscreen()` API.


Examples
--------


### Styling a modal dialog



This example styles a modal dialog that opens when the "Update details" button is activated. This example has been built on top of the [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element [example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#advanced_example).

 #### CSS

 
```
:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}

```

### Result


Specifications
--------------




| Specification |
| --- |
| [Selectors Level 4 # modal-state](https://w3c.github.io/csswg-drafts/selectors/#modal-state) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:modal` | 105 | 105 | 103 | No | 91 | 15.6 | 105 | 105 | 103 | 72 | 15.6 | 20.0 |


See also
--------


* [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element
* Other element display state pseudo-classes: [`:fullscreen`](:fullscreen) and [`:picture-in-picture`](:picture-in-picture)
* Complete list of <pseudo-classes>


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:modal>

Layout and the containing block
===============================



The size and position of an element are often impacted by its **containing block**. Most often, the containing block is the [content area](css_box_model/introduction_to_the_css_box_model#content_area) of an element's nearest [block-level](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.

 When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:

 1. Content area
2. Padding area
3. Border area
4. Margin area

  ![Diagram of the box model] 

 Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.



Effects of the containing block
-------------------------------



Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.

 The size and position of an element are often impacted by its containing block. Percentage values that are applied to the [`width`](width), [`height`](height), [`padding`](padding), [`margin`](margin), and offset properties of an absolutely positioned element (i.e., which has its [`position`](position) set to `absolute` or `fixed`) are computed from the element's containing block.


Identifying the containing block
--------------------------------



The process for identifying the containing block depends entirely on the value of the element's [`position`](position) property:

 1. If the `position` property is `static`, `relative`, or `sticky`, the containing block is formed by the edge of the *content box* of the nearest ancestor element that is either **a block container** (such as an inline-block, block, or list-item element) or **establishes a formatting context** (such as a table container, flex container, grid container, or the block container itself).
2. If the `position` property is `absolute`, the containing block is formed by the edge of the *padding box* of the nearest ancestor element that has a `position` value other than `static` (`fixed`, `absolute`, `relative`, or `sticky`).
3. If the `position` property is `fixed`, the containing block is established by the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) (in the case of continuous media) or the page area (in the case of paged media).
4. If the `position` property is `absolute` or `fixed`, the containing block may also be formed by the edge of the *padding box* of the nearest ancestor element that has the following:
	1. A [`transform`](transform) or [`perspective`](perspective) value other than `none`
	2. A [`will-change`](will-change) value of `transform` or `perspective`
	3. A [`filter`](filter) value other than `none` or a `will-change` value of `filter` (only works on Firefox).
	4. A [`contain`](contain) value of `layout`, `paint`, `strict` or `content` (e.g. `contain: paint;`)
	5. A [`backdrop-filter`](backdrop-filter) other than `none` (e.g. `backdrop-filter: blur(10px);`)

  **Note:** The containing block in which the root element ([`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)) resides is a rectangle called the **initial containing block**. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).

 
Calculating percentage values from the containing block
-------------------------------------------------------



As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are **box model properties** and **offset properties**:

 1. The [`height`](height), [`top`](top), and [`bottom`](bottom) properties compute percentage values from the `height` of the containing block.
2. The [`width`](width), [`left`](left), [`right`](right), [`padding`](padding), and [`margin`](margin) properties compute percentage values from the `width` of the containing block.

  **Note:** A **block container** (such as an inline-block, block, or list-item element) either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. An element is a block container only if it contains block-level or inline-level boxes.

 
Some examples
-------------



The HTML code for all our examples is:

 
```
<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>

```
 Only the CSS is altered in each instance below.


### Example 1



In this example, the paragraph is statically positioned, so its containing block is [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) because it's the nearest ancestor that is a block container (because of `display: block`).

 
```
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /\* == 400px \* .5 = 200px \*/
  height: 25%; /\* == 160px \* .25 = 40px \*/
  margin: 5%; /\* == 400px \* .05 = 20px \*/
  padding: 5%; /\* == 400px \* .05 = 20px \*/
  background: cyan;
}

```


### Example 2



In this example, the paragraph's containing block is the [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element, because `<section>` is not a block container (because of `display: inline`) and doesn't establish a formatting context.

 
```
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /\* == half the body's width \*/
  height: 200px; /\* Note: a percentage would be 0 \*/
  background: cyan;
}

```


### Example 3



In this example, the paragraph's containing block is `<section>` because the latter's `position` is `absolute`. The paragraph's percentage values are affected by the `padding` of its containing block, though if the containing block's [`box-sizing`](box-sizing) value were `border-box` this would not be the case.

 
```
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /\* == (400px + 20px + 20px) \* .5 = 220px \*/
  height: 25%; /\* == (160px + 30px + 30px) \* .25 = 55px \*/
  margin: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  padding: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  background: cyan;
}

```


### Example 4



In this example, the paragraph's `position` is `fixed`, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.

 
```
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /\* == (50vw - (width of vertical scrollbar)) \*/
  height: 50%; /\* == (50vh - (height of horizontal scrollbar)) \*/
  margin: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  padding: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  background: cyan;
}

```


### Example 5



In this example, the paragraph's `position` is `absolute`, so its containing block is `<section>`, which is the nearest ancestor with a [`transform`](transform) property that isn't `none`.

 
```
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /\* == 200px \*/
  height: 25%; /\* == 40px \*/
  margin: 5%; /\* == 20px \*/
  padding: 5%; /\* == 20px \*/
  background: cyan;
}

```


See also
--------


* The [`all`](all) property resets all CSS declarations to a given known state
* CSS key concepts:
	+ [CSS syntax](syntax)
	+ [At-rules](at-rule)
	+ [Comments](comments)
	+ [Specificity](specificity)
	+ [Inheritance](inheritance)
	+ [Box model](css_box_model/introduction_to_the_css_box_model)
	+ [Layout modes](layout_mode)
	+ [Visual formatting models](visual_formatting_model)
	+ [Margin collapsing](css_box_model/mastering_margin_collapsing)
	+ Values
		- [Initial values](initial_value)
		- [Computed values](computed_value)
		- [Used values](used_value)
		- [Actual values](actual_value)
	+ [Value definition syntax](value_definition_syntax)
	+ [Shorthand properties](shorthand_properties)
	+ [Replaced elements](replaced_element)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block>

:autofill
=========


The `:autofill` CSS [pseudo-class](pseudo-classes) matches when an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element has its value autofilled by the browser. The class stops matching if the user edits the field.


Try it
------



  **Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:

 
```
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

```
 This means that you cannot set the [`background-color`](background-color), [`background-image`](background-image), or [`color`](color) in your own rules.

 
Syntax
------



```
:autofill {
  /\* ... \*/
}

```
Examples
--------



The following example demonstrates the use of the `:autofill` pseudo-class to change the border of a text field that has been autocompleted by the browser. For the best browser compatibility use both `:-webkit-autofill` and `:autofill`.

 
```
input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}

```
 
```
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>

```


Specifications
--------------




| Specification |
| --- |
| [HTML Standard # selector-autofill](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-autofill) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:autofill` | 1 | 79 | 8686 | No | 15 | 153 | 4.4 | 18 | 8686 | 14 | 151 | 1.0 |


See also
--------


* [Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off](https://crbug.com/46543)
* [WebKit bug 66032: Allow site authors to override autofilled fields' colors.](https://webkit.org/b/66032)
* [Mozilla bug 740979: implement `:-moz-autofill` pseudo-class on input elements with an autofilled value](https://bugzil.la/740979)
* [User Interface Module Level 4: more selectors](https://wiki.csswg.org/spec/css4-ui#more-selectors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill>

:host-context()
===============



The `:host-context()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) function selects the shadow host of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.

 In other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.

 One typical use of this is with a descendant selector expression — for example `h1` — to select only instances of the custom element that are inside an `<h1>`. Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a `.dark-theme` class is applied to `<body>`.

  **Note:** This has no effect when used outside a shadow DOM.

  
```
/\* Selects a shadow root host, only if it is
 a descendant of the selector argument given \*/
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/\* Changes paragraph text color from black to white when
 a .dark-theme class is applied to the document body \*/
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

```


Syntax
------



```
:host-context(<compound-selector>) {
  /\* ... \*/
}

```
Examples
--------


### Selectively styling shadow hosts



The following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/main/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).

 In this example we have a simple custom element — `<context-span>` — that you can wrap around text:

 
```
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

```
 Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:

 
```
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

```
 The `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { content: " - no links in headers!" }` rules style the instance of the `<context-span>` element (the shadow host in this instance) inside the `<h1>`. We've used it to make it clear that the custom element shouldn't appear inside the `<h1>` in our design.


Specifications
--------------




| Specification |
| --- |
| [CSS Scoping Module Level 1 # host-selector](https://w3c.github.io/csswg-drafts/css-scoping/#host-selector) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:host-context` | 54 | 79 | NoSee [bug 1082060](https://bugzil.la/1082060). | No | 41 | No | 54 | 54 | NoSee [bug 1082060](https://bugzil.la/1082060). | 41 | No | 6.0 |


See also
--------


* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
* [`:host`](:host)
* [`:host()`](:host_function)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context>

Using CSS custom properties (variables)
=======================================



**Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., `--main-color: black;`) and are accessed using the [`var()`](var()) function (e.g., `color: var(--main-color);`).

 Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, `--main-text-color` is easier to understand than `#00ff00`, especially if this same color is also used in other contexts.

 Custom properties are subject to the cascade and inherit their value from their parent.

  **Note:** Variables do not work inside media queries and container queries. The [`var()`](var()) function can be used in place of any part of a value in any property on an element. The [`var()`](var()) function cannot be used as property names, selectors, or anything else besides property values. So, we can't use it in a media query or container query.

 

Basic usage
-----------



Declaring a custom property is done using a custom property name that begins with a double hyphen (`--`), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:

 
```
element {
  --main-bg-color: brown;
}

```
 Note that the selector given to the ruleset defines the scope that the custom property can be used in. A common best practice is to define custom properties on the [`:root`](:root) pseudo-class, so that it can be applied globally across your HTML document:

 
```
:root {
  --main-bg-color: brown;
}

```
 However, this doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.

  **Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.

  As mentioned earlier, you use the custom property value by specifying your custom property name inside the [`var()`](var()) function, in place of a regular property value:

 
```
element {
  background-color: var(--main-bg-color);
}

```

First steps with custom properties
----------------------------------



Let's start with this CSS that applies the same color to elements of different classes:

 
```
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

```
 We'll apply it to this HTML:

 
```
<div>
  <div class="one">1:</div>
  <div class="two">2: Text <span class="five">5 - more text</span></div>
  <input class="three" />
  <textarea class="four">4: Lorem Ipsum</textarea>
</div>

```
 This produces the following result:



Using the :root pseudo-class
----------------------------



Notice the repetitive CSS in the example above. The background color is set to `brown` in several places. For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally. For non-trivial projects, this is not always possible. By declaring a custom property on the [`:root`](:root) pseudo-class and using it where needed throughout the document, a CSS author can reduce the need for repetition:

 
```
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

```
 This leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.


Inheritance of custom properties
--------------------------------



Custom properties do inherit. This means that if no value is set for a custom property on a given element, the value of its parent is used. Take this HTML:

 
```
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

```
 … with the following CSS:

 
```
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

```
 In this case, the results of `var(--test)` are:

 * For the `class="two"` element: `10px`
* For the `class="three"` element: `2em`
* For the `class="four"` element: `10px` (inherited from its parent)
* For the `class="one"` element: *invalid value*, which is the default value of any custom property

 Keep in mind that these are custom properties, not actual variables like you might find in other programming languages. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling's descendant's rule. The property is only set for the matching selector and its descendants, like any normal CSS.


Custom property fallback values
-------------------------------



Using the [`var()`](var()) function, you can define multiple **fallback values** when the given variable is not yet defined; this can be useful when working with [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) and [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).

  **Note:** Fallback values aren't used to fix the browser compatibility. If the browser doesn't support CSS custom properties, the fallback value won't help. It's just a backup for the browser which supports CSS custom properties to choose a different value if the given variable isn't defined or has an invalid value.

  The first argument to the function is the name of the [custom property](https://www.w3.org/TR/css-variables/#custom-property) to be substituted. The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the referenced [custom property](https://www.w3.org/TR/css-variables/#custom-property) is invalid. The function only accepts two parameters, assigning everything following the first comma as the second parameter. If that second parameter is invalid, the fallback will fail. For example:

 
```
.two {
  /\* Red if --my-var is not defined \*/
  color: var(--my-var, red);
}

.three {
  /\* pink if --my-var and --my-background are not defined \*/
  background-color: var(--my-var, var(--my-background, pink));
}

.three {
  /\* Invalid: "--my-background, pink" \*/
  background-color: var(--my-var, --my-background, pink);
}

```
 Including a custom property as a fallback, as seen in the second example above, is the correct way to provide more than one fallback. The technique has been seen to cause performance issues as it takes more time to parse through the variables.

  **Note:** The syntax of the fallback, like that of [custom properties](https://www.w3.org/TR/css-variables/#custom-property), allows commas. For example, `var(--foo, red, blue)` defines a fallback of `red, blue` — anything between the first comma and the end of the function is considered a fallback value.

 
Handling invalid custom properties
----------------------------------



Each CSS property can be assigned a defined set of values. If you try to assign a value to a property that is outside its set of valid values, it's considered *invalid*.

 When the browser encounters an invalid value for a normal property, it discards the value, and elements are assigned the values that they would have had if the declaration simply did not exist.

 However, when the values of custom properties are parsed, the browser doesn't yet know where they will be used, so it must consider nearly all values as *valid*.

 Unfortunately, these valid values can be used, via the `var()` functional notation, in a context where they might not make sense. Properties and custom variables can lead to invalid CSS statements, leading to the new concept of *valid at computed time.*

 When the browser encounters an invalid `var()` substitution, then the [initial](initial_value) or [inherited](inheritance) value of the property is used.

 The next two examples illustrate this.


### Invalid normal properties



In this example we attempt to apply a value of `16px` to the [`color`](color) property. Because this is invalid, the CSS is discarded and the result is as if the rule did not exist, so the previous `color: blue` rule is applied instead, and the paragraph is blue.

 #### HTML

 
```
<p>This paragraph is initially black.</p>

```
 #### CSS

 
```
p {
  color: blue;
}

p {
  color: 16px;
}

```
 #### Result



### Invalid custom properties



This example is just like the last one, except we use a custom property.

 As expected, the browser substitutes the value of `--text-color` in place of `var(--text-color)`, but `16px` is not a valid property value for [`color`](color). After substitution, the property doesn't make sense. The browser handles this situation in two steps:

 1. Check if the property [`color`](color) is inheritable. It is, but this `<p>` doesn't have any parent with the `color` property set. So we move on to the next step.
2. Set the value to its **default initial value**, which is black.

 #### HTML

 
```
<p>This paragraph is initially black.</p>

```
 #### CSS

 
```
:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: var(--text-color);
}

```
 #### Result



Values in JavaScript
--------------------



To use the values of custom properties in JavaScript, it is just like standard properties.

 
```
// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);

```

See also
--------


* [Custom property syntax](--*)
* [`var()`](var())


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties>

:host
=====



The `:host` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) selects the shadow host of the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

  **Note:** This has no effect when used outside a shadow DOM.

  
```
/\* Selects a shadow root host \*/
:host {
  font-weight: bold;
}

```


Syntax
------



```
:host {
  /\* ... \*/
}

```
Examples
--------


### Styling the shadow host



The following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/main/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).

 In this example we have a simple custom element — `<context-span>` — that you can wrap around text:

 
```
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

```
 Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:

 
```
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

```
 The `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document.


Specifications
--------------




| Specification |
| --- |
| [CSS Scoping Module Level 1 # host-selector](https://w3c.github.io/csswg-drafts/css-scoping/#host-selector) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:host` | 54 | 79 | 63 | No | 41 | 10 | 54 | 54 | 63 | 41 | 10 | 6.0 |


See also
--------


* [Web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
* [`:host()`](:host_function)
* [`:host-context()`](:host-context)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:host>

Using CSS gradients
===================



**CSS gradients** are represented by the [`<gradient>`](../gradient) data type, a special type of [`<image>`](../image) made of a progressive transition between two or more colors. You can choose between three types of gradients: *linear* (created with the [`linear-gradient()`](../gradient/linear-gradient) function), *radial* (created with the [`radial-gradient()`](../gradient/radial-gradient) function), and *conic* (created with the [`conic-gradient()`](../gradient/conic-gradient) function). You can also create repeating gradients with the [`repeating-linear-gradient()`](../gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](../gradient/repeating-radial-gradient), and [`repeating-conic-gradient()`](../gradient/repeating-conic-gradient) functions.

 Gradients can be used anywhere you would use an `<image>`, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.

 We'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients



Using linear gradients
----------------------


A linear gradient creates a band of colors that progress in a straight line.

### A basic linear gradient



To create the most basic type of gradient, all you need is to specify two colors. These are called *color stops*. You must have at least two, but you can have as many as you want.

 
```
.simple-linear {
  background: linear-gradient(blue, pink);
}

```


### Changing the direction



By default, linear gradients run from top to bottom. You can change their rotation by specifying a direction.

 
```
.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

```


### Diagonal gradients



You can even make the gradient run diagonally, from corner to corner.

 
```
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

```


### Using angles



If you want more control over its direction, you can give the gradient a specific angle.

 
```
.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

```

 When using an angle, `0deg` creates a vertical gradient running bottom to top, `90deg` creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction.

  ![Four boxes listing angle and showing associated gradient. 0deg starts and top and goes to bottom. 90deg starts at right and goes left. 180deg starts and bottom and goes to the top. -90deg starts at left and goes right.] 


Declaring colors & creating effects
-----------------------------------


All CSS gradient types are a range of position-dependent colors. The colors produced by CSS gradients can vary continuously with position, producing smooth color transitions. It is also possible to create bands of solid colors, and hard transitions between two colors. The following are valid for all gradient functions:

### Using more than two colors



You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.

 
```
.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

```


### Positioning color stops



You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, `0%` represents the starting point, while `100%` represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at `0%` and the last color stop being at `100%`, and any other color stops being half way between their adjacent color stops.

 
```
.multicolor-linear {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

```


### Creating hard lines



To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the `50%` mark, halfway through the gradient:

 
```
.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

```


### Gradient hints



By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.

 
```
.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

```


### Creating color bands & stripes



To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.

 
```
.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}

```

 In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.

 In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.

 In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.


### Controlling the progression of a gradient



By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation), or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to highlight the difference the color hint can make:

 
```
.colorhint-gradient {
  background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, lime, cyan);
}

```


### Overlaying gradients



Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.

 
```
.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");
}

```


### Stacked gradients



You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.

 
```
.stacked-linear {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

```


Using radial gradients
----------------------


Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.

### A basic radial gradient



As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:

 
```
.simple-radial {
  background: radial-gradient(red, blue);
}

```


### Positioning radial color stops



Again like linear gradients, you can position each radial color stop with a percentage or absolute length.

 
```
.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

```


### Positioning the center of the gradient



You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.

 
```
.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}

```


### Sizing radial gradients



Unlike linear gradients, you can specify the size of radial gradients. Possible values include `closest-corner`, `closest-side`, `farthest-corner`, and `farthest-side`, with `farthest-corner` being the default. Circles can also be sized with a length, and ellipses a length or percentage.

 #### Example: closest-side for ellipses

 This example uses the `closest-side` size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

 
```
.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

```

 #### Example: farthest-corner for ellipses

 This example is similar to the previous one, except that its size is specified as `farthest-corner`, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

 
```
.radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

```

 #### Example: closest-side for circles

 This example uses `closest-side`, which makes the circle's radius to be the distance between the center of the gradient and the closest side. In this case the radius is the distance between the center and the bottom edge, because the gradient is placed 25% from the left and 25% from the bottom, and the div element's height is smaller than the width.

 
```
.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

```

 #### Example: length or percentage for ellipses

 For ellipses only, you can size the ellipse using a length or percentage. The first value represents the horizontal radius, the second the vertical radius, where you use a percentage this corresponds to the size of the box in that dimension. In the below example I have used a percentage for the horizontal radius.

 
```
.radial-ellipse-size {
  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    #1e90ff 50%,
    beige
  );
}

```

 #### Example: length for circles

 For circles the size may be given as a [<length>](../length), which is the size of the circle.

 
```
.radial-circle-size {
  background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);
}

```


### Stacked radial gradients



Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

 
```
.stacked-radial {
  background: radial-gradient(
      circle at 50% 0,
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0) 70.71%
    ), radial-gradient(
      circle at 6.7% 75%,
      rgba(0, 0, 255, 0.5),
      rgba(0, 0, 255, 0) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgba(0, 255, 0, 0.5),
        rgba(0, 255, 0, 0) 70.71%
      ) beige;
  border-radius: 50%;
}

```


Using conic gradients
---------------------



The `conic-gradient()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and [color wheels](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel), but they can also be used for creating checker boards and other interesting effects.

 The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid.

 In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.


### A basic conic gradient



As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

 
```
.simple-conic {
  background: conic-gradient(red, blue);
}

```


### Positioning the conic center



Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

 
```
.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

```


### Changing the angle



By default, the different color stops you specify are spaced equidistantly around the circle. You can position the starting angle of the conic gradient using the "from" keyword at the beginning followed by an angle or a length, and you can specify different positions for the colors stops by including an angle or length after them.

 
```
.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}

```


Using repeating gradients
-------------------------



The [`linear-gradient()`](../gradient/linear-gradient), [`radial-gradient()`](../gradient/radial-gradient), and [`conic-gradient()`](../gradient/conic-gradient) functions don't support automatically repeated color stops. However, the [`repeating-linear-gradient()`](../gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](../gradient/repeating-radial-gradient), and [`repeating-conic-gradient()`](../gradient/repeating-conic-gradient) functions are available to offer this functionality.

 The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.


### Repeating linear gradients



This example uses [`repeating-linear-gradient()`](../gradient/repeating-linear-gradient) to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.

 
```
.repeating-linear {
  background: repeating-linear-gradient(
    -45deg,
    red,
    red 5px,
    blue 5px,
    blue 10px
  );
}

```


### Multiple repeating linear gradients



Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different [background-sizes](../background-size), optionally with different [background-position](../background-position) property values, for each gradient image. We are using transparency.

 In this case the gradient lines are 300px, 230px, and 300px long.

 
```
.multi-repeating-linear {
  background: repeating-linear-gradient(
      190deg,
      rgba(255, 0, 0, 0.5) 40px,
      rgba(255, 153, 0, 0.5) 80px,
      rgba(255, 255, 0, 0.5) 120px,
      rgba(0, 255, 0, 0.5) 160px,
      rgba(0, 0, 255, 0.5) 200px,
      rgba(75, 0, 130, 0.5) 240px,
      rgba(238, 130, 238, 0.5) 280px,
      rgba(255, 0, 0, 0.5) 300px
    ), repeating-linear-gradient(
      -190deg,
      rgba(255, 0, 0, 0.5) 30px,
      rgba(255, 153, 0, 0.5) 60px,
      rgba(255, 255, 0, 0.5) 90px,
      rgba(0, 255, 0, 0.5) 120px,
      rgba(0, 0, 255, 0.5) 150px,
      rgba(75, 0, 130, 0.5) 180px,
      rgba(238, 130, 238, 0.5) 210px,
      rgba(255, 0, 0, 0.5) 230px
    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
        200px, blue 250px, indigo 300px, violet 350px, red 370px);
}

```


### Plaid gradient



To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

 
```
.plaid-gradient {
  background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px,
      transparent 56px,
      transparent 63px,
      rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px,
      transparent 69px,
      transparent 116px,
      rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px
    ), repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px,
      transparent 56px,
      transparent 63px,
      rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px,
      transparent 69px,
      transparent 116px,
      rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px
    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(
          143,
          77,
          63,
          0.25
        ) 5px, rgba(143, 77, 63, 0.25) 10px);

  background: repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgba(255, 127, 0, 0.25) 50px 56px,
      transparent 56px 63px,
      rgba(255, 127, 0, 0.25) 63px 69px,
      transparent 69px 116px,
      rgba(255, 206, 0, 0.25) 116px 166px
    ), repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgba(255, 127, 0, 0.25) 50px 56px,
      transparent 56px 63px,
      rgba(255, 127, 0, 0.25) 63px 69px,
      transparent 69px 116px,
      rgba(255, 206, 0, 0.25) 116px 166px
    ), repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgba(143, 77, 63, 0.25) 5px 10px
    ), repeating-linear-gradient(45deg, transparent 0 5px, rgba(
          143,
          77,
          63,
          0.25
        ) 5px 10px);
}

```


### Repeating radial gradients



This example uses [`repeating-radial-gradient()`](../gradient/repeating-radial-gradient) to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.

 
```
.repeating-radial {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

```


### Multiple repeating radial gradients




```
.multi-target {
  background: repeating-radial-gradient(
        ellipse at 80% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 15px,
        rgba(255, 255, 255, 0.5) 15px,
        rgba(255, 255, 255, 0.5) 30px
      ) top left no-repeat, repeating-radial-gradient(
        ellipse at 20% 50%,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
      ) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

```


See also
--------


* Gradient functions: [`linear-gradient()`](../gradient/linear-gradient), [`radial-gradient()`](../gradient/radial-gradient), [`conic-gradient()`](../gradient/conic-gradient), [`repeating-linear-gradient()`](../gradient/repeating-linear-gradient), [`repeating-radial-gradient()`](../gradient/repeating-radial-gradient), [`repeating-conic-gradient()`](../gradient/repeating-conic-gradient)
* Gradient-related CSS data types: [`<gradient>`](../gradient), [`<image>`](../image)
* Gradient-related CSS properties: [`background`](../background), [`background-image`](../background-image)
* [CSS Gradients Patterns Gallery, by Lea Verou](https://projects.verou.me/css3patterns/)
* [CSS Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients/)
* [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients>

Masonry layout
==============



Level 3 of the [CSS Grid Layout](../css_grid_layout) specification includes a `masonry` value for [`grid-template-columns`](../grid-template-columns) and [`grid-template-rows`](../grid-template-rows). This guide details what masonry layout is, and how to use it.

  **Warning:** This feature is only implemented in Firefox, and can be enabled by setting the flag `layout.css.grid-template-masonry-value.enabled` to `true` in `about:config`, in order to allow testing and providing of feedback.

  Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.



Creating a masonry layout
-------------------------



To create the most common masonry layout, your columns will be the grid axis and the rows the masonry axis. Define this layout with `grid-template-columns` and `grid-template-rows`:

 
```
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}

```
 The child elements of this container will now lay out item by item along the rows, as they would with regular grid layout automatic placement. However, as they move onto a new row the items will display according to the masonry algorithm. Items will load into the column with the most room causing a tightly packed layout without strict row tracks.


 It is also possible to create a masonry layout with items loading into rows.



Controlling the grid axis
-------------------------


On the grid axis, things will work just as you expect them to in grid layout. You can cause items to span multiple tracks while remaining in auto-placement, using the `span` keyword. Items may also be positioned using line-based positioning.

### Masonry layout with spanning items



In this example two of the items span two tracks, and the masonry items work around them.


 This example includes an item which has positioning for columns. Items with definite placement are placed before the masonry layout happens.



Controlling the masonry axis
----------------------------


The masonry axis operates under different rules as it is following the masonry layout rules rather than normal grid auto-placement rules. To control this axis we have three additional properties defined in the Grid Level 3 specification [`align-tracks`](../align-tracks), [`justify-tracks`](../justify-tracks), and [`masonry-auto-flow`](../masonry-auto-flow).

### masonry-auto-flow



The `masonry-auto-flow` property gives you a way to change how the masonry algorithm behaves. Give it a value of `next` and items will display in order on the grid axis, rather than going into whichever track has the most free space. The value `positioned` will ignore items with definite placement and place items in order-modified document order.



### align-tracks



The `align-tracks` property allows for the alignment of items in grid containers with masonry in their block axis. The property aligns the items within their track, much in the way flex layout works. The property takes the same values as `align-content`, however you can specify multiple values to have different alignment values per track on the grid axis.

 If you specify more values than tracks the additional values are ignored. If there are more tracks than values any additional tracks will use the last specified value.



### justify-tracks



The `justify-tracks` property works in the same way as align-tracks, however it is used when the masonry axis is the inline axis.



Fallback
--------


In browsers that do not support masonry, regular grid auto-placement will be used instead.

See also
--------


* [Native CSS Masonry Layout In CSS Grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout>

Applying color to HTML elements using CSS
=========================================



This article is a primer introducing each of the ways CSS color can be used in HTML.

 The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), there are lots of ways to add color to your [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) [elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) to create just the look you want.

 We're going to touch on most of what you'll need to know when using color, including a [list of what you can color and what CSS properties are involved](#things_that_can_have_color), [how you describe colors](#how_to_describe_a_color), and how to actually [use colors both in stylesheets and in scripts](#using_color). We'll also take a look at how to [let the user pick a color](#letting_the_user_pick_a_color).

 Then we'll wrap things up with a brief discussion of how to [use color wisely](#using_color_wisely): how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.



Things that can have color
--------------------------



At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.

 At a fundamental level, the [`color`](../color) property defines the foreground color of an HTML element's content and the [`background-color`](../background-color) property defines the element's background color. These can be used on just about any element.


### Text



Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.

  [`color`](../color)  The color to use when drawing the text and any [text decorations](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration) (such as the addition of under- or overlines, strike-through lines, and so forth.

  [`background-color`](../background-color)  The text's background color.

  [`text-shadow`](../text-shadow)  Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See [Text drop shadows](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) to learn more.

  [`text-decoration-color`](../text-decoration-color)  By default, text decorations (such as underlines, strikethroughs, etc.) use the `color` property as their colors. However, you can override that behavior and use a different color for them with the `text-decoration-color` property.

  [`text-emphasis-color`](../text-emphasis-color)  The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.

  [`caret-color`](../caret-color)  The color to use when drawing the [caret](https://developer.mozilla.org/en-US/docs/Glossary/Caret) (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) and [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or elements whose HTML [`contenteditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#contenteditable) attribute is set.

  
### Boxes



Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

  [Borders](#borders_2)  See the section [Borders](#borders_2) for a list of the CSS properties you can use to set the colors of a box's borders.

  [`background-color`](../background-color)  The background color to use in areas of the element that have no foreground content.

  [`column-rule-color`](../column-rule-color)  The color to use when drawing the line separating columns of text.

  [`outline-color`](../outline-color)  The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.

  
### Borders



Any element can have a [border](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) drawn around it. A basic element border is a line drawn around the edges of the element's content. See [The box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) to learn about the relationship between elements and their borders, and the article [Styling borders using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) to learn more about applying styles to borders.

 You can use the [`border`](../border) shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its [width](../border-width), [style](../border-style) (solid, dashed, etc.), and so forth.

  [`border-color`](../border-color)  Specifies a single color to use for every side of the element's border.

  
[`border-left-color`](../border-left-color), [`border-right-color`](../border-right-color), [`border-top-color`](../border-top-color), and [`border-bottom-color`](../border-bottom-color)
  Lets you set the color of the corresponding side of the element's border.

  
[`border-block-start-color`](../border-block-start-color) and [`border-block-end-color`](../border-block-end-color)
  With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).

  
[`border-inline-start-color`](../border-inline-start-color) and [`border-inline-end-color`](../border-inline-end-color)
  These let you color the edges of the border closest to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the [`writing-mode`](../writing-mode), [`direction`](../direction), and [`text-orientation`](../text-orientation) properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the `border-inline-start-color` is applied to the right side of the border.

  
### Other ways to use color



CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.

  The HTML [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
  Lets you draw 2D bitmapped graphics in a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. See our [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) to learn more.

  
[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (Scalable Vector Graphics)  Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in the page using the [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element, just like any other type of image.

  [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)  The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See our [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial) to find out more.

  
How to describe a color
-----------------------



In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

 For more detailed discussion of each of the color value types, see the reference for the CSS [`<color>`](../color_value) unit.


### Keywords



A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as `red`, `blue`, or `orange`), shades of gray (from `black` to `white`, including colors like `darkgray` and `lightgrey`), and a variety of other blended colors including `lightseagreen`, `cornflowerblue`, and `rebeccapurple`.

 See [Named colors](../named-color) for more information on color keywords.


### RGB values



There are three ways to represent an RGB color in CSS.

 #### Hexadecimal string notation

 Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components *must* be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, `"#D"` becomes `"#DD"` when drawing.

 A color in hexadecimal string notation always begins with the character `"#"`. After that come the hexadecimal digits of the color code. The string is case-insensitive.

  `"#rrggbb"`  Specifies a fully-opaque color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`.

  `"#rrggbbaa"`  Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. The alpha channel is specified by `0xaa`; the lower this value is, the more translucent the color becomes.

  `"#rgb"`  Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`.

  `"#rgba"`  Specifies a color whose red component is the hexadecimal number `0xrr`, green component is `0xgg`, and blue component is `0xbb`. The alpha channel is specified by `0xaa`; the lower this value is, the more translucent the color becomes.

   As an example, you can represent the opaque color bright blue as `"#0000ff"` or `"#00f"`. To make it 25% opaque, you can use `"#0000ff44"` or `"#00f4"`.

 #### RGB functional notation

 RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function [`rgb()`](../color_value#rgb()). This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

 Legal values for each of these parameters are:

  
`red`, `green`, and `blue`
  Each must be an [`<integer>`](../integer) value between 0 and 255 (inclusive), or a [`<percentage>`](../percentage) from 0% to 100%.

  `alpha`  The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.

   For example, a bright red that's 50% opaque can be represented as `rgb(255, 0, 0, 0.5)` or `rgb(100%, 0, 0, 50%)`.


### HSL functional notation



Designers and artists often prefer to work using the [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The `hsl()` CSS function is very similar to the `rgb()` function in usage otherwise.

 The diagram below shows an HSL color cylinder. Hue defines the actual color based on the position along a circular [color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel) representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user [SharkD](https://commons.wikimedia.org/wiki/User:SharkD) on [Wikipedia](https://en.wikipedia.org/), distributed under the [CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/) license.

  ![HSL color cylinder] 

 The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any [`<angle>`](../angle) unit supported by CSS, including degrees (`deg`), radians (`rad`), gradians (`grad`), or turns (`turn`). But this doesn't control how vivid or dull, or how bright or dark the color is.

 The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

 Think of it like creating the perfect paint color:

 1. You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the **hue** (H) component: a value representing the angle around the [color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel) for the vivid hue we want to use as our base.
2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white (regardless of the saturation or hue). In between values are a literal grey area.
3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.

 You can also optionally include an alpha channel, to make the color less than 100% opaque.

 Here are some sample colors in HSL notation:

 
```
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)</code></td>
      <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)</code></td>
      <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
    </tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)</code></td>
      <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
    </tr>
  </tbody>
</table>

```

  **Note:** When you omit the hue's unit, it's assumed to be in degrees (`deg`).

 
### HWB functional notation



Much like the HSL functional notation above, the [hwb()](../color_value/hwb) function uses the same hue value. But instead of lightness and saturation you specify whiteness and blackness values in percentages. Values are **not** separated with a comma and an optional alpha value can be included (it must be preceded by a forward slash `/`).

 Here are some examples of using HWB notation:

 
```
/\* These examples all specify varying shades of a lime green. \*/
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/\* Same lime green but with an alpha value \*/
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

```

Using color
-----------


Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under [Things that can have color](#things_that_can_have_color), there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a [stylesheet](https://developer.mozilla.org/en-US/docs/Glossary/Stylesheet), and adding and changing color using [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript) code to alter the styles of elements.

### Specifying colors in stylesheets



The easiest way to apply color to elements—and the way you'll usually do it—is to specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

 Let's take a look at an example, starting by looking at the results we're trying to achieve:


 #### HTML

 The HTML responsible for creating the above example is shown here:

 
```
<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="box boxRight">
    <p>This is the second box.</p>
  </div>
</div>

```
 This is pretty simple, using a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) as a wrapper around the contents, which consists of two more `<div>`s, each styled differently with a single paragraph ([`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)) in each box.

 The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

 #### CSS

 We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

 
```
.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

```
 The `.wrapper` class is used to assign styles to the [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) that encloses all of our other content. This establishes the size of the container using [`width`](../width) and [`height`](../height) as well as its [`margin`](../margin) and [`padding`](../padding).

 Of more interest to our discussion here is the use of the [`border`](../border) property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color `mediumturquoise`.

 Our two colored boxes share a number of properties in common, so next we establish a class, `.box`, that defines those shared properties:

 
```
.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

```
 In brief, `.box` establishes the size of each box, as well as the configuration of the font used within. We also take advantage of [CSS Flexbox](../css_flexible_box_layout) to easily center the contents of each box. We enable `flex` mode using [`display: flex`](../display), and set both [`justify-content`](../justify-content) and [`align-items`](../align-items) to `center`. Then we can create a class for each of the two boxes that defines the properties that differ between the two.

 
```
.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

```
 The `.boxLeft` class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

 * The box's background color is set by changing the value of the CSS [`background-color`](../background-color) property to `rgb(245, 130, 130)`.
* An outline is defined for the box. Unlike the more commonly used `border`, [`outline`](../outline) doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as `border` does. This outline is a solid, dark red line that's two pixels thick. Note the use of the `darkred` keyword when specifying the color.
* Notice that we're not explicitly setting the text color. That means the value of [`color`](../color) will be inherited from the nearest containing element that defines it. By default, that's black.

 
```
.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

```
  **Note:** When you try to show it in Safari, it will not show properly. Because Safari doesn't support `text-decoration: underline wavy #88ff88`.

  Finally, the `.boxRight` class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

 * The `background-color` is set using the HSL value specified using `hsl(270deg, 50%, 75%)`. This is a medium purple color.
* The box's `outline` is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (`rgb(110, 20, 120)`).
* The foreground (text) color is specified by setting the [`color`](../color) property to `hsl(0deg, 100%, 100%)`. This is one of many ways to specify the color white.
* We add a green wavy line under the text with [`text-decoration`](../text-decoration).
* Finally, a bit of a shadow is added to the text using [`text-shadow`](../text-shadow). Its `color` parameter is set to `black`.


Letting the user pick a color
-----------------------------



There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own [color picker](https://en.wikipedia.org/wiki/Color_picker), HTML now provides support for browsers to provide one for your use through the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, by using `"color"` as the value of its [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type) attribute.

 The `<input>` element represents a color only in the [hexadecimal string notation](#hexadecimal_string_notation) covered above.


### Example: Picking a color



Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.


  **Note:** On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

  #### HTML

 The HTML here creates a box that contains a color picker control (with a label created using the [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) element) and an empty paragraph element ([`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)) into which we'll output some text from our JavaScript code.

 
```
<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output"></p>
</div>

```
 #### CSS

 The CSS establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color.

 
```
#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

```
 #### JavaScript

 The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the [`<input type="color">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) element.

 
```
const colorPicker = document.getElementById("colorPicker");
const box = document.getElementById("box");
const output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  (event) => {
    box.style.borderColor = event.target.value;
  },
  false
);

colorPicker.addEventListener(
  "change",
  (event) => {
    output.innerText = `Color set to ${colorPicker.value}.`;
  },
  false
);

```
 The [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

 The [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) event is received when the color picker's value is finalized. We respond by setting the contents of the `<p>` element with the ID `"output"` to a string describing the finally selected color.


Using color wisely
------------------


Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness.

### Finding the right colors



Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

 #### Base color

 The first step is to choose your **base color**. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage [Mountain Dew](https://en.wikipedia.org/wiki/Mountain_Dew) and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

 * A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
* A color that comes from imagery associated with what your content is about. If you're creating a website about a given item or product, choose a color that's physically present on that item.
* Browse websites that let you look at lots of existing color palettes and images to find inspiration.

 When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website [ColorZilla](https://www.colorzilla.com/) offers an extension ([Chrome](https://www.colorzilla.com/chrome/) / [Firefox](https://www.colorzilla.com/firefox/)) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

  **Note:** The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

  #### Fleshing out the palette

 Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See [Color and accessibility](#color_and_accessibility) for a brief explanation of why this matters.

 A few examples (all free to use as of the time this list was last revised):

 * [MDN's color picker tool](color_picker_tool)
* [Paletton](https://paletton.com/)
* [Adobe Color CC online color wheel](https://color.adobe.com/create/color-wheel)

 When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

  **Note:** Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

 
### Color theory resources



A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

  
[Color Science](https://www.khanacademy.org/computing/pixar/color) ([Khan Academy](https://www.khanacademy.org/) in association with [Pixar](https://www.pixar.com/))  An online course which introduces concepts such as what color is, how it's perceived, and how to use colors to express ideas. Presented by Pixar artists and designers.

  
[Color theory](https://en.wikipedia.org/wiki/Color_theory) on Wikipedia  Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color selection process, but is still full of useful information.

  
### Color and accessibility



There are several ways color can be an [accessibility](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility) problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

 You should do at least basic research into [color blindness](https://en.wikipedia.org/wiki/Color_blindness). There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

  **Note:** The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

  For more information about color blindness, see the following articles:

 * [Medline Plus: Color Blindness](https://medlineplus.gov/colorblindness.html) (United States National Institute of Health)
* [American Academy of Ophthalmology: What Is Color Blindness?](https://www.aao.org/eye-health/diseases/what-is-color-blindness)
* [Color Blindness & Web Design](https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html) (Usability.gov: United States Department of Health and Human Services)


### Palette design example



Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a website for a new game that takes place on the planet Mars. So let's do a [Google search for photos of Mars](https://www.google.com/search?q=Mars&tbm=isch). Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

 Using an eyedropper tool, we identify a color we like and determine that the color in question is `#D79C7A`, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

 Having selected our base color, we need to build out our palette. We decide to use [Paletton](https://www.paletton.com/) to come up with the other colors we need. Upon opening Paletton, we see:

  ![Right after loading Paletton.] 

 Next, we enter our color's hex code (`D79C7A`) into the "Base RGB" box at the bottom-left corner of the tool:

  ![After entering base color] 

 We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is `#508D7C`.

  ![Now with complementary colors included.] 

 If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

  ![Triad color scheme selected] 

 That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's `#556E8D`. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

  ![Triad color scheme selected] 

 Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

 Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.


### Color, backgrounds, contrast, and printing



 What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents. 

 If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS [`print-color-adjust`](../print-color-adjust) property to tell the browser that it should not make adjustments to the appearance of content.

 The default value of `print-color-adjust`, `economy`, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.

  You can set `print-color-adjust` to `exact` to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS. 

   **Note:** There is no guarantee, though, that `print-color-adjust: exact` will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of `print-color-adjust`. 

 
See also
--------


* [Drawing graphics](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
* [Graphics on the web](https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics)
* [MDN's color picker tool](color_picker_tool)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Applying_color>

CSS Transforms
==============


**CSS Transforms** is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.


Reference
---------


### Properties


* [`backface-visibility`](backface-visibility)
* [`perspective`](perspective)
* [`perspective-origin`](perspective-origin)
* [`rotate`](rotate)
* [`scale`](scale)
* [`transform`](transform)
* [`transform-box`](transform-box)
* [`transform-origin`](transform-origin)
* [`transform-style`](transform-style)
* [`translate`](translate)
### Data types


* [`<transform-function>`](transform-function)
Guides
------


 [Using CSS transforms](css_transforms/using_css_transforms)  Step-by-step tutorial about how to transform elements styled with CSS.

  Specifications
--------------




| Specification |
| --- |
| [CSS Transforms Module Level 1](https://drafts.csswg.org/css-transforms/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms>

::file-selector-button
======================


The `::file-selector-button` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-element](pseudo-elements) represents the button of an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) of [`type="file"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file).


Try it
------


Syntax
------



```
selector::file-selector-button

```
Examples
--------


### Basic example



#### HTML

 
```
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>

```
 #### CSS

 
```
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

```
 #### Result


 Note that `::file-selector-button` is a whole element, and as such matches the rules from the UA stylesheet. In particular, fonts and colors won't necessarily inherit from the `input` element.


### Fallback example



#### HTML

 
```
<form>
  <label for="fileUpload">Upload file</label>
  <input type="file" id="fileUpload" />
</form>

```
 #### CSS

 
```
input[type="file"]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type="file"]::-ms-browse:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Pseudo-Elements Module Level 4 # file-selector-button-pseudo](https://w3c.github.io/csswg-drafts/css-pseudo/#file-selector-button-pseudo) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::file-selector-button` | 891 | 897912–79 | 82 | 10 | 7515 | 14.13 | 894.4 | 8918 | 82 | 6314 | 14.51 | 15.01.0 |


See also
--------


* [WebKit CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions)
* [File and Directory Entries API](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API)
* [File and Directory Entries API support in Firefox](https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support)
* [`<input type="file">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button>

<dashed-ident>
==============


The `<dashed-ident>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) denotes an arbitrary string used as an [identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier).


Syntax
------



The syntax of `<dashed-ident>` is similar to CSS identifiers (such as property names), except that it is [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). It starts with two dashes, followed by the user-defined identifier.

 The double dash at the beginning makes them easily identifiable when reading through a CSS code block.

 Just like [`<custom-ident>`](custom-ident) `<dashed-ident>`s are defined by the user, but unlike `<custom-ident>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) will never define a `<dashed-ident>`.


Examples
--------


### Using with CSS custom properties



When `<dashed-ident>` is used with [CSS custom properties](using_css_custom_properties), the property is declared first and then used within a [CSS var() function](var()).

 
```
html {
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: green;
}

h1,
h4 {
  color: var(--primary-color);
}

h2,
h5 {
  color: var(--secondary-color);
}

h3,
h6 {
  color: var(--tertiary-color);
}

```

### Using with @color-profile



When `<dashed-ident>` is used with the <@color-profile> at-rule, the at-rule is declared first and then used within a [CSS color() function](color_value/color).

 
```
@color-profile --my-color-profile {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}

.header {
  background-color: color(--my-color-profile 0% 70% 20% 0%);
}

```

### Using with @font-palette-values



When `<dashed-ident>` is used with the <@font-palette-values> at-rule, the at-rule is declared first and then used as the value for the <font-palette> property.

 
```
@font-palette-values --my-palette {
  font-family: Bixa;
  base-palette: 1;
  override-colors: 0 #ff0000;
}

h1,
h2,
h3,
h4 {
  font-palette: --my-palette;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # dashed-idents](https://drafts.csswg.org/css-values/#dashed-idents) |


Browser compatibility
---------------------

See also
--------


* [<ident>](ident)
* [<custom-ident>](custom-ident)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/dashed-ident>

CSS Flexible Box Layout
=======================


**CSS Flexible Box Layout** is a module of [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.


Basic example
-------------



In the following example a container has been set to `display: flex`, which means that the three child items become flex items. The value of `justify-content` has been set to `space-between` in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of `align-items` being `stretch`. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.



Reference
---------


### Properties


* [`flex`](flex)
* [`flex-basis`](flex-basis)
* [`flex-direction`](flex-direction)
* [`flex-flow`](flex-flow)
* [`flex-grow`](flex-grow)
* [`flex-shrink`](flex-shrink)
* [`flex-wrap`](flex-wrap)
* [`order`](order)
### Properties for alignment



The properties `align-content`, `align-self`, `align-items` and `justify-content` initially appeared in the Flexbox specification, but are now defined in Box Alignment. The Flexbox spec now refers to the Box Alignment specification for up to date definitions. Also additional alignment properties are now defined in Box Alignment.

 * [`justify-content`](justify-content)
* [`align-content`](align-content)
* [`align-items`](align-items)
* [`align-self`](align-self)
* [`place-content`](place-content)
* [`place-items`](place-items)
* [`row-gap`](row-gap)
* [`column-gap`](column-gap)
* [`gap`](gap)


Guides
------


 [Basic concepts of flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)  An overview of the features of Flexbox

  [Relationship of flexbox to other layout methods](css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods)  How Flexbox relates to other layout methods, and other CSS specifications

  [Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)  How the Box Alignment properties work with Flexbox.

  [Ordering flex items](css_flexible_box_layout/ordering_flex_items)  Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.

  [Controlling ratios of flex items along the main axis](css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax)  Explaining the flex-grow, flex-shrink and flex-basis properties.

  [Mastering wrapping of flex items](css_flexible_box_layout/mastering_wrapping_of_flex_items)  How to create flex containers with multiple lines and control the display of the items in those lines.

  [Typical use cases of flexbox](css_flexible_box_layout/typical_use_cases_of_flexbox)  Common design patterns that are typical Flexbox use cases.

  Specifications
--------------




| Specification |
| --- |
| [CSS Flexible Box Layout Module Level 1](https://drafts.csswg.org/css-flexbox/)  |


See also
--------


* Glossary terms:
	+ [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)
	+ [Flex Container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container)
	+ [Flex Item](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)
	+ [Main Axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis)
	+ [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
	+ [Flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout>

CSS Grid Layout
===============



**CSS Grid Layout** excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

 Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.



Basic example
-------------



The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.


### HTML



```
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

```
### CSS




```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

```


Reference
---------


### Properties


* [`display`](display)
* [`grid-template-columns`](grid-template-columns)
* [`grid-template-rows`](grid-template-rows)
* [`grid-template-areas`](grid-template-areas)
* [`grid-template`](grid-template)
* [`grid-auto-columns`](grid-auto-columns)
* [`grid-auto-rows`](grid-auto-rows)
* [`grid-auto-flow`](grid-auto-flow)
* [`grid`](grid)
* [`grid-row-start`](grid-row-start)
* [`grid-column-start`](grid-column-start)
* [`grid-row-end`](grid-row-end)
* [`grid-column-end`](grid-column-end)
* [`grid-row`](grid-row)
* [`grid-column`](grid-column)
* [`grid-area`](grid-area)
* [`row-gap`](row-gap)
* [`column-gap`](column-gap)
* [`gap`](gap)
* [`masonry-auto-flow`](masonry-auto-flow)  Experimental
* [`align-tracks`](align-tracks)  Experimental
* [`justify-tracks`](justify-tracks)  Experimental
### Functions


* [`repeat()`](repeat)
* [`minmax()`](minmax)
* [`fit-content()`](fit-content_function)
### Data types


* [`<flex>`](flex_value)
Guides
------


* [Basic concepts of grid layout](css_grid_layout/basic_concepts_of_grid_layout)
* [Relationship of grid layout to other layout methods](css_grid_layout/relationship_of_grid_layout)
* [Grid template areas](css_grid_layout/grid_template_areas)
* [Grid layout using line-based placement](css_grid_layout/line-based_placement_with_css_grid)
* [Grid layout using named grid lines](css_grid_layout/layout_using_named_grid_lines)
* [Auto-placement in grid layout](css_grid_layout/auto-placement_in_css_grid_layout)
* [Box alignment in grid layout](css_grid_layout/box_alignment_in_css_grid_layout)
* [Grids, logical values, and writing modes](css_grid_layout/css_grid_logical_values_and_writing_modes)
* [Grid layout and accessibility](css_grid_layout/css_grid_layout_and_accessibility)
* [Realizing common layouts using grids](css_grid_layout/realizing_common_layouts_using_css_grid_layout)
* [Subgrid](css_grid_layout/subgrid)
* [Masonry layout](css_grid_layout/masonry_layout)  Experimental
Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2](https://drafts.csswg.org/css-grid/)  |


See also
--------


* Glossary terms:
	+ [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid)
	+ [Grid lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines)
	+ [Grid tracks](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks)
	+ [Grid cell](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Cell)
	+ [Grid area](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas)
	+ [Gutters](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)
	+ [Grid axis](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis)
	+ [Grid row](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row)
	+ [Grid column](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column)
* [Grid by Example](https://gridbyexample.com/) - A collection of usage examples and video tutorials
* [CSS Grid Reference - Codrops](https://tympanus.net/codrops/css_reference/grid/)
* [CSS Grid Inspector - Firefox DevTools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html)
* [CSS Grid Playground](https://mozilladevelopers.github.io/playground/css-grid/)
* [CSS Grid Garden](https://cssgridgarden.com) - A game for learning CSS grid


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>

CSS Box Alignment
=================



The CSS Box Alignment module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. The module aims to create a consistent method of alignment across all of CSS. This document details the general concepts found in the specification.

  **Note:** The documentation for each layout method will detail how Box Alignment is applied there.

 

Older alignment methods
-----------------------



CSS traditionally had very limited alignment capabilities. We were able to align text using [`text-align`](text-align), center blocks using auto [`margin`](margin)s, and in table or inline-block layouts using the [`vertical-align`](vertical-align) property. Alignment of text is now covered by the [Inline Layout](https://www.w3.org/TR/css-inline-3/) and [CSS Text](https://www.w3.org/TR/css-text-3/) modules, and for the first time in Box Alignment we have full horizontal and vertical alignment capabilities.

 If you initially learned [Flexbox](css_flexible_box_layout) then you may consider these properties to be part of the Flexbox specification, and some of the properties are indeed listed in Level 1 of Flexbox. However the specification notes that the Box Alignment specification should be referred to as it may add additional capabilities over what is currently in Flexbox.


Basic examples
--------------


The following examples demonstrate how some of the Box Alignment Properties are applied in [Grid](css_grid_layout) and [Flexbox](css_flexible_box_layout).

### CSS grid layout alignment example



In this example using Grid Layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using [`justify-content`](justify-content). On the block (cross) axis the alignment of the items inside their grid areas is controlled with [`align-items`](align-items). The first item overrides the `align-items` value set on the group by setting [`align-self`](align-self) to `center`.



### Flexbox Alignment Example



In this example, three flex items are aligned on the main axis using `justify-content` and on the Cross Axis using `align-items`. The first item overrides the `align-items` set on the group by setting `align-self` to `center`.



Key concepts and terminology
----------------------------


The specification details some alignment terminology to make it easier to discuss these alignment properties outside their implementation within a particular layout method. There are also some key concepts which are common to all layout methods.

### Relationship to writing modes


Alignment is linked to writing modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left. Instead we describe alignment in terms of the start and end of the particular dimension we are working with. This ensures that alignment works in the same way whichever writing mode the document has.

### Two dimensions of alignment



When using the box alignment properties you will align content on one of two axes — the inline (or main) axis, and the block (or cross) axis. The inline axis is the axis along which words in a sentence flow in the writing mode being used — for English, for example, the inline axis is horizontal. The block axis is the axis along which blocks, such as paragraph elements, are laid out and it runs across the Inline axis.

  ![Inline axis is the left / right, or horizontal, direction. Block axis is vertical, or top / bottom.] 

 When aligning items on the inline axis you will use the properties which begin with `justify-`:

 * [`justify-items`](justify-items)
* [`justify-self`](justify-self)
* [`justify-content`](justify-content)

 When aligning items on the block axis you will use the properties that begin `align-`:

 * [`align-items`](align-items)
* [`align-self`](align-self)
* [`align-content`](align-content)

 Flexbox adds an additional complication in that the above is true when [`flex-direction`](flex-direction) is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.


### The alignment subject


The **alignment subject** is the thing that is being aligned. For `justify-self` or `align-self`, or when setting these values as a group with `justify-items` or `align-items`, this will be the margin box of the element that this property is being used on. The `justify-content` and `align-content` properties differ per layout method.

### The alignment container



The **alignment container** is the box the subject is being aligned inside. This will typically be the alignment subject's containing block. An alignment container may contain one or many alignment subjects.

 The below image shows an alignment container with two alignment subjects inside.

  ![A box containing two rectangles of the same width but different heights. The two rectangles are top aligned, meaning they both have their top lines about 10px inside the top of the box in which they are contained.] 


### Fallback alignment


If you set an alignment that cannot be fulfilled, then the **fallback alignment** will come into play and deal with the available space. This fallback alignment is specified individually for each layout method and detailed on the page for that method.

Types of alignment
------------------



There are three different types of alignment that the specification details; these use keyword values.

 * **Positional alignment**: specifying the position of an alignment subject with relation to its alignment container.
* **Baseline alignment**: These keywords define alignment as a relationship among the baselines of multiple alignment subjects within an alignment context.
* **Distributed alignment**: These keywords define alignment as a distribution of space among alignment subjects.


### Positional alignment keyword values



The following values are defined for positional alignment, and can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.

 * `center`
* `start`
* `end`
* `self-start`
* `self-end`
* `flex-start` for Flexbox only
* `flex-end` for Flexbox only
* `left`
* `right`

 Other than the physical values of `left` and `right`, which relate to physical attributes of the screen, all of the other values are logical values and relate to the writing mode of the content.

 For example, when working in CSS Grid Layout, if you are working in English and set `justify-content` to `start` this will move the items in the inline dimension to the start, which will be the left as sentences in English start on the left. If you were using Arabic, a right to left language, then the same value of `start` would result in the items moving to the right, as sentences in Arabic start on the right-hand side of the page.

 Both of these examples have `justify-content: start`, however the location of start changes according to the writing mode.

  ![There are two boxes, each with 3 children of differing heights but similar widths. The first box has three children with the letters A, B, and C. These three boxes are all aligned to the left. The second box has three children with arabic letters in them. Those three boxes are all aligned to the right.] 


### Baseline alignment



The Baseline alignment keywords are used to align the baselines of boxes across a group of alignment subjects. They can be used as values for content alignment with `justify-content` and `align-content` and also for self alignment with `justify-self` and `align-self`.

 * `baseline`
* `first baseline`
* `last baseline`

 Baseline content alignment — specifying a baseline alignment value for `justify-content` or `align-content` — works in layout methods that lay items out in rows. The alignment subjects are baseline aligned against each other by adding padding inside the boxes.

 Baseline self alignment shifts the boxes to align by baseline by adding a margin outside the boxes. Self alignment is when using `justify-self` or `align-self`, or when setting these values as a group with `justify-items` and `align-items`.


### Distributed alignment



The **distributed alignment keywords** are used with the `align-content` and `justify-content` properties. These keywords define what happens to any additional space after alignment subjects have been displayed. The values are as follows:

 * `stretch`
* `space-between`
* `space-around`
* `space-evenly`

 For example, in Flex Layout items are aligned with `flex-start` initially. Working in a horizontal top to bottom writing mode such as English, with `flex-direction` as `row` the items start on the far left and any available space after displaying the items is placed after the items.

  ![Three rectangles of different widths are inside a box. They are all aligned to the left side of the containing box, with about 10px between them, and 10px between the left side of the first rectangle and the parent container.] 

 If you set `justify-content: space-between` on the flex container, the available space is now shared out and placed between the items.

  ![Three rectangles of different widths are inside a box. The first rectangle is aligned to the left side of the containing box, the third rectangle is aligned right, and the middle rectangle is equally spaced between the first and last.] 

 There needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. With no space, there is nothing to distribute.


Overflow alignment
------------------



The `safe` and `unsafe` keywords help define behavior when an alignment subject is larger than the alignment container. The `safe` keyword will align to `start` in the case of a specified alignment causing an overflow, the aim being to avoid "data loss" where part of the item is outside the boundaries of the alignment container and can't be scrolled to.

 If you specify `unsafe` then the alignment will be honoured even if it would cause such data loss.


Gaps between boxes
------------------



The box alignment specification also includes the `gap`, `row-gap`, and `column-gap` properties. These properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way.

 The `gap` property is a shorthand for `row-gap` and `column-gap`, which allows us to set these properties at once:

 * [`row-gap`](row-gap)
* [`column-gap`](column-gap)
* [`gap`](gap)

 In the below example, a grid layout uses the `gap` shorthand to set a `10px` gap between row tracks, and a `2em` gap between column tracks.


  **Note:** The early grid implementation included `-gap` properties prefixed with `grid-`. All browsers now support the unprefixed properties, though you may see the following legacy properties in examples and tutorials: [`grid-row-gap`](row-gap), [`grid-column-gap`](column-gap), and [`grid-gap`](gap). The prefixed versions will be maintained as an alias of the unprefixed ones.

  Be aware that other things may increase the visual gap displayed, for example using the space distribution keywords or adding margins to items.


Pages detailing individual alignment properties
-----------------------------------------------



As the CSS box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it:

 * [Box alignment in Flexbox](css_box_alignment/box_alignment_in_flexbox)
* [Box alignment in CSS Grid Layout](css_box_alignment/box_alignment_in_grid_layout)
* [Box alignment in multiple-column layout](css_box_alignment/box_alignment_in_multi-column_layout)
* [Box alignment for block, absolutely positioned and table layout](css_box_alignment/box_alignment_in_block_abspos_tables)


Reference
---------


### CSS Properties


* [`justify-content`](justify-content)
* [`align-content`](align-content)
* [`place-content`](place-content)
* [`justify-items`](justify-items)
* [`align-items`](align-items)
* [`place-items`](place-items)
* [`justify-self`](justify-self)
* [`align-self`](align-self)
* [`place-self`](place-self)
* [`row-gap`](row-gap)
* [`column-gap`](column-gap)
* [`gap`](gap)
### Glossary Entries


* [Cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
* [Main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis)
* [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Container)
* [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Subject)
* [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_Alignment)
Guides
------


* CSS Flexbox guide: *[Basic concepts of Flexbox](css_flexible_box_layout/basic_concepts_of_flexbox)*
* CSS Flexbox guide: *[Aligning items in a flex container](css_flexible_box_layout/aligning_items_in_a_flex_container)*
* CSS Grid guide: *[Box alignment in CSS Grid layouts](css_grid_layout/box_alignment_in_css_grid_layout)*
External Resources
------------------


* [CSS Grid, Flexbox and Box alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
* [Thoughts on partial implementations of Box alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment>

<calc-sum>
==========


The `<calc-sum>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents an expression which performs a calculation in any [CSS math function](css_functions#math_functions). The expression executes a basic arithmetic operation of addition and subtraction between two values.


Syntax
------



The `<calc-sum>` type defines two numeric values and one of the following [arithmetic operators](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#arithmetic_operators) between them.

  `+`  Adds two numbers together.

  `-`  Subtracts the right number from the left.

  
### Formal syntax



```
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-product> =   
  <calc-value> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '*' [|](value_definition_syntax#single_bar) '/' []](value_definition_syntax#brackets) <calc-value> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  
<calc-value> =   
  [<number>](number)         [|](value_definition_syntax#single_bar)  
  [<dimension>](dimension)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)     [|](value_definition_syntax#single_bar)  
  <calc-constant>  [|](value_definition_syntax#single_bar)  
  ( <calc-sum> )     
  
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  
<calc-sum> =   
  <calc-product> [[](value_definition_syntax#brackets) [[](value_definition_syntax#brackets) '+' [|](value_definition_syntax#single_bar) '-' []](value_definition_syntax#brackets) <calc-product> []](value_definition_syntax#brackets)[\*](value_definition_syntax#asterisk)    
  

```
Description
-----------



The operands in the expression may be any [`<length>`](length) syntax value. You can use [`<length>`](length), [`<frequency>`](frequency), [`<angle>`](angle), [`<time>`](time), [`<percentage>`](percentage), [`<number>`](number), or [`<integer>`](integer).

 Different unit types can be used in a single expression. For example, subtracting `px` from `%`, as in `calc(100% - 10px)`, is a valid expression.

 Including [CSS variables](css_variables) in `calc-sum` expressions is also allowed. The following code `calc(10px + var(--variable))`, is a valid expression.

 The `+` and `-` operators **must be surrounded by [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace)**. For instance, `calc(50% -8px)` will be parsed as a percentage followed by a negative length — an invalid expression — while `calc(50% - 8px)` is a percentage followed by a subtraction operator and a length. Likewise, `calc(8px + -50%)` is treated as a length followed by an addition operator and a negative percentage.


Specifications
--------------



**No specification found**No specification data found for `css.types.calc-sum`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------


See also
--------


* `<calc-product>`
* `<calc-value>`
* [`<calc-constant>`](calc-constant)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/calc-sum>

@document
=========



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `@document` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.

 
```
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}

```


Syntax
------



An `@document` rule can specify one or more matching functions. If any of the functions apply to a given URL, the rule will take effect on that URL. The functions available are:

  `url()`  Matches an exact URL.

  `url-prefix()`  Matches if the document URL starts with the value provided.

  `domain()`  Matches if the document URL is on the domain provided (or a subdomain of it).

  `media-document()`  Matches the media according to the string in parameter, one of `video`, `image`, `plugin` or `all`.

  
`regexp()`  Deprecated   Non-standard 
  Matches if the document URL is matched by the [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) provided. The expression must match the entire URL.

   The values provided to the `url()`, `url-prefix()`, `domain()`, and `media-document()` functions can be optionally enclosed by single or double quotes. The values provided to the `regexp()` function *must* be enclosed in quotes.

 Escaped values provided to the `regexp()` function must additionally be escaped from the CSS. For example, a `.` (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to `\.`), then escape that string using CSS rules (to `\\.`).

 `@document` is currently only supported in Firefox; if you wanted to replicate using such functionality in your own non-Firefox browser, you could try using [this polyfill](https://github.com/An-Error94/Handy-Scripts/tree/master/@document-polyfill) by @An-Error94, which uses a combination of a user script, [data-\* attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*), and [attribute selectors](attribute_selectors).

  **Note:** There is a -moz-prefixed version of this property — `@-moz-document`. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks (See [Firefox bug 1035091](https://bugzil.la/1035091)).

 
Formal syntax
-------------



```
@document [ <url>                    |
            url-prefix(<string>)     |
            domain(<string>)         |
            media-document(<string>) |
            regexp(<string>)
          ]# {
  <group-rule-body>
}

```
Examples
--------


### Specifying document for CSS rule



```
@document url("http://www.w3.org/"),
 url-prefix("http://www.w3.org/Style/"),
 domain("mozilla.org"),
 media-document("video"),
 regexp("https:.\*") {
  /\* CSS rules here apply to:
 - The page "http://www.w3.org/"
 - Any page whose URL begins with "http://www.w3.org/Style/"
 - Any page whose URL's host is "mozilla.org"
 or ends with ".mozilla.org"
 - Any standalone video
 - Any page whose URL starts with "https:" \*/

  /\* Make the above-mentioned pages really ugly \*/
  body {
    color: purple;
    background: yellow;
  }
}

```
Specifications
--------------


[Initially](https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document) in Level 3, `@document` was [postponed](https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) to Level 4, but then subsequently removed.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@document` | No | No | 61Only supports an empty `url-prefix()` value, which is supported due to its [use in Firefox browser detection](https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/). Still supported in user stylesheets.1.5–61 | No | No | No | No | No | 61Only supports an empty `url-prefix()` value, which is supported due to its [use in Firefox browser detection](https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/). Still supported in user stylesheets.4–61 | No | No | No |
| `regexp` | No | No | 6–61 | No | No | No | No | No | 6–61 | No | No | No |


See also
--------


* [Per-site user style sheet rules](https://lists.w3.org/Archives/Public/www-style/2004Aug/0135) on the www-style mailing list.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@document>

Using CSS transforms
====================



By modifying the coordinate space, **CSS transforms** change the shape and position of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.

 CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space.

  **Warning:** Only transformable elements can be `transform`ed; that is, all elements whose layout is governed by the CSS [box model](../css_box_model) except for: [non-replaced inline boxes](../visual_formatting_model#inline-level_elements_and_inline_boxes), [table-column boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col), and [table-column-group boxes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup).

 

CSS transforms properties
-------------------------



Two major properties are used to define CSS transforms: [`transform`](../transform) (or the individual [`translate`](../translate), [`rotate`](../rotate), and [`scale`](../scale) properties) and [`transform-origin`](../transform-origin).

  [`transform-origin`](../transform-origin)  Specifies the position of the origin. By default, it is at the center of the element and can be moved. It is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter.

  [`transform`](../transform)  Specifies the transforms to apply to the element. It is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. Composite transforms are effectively applied in order from right to left.

  
Examples
--------



Here is an unaltered image of the MDN logo:

  ![MDN Logo] 


### Rotating



Here is the MDN logo rotated 90 degrees from its bottom-left corner.

 
```
<img
 style="rotate: 90deg;
 transform-origin: bottom left;"
 src="logo.png"
 alt="MDN Logo" />

```


### Skewing and translating



Here is the MDN logo, skewed by 10 degrees and translated by 150 pixels on the X-axis.

 
```
<img
 style="transform: skewX(10deg) translateX(150px);
 transform-origin: bottom left;"
 src="logo.png"
 alt="MDN logo" />

```


3D specific CSS properties
--------------------------


Performing CSS transformations in 3D space is a bit more complex. You have to start by configuring the 3D space by giving it a perspective, then you have to configure how your 2D elements will behave in that space.

### Perspective



The first element to set is the [`perspective`](../perspective). The perspective is what gives us the 3D impression. The farther from the viewer the elements are, the smaller they are.

 #### Setting perspective

 This example shows a cube with the perspective set at different positions. How quick the cube shrinks is defined by the [`perspective`](../perspective) property. The smaller its value is, the deeper the perspective is.

 ##### HTML

 The HTML below creates four copies of the same box, with the perspective set at different values.

 
```
<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code></th>
      <th><code>perspective: 350px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>perspective: 500px;</code></th>
      <th><code>perspective: 650px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

```
 ##### CSS

 The CSS establishes classes that can be used to set the perspective to different distances. It also includes classes for the container box and the cube itself, as well as each of its faces.

 
```
/\* Shorthand classes for different perspective values \*/
.pers250 {
  perspective: 250px;
}

.pers350 {
  perspective: 350px;
}

.pers500 {
  perspective: 500px;
}

.pers650 {
  perspective: 650px;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

```
 ##### Result


 The second element to configure is the position of the viewer, with the [`perspective-origin`](../perspective-origin) property. By default the perspective is centered on the viewer, which is not always adequate.

 #### Changing the perspective origin

 This example shows cubes with popular `perspective-origin` values.

 ##### HTML

 
```
<section>
  <figure>
    <figcaption><code>perspective-origin: top left;</code></figcaption>
    <div class="container">
      <div class="cube potl">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: top;</code></figcaption>
    <div class="container">
      <div class="cube potm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: top right;</code></figcaption>
    <div class="container">
      <div class="cube potr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: left;</code></figcaption>
    <div class="container">
      <div class="cube poml">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
    <div class="container">
      <div class="cube pomm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: right;</code></figcaption>
    <div class="container">
      <div class="cube pomr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom left;</code></figcaption>
    <div class="container">
      <div class="cube pobl">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom;</code></figcaption>
    <div class="container">
      <div class="cube pobm">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: bottom right;</code></figcaption>
    <div class="container">
      <div class="cube pobr">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200neg">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200pos">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>

  <figure>
    <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
    <div class="container">
      <div class="cube po200200">
        <div class="face front">1</div>
        <div class="face back">2</div>
        <div class="face right">3</div>
        <div class="face left">4</div>
        <div class="face top">5</div>
        <div class="face bottom">6</div>
      </div>
    </div>
  </figure>
</section>

```
 ##### CSS

 
```
/\* perspective-origin values (unique per example) \*/
.potl {
  perspective-origin: top left;
}
.potm {
  perspective-origin: top;
}
.potr {
  perspective-origin: top right;
}
.poml {
  perspective-origin: left;
}
.pomm {
  perspective-origin: 50% 50%;
}
.pomr {
  perspective-origin: right;
}
.pobl {
  perspective-origin: bottom left;
}
.pobm {
  perspective-origin: bottom;
}
.pobr {
  perspective-origin: bottom right;
}
.po200200neg {
  perspective-origin: -200% -200%;
}
.po200200pos {
  perspective-origin: 200% 200%;
}
.po200200 {
  perspective-origin: 200% -200%;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the layout a little nicer \*/
section {
  background-color: #eee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

```
 ##### Result


 Once you have done this, you can work on the element in the 3D space.


See also
--------


* The [CSS `transform` property](../transform) and the [CSS `<transform-function>` data types](../transform-function)
* The individual transforms properties: [`translate`](../translate), [`rotate`](../rotate), and [`scale`](../scale) (There is no `skew` property)
* [Using device orientation with 3D Transforms](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms)
* [Intro to CSS 3D transforms](https://3dtransforms.desandro.com/) (Blog post by David DeSandro)
* [CSS Transform Playground](https://css-transform.moro.es/) (Online tool to visualize CSS Transform functions)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms>

Basic concepts of flexbox
=========================



The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.

 When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of [CSS Grid Layout](../css_grid_layout), which controls columns and rows together.



The two axes of flexbox
-----------------------


When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the [`flex-direction`](../flex-direction) property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.

### The main axis



The main axis is defined by `flex-direction`, which has four possible values:

 * `row`
* `row-reverse`
* `column`
* `column-reverse`

 Should you choose `row` or `row-reverse`, your main axis will run along the row in the **inline direction**.

  ![If flex-direction is set to row the main axis runs along the row in the inline direction.] 

 Choose `column` or `column-reverse` and your main axis will run from the top of the page to the bottom — in the **block direction**.

  ![If flex-direction is set to column the main axis runs in the block direction.] 


### The cross axis



The cross axis runs perpendicular to the main axis, therefore if your `flex-direction` (main axis) is set to `row` or `row-reverse` the cross axis runs down the columns.

  ![If flex-direction is set to row then the cross axis runs in the block direction.] 

 If your main axis is `column` or `column-reverse` then the cross axis runs along the rows.

  ![If flex-direction is set to column then the cross axis runs in the inline direction.] 


Start and end lines
-------------------



Another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right-hand side, with new lines appearing one under the other.

 You can [read more about the relationship between flexbox and the Writing Modes specification](relationship_of_flexbox_to_other_layout_methods#writing_modes) in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.

 If the `flex-direction` is `row` and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right.

  ![Working in English the start edge is on the left.] 

 If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left.

  ![The start edge in a RTL language is on the right.] 

 In both cases the start edge of the cross axis is at the top of the flex container and the end edge at the bottom, as both languages have a horizontal writing mode.

 After a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as CSS Grid Layout which follow the same patterns.


The flex container
------------------



An area of a document laid out using flexbox is called a **flex container**. To create a flex container, we set the value of the area's container's [`display`](../display) property to `flex` or `inline-flex`. As soon as we do this the direct children of that container become **flex items**. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

 * Items display in a row (the `flex-direction` property's default is `row`).
* The items start from the start edge of the main axis.
* The items do not stretch on the main dimension, but can shrink.
* The items will stretch to fill the size of the cross axis.
* The [`flex-basis`](../flex-basis) property is set to `auto`.
* The [`flex-wrap`](../flex-wrap) property is set to `nowrap`.

 The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

 You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.



### Changing flex-direction



Adding the [`flex-direction`](../flex-direction) property to the flex container allows us to change the direction in which our flex items display. Setting `flex-direction: row-reverse` will keep the items displaying along the row, however the start and end lines are switched.

 If we change `flex-direction` to `column` the main axis switches and our items now display in a column. Set `column-reverse` and the start and end lines are again switched.

 The live example below has `flex-direction` set to `row-reverse`. Try the other values — `row`, `column` and `column-reverse` — to see what happens to the content.



Multi-line flex containers with flex-wrap
-----------------------------------------



While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines on either side.

 To cause wrapping behavior add the property [`flex-wrap`](../flex-wrap) with a value of `wrap`. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap. Set it to `nowrap`, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using `nowrap` would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.


 Find out more about wrapping flex items in the guide [Mastering Wrapping of Flex Items](mastering_wrapping_of_flex_items).


The flex-flow shorthand
-----------------------



You can combine the two properties `flex-direction` and `flex-wrap` into the [`flex-flow`](../flex-flow) shorthand. The first value specified is `flex-direction` and the second value is `flex-wrap`.

 In the live example below try changing the first value to one of the allowable values for `flex-direction` - `row`, `row-reverse`, `column` or `column-reverse`, and also change the second to `wrap` and `nowrap`.



Properties applied to flex items
--------------------------------



To have more control over flex items we can target them directly. We do this by way of three properties:

 * [`flex-grow`](../flex-grow)
* [`flex-shrink`](../flex-shrink)
* [`flex-basis`](../flex-basis)

 We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide [Controlling Ratios of Flex Items on the Main Axis](controlling_ratios_of_flex_items_along_the_main_ax).

 Before we can make sense of these properties we need to consider the concept of **available space**. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

 If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don't change the initial values then flexbox will put that space after the last item.

  ![This flex container has available space after laying out the items.] 

 If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the `flex` properties that we apply to the items themselves, will do.


### The flex-basis property



The `flex-basis` is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is `auto` — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the `flex-basis`.

 If the items don't have a size then the content's size is used as the flex-basis. This is why when we just declare `display: flex` on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.


### The flex-grow property



With the `flex-grow` property set to a positive integer, flex items can grow along the main axis from their `flex-basis`. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

 If we gave all of our items in the example above a `flex-grow` value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

 The flex-grow property can be used to distribute space in proportion. If we give our first item a `flex-grow` value of 2, and the other items a value of 1 each, 2 parts of the available space will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).


### The flex-shrink property



Where the `flex-grow` property deals with adding space in the main axis, the `flex-shrink` property controls how it is taken away. If we do not have enough space in the container to lay out our items, and `flex-shrink` is set to a positive integer, then the item can become smaller than the `flex-basis`. As with `flex-grow`, different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for `flex-shrink` will shrink faster than its siblings that have lower values.

 The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We'll therefore take a more detailed look at how this algorithm works in the article [Controlling Ratios of items along the main axis](controlling_ratios_of_flex_items_along_the_main_ax).

  **Note:** These values for `flex-grow` and `flex-shrink` are proportions. Typically if we had all of our items set to `flex: 1 1 200px` and then wanted one item to grow at twice the rate, we would set that item to `flex: 2 1 200px`. However you could also use `flex: 10 1 200px` and `flex: 20 1 200px` if you wanted.

 
### Shorthand values for the flex properties



You will very rarely see the `flex-grow`, `flex-shrink`, and `flex-basis` properties used individually; instead they are combined into the [`flex`](../flex) shorthand. The `flex` shorthand allows you to set the three values in this order — `flex-grow`, `flex-shrink`, `flex-basis`.

 The live example below allows you to test out the different values of the flex shorthand; remember that the first value is `flex-grow`. Giving this a positive value means the item can grow. The second is `flex-shrink` — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is `flex-basis`; this is the value the items are using as their base value to grow and shrink from.


 There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

 * `flex: initial`
* `flex: auto`
* `flex: none`
* `flex: <positive-number>`

 Setting `flex: initial` resets the item to the initial values of Flexbox. This is the same as `flex: 0 1 auto`. In this case the value of `flex-grow` is 0, so items will not grow larger than their `flex-basis` size. The value of `flex-shrink` is 1, so items can shrink if they need to rather than overflowing. The value of `flex-basis` is `auto`. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

 Using `flex: auto` is the same as using `flex: 1 1 auto`; everything is as with `flex:initial` but in this case the items can grow and fill the container as well as shrink if required.

 Using `flex: none` will create fully inflexible flex items. It is as if you wrote `flex: 0 0 auto`. The items cannot grow or shrink but will be laid out using flexbox with a `flex-basis` of `auto`.

 The shorthand you often see in tutorials is `flex: 1` or `flex: 2` and so on. This is as if you used `flex: 1 1 0` or `flex: 2 1 0` and so on, respectively. The items can grow and shrink from a `flex-basis` of 0.

 Try these shorthand values in the live example below.



Alignment, justification and distribution of free space between items
---------------------------------------------------------------------


A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items. Note that these properties are to be set on the flex container, not on the items themselves.

### align-items



The [`align-items`](../align-items) property will align the items on the cross axis.

 The initial value for this property is `stretch` and this is why flex items stretch to the height of the flex container by default. This might be dictated by the height of the tallest item in the container, or by a size set on the flex container itself.

 You could instead set `align-items` to `flex-start` in order to make the items line up at the start of the flex container, `flex-end` to align them to the end, or `center` to align them in the center. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

 * `stretch`
* `flex-start`
* `flex-end`
* `center`



### justify-content



The [`justify-content`](../justify-content) property is used to align the items on the main axis, the direction in which `flex-direction` has set the flow. The initial value is `flex-start` which will line the items up at the start edge of the container, but you could also set the value to `flex-end` to line them up at the end, or `center` to line them up in the center.

 You can also use the value `space-between` to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value `space-around`. With `space-around`, items have a half-size space on either end. Or, to cause items to have equal space around them use the value `space-evenly`. With `space-evenly`, items have a full-size space on either end.

 Try the following values of `justify-content` in the live example:

 * `flex-start`
* `flex-end`
* `center`
* `space-around`
* `space-between`
* `space-evenly`


 In the article [Aligning Items in a Flex Container](aligning_items_in_a_flex_container) we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.


### justify-items


The [`justify-items`](../justify-items) property is ignored in flexbox layouts.

Next steps
----------


After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at [how this specification relates to other parts of CSS](relationship_of_flexbox_to_other_layout_methods).



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox>

Aligning items in a flex container
==================================



One of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time. It enabled proper vertical alignment, so we can at last easily center a box. In this guide, we will take a thorough look at how the alignment and justification properties work in Flexbox.

 To center our box we use the `align-items` property to align our item on the cross axis, which in this case is the block axis running vertically. We use `justify-content` to align the item on the main axis, which in this case is the inline axis running horizontally.

  ![A containing element with another box centered inside it.] 

 You can take a look at the code of this example below. Change the size of the container or nested element and the nested element always remains centered.




Properties that control alignment
---------------------------------



The properties we will look at in this guide are as follows.

 * [`justify-content`](../justify-content) — controls alignment of all items on the main axis.
* [`align-items`](../align-items) — controls alignment of all items on the cross axis.
* [`align-self`](../align-self) — controls alignment of an individual flex item on the cross axis.
* [`align-content`](../align-content) — described in the spec as for "packing flex lines"; controls space between flex lines on the cross axis.
* [`gap`](../gap), [`column-gap`](../column-gap), and [`row-gap`](../row-gap) — used to create gaps or gutters between flex items.

 We will also discover how auto margins can be used for alignment in flexbox.


The Cross Axis
--------------



The `align-items` and `align-self` properties control alignment of our flex items on the cross axis, down the columns if `flex-direction` is `row` and along the row if `flex-direction` is `column`.

 We are making use of cross-axis alignment in the most simple flex example. If we add `display: flex` to a container, the child items all become flex items arranged in a row. They will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. If your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item.

  ![Three items, one with additional text causing it to be taller than the others.] 

  ![Three items stretched to 200 pixels tall] 

 The reason the items become the same height is that the initial value of `align-items`, the property that controls alignment on the cross axis, is set to `stretch`.

 We can use other values to control how the items align:

 * `align-items: flex-start`
* `align-items: flex-end`
* `align-items: center`
* `align-items: stretch`
* `align-items: baseline`

 In the live example below, the value of `align-items` is `stretch`. Try the other values and see how all of the items align against each other in the flex container.



### Aligning one item with `align-self`



The `align-items` property sets the `align-self` property on all of the flex items as a group. This means you can explicitly declare the `align-self` property to target a single item. The `align-self` property accepts all of the same values as `align-items` plus a value of `auto`, which will reset the value to that which is defined on the flex container.

 In this next live example, the flex container has `align-items: flex-start`, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a `first-child` selector and set that item to `align-self: stretch`; another item has been selected using its class of `selected` and given `align-self: center`. You can change the value of `align-items` or change the values of `align-self` on the individual items to see how this works.



### Changing the main axis



So far we have looked at the behavior when our `flex-direction` is `row`, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

  ![Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.] 

 If we change our `flex-direction` to column, `align-items` and `align-self` will align the items to the left and right.

  ![Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.] 

 You can try this out in the example below, which has a flex container with `flex-direction: column` yet otherwise is exactly the same as the previous example.



Aligning content on the cross axis — the align-content property
---------------------------------------------------------------



So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the `align-content` property to control the distribution of space between the rows. In the specification this is described as [packing flex lines](https://drafts.csswg.org/css-flexbox/#align-content-property).

 For `align-content` to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

 The `align-content` property takes the following values:

 * `align-content: flex-start`
* `align-content: flex-end`
* `align-content: center`
* `align-content: space-between`
* `align-content: space-around`
* `align-content: stretch`
* `align-content: space-evenly` (not defined in the Flexbox specification)

 In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of `align-content` is `space-between`, which means that the available space is shared out *between* the flex lines, which are placed flush with the start and end of the container on the cross axis.

 Try out the other values to see how the `align-content` property works.


 Once again we can switch our `flex-direction` to `column` in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.


  **Note:** The value `space-evenly` is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

 
Aligning content on the main axis
---------------------------------



Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — `justify-content`. This is because we are only dealing with items as a group on the main axis. With `justify-content` we control what happens with available space, should there be more space than is needed to display the items.

 In our initial example with `display: flex` on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of `justify-content` being `flex-start`. Any available space is placed at the end of the items.

  ![Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.] 

 The `justify-content` property accepts the same values as `align-content`.

 * `justify-content: flex-start`
* `justify-content: flex-end`
* `justify-content: center`
* `justify-content: space-between`
* `justify-content: space-around`
* `justify-content: space-evenly` (not defined in the Flexbox specification)

 In the example below, the value of `justify-content` is `space-between`. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.


 If the main axis is in the block direction because `flex-direction` is set to `column`, then `justify-content` will distribute space between items in that dimension as long as there is space in the flex container to distribute.



### Alignment and Writing Modes



Remember that with all of these alignment methods, the values of `flex-start` and `flex-end` are writing mode-aware. If the value of `justify-content` is `flex-start` and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

  ![Three items lined up on the left] 

 However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

  ![Three items lined up from the right] 

 The live example below has the `direction` property set to `rtl` to force a right-to-left flow for our items. You can remove this, or change the values of `justify-content` to see how flexbox behaves when the start of the inline direction is on the right.



Alignment and flex-direction
----------------------------



The start line will also change if you change the `flex-direction` property — for example using `row-reverse` instead of `row`.

 In this next example I have items laid out with `flex-direction: row-reverse` and `justify-content: flex-end`. In a left to right language the items all line up on the left. Try changing `flex-direction: row-reverse` to `flex-direction: row`. You will see that the items now move to the right-hand side.


 While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. `flex-start` will be where the start of a sentence of text would begin.

  ![Diagram showing start on the left and end on the right.] 

 You can switch them to display in the block direction for the language of your document by selecting `flex-direction: column`. Then `flex-start` will then be where the top of your first paragraph of text would start.

  ![Diagram showing start at the top and end at the bottom.] 

 If you change `flex-direction` to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. `flex-start` will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

  ![Diagram showing start on the right and end on the left.] 

  ![Diagram showing end at the top and start at the bottom] 


Using auto margins for main axis alignment
------------------------------------------



We don't have a `justify-items` or `justify-self` property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

 A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a `justify-self` property, however consider the image below. I have three items on one side and two on the other. If I were able to use `justify-self` on item *d*, it would also change the alignment of item *e* that follows, which may or may not be my intention.

  ![Five items, in two groups. Three on the left and two on the right.] 

 Instead we can target item 4 and separate it from the first three items by giving it a `margin-left` value of `auto`. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

 In this live example, I have flex items arranged into a row with the basic flex values, and the class `push` has `margin-left: auto`. You can try removing this, or adding the class to another item to see how it works.



Creating gaps between items
---------------------------



To create a gap between flex items, use the [`gap`](../gap), [`column-gap`](../column-gap), and [`row-gap`](../row-gap) properties. The [`column-gap`](../column-gap) property creates gaps between items on the main axis. The [`row-gap`](../row-gap) property creates gaps between flex lines, when you have [`flex-wrap`](../flex-wrap) set to `wrap`. The [`gap`](../gap) property is a shorthand that sets both together.



See also
--------


* [Box Alignment](../css_box_alignment)
* [Box Alignment in Flexbox](../css_box_alignment/box_alignment_in_flexbox)
* [Box Alignment in Grid Layout](../css_box_alignment/box_alignment_in_grid_layout)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container>

Box alignment in grid layout
============================



CSS Grid Layout implements the specification [Box Alignment Level 3](https://drafts.csswg.org/css-align/) which is the same standard [flexbox](../css_flexible_box_layout) uses for aligning items in its flex container. This specification details how alignment should work in all the different layout methods. Layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints). While the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the CSS Grid Layout method has been widely adopted.

 This guide presents demonstrations of how box alignment in grid layout works. You will see many similarities in how these properties and values work in flexbox. Due to grid being two-dimensional and flexbox one-dimensional there are some small differences that you should watch out for. So we will start by looking at the two axes that we deal with when aligning things in a grid.



The two axes of a grid layout
-----------------------------



When working with grid layout you have two axes available to align things against – the *block axis* and the *inline axis*. The block axis is the axis upon which blocks are laid out in block layout. If you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.

  ![Block axes are vertical.] 

 The *inline axis* runs across the block axis, it is the direction in which text in regular inline flow runs.

  ![Inline / row axis are horizontal.] 

 We are able to align the content inside grid areas, and the grid tracks themselves on these two axes.


Aligning items on the Block Axis
--------------------------------


The [`align-self`](../align-self) and [`align-items`](../align-items) properties control alignment on the block axis. When we use these properties, we are changing the alignment of the item within the grid area you have placed it.

### Using align-items



In the following example, I have four grid areas within my grid. I can use the [`align-items`](../align-items) property on the grid container, to align the items using one of the following values:

 * `auto`
* `normal`
* `start`
* `end`
* `center`
* `stretch`
* `baseline`
* `first baseline`
* `last baseline`

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```

 Keep in mind that once you set `align-items: start`, the height of each child `<div>` will be determined by the contents of the `<div>`. This is in contrast to omitting [`align-items`](../align-items) completely, in which case the height of each `<div>` stretches to fill its grid area.

 The [`align-items`](../align-items) property sets the [`align-self`](../align-self) property for all of the child grid items. This means that you can set the property individually, by using `align-self` on a grid item.


### Using align-self



In this next example, I am using the `align-self` property, to demonstrate the different alignment values. The first area, is showing the default behavior of `align-self`, which is to stretch. The second item, has an `align-self` value of `start`, the third `end` and the fourth `center`.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```


### Items with an intrinsic aspect ratio



The specification details that the default behavior in [`align-self`](../align-self) is to stretch, except for items which have an intrinsic aspect ratio, in this case they behave as `start`. The reason for this, is that if items with an aspect ratio are set to stretch, this default would distort them.

 This behavior has now been clarified in the specification, with browsers yet to implement the correct behavior. Until that happens, you can ensure that items do not stretch, such as images, which are direct children of the grid, by setting [`align-self`](../align-self) and [`justify-self`](../justify-self) to start. This will mimic the correct behavior once implemented.


Justifying Items on the Inline Axis
-----------------------------------



As [`align-items`](../align-items) and [`align-self`](../align-self) deal with the alignment of items on the block axis, [`justify-items`](../justify-items) and [`justify-self`](../justify-self) do the same job on the inline axis. The values you can choose from are the same as for `align-self`.

 * `auto`
* `normal`
* `start`
* `end`
* `center`
* `stretch`
* `baseline`
* `first baseline`
* `last baseline`

 You can see the same example as used for [`align-items`](../align-items), below. This time we are applying the [`justify-self`](../justify-self) property.

 Once again the default is `stretch`, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```

 As with [`align-self`](../align-self) and [`align-items`](../align-items), you can apply [`justify-items`](../justify-items) to the grid container, to set the [`justify-self`](../justify-self) value for all items.

 The [`justify-self`](../justify-self) and [`justify-items`](../justify-items) properties are not implemented in flexbox. This is due to the one-dimensional nature of [flexbox](../css_flexible_box_layout), and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the [`justify-content`](../justify-content) property.


### Shorthand properties



The [`place-items`](../place-items) property is shorthand for [`align-items`](../align-items) and [`justify-items`](../justify-items).

 The [`place-self`](../place-self) property is shorthand for [`align-self`](../align-self) and [`justify-self`](../justify-self).


Center an item in the area
--------------------------



By combining the align and justify properties we can easily center an item inside a grid area.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
</div>

```


Aligning the grid tracks on the block axis
------------------------------------------



If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with [`align-content`](../align-content) aligning tracks on the block axis, and [`justify-content`](../justify-content) performing alignment on the inline axis. The [`place-content`](../place-content) property is shorthand for [`align-content`](../align-content) and [`justify-content`](../justify-content). The values for [`align-content`](../align-content), [`justify-content`](../justify-content) and [`place-content`](../place-content) are:

 * `normal`
* `start`
* `end`
* `center`
* `stretch`
* `space-around`
* `space-between`
* `space-evenly`
* `baseline`
* `first baseline`
* `last baseline`

 In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.

 The `align-content` property is applied to the grid container as it works on the entire grid.


### Default alignment



The default behavior in grid layout is `start`, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:

 
```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```


### Setting align-content: end



If I add `align-content` to my container, with a value of `end`, the tracks all move to the end line of the grid container in the block dimension:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: end;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```


### Setting align-content: space-between



We can also use values for this property that you may be familiar with from flexbox; the space distribution values of `space-between`, `space-around` and `space-evenly`. If we update [`align-content`](../align-content) to `space-between`, you can see how the elements on our grid space out:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```

 It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We're always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.

 In the below image I have placed the grid with `align-content`, with a value of `start` alongside the grid when `align-content` has a value of `space-between`. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:

  ![Demonstrating how items become larger if we use space-between.] 


Justifying the grid tracks on the inline axis
---------------------------------------------



On the inline axis, we can use [`justify-content`](../justify-content) to perform the same type of alignment that we used [`align-content`](../align-content) for in the block axis.

 Using the same example, I am setting [`justify-content`](../justify-content) to `space-around`. This once again causes tracks which span more than one column track to gain extra space:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
  justify-content: space-around;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```


Alignment and auto margins
--------------------------



Another way to align items inside their area is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to `auto`, you know that an auto margin absorbs all of the available space. By setting the margin to `auto` on both sides, it pushes the block into the middle as both margins attempt to take all of the space.

 In this next example, I have given item 1 a left margin of `auto`. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
  margin-left: auto;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

```

 You can see how the item is aligned by using the [Firefox Grid Highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html):

  ![Image showing auto-margins using the Grid Highlighter.] 


Alignment and Writing Modes
---------------------------



In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.

 CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of `justify-content: start` would be for grid tracks to start on the right-hand side of the grid.

 Setting auto margins, using `margin-right` or `margin-left` however, or absolutely positioning items using the `top`, `right`, `bottom` and `left` offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout>

<alpha-value>
=============


The `<alpha-value>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a value that can be either a [`<number>`](number) or a [`<percentage>`](percentage), specifying the **[alpha channel](https://developer.mozilla.org/en-US/docs/Glossary/Alpha)** or **transparency** of a color.


Syntax
------



The value of an `<alpha-value>` is given as either a [`<number>`](number) or a [`<percentage>`](percentage).

 If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are [clamped](https://en.wikipedia.org/wiki/Clamping_(graphics)) to lie within the range 0 to 1.

 If the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque.


Formal syntax
-------------



```
<alpha-value> =   
  [<number>](number)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Interpolation
-------------


When animated, values of the `<alpha-value>` CSS data type are [interpolated](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](easing-function) associated with the animation.

Examples
--------


### Setting text color opacity



Here an alpha value is used to set partially transparent text:

 
```
/\* <rgba()> \*/
color: rgba(34, 12, 64, 0.6);
color: rgba(34 12 64 / 60%);

```

### Setting shape image threshold



Here an alpha value is used to determine which parts of an image are considered part of a shape:

 
```
/\* shape-image-threshold \*/
shape-image-threshold: 70%;
shape-image-threshold: 0.7;

```

Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # type-def-alpha-value](https://drafts.csswg.org/css-color/#type-def-alpha-value) |


See also
--------


* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
* [CSS data types](css_types)
* [CSS Color](css_colors)
* [`<color>`](color_value)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value>

<hue>
=====



 The `<hue>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents a value that can be either a [`<number>`](number) or an [`<angle>`](angle) specifying a hue angle (a cylindrical polar color) in degrees of a full circle. It is used in the color functions that accept hue expressed as a single value, specifically [`hsl()`](color_value/hsl), [`hwb()`](color_value/hwb), [`lch()`](color_value/lch), and [`oklch()`](color_value/oklch) functional notations. 

  **Note:** The angles corresponding to particular hues depend on the color space. For example, green in [`hsl()`](color_value/hsl) and [`hwb()`](color_value/hwb), which use the [sRGB](https://en.wikipedia.org/wiki/SRGB) color space, is at `120deg`. In [`lch()`](color_value/lch), which uses the CIELAB color wheel, green is at `134.39deg`.

   ![A sRGB color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors] 

 In the sRGB color space, for [`hsl()`](color_value/hsl) and [`hwb()`](color_value/hwb), *red* is `0deg`, *yellow* is `60deg`, *green* is `120deg`, *cyan* is `180deg`, *blue* is `240deg`, and *magenta* is `300deg`.



Syntax
------



```
/\* hsl(<hue> <saturation> <lightness>) \*/
hsl(270 100% 50%);
hsl(270deg 100% 50%);
hsl(300grad 100% 50%);
hsl(0.75turn 100% 50%);
hsl(4.71rad 100% 50%);

/\* hwb(<hue> <whiteness> <blackness>) \*/
hwb(270 0% 0%);
/\* lch(<hue> <chroma> <lightness>) \*/
lch(39.35 121.2% -51.94%);
/\* … \*/

```
### Values



 `<angle>`  An [`<angle>`](angle) values expressed in degrees, gradians, radians, or turns using the `deg`, `grad`, `rad`, or `turn`, respectively.

  `<number>`  An integer or floating point number, representing degrees of the hue angle.

   As an `<angle>` is periodic, normalized to the range of `0deg` to `360deg`. It implicitly wraps around such that `480deg` is the same as `120deg`, `-120deg` is the same as `240deg`, `-1turn` is the same as `1turn`, and so on.


### Formal syntax



```
<hue> =   
  [<number>](number)  [|](value_definition_syntax#single_bar)  
  [<angle>](angle)     
  

```
Examples
--------


### Changing the hue of a color using a slider



The following example shows the effect of changing the `hue` value of the [`hsl()`](color_value/hsl) functional notation on a color.

 
```
<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>Hue: <span id="hue-value">0deg</span></p>
<div id="box"></div>

```
 
```
#box {
  background-color: hsl(0 100% 50%);
}

```
 
```
const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
  box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});

```


### Approximating red hues in different color spaces



 The following example shows a similar red color in different color spaces. The values in the `lch()` and `oklch()` functions are rounded for readability. 

 
```
<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>

```
 
```
[data-color="hsl-red"] {
  /\* hsl(<hue> <saturation> <lightness>) \*/
  background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
  /\* hwb(<hue> <whiteness> <blackness>) \*/
  background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
  /\* lch(<lightness> <chroma> <hue>) \*/
  background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
  /\* oklch(<lightness> <chroma> <hue>) \*/
  background-color: oklch(0.6 0.4 20);
}

```


### Interpolating hue values



 The [`color-mix()`](color_value/color-mix) functional notation can be used to interpolate the hue of two colors. Four methods are available for interpolating the hue value: `shorter`, `longer`, `increasing`, and `decreasing`. The `shorter` method is the default for interpolation and the result will be the shortest distance between the two angles in degrees. Conversely, `longer` uses the larger value between the two hue angles. 

  **Note:** For more information on using this functional notation, see the [`color-mix()`](color_value/color-mix) reference.

  
```
<div id="shorter"></div>
<div id="longer"></div>

```
 
```
/\* 20 degrees \*/
#shorter {
  background-color: color-mix(
    in hsl shorter hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

/\* 340 degrees \*/
#longer {
  background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # typedef-hue](https://drafts.csswg.org/css-color/#typedef-hue) |


Browser compatibility
---------------------


See also
--------


* [`<color>`](color_value)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hue>

<calc-constant>
===============


The `<calc-constant>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) represents well-defined constants such as `e` and `π`. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.


Syntax
------


The `<calc-constant>` type defines numeric constants that can be used in [CSS math functions](css_functions#math_functions).

### Values


 `e`  The base of the natural logarithm, approximately equal to `2.7182818284590452354`.

  `pi`  The ratio of a circle's circumference to its diameter, approximately equal to `3.1415926535897932`.

  
`infinity` & `-infinity`  Experimental 
  An infinite value, used to indicate the largest/smallest possible value.

  
`NaN`  Experimental 
  A value representing "Not a Number" canonical casing.

  ### Formal syntax



```
<calc-constant> =   
  e          [|](value_definition_syntax#single_bar)  
  pi         [|](value_definition_syntax#single_bar)  
  infinity   [|](value_definition_syntax#single_bar)  
  -infinity  [|](value_definition_syntax#single_bar)  
  NaN          
  

```
Description
-----------



Mathematical constants can only be used inside [CSS math functions](css_functions#math_functions) for calculations. Math constants are not CSS keywords, but if they are used outside of a calculation, they're treated like any other keyword.

 For example:

 * `animation-name: pi;` refers to an animation named "pi", not the `pi` numeric constant.
* `line-height: e;` is invalid, but `line-height: calc(e);` is valid.
* `rotate(1rad * pi);` won't work because [`rotate()`](transform-function/rotate) is not a math function. Use `rotate(calc(1rad * pi));`

 In math functions, `<calc-constant>` values are evaluated as [`<number>`](number) values, therefore `e` and `pi` act as numeric constants.

 Both `infinity` and `NaN` are slightly different, they are considered as degenerate numeric constants. While not technically numbers, they act as [`<number>`](number) values. Thus to get an infinite [`<length>`](length), for example, requires an expression like `calc(infinity * 1px)`.

 The `infinity` and `NaN` values are included mostly to make serialization simpler and more obvious, but can be used to indicate a "largest possible value", since an infinite value gets clamped to the allowed range. It's rare for this to be reasonable, but when using infinity its much simpler than just putting an enormous number in a stylesheet.

 CSS constants are case-insensitive. Thus, `calc(Pi)`, `calc(E)` and `calc(InFiNiTy)` are all valid.

 There is only one exception: `NaN` is case-sensitive and must be written exactly as `NaN`. Both `nan` and `NAN` are invalid constants.

 Valid values:

 
```
e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

```
 Invalid values:

 
```
nan
Nan
NAN

```

Specifications
--------------




| Specification |
| --- |
| [CSS Values and Units Module Level 4 # calc-constants](https://w3c.github.io/csswg-drafts/css-values/#calc-constants) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `NaN` | No | No | 108 | No | No | No | No | No | 108 | No | No | No |
| `calc-constant` | No | No | 108 | No | No | 15.4 | No | No | 108 | No | 15.4 | No |
| `e` | No | No | 108 | No | No | 15.4 | No | No | 108 | No | 15.4 | No |
| `infinity` | No | No | 108 | No | No | No | No | No | 108 | No | No | No |
| `pi` | No | No | 108 | No | No | 15.4 | No | No | 108 | No | 15.4 | No |


See also
--------


* [`<calc-sum>`](calc-sum)
* `<calc-product>`
* `<calc-value>`


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/calc-constant>

CSS Conditional Rules
=====================


**CSS Conditional Rules** is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.


Reference
---------


### At-rules


* [`@document`](@document)
* [`@media`](@media)
* [`@supports`](@supports)
* [`@import`](@import)
Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 5 # at-import](https://w3c.github.io/csswg-drafts/css-cascade-5/#at-import) |
| [Media Queries Level 4 # media-descriptor-table](https://w3c.github.io/csswg-drafts/mediaqueries/#media-descriptor-table) |
| [CSS Conditional Rules Module Level 3 # at-media](https://w3c.github.io/csswg-drafts/css-conditional-3/#at-media) |
| [CSS Conditional Rules Module Level 4 # at-supports-ext](https://w3c.github.io/csswg-drafts/css-conditional-4/#at-supports-ext) |
| [CSS Conditional Rules Module Level 3 # at-supports](https://w3c.github.io/csswg-drafts/css-conditional-3/#at-supports) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Conditional_Rules` | No | No | 61Only supports an empty `url-prefix()` value, which is supported due to its [use in Firefox browser detection](https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/). Still supported in user stylesheets.1.5–61 | No | No | No | No | No | 61Only supports an empty `url-prefix()` value, which is supported due to its [use in Firefox browser detection](https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/). Still supported in user stylesheets.4–61 | No | No | No |
| `regexp` | No | No | 6–61 | No | No | No | No | No | 6–61 | No | No | No |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Conditional_Rules` | 28 | 12 | 22 | No | 12.1 | 9 | 4.4 | 28 | 22 | 12.1 | 9 | 1.5 |
| `font-format` | No | No | 106 | No | No | No | No | No | 106 | No | No | No |
| `font-tech` | No | No | 106 | No | No | No | No | No | 106 | No | No | No |
| `selector` | 83 | 83 | 69 | No | 69 | 14.1 | 83 | 83 | 79 | NoSee [bug 979041](https://crbug.com/979041). | 14.5 | 13.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-device-pixel-ratio` | No | No | 4 | No | No | No | No | No | 4 | No | No | No |
| `-webkit-animation` | 2–36 | No | No | No | 15–23 | 4 | 2–37 | 18–36 | No | 14–24 | 3.2 | 1.0–3.0 |
| `-webkit-device-pixel-ratio` | 1 | 12 | 63Implemented as an alias for `-moz-device-pixel-ratio`. | No | 15 | 3 | ≤37 | 18 | 63Implemented as an alias for `-moz-device-pixel-ratio`. | 14 | 1 | 1.0 |
| `-webkit-max-device-pixel-ratio` | 1 | 12 | 63Implemented as an alias for `max--moz-device-pixel-ratio`. | No | 15 | 3 | ≤37 | 18 | 63Implemented as an alias for `max--moz-device-pixel-ratio`. | 14 | 1 | 1.0 |
| `-webkit-min-device-pixel-ratio` | 1 | 12 | 63Implemented as an alias for `min--moz-device-pixel-ratio`. | No | 15 | 3 | ≤37 | 18 | 63Implemented as an alias for `min--moz-device-pixel-ratio`. | 14 | 1 | 1.0 |
| `-webkit-transform-2d` | 2–36 | No | No | No | 15–23 | 4 | 2–37 | 18–36 | No | 14–24 | 3.2 | 1.0–3.0 |
| `-webkit-transform-3d` | 2 | 12 | 49 | No | 15 | 4 | 4.4 | 18 | 49 | 14 | 3.2 | 1.0 |
| `-webkit-transition` | 2–36 | No | No | No | 15–23 | 4 | 2–37 | 18–36 | No | 14–24 | 3.2 | 1.0–3.0 |
| `CSS_Conditional_Rules` | 1 | 12 | 1 | 6 | 9.2 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `any-hover` | 41 | 16 | 64 | No | 28 | 9 | 41 | 41 | 64 | 28 | 9 | 5.0 |
| `any-pointer` | 41 | 12 | 64 | No | 28 | 9 | 41 | 41 | 64 | 28 | 9 | 4.0 |
| `aspect-ratio` | 3 | 12 | 3.5 | 9 | 10 | 5 | ≤37 | 18 | 4 | 10.1 | 4.2 | 1.0 |
| `calc` | 66 | 79 | 59 | No | 53 | 12 | 66 | 66 | 59 | 47 | 12 | 9.0 |
| `color` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `color-gamut` | 58 | 79 | 110 | No | 45 | 10 | 58 | 58 | 110 | 43 | 10 | 7.0 |
| `color-index` | 29 | 79 | No | No | 16 | 8 | 4.4 | 29 | No | 16 | 8 | 2.0 |
| `device-aspect-ratio` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `device-height` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `device-width` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `display-mode` | 42 | 79 | 47Firefox 47 and later support `display-mode` values `fullscreen` and `browser`. Firefox 57 added support for `minimal-ui` and `standalone` values. | No | 29 | 13 | 42 | 42 | 47Firefox 47 and later support `display-mode` values `fullscreen` and `browser`. Firefox 57 added support for `minimal-ui` and `standalone` values. | 29 | 12.2 | 4.0 |
| `dynamic-range` | 98 | 98 | 100 | No | 84 | 13.1 | 98 | 98 | 100 | 68 | 13.4 | 18.0 |
| `forced-colors` | 89 | 79 | 89 | No | No | No | NoSee [bug 970285](https://crbug.com/970285). | NoSee [bug 970285](https://crbug.com/970285). | 89 | No | No | NoSee [bug 970285](https://crbug.com/970285). |
| `grid` | 1 | 12 | 2 | 10 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `height` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `hover` | 38Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See [bug 441613](https://crbug.com/441613). | 12 | 64 | No | 28 | 9 | 38Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See [bug 441613](https://crbug.com/441613). | 50 | 64 | 28 | 9 | 5.0 |
| `inverted-colors` | No | No | No | No | No | 9.1 | No | No | No | No | 10 | No |
| `media_features` | 1 | 12 | 1 | 9 | 9.2 | 3 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `media_query_values` | 66 | 79 | 59 | No | 53 | No | 66 | 66 | 59 | 47 | No | 9.0 |
| `monochrome` | 1 | 79 | 2 | No | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `nested-queries` | 26 | 12 | 11 | No | 12.1 | 7 | 4.4 | 26 | 14 | 12.1 | 7 | 1.5 |
| `orientation` | 3 | 12 | 2 | 9 | 10.6 | 5 | ≤37 | 18 | 4 | 11 | 4.2 | 1.0 |
| `overflow-block` | 113 | 113 | 66 | No | No | No | 113 | 113 | 66 | No | No | No |
| `overflow-inline` | 113 | 113 | 66 | No | No | No | 113 | 113 | 66 | No | No | No |
| `pointer` | 41 | 12 | 64 | No | 28 | 9 | 41 | 50 | 64 | 28 | 9 | 5.0 |
| `prefers-color-scheme` | 76 | 79 | 67 | No | 62 | 12.1 | 76 | 76 | 67 | 54 | 13 | 14.2 |
| `prefers-contrast` | 96 | 96 | 101 | No | 82 | 14.1 | 96 | 96 | 101 | No | 14.5 | 17.0 |
| `prefers-reduced-data` | 85See [bug 1051189](https://crbug.com/1051189). | 85See [bug 1051189](https://crbug.com/1051189). | No | No | 71See [bug 1051189](https://crbug.com/1051189). | No | NoSee [bug 1051189](https://crbug.com/1051189). | 85See [bug 1051189](https://crbug.com/1051189). | No | No | No | No |
| `prefers-reduced-motion` | 74 | 79 | 63 | No | 62 | 10.1 | 74 | 74 | 64 | 53 | 10.3 | 11.0 |
| `prefers-reduced-transparency` | No | No | 113 | No | No | No | No | No | No | No | No | No |
| `range_syntax` | 104 | 104 | 10263Only supports range notations where the feature name comes before any value `(width > 500px)` | No | 90 | 16.4 | 104 | 104 | 10263Only supports range notations where the feature name comes before any value `(width > 500px)` | 71 | 16.4 | 20.0 |
| `resolution` | 29 | 12 | 83.5Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 9 | 1610–15 | 16 | 4.4 | 29 | 84Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 1610.1–14 | 16 | 2.0 |
| `scripting` | NoSee [bug 489957](https://crbug.com/489957). | NoSee [bug 489957](https://crbug.com/489957). | 113 | No | No | No | NoSee [bug 489957](https://crbug.com/489957). | NoSee [bug 489957](https://crbug.com/489957). | 113 | No | No | NoSee [bug 489957](https://crbug.com/489957). |
| `update` | 113 | 113 | 102 | No | No | No | 113 | 113 | 102 | No | No | No |
| `video-dynamic-range` | No | No | 100 | No | No | No | No | No | 100 | No | No | No |
| `width` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Conditional_Rules` | 1 | 12 | 1 | 5.5 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `layer` | 99 | 99 | 97 | No | 85 | 15.4 | 99 | 99 | 97 | 68 | 15.4 | 18.0 |

### css.at-rules.import


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.at-rules.media


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.at-rules.supports


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.at-rules.document


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules>

@color-profile
==============


The `@color-profile` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> defines and names a color profile which can later be used in the [`color()`](color_value/color) function to specify a color.


Syntax
------



```
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}

```
### Descriptors


 `src`  Specifies the URL to retrieve the color-profile information from.

  `rendering-intent`  If the color profile contains more than one rendering intent, this descriptor allows one to be selected as the one to use to define how to map the color to smaller [gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut)s than this profile is defined over.

 If used, it must be one of the following keywords:

  `relative-colorimetric`  Media-relative colorimetric is required to leave source colors that fall inside the destination medium [gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut) unchanged relative to the respective media white points. Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.

  `absolute-colorimetric`  ICC-absolute colorimetric is required to leave source colors that fall inside the destination medium [gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut) unchanged relative to the adopted white (a perfect reflecting diffuser). Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.

  `perceptual`  This method is often the preferred choice for images, especially when there are substantial differences between the source and destination (such as a screen display image reproduced on a reflection print). It takes the colors of the source image and re-optimizes the appearance for the destination medium using proprietary methods.

  `saturation`  This option was created to preserve the relative saturation (chroma) of the original, and to keep solid colors pure. However, it experienced interoperability problems like the perceptual intent.

    Examples
--------



This example is from the specification and demonstrates using offset printing to ISO 12647-2:2004 using the CGATS/SWOP TR005 2007 characterization data on grade 5 paper with an ink limit of 300% Total Area Coverage, and medium gray component replacement (GCR).

 The `src` descriptor specifies the URL to retrieve the color-profile information from.

 
```
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
.header {
  background-color: color(--swop5c 0% 70% 20% 0%);
}

```

Formal syntax
-------------



```
@color-profile =   
  @color-profile [[](value_definition_syntax#brackets) [<dashed-ident>](dashed-ident) [|](value_definition_syntax#single_bar) device-cmyk []](value_definition_syntax#brackets) { [<declaration-list>](declaration-list) }    
  

```
Specifications
--------------



**No specification found**No specification data found for `css.at-rules.color-profile`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@color-profile>

@font-palette-values
====================


The `@font-palette-values` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> allows you to customize the default values of <font-palette> created by the font-maker.


Syntax
------




```
@font-palette-values --identifier {
  font-family: Bixa;
}
.my-class {
  font-palette: --identifier;
}

```
 The [<dashed-ident>](dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](using_css_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](var()).


### Descriptors


 [font-family](@font-palette-values/font-family)  Specifies the name of the font family that this palette can be applied to.

  [base-palette](@font-palette-values/base-palette)  Specifies the name or index of the base-palette, created by the font-maker, to use.

  [override-colors](@font-palette-values/override-colors)  Specifies the colors in the base palette to override.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
@font-palette-values =   
  @font-palette-values [<dashed-ident>](dashed-ident) { [<declaration-list>](declaration-list) }    
  

```
Examples
--------


### Overriding colors in an existing palette



This example shows how you can change some or all of the colors in a color font.

 #### HTML

 
```
<p>default colors</p>
<p class="alternate">alternate colors</p>

```
 #### CSS

 
```
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
p {
  font-family: "Bungee Spice";
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors: 0 #00ffbb, 1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

```
 #### Result

 When overriding colors of the normal or base-palette at index 0 you do not need to declare which base-palette to use. This should only be done when overriding a different base-palette. If you are overriding all the colors then there is also no need to specify the base-palette to use.



Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # at-ruledef-font-palette-values](https://w3c.github.io/csswg-drafts/css-fonts/#at-ruledef-font-palette-values) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@font-palette-values` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |
| `base-palette` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |
| `font-family` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |
| `override-colors` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |


See also
--------


* [`font-palette`](font-palette) property
* [`font-family`](@font-palette-values/font-family) descriptor
* [`base-palette`](@font-palette-values/base-palette) descriptor
* [`override-colors`](@font-palette-values/override-colors) descriptor
* [`CSSFontPaletteValuesRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values>

Animatable CSS properties
=========================



A CSS property is *animatable* if its value can be made to change over a given amount of time. **Certain CSS properties can be animated** using [CSS Animations](css_animations) or [CSS Transitions](css_transitions). CSS properties that define animation parameters such as <animation-direction> and <animation-name> are not animatable because animating them would create complex recursive behavior.

  **Note:** To check whether or not a CSS property can be animated, see the "Formal definition" section on the property's page on MDN Web Docs. For example, check out the "Animation type" field in the "Formal definition" section for [padding-bottom](padding-bottom#formal_definition) and [animation-direction](animation-direction#formal_definition).

  The following CSS properties are animatable:


 * [`-moz-outline-radius`](-moz-outline-radius)
* [`-moz-outline-radius-bottomleft`](-moz-outline-radius-bottomleft)
* [`-moz-outline-radius-bottomright`](-moz-outline-radius-bottomright)
* [`-moz-outline-radius-topleft`](-moz-outline-radius-topleft)
* [`-moz-outline-radius-topright`](-moz-outline-radius-topright)
* [`-ms-grid-columns`](grid-template-columns)
* [`-ms-grid-rows`](grid-template-rows)
* [`-webkit-line-clamp`](-webkit-line-clamp)
* [`-webkit-text-fill-color`](-webkit-text-fill-color)
* [`-webkit-text-stroke`](-webkit-text-stroke)
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color)
* [`accent-color`](accent-color)
* [`all`](all)
* [`backdrop-filter`](backdrop-filter)
* [`background`](background)
* [`background-color`](background-color)
* [`background-position`](background-position)
* [`background-size`](background-size)
* [`block-size`](block-size)
* [`border`](border)
* [`border-block-end`](border-block-end)
* [`border-block-end-color`](border-block-end-color)
* [`border-block-end-width`](border-block-end-width)
* [`border-block-start`](border-block-start)
* [`border-block-start-color`](border-block-start-color)
* [`border-block-start-width`](border-block-start-width)
* [`border-bottom`](border-bottom)
* [`border-bottom-color`](border-bottom-color)
* [`border-bottom-left-radius`](border-bottom-left-radius)
* [`border-bottom-right-radius`](border-bottom-right-radius)
* [`border-bottom-width`](border-bottom-width)
* [`border-color`](border-color)
* [`border-end-end-radius`](border-end-end-radius)
* [`border-end-start-radius`](border-end-start-radius)
* [`border-image-outset`](border-image-outset)
* [`border-image-slice`](border-image-slice)
* [`border-image-width`](border-image-width)
* [`border-inline-end`](border-inline-end)
* [`border-inline-end-color`](border-inline-end-color)
* [`border-inline-end-width`](border-inline-end-width)
* [`border-inline-start`](border-inline-start)
* [`border-inline-start-color`](border-inline-start-color)
* [`border-inline-start-width`](border-inline-start-width)
* [`border-left`](border-left)
* [`border-left-color`](border-left-color)
* [`border-left-width`](border-left-width)
* [`border-radius`](border-radius)
* [`border-right`](border-right)
* [`border-right-color`](border-right-color)
* [`border-right-width`](border-right-width)
* [`border-start-end-radius`](border-start-end-radius)
* [`border-start-start-radius`](border-start-start-radius)
* [`border-top`](border-top)
* [`border-top-color`](border-top-color)
* [`border-top-left-radius`](border-top-left-radius)
* [`border-top-right-radius`](border-top-right-radius)
* [`border-top-width`](border-top-width)
* [`border-width`](border-width)
* [`bottom`](bottom)
* [`box-shadow`](box-shadow)
* `caret`
* [`caret-color`](caret-color)
* `caret-shape`
* [`clip`](clip)
* [`clip-path`](clip-path)
* [`color`](color)
* [`column-count`](column-count)
* [`column-gap`](column-gap)
* [`column-rule`](column-rule)
* [`column-rule-color`](column-rule-color)
* [`column-rule-width`](column-rule-width)
* [`column-width`](column-width)
* [`columns`](columns)
* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-height`](contain-intrinsic-height)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)
* [`contain-intrinsic-size`](contain-intrinsic-size)
* [`contain-intrinsic-width`](contain-intrinsic-width)
* [`filter`](filter)
* [`flex`](flex)
* [`flex-basis`](flex-basis)
* [`flex-grow`](flex-grow)
* [`flex-shrink`](flex-shrink)
* [`font`](font)
* [`font-size`](font-size)
* [`font-size-adjust`](font-size-adjust)
* [`font-stretch`](font-stretch)
* [`font-variation-settings`](font-variation-settings)
* [`font-weight`](font-weight)
* [`gap`](gap)
* [`grid-column-gap`](column-gap)
* [`grid-gap`](gap)
* [`grid-row-gap`](row-gap)
* [`grid-template-columns`](grid-template-columns)
* [`grid-template-rows`](grid-template-rows)
* [`height`](height)
* [`inline-size`](inline-size)
* `input-security`
* [`inset`](inset)
* [`inset-block`](inset-block)
* [`inset-block-end`](inset-block-end)
* [`inset-block-start`](inset-block-start)
* [`inset-inline`](inset-inline)
* [`inset-inline-end`](inset-inline-end)
* [`inset-inline-start`](inset-inline-start)
* [`left`](left)
* [`letter-spacing`](letter-spacing)
* `line-clamp`
* [`line-height`](line-height)
* [`margin`](margin)
* [`margin-block`](margin-block)
* [`margin-block-end`](margin-block-end)
* [`margin-block-start`](margin-block-start)
* [`margin-bottom`](margin-bottom)
* [`margin-inline`](margin-inline)
* [`margin-inline-end`](margin-inline-end)
* [`margin-inline-start`](margin-inline-start)
* [`margin-left`](margin-left)
* [`margin-right`](margin-right)
* [`margin-top`](margin-top)
* [`mask`](mask)
* [`mask-border`](mask-border)
* [`mask-position`](mask-position)
* [`mask-size`](mask-size)
* [`max-block-size`](max-block-size)
* [`max-height`](max-height)
* [`max-inline-size`](max-inline-size)
* `max-lines`
* [`max-width`](max-width)
* [`min-block-size`](min-block-size)
* [`min-height`](min-height)
* [`min-inline-size`](min-inline-size)
* [`min-width`](min-width)
* [`object-position`](object-position)
* [`offset`](offset)
* [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)
* [`offset-rotate`](offset-rotate)
* [`opacity`](opacity)
* [`order`](order)
* [`outline`](outline)
* [`outline-color`](outline-color)
* [`outline-offset`](outline-offset)
* [`outline-width`](outline-width)
* [`padding`](padding)
* [`padding-block`](padding-block)
* [`padding-block-end`](padding-block-end)
* [`padding-block-start`](padding-block-start)
* [`padding-bottom`](padding-bottom)
* [`padding-inline`](padding-inline)
* [`padding-inline-end`](padding-inline-end)
* [`padding-inline-start`](padding-inline-start)
* [`padding-left`](padding-left)
* [`padding-right`](padding-right)
* [`padding-top`](padding-top)
* [`perspective`](perspective)
* [`perspective-origin`](perspective-origin)
* [`right`](right)
* [`rotate`](rotate)
* [`row-gap`](row-gap)
* [`scale`](scale)
* [`scroll-margin`](scroll-margin)
* [`scroll-margin-block`](scroll-margin-block)
* [`scroll-margin-block-end`](scroll-margin-block-end)
* [`scroll-margin-block-start`](scroll-margin-block-start)
* [`scroll-margin-bottom`](scroll-margin-bottom)
* [`scroll-margin-inline`](scroll-margin-inline)
* [`scroll-margin-inline-end`](scroll-margin-inline-end)
* [`scroll-margin-inline-start`](scroll-margin-inline-start)
* [`scroll-margin-left`](scroll-margin-left)
* [`scroll-margin-right`](scroll-margin-right)
* [`scroll-margin-top`](scroll-margin-top)
* [`scroll-padding`](scroll-padding)
* [`scroll-padding-block`](scroll-padding-block)
* [`scroll-padding-block-end`](scroll-padding-block-end)
* [`scroll-padding-block-start`](scroll-padding-block-start)
* [`scroll-padding-bottom`](scroll-padding-bottom)
* [`scroll-padding-inline`](scroll-padding-inline)
* [`scroll-padding-inline-end`](scroll-padding-inline-end)
* [`scroll-padding-inline-start`](scroll-padding-inline-start)
* [`scroll-padding-left`](scroll-padding-left)
* [`scroll-padding-right`](scroll-padding-right)
* [`scroll-padding-top`](scroll-padding-top)
* [`scroll-snap-coordinate`](scroll-snap-coordinate)
* [`scroll-snap-destination`](scroll-snap-destination)
* [`scroll-timeline`](scroll-timeline)
* [`scrollbar-color`](scrollbar-color)
* [`shape-image-threshold`](shape-image-threshold)
* [`shape-margin`](shape-margin)
* [`shape-outside`](shape-outside)
* [`tab-size`](tab-size)
* [`text-decoration`](text-decoration)
* [`text-decoration-color`](text-decoration-color)
* [`text-decoration-thickness`](text-decoration-thickness)
* [`text-emphasis`](text-emphasis)
* [`text-emphasis-color`](text-emphasis-color)
* [`text-indent`](text-indent)
* [`text-shadow`](text-shadow)
* [`text-underline-offset`](text-underline-offset)
* [`top`](top)
* [`transform`](transform)
* [`transform-origin`](transform-origin)
* [`translate`](translate)
* [`vertical-align`](vertical-align)
* [`visibility`](visibility)
* [`width`](width)
* [`word-spacing`](word-spacing)
* [`z-index`](z-index)
* [`zoom`](zoom)

 


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties>

prefers-reduced-motion
======================



 **Warning:** An embedded example at the bottom of this page has a scaling movement that may be problematic for some readers. Readers with vestibular motion disorders may wish to enable the reduce motion feature on their device before viewing the animation.

  The `prefers-reduced-motion` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses.

 
```
@media (prefers-reduced-motion) {
  /\* styles to apply if the user's settings are set to reduced motion \*/
}

```


Syntax
------


 `no-preference`  Indicates that the user has made no preference known to the system.

  `reduce`  Indicates that user has notified the system that they prefer an interface that removes or replaces the types of motion-based animation that trigger discomfort for those with vestibular motion disorders.

  User preferences
----------------



For Firefox, the `reduce` request is honoured if:

 * In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
	+ Alternatively, add `gtk-enable-animations = false` to the `[Settings]` block of [the GTK 3 configuration file](https://wiki.archlinux.org/title/GTK#Configuration).
* In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".
* In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
* In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
* In macOS: System Preferences > Accessibility > Display > Reduce motion.
* In iOS: Settings > Accessibility > Motion.
* In Android 9+: Settings > Accessibility > Remove animations.
* In Firefox `about:config`: Add a number preference called `ui.prefersReducedMotion` and set its value to either `0` for full animation or to `1` to indicate a preference for reduced motion. Changes to this preference take effect immediately.


Examples
--------


This example has a scaling animation by default. If Reduce Motion is enabled in your accessibility preferences, the animation is toned down to a simple dissolve without vestibular motion triggers.

### HTML



```
<div class="animation">animated box</div>

```
### CSS




```
.animation {
  animation: pulse 1s linear infinite both;
}

/\* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. \*/
@media (prefers-reduced-motion) {
  .animation {
    animation: dissolve 2s linear infinite both;
  }
}

```

### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # prefers-reduced-motion](https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-reduced-motion) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `prefers-reduced-motion` | 74 | 79 | 63 | No | 62 | 10.1 | 74 | 74 | 64 | 53 | 10.3 | 11.0 |


See also
--------


* [An Introduction to the Reduced Motion Media Query (CSS Tricks)](https://css-tricks.com/introduction-reduced-motion-media-query/)
* [Responsive Design for Motion (WebKit Blog)](https://webkit.org/blog/7551/responsive-design-for-motion/) includes vestibular motion trigger examples.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion>

@container
==========



 The `@container` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) <at-rule> is a conditional group rule that applies styles to a [containment context](css_container_queries#naming_containment_contexts). Style declarations are filtered by a condition and applied to the container if the condition is true. The condition is evaluated when the container changes size. 

  An optional case-sensitive [`container-name`](container-name) can be provided which filters the set of query containers considered to just those with a matching query container name. Once an eligible query container has been selected for an element, each container feature in the `<container-condition>` is evaluated against that query container. 



Syntax
------



The `@container` at-rule has the following syntax:

 
```
@container <container-condition> {
  <stylesheet>
}

```
 For example:

 
```
@container (width > 400px) {
  h2 {
    font-size: 1.5em;
  }
}

```

### Values


 `<container-condition>`   A set of features that are evaluated against the query container when the size of the container changes. Styles defined in the `<stylesheet>` are applied if the condition is true. 

  `<stylesheet>`  A set of CSS declarations.

  ### Logical keywords in container queries



Logical keywords can be used to define the container condition:

 * `and` combines two or more conditions.
* `or` combines two or more conditions.
* `not` negates the condition. Only one 'not' condition is allowed per container query and cannot be used with the `and` or `or` keywords.

 
```
@container not (width < 400px) {
  /\* <stylesheet> \*/
}

@container (width > 400px) and (height > 400px) {
  /\* <stylesheet> \*/
}

@container (width > 400px) or (height > 400px) {
  /\* <stylesheet> \*/
}

@container (width > 400px) not (height > 400px) {
  /\* <stylesheet> \*/
}

```

### Named containment contexts



A containment context can be named using the [`container-name`](container-name) property.

 
```
.post {
  container-name: sidebar;
  container-type: inline-size;
}

```
 The shorthand syntax for this is to use [`container`](container) in the form `container: <name> / <type>`, for example:

 
```
.post {
  container: sidebar / inline-size;
}

```
 In container queries, the [`container-name`](container-name) property is used to filter the set of containers to those with a matching query container name:

 
```
@container sidebar (width > 400px) {
  /\* <stylesheet> \*/
}

```
 Details about usage and naming restrictions are described in the [`container-name`](container-name) page.


### Descriptors



The following descriptors can be used within the container condition:

  `aspect-ratio`  The [`aspect-ratio`](aspect-ratio) of the container calculated as the width to the height of the container expressed as a [`<ratio>`](ratio) value.

  `block-size`  The [`block-size`](block-size) of the container expressed as a [`<length>`](length) value.

  `height`  The height of the container expressed as a [`<length>`](length) value.

  `inline-size`  The [`inline-size`](inline-size) of the container expressed as a [`<length>`](length) value.

  `orientation`  The [orientation](@media/orientation) of the container, either `landscape` or `portrait`.

  `width`  The width of the container expressed as a [`<length>`](length) value.

  
Examples
--------


### Setting styles based on a container's size



Consider the following example of a card component with a title and some text:

 
```
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

```
  A container context can be created using the `container-type` property, in this case using the `inline-size` value on the `.post` class. You can then use the `@container` at-rule to apply styles to the element with the `.card` class in a container that's narrower than `650px`. 

 
```
/\* A container context based on inline size \*/
.post {
  container-type: inline-size;
}

/\* Apply styles if the container is narrower than 650px \*/
@container (width < 650px) {
  .card {
    width: 50%;
    background-color: gray;
    font-size: 1em;
  }
}

```


### Creating named container contexts



Given the following HTML example which is a card component with a title and some text:

 
```
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

```
  First, create a container context using the `container-type` and `container-name` properties. The shorthand syntax for this declaration is described in the [`container`](container) page. 

 
```
.post {
  container-type: inline-size;
  container-name: summary;
}

```
 Next, target that container by adding the name to the container query:

 
```
@container summary (min-width: 400px) {
  .card {
    font-size: 1.5em;
  }
}

```

### Nested container queries



 It's not possible to target multiple containers in a single container query. It is possible to nest container queries which has the same effect. 

 The following query evaluates to true and applies the declared style if the container named `summary` is wider than `400px` and has an ancestor container wider than `800px`:

 
```
@container summary (min-width: 400px) {
  @container (min-width: 800px) {
    /\* <stylesheet> \*/
  }
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 3 # container-rule](https://w3c.github.io/csswg-drafts/css-contain-3/#container-rule) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `@container` | 105 | 105 | 110 | No | 91 | 16 | 105 | 105 | 110 | 72 | 16 | 20.0 |
| `style_queries_for_custom_properties` | 111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | No |


See also
--------


* [Container queries](css_container_queries)
* [`container-name`](container-name)
* [`container-type`](container-type)
* [`contain`](contain)
* [`content-visibility`](content-visibility)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@container>

Using CSS transitions
=====================



**CSS transitions** provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

 Animations that involve transitioning between two states are often called *implicit transitions* as the states in between the start and final states are implicitly defined by the browser.

  ![A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.] 

 CSS transitions let you decide which properties to animate (by *listing them explicitly*), when the animation will start (by setting a *delay)*, how long the transition will last (by setting a *duration*), and how the transition will run (by defining a *timing function*, e.g., linearly or quick at the beginning, slow at the end).



Which CSS properties can be transitioned?
-----------------------------------------



The Web author can define which property has to be animated and in which way. This allows the creation of complex transitions. As it doesn't make sense to animate some properties, the [list of animatable properties](../css_animated_properties) is limited to a finite set.

  **Note:** The set of properties that can be animated is changing as the specification develops.

   **Note:** The `auto` value is often a very complex case. The specification recommends not animating from and to `auto`. Some user agents, like those based on Gecko, implement this requirement and others, like those based on WebKit, are less strict. Using animations with `auto` may lead to unpredictable results, depending on the browser and its version, and should be avoided.

 
Defining transitions
--------------------



CSS Transitions are controlled using the shorthand [`transition`](../transition) property. This is the best way to configure transitions, as it makes it easier to avoid out of sync parameters, which can be very frustrating to have to spend lots of time debugging in CSS.

 You can control the individual components of the transition with the following sub-properties:

  [`transition-property`](../transition-property)  Specifies the name or names of the CSS properties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.

  [`transition-duration`](../transition-duration)  Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

  [`transition-timing-function`](../transition-timing-function)  Specifies a function to define how intermediate values for properties are computed. *Timing functions* determine how intermediate values of the transition are calculated. Most [timing functions](../easing-function) can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from [Easing Functions Cheat Sheet](https://easings.net/).

  [`transition-delay`](../transition-delay)  Defines how long to wait between the time a property is changed and the transition actually begins.

   The `transition` shorthand CSS syntax is written as follows:

 
```
div {
  transition: <property> <duration> <timing-function> <delay>;
}

```

Examples
--------


### Simple example



This example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect:

 
```
#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

```

### Multiple animated properties example



#### CSS Content

 
```
.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  transition: width 2s, height 2s, background-color 2s, rotate 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  rotate: 180deg;
}

```


### When property value lists are of different lengths



If any property's list of values is shorter than the others, its values are repeated to make them match. For example:

 
```
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}

```
 This is treated as if it were:

 
```
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

```
 Similarly, if any property's value list is longer than that for [`transition-property`](../transition-property), it's truncated, so if you have the following CSS:

 
```
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}

```
 This gets interpreted as:

 
```
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

```

### Using transitions when highlighting menus



A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It's easy to use transitions to make the effect even more attractive.

 First, we set up the menu using HTML:

 
```
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact Us</a>
  <a href="#">Links</a>
</nav>

```
 Then we build the CSS to implement the look and feel of our menu:

 
```
nav {
  display: flex;
  gap: 0.5rem;
}

a {
  flex: 1;
  background-color: #333;
  color: #fff;
  border: 1px solid;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

a:hover,
a:focus {
  background-color: #fff;
  color: #333;
}

```
 This CSS establishes the look of the menu, with the background and text colors both changing when the element is in its [`:hover`](../:hover) and [`:focus`](../:focus) states:



JavaScript examples
-------------------


 **Note:** Care should be taken when using a transition immediately after:

 * adding the element to the DOM using `.appendChild()`
* removing an element's `display: none;` property.

 This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a `setTimeout()` of a handful of milliseconds before changing the CSS property you intend to transition to.

 ### Using transitions to make JavaScript functionality smooth



Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example.

 
```
<p>Click anywhere to move the ball</p>
<div id="foo" class="ball"></div>

```
 Using JavaScript you can make the effect of moving the ball to a certain position happen:

 
```
const f = document.getElementById("foo");
document.addEventListener(
  "click",
  (ev) => {
    f.style.transform = `translateY(${ev.clientY - 25}px)`;
    f.style.transform += `translateX(${ev.clientX - 25}px)`;
  },
  false
);

```
 With CSS you can make it smooth without any extra effort. Add a transition to the element and any change will happen smoothly:

 
```
.ball {
  border-radius: 25px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

```


### Detecting the start and completion of a transition



You can use the [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) event to detect that an animation has finished running. This is a [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) object, which has two added properties beyond a typical [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) object:

  `propertyName`  A string indicating the name of the CSS property whose transition completed.

  `elapsedTime`  A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of [`transition-delay`](../transition-delay).

   As usual, you can use the [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) method to monitor for this event:

 
```
el.addEventListener("transitionend", updateTransition, true);

```
 You detect the beginning of a transition using [`transitionrun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event) (fires before any delay) and [`transitionstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event) (fires after any delay), in the same kind of fashion:

 
```
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);

```
  **Note:** The `transitionend` event doesn't fire if the transition is aborted before the transition is completed because either the element is made [`display`](../display)`: none` or the animating property's value is changed.

 
Specifications
--------------




| Specification |
| --- |
| [CSS Transitions](https://drafts.csswg.org/css-transitions/)  |


See also
--------


* The [`TransitionEvent`](https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent) interface and the [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) event
* [Using CSS animations](../css_animations/using_css_animations)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>

CSS Box Model
=============


**CSS Box Model** is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the [visual formatting model](visual_formatting_model).


Box model overview
------------------


A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read [Introduction to the CSS Box Model](css_box_model/introduction_to_the_css_box_model).

### Box-edge keywords



The Box Model specification defines a set of keywords that refer to the edges of each part of the box, these are used as keyword values in CSS including as a value for the [`box-sizing`](box-sizing) property, to control how the box model calculates its size.

  `content-box`  The edge of the content area of the box.

  `padding-box`  The edge of the padding of the box, if there is no padding on a side then this is the same as `content-box`.

  `border-box`  The edge of the border of the box, if there is no border on a side then this is the same as `padding-box`.

  `margin-box`  The edge of the margin of the box, if there is no margin on a side then this is the same as `border-box`.

  `stroke-box`  In SVG refers to the stroke bounding box, in CSS treated as `content-box`.

  `view-box`  In SVG refers to the nearest SVG viewport element's origin box, which is a rectangle with the width and height of the initial SVG user coordinate system established by the `[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)` attribute for that element. In CSS treated as `border-box`.

  
Reference
---------


 **Note:** This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in [Logical Properties and Values](css_logical_properties).

 ### Properties for controlling the margin of a box



Margins surround the border edge of a box, and provide spacing between boxes.

 * [`margin`](margin)
* [`margin-bottom`](margin-bottom)
* [`margin-left`](margin-left)
* [`margin-right`](margin-right)
* [`margin-top`](margin-top)
* [`margin-trim`](margin-trim)  Experimental


### Properties for controlling the padding for a box



Padding is inserted between the content edge and border edge of a box.

 * [`padding`](padding)
* [`padding-bottom`](padding-bottom)
* [`padding-left`](padding-left)
* [`padding-right`](padding-right)
* [`padding-top`](padding-top)


### Other properties



There are other properties that relate to the box model, that are defined elsewhere.

  [Borders](css_backgrounds_and_borders)  The border properties specify the thickness of the border, drawing style and color.

  [Overflow](overflow)  Controls what happens when there is too much content to fit into a box.

  
Guides
------


 [Introduction to the CSS box model](css_box_model/introduction_to_the_css_box_model)  Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.

  [Mastering margin collapsing](css_box_model/mastering_margin_collapsing)  Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.

  [Visual formatting model](visual_formatting_model)  Explains the visual formatting model.

  Specifications
--------------




| Specification |
| --- |
| [CSS Box Model Module Level 3](https://drafts.csswg.org/css-box/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model>

Using CSS animations
====================



**CSS animations** make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

 There are three key advantages to CSS animations over traditional script-driven animation techniques:

 1. They're easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.



Configuring an animation
------------------------



To create a CSS animation sequence, you style the element you want to animate with the [`animation`](../animation) property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does **not** configure the actual appearance of the animation, which is done using the [`@keyframes`](../@keyframes) at-rule as described in the [Defining the animation sequence using keyframes](#defining_the_animation_sequence_using_keyframes) section below.

 The sub-properties of the [`animation`](../animation) property are:

  [`animation-delay`](../animation-delay)  Specifies the delay between an element loading and the start of an animation sequence and whether the animation should start immediately from its beginning or partway through the animation.

  [`animation-direction`](../animation-direction)  Specifies whether an animation's first iteration should be forward or backward and whether subsequent iterations should alternate direction on each run through the sequence or reset to the start point and repeat.

  [`animation-duration`](../animation-duration)  Specifies the length of time in which an animation completes one cycle.

  [`animation-fill-mode`](../animation-fill-mode)  Specifies how an animation applies styles to its target before and after it runs.

  [`animation-iteration-count`](../animation-iteration-count)  Specifies the number of times an animation should repeat.

  [`animation-name`](../animation-name)  Specifies the name of the [`@keyframes`](../@keyframes) at-rule describing an animation's keyframes.

  [`animation-play-state`](../animation-play-state)  Specifies whether to pause or play an animation sequence.

  [`animation-timing-function`](../animation-timing-function)  Specifies how an animation transitions through keyframes by establishing acceleration curves.

  
Defining animation sequence using keyframes
-------------------------------------------



After you've configured the animation's timing, you need to define the appearance of the animation. This is done by establishing one or more keyframes using the [`@keyframes`](../@keyframes) at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

 Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a [`<percentage>`](../percentage) to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: `from` and `to`. Both are optional. If `from`/`0%` or `to`/`100%` is not specified, the browser starts or finishes the animation using the computed values of all attributes.

 You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.


Using the animation shorthand
-----------------------------



The [`animation`](../animation) shorthand is useful for saving space. As an example, some of the rules we've been using through this article:

 
```
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

```
 ...could be replaced by using the `animation` shorthand.

 
```
p {
  animation: 3s infinite alternate slidein;
}

```
 To learn more about the sequence in which different animation property values can be specified using the `animation` shorthand, see the [`animation`](../animation) reference page.


Setting multiple animation property values
------------------------------------------



The CSS animation longhand properties can accept multiple values, separated by commas. This feature can be used when you want to apply multiple animations in a single rule and set different durations, iteration counts, etc., for each of the animations. Let's look at some quick examples to explain the different permutations.

 In this first example, there are three duration and three iteration count values. So each animation is assigned a value of duration and iteration count with the same position as the animation name. The `fadeInOut` animation is assigned a duration of `2.5s` and an iteration count of `2`, and the `bounce` animation is assigned a duration of `1s` and an iteration count of `5`.

 
```
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

```
 In this second example, three animation names are set, but there's only one duration and iteration count. In this case, all three animations are given the same duration and iteration count.

 
```
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

```
 In this third example, three animations are specified, but only two durations and iteration counts. In such cases where there are not enough values in the list to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then cycles back to the first item. So, `fadeInOut` gets a duration of `2.5s`, and `moveLeft300px` gets a duration of `5s`, which is the last value in the list of duration values. The duration value assignment now resets to the first value; `bounce`, therefore, gets a duration of `2.5s`. The iteration count values (and any other property values you specify) will be assigned in the same way.

 
```
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

```
 If the mismatch in the number of animations and animation property values is inverted, say there are five `animation-duration` values for three `animation-name` values, then the extra or unused animation property values, in this case, two `animation-duration` values, don't apply to any animation and are ignored.


Examples
--------


 **Note:** Some older browsers (pre-2017) may need prefixes; the live examples you can click to see in your browser include the `-webkit` prefixed syntax.

 ### Making text slide across the browser window



This simple example styles the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element so that the text slides in from off the right edge of the browser window.

 Note that animations like this can cause the page to become wider than the browser window. To avoid this problem put the element to be animated in a container, and set [`overflow`](../overflow)`:hidden` on the container.

 
```
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

```
 In this example the style for the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element specifies that the animation should take 3 seconds to execute from start to finish, using the [`animation-duration`](../animation-duration) property, and that the name of the [`@keyframes`](../@keyframes) at-rule defining the keyframes for the animation sequence is named "slidein".

 If we wanted any custom styling on the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element to appear in browsers that don't support CSS animations, we would include it here as well; however, in this case we don't want any custom styling other than the animation effect.

 The keyframes are defined using the [`@keyframes`](../@keyframes) at-rule. In this case, we have just two keyframes. The first occurs at 0% (using the alias `from`). Here, we configure the left margin of the element to be at 100% (that is, at the far right edge of the containing element), and the width of the element to be 300% (or three times the width of the containing element). This causes the first frame of the animation to have the header drawn off the right edge of the browser window.

 The second (and final) keyframe occurs at 100% (using the alias `to`). The left margin is set to 0% and the width of the element is set to 100%. This causes the header to finish its animation flush against the left edge of the content area.

 
```
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

```
  **Note:** Reload page to see the animation.

 

### Adding another keyframe



Let's add another keyframe to the previous example's animation. Let's say we want the header's font size to increase as it moves from right to left for a while, then to decrease back to its original size. That's as simple as adding this keyframe:

 
```
75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

```
 The full code now looks like this:

 
```
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

```
 
```
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

```
 This tells the browser that 75% of the way through the animation sequence, the header should have its left margin at 25% and the width should be 150%.

  **Note:** Reload page to see the animation.

 

### Repeating the animation



To make the animation repeat itself, use the [`animation-iteration-count`](../animation-iteration-count) property to indicate how many times to repeat the animation. In this case, let's use `infinite` to have the animation repeat indefinitely:

 
```
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

```
 Adding it to the existing code:

 
```
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

```
 
```
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

```


### Making the animation move back and forth



That made it repeat, but it's very odd having it jump back to the start each time it begins animating. What we really want is for it to move back and forth across the screen. That's easily accomplished by setting [`animation-direction`](../animation-direction) to `alternate`:

 
```
p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

```
 And the rest of the code:

 
```
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

```
 
```
<p>
  The Caterpillar and Alice looked at each other for some time in silence: at
  last the Caterpillar took the hookah out of its mouth, and addressed her in a
  languid, sleepy voice.
</p>

```


### Using animation events



You can get additional control over animations — as well as useful information about them — by making use of animation events. These events, represented by the [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent) object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event.

 We'll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work.

 #### Adding the CSS

 We start with creating the CSS for the animation. This animation will last for 3 seconds, be called "slidein", repeat 3 times, and alternate direction each time. In the [`@keyframes`](../@keyframes), the width and margin-left are manipulated to make the element slide across the screen.

 
```
.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

```
 #### Adding the animation event listeners

 We'll use JavaScript code to listen for all three possible animation events. This code configures our event listeners; we call it when the document is first loaded in order to set things up.

 
```
const element = document.getElementById("watchme");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

element.className = "slidein";

```
 This is pretty standard code; you can get details on how it works in the documentation for [`eventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). The last thing this code does is set the `class` on the element we'll be animating to "slidein"; we do this to start the animation.

 Why? Because the `animationstart` event fires as soon as the animation starts, and in our case, that happens before our code runs. So we'll start the animation ourselves by setting the class of the element to the style that gets animated after the fact.

 #### Receiving the events

 The events get delivered to the `listener()` function, which is shown below.

 
```
function listener(event) {
  const l = document.createElement("li");
  switch (event.type) {
    case "animationstart":
      l.textContent = `Started: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationend":
      l.textContent = `Ended: elapsed time is ${event.elapsedTime}`;
      break;
    case "animationiteration":
      l.textContent = `New loop started at time ${event.elapsedTime}`;
      break;
  }
  document.getElementById("output").appendChild(l);
}

```
 This code, too, is very simple. It looks at the [`event.type`](https://developer.mozilla.org/en-US/docs/Web/API/Event/type) to determine which kind of animation event occurred, then adds an appropriate note to the [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) (unordered list) we're using to log these events.

 The output, when all is said and done, looks something like this:

 * Started: elapsed time is 0
* New loop started at time 3.01200008392334
* New loop started at time 6.00600004196167
* Ended: elapsed time is 9.234000205993652

 Note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. Note also that after the final iteration of the animation, the `animationiteration` event isn't sent; instead, the `animationend` event is sent.

 Just for the sake of completeness, here's the HTML that displays the page content, including the list into which the script inserts information about the received events:

 
```
<h1 id="watchme">Watch me move</h1>
<p>
  This example shows how to use CSS animations to make <code>H1</code>
  elements move across the page.
</p>
<p>
  In addition, we output some text each time an animation event fires, so you
  can see them in action.
</p>
<ul id="output"></ul>

```
 And here's the live output.

  **Note:** Reload page to see the animation.

 

See also
--------


* [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent)
* [Using CSS transitions](../css_transitions/using_css_transitions)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>

color()
=======



The `color()` functional notation allows a color to be specified in a particular, specified colorspace rather than the implicit sRGB colorspace that most of the other color functions operate in.

 Support for a particular colorspace can be detected with the [`color-gamut`](../@media/color-gamut) CSS media feature.

 The [`@color-profile`](../@color-profile) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [at-rule](../at-rule) can be used to define and name a color profile to be used in the `color()` function to specify a color.



Syntax
------



```
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

```
### Values


 Functional notation: `color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ ] [ / <alpha-value> ]? ] )`
  `[<ident> | <dashed-ident>]` is an optional [`<ident>`](../ident) or [`<dashed-ident>`](../dashed-ident) denoting the colorspace. If this is an `<ident>` it denotes one of the predefined colorspaces (such as display-p3); if it is a `<dashed-ident>` it denotes a custom colorspace, defined by a [`@color-profile`](../@color-profile) rule.

 `[ <number-percentage>+ ]` is one or more [`<number>`](../number) or [`<percentage>`](../percentage) values providing the parameter values that the colorspace takes.

 `/ <alpha-value>` (alpha) can be a [`<number>`](../number) between `0` and `1`, or a [`<percentage>`](../percentage), where the number `1` corresponds to `100%` (full opacity).

  ### Formal syntax



```
<color()> =   
  color( <colorspace-params> [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<colorspace-params> =   
  <predefined-rgb-params>  [|](../value_definition_syntax#single_bar)  
  <xyz-params>               
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  
<predefined-rgb-params> =   
  <predefined-rgb> [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces)    
  
<xyz-params> =   
  <xyz-space> [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces)    
  
<predefined-rgb> =   
  srgb          [|](../value_definition_syntax#single_bar)  
  srgb-linear   [|](../value_definition_syntax#single_bar)  
  display-p3    [|](../value_definition_syntax#single_bar)  
  a98-rgb       [|](../value_definition_syntax#single_bar)  
  prophoto-rgb  [|](../value_definition_syntax#single_bar)  
  rec2020         
  
<xyz-space> =   
  xyz      [|](../value_definition_syntax#single_bar)  
  xyz-d50  [|](../value_definition_syntax#single_bar)  
  xyz-d65    
  

```
Examples
--------


### Using predefined colorspaces with color()



The following example shows the effect of varying the lightness, a-axis, and b-axis values of the `color()` function.

 
```
<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

```
 
```
[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

```


### Using xyz colorspaces with color()



The following example shows how to use `xyz` colorspaces to specify a color.

 
```
<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

```
 
```
[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

```


### Using color-gamut media queries with color()



This example shows how to use the [`color-gamut`](../@media/color-gamut) media query to detect support for a particular colorspace and use that colorspace to specify a color.

 
```
<div></div>
<div></div>
<div></div>

```
 
```
@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 0 0 1);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 0 0 1);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 0 0 1);
  }
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # color-function](https://w3c.github.io/csswg-drafts/css-color/#color-function) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color` | 111 | 111 | 111 | No | 97 | 1510.1–15Only supports `display-p3` and `srgb` predefined color profiles. | 111 | 111 | No | No | 1510.3–15Only supports `display-p3` and `srgb` predefined color profiles. | No |


See also
--------


* [The `<color>` data type](../color_value) for a list of all color notations
* [`color-gamut`](../@media/color-gamut) media feature
* [Wide Gamut Color in CSS with Display-p3](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color>

device-cmyk()
=============



The `device-cmyk()` functional notation is used to express CMYK colors in a device dependent way, specifying the cyan, magenta, yellow, and black components.

 This approach to color is useful when creating material to be output to a particular printer, when the output for particular ink combinations is known. CSS processors may attempt to approximate the color, however the end result is likely to be different to the printed result.



Syntax
------



```
device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);
device-cmyk(0 81% 81% 30% / .5, rgb(178 34 34));

```
### Values


 Functional notation: `device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )`
  `<cmyk-component>` is a list of 4 [`<number>`](../number) or [`<percentage>`](../percentage) values providing the cyan, magenta, yellow, and black components of CMYK color.

 `/ <alpha-value>` (alpha) can be a [`<number>`](../number) between `0` and `1`, or a [`<percentage>`](../percentage), where the number `1` corresponds to `100%` (full opacity).

 `<color>` is an optional fallback [`<color>`](../color_value) to use if the user agent does not know how to translate the CMYK color to RGB.

  ### Formal syntax



```
<device-cmyk()> =   
  device-cmyk( <cmyk-component>[{4}](../value_definition_syntax#curly_braces) [[](../value_definition_syntax#brackets) / <alpha-value> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<cmyk-component> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Specifications
--------------



**No specification found**No specification data found for `css.types.color.device-cmyk`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/device-cmyk>

rgb()
=====



The `rgb()` functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

  **Note:** The legacy `rgba()` syntax is an alias for `rgb()`, accepting the same parameters and behaving in the same way.

 

Try it
------


Syntax
------




```
/\* Syntax with space-separated values \*/
rgb(255 255 255)
rgb(255 255 255 / .5)

/\* Syntax with comma-separated values \*/
rgb(255, 255, 255)
rgb(255, 255, 255, .5)

/\* Legacy rgba() syntax \*/
rgba(255 255 255)
rgba(255 255 255 / .5)

rgba(255, 255, 255)
rgba(255, 255, 255, .5)

```
 The `rgb()` function accepts three space-separated values, representing respectively values for `red`, `green`, and `blue`. Optionally it may also be given a slash `/` followed by a fourth value, representing `alpha`.

 The function also accepts a legacy syntax in which all values are separated with commas.


### Values


 
`red`, `green`, `blue`
   These values represent color channels and may each be a [`<number>`](../number) clamped between 0 and 255, or a [`<percentage>`](../percentage), or the keyword `none`. You can't mix percentages and numbers, so: 

 * if any of these values is a number, then they must all be numbers or `none`
* if any of these values is a percentage, then they must all percentages or `none`.

  `alpha`  A [`<number>`](../number) clamped between `0` and `1`, or a [`<percentage>`](../percentage). This value represents opacity, where the number `1` corresponds to `100%` (full opacity). It defaults to 100%.

  ### Formal syntax



```
<rgb()> =   
  rgb( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )  [|](../value_definition_syntax#single_bar)  
  rgb( [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Legacy syntax: comma-separated values



For legacy reasons, the `rgb()` function accepts a form in which all values are separated using commas.

 #### HTML

 
```
<div class="space-separated"></div>
<div class="comma-separated"></div>

```
 #### CSS

 
```
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 0.5);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

```
 #### Result



### Legacy syntax: rgba()



The legacy `rgba()` syntax is an alias for `rgb()`.

 #### HTML

 
```
<div class="rgb"></div>
<div class="rgba"></div>

```
 #### CSS

 
```
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 0.5);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # rgb-functions](https://w3c.github.io/csswg-drafts/css-color/#rgb-functions) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `rgb` | 1 | 12 | 1 | 4 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `alpha_parameter` | 65 | 79 | 52 | No | 52 | 12.1 | 65 | 65 | 52 | 47 | 12.2 | 9.0 |
| `float_values` | 66 | 79 | 52 | No | 53 | 12.1 | 66 | 66 | 52 | 47 | 12.2 | 9.0 |
| `space_separated_parameters` | 65 | 79 | 52 | No | 52 | 12.1 | 65 | 65 | 52 | 47 | 12.2 | 9.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb>

hsl()
=====



The `hsl()` functional notation expresses an [sRGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) color according to its *hue*, *saturation*, and *lightness* components. An optional *alpha* component represents the color's transparency.

  **Note:** The legacy `hsla()` syntax is an alias for `hsl()`, accepting the same parameters and behaving in the same way.

 

Try it
------



 Defining *complementary colors* with `hsl()` can be done with a single formula, as they are positioned on the same diameter of the [color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel). If `theta` is the angle of a color, its complementary one will have `180deg-theta` as its *hue* coordinate.


Syntax
------




```
/\* Syntax with space-separated values \*/
hsl(hue saturation lightness)
hsl(hue saturation lightness / alpha)

/\* Syntax with comma-separated values \*/
hsl(hue, saturation, lightness)
hsl(hue, saturation, lightness, alpha)

/\* Legacy hsla() syntax \*/
hsla(hue saturation lightness)
hsla(hue saturation lightness / alpha)

hsla(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)

```
 The `hsl()` function accepts three space-separated values, representing respectively `hue`, `saturation`, and `lightness`. Optionally it may also be given a slash `/` followed by a fourth value, representing `alpha`.

 The function also accepts a legacy syntax in which all values are separated with commas.


### Values


 `hue`  An [`<angle>`](../angle) of the [color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel) given in one of the following units: `deg`, `rad`, `grad`, or `turn`. When written as a unitless [`<number>`](../number), it is interpreted as degrees. By definition, *red* is `0deg`, with the other colors spread around the circle, so *green* is `120deg`, *blue* is `240deg`, etc. As an `<angle>` is periodic, it implicitly wraps around such that `-120deg` = `240deg`, `480deg` = `120deg`, `-1turn` = `1turn`, and so on. This color wheel helps finding the angle associated with a color: ![A color wheel indicating the angle for the hue of the primary (red-green-blue) and secondary (yellow-cyan-magenta) colors] 

  `saturation`  A [`<percentage>`](../percentage) where `100%` is completely saturated, while `0%` is completely unsaturated (gray).

  `lightness`  A [`<percentage>`](../percentage) where `100%` is white, `0%` is black, and `50%` is "normal".

  
`alpha` Optional
  A [`<percentage>`](../percentage) or a [`<number>`](../number) between `0` and `1`, where the number `1` corresponds to `100%` and means full opacity, while `0` corresponds to `0%` and means fully transparent.

  ### Formal syntax



```
<hsl()> =   
  hsl( [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<hue> =   
  [<number>](../number)  [|](../value_definition_syntax#single_bar)  
  [<angle>](../angle)     
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Using `hsl()` with `conic-gradient()`



The `hsl()` function works well with [`conic-gradient()`](../gradient/conic-gradient) as both deal with angles.

 #### CSS

 
```
div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360 100% 50%),
    hsl(315 100% 50%),
    hsl(270 100% 50%),
    hsl(225 100% 50%),
    hsl(180 100% 50%),
    hsl(135 100% 50%),
    hsl(90 100% 50%),
    hsl(45 100% 50%),
    hsl(0 100% 50%)
  );
  clip-path: circle(closest-side);
}

```
 #### Result



### Legacy syntax: comma-separated values



For legacy reasons, the `hsl()` function accepts a form in which all values are separated using commas.

 #### HTML

 
```
<div class="space-separated"></div>
<div class="comma-separated"></div>

```
 #### CSS

 
```
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: hsl(0 100% 50% / 50%);
}

div.comma-separated {
  background-color: hsl(0, 100%, 50%, 50%);
}

```
 #### Result



### Legacy syntax: hsla()



The legacy `hsla()` syntax is an alias for `hsl()`.

 #### HTML

 
```
<div class="hsl"></div>
<div class="hsla"></div>

```
 #### CSS

 
```
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.hsl {
  background-color: hsl(0 100% 50% / 50%);
}

div.hsla {
  background-color: hsla(0, 100%, 50%, 50%);
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # the-hsl-notation](https://w3c.github.io/csswg-drafts/css-color/#the-hsl-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hsl` | 1 | 12 | 1 | 9 | 9.5 | 3.1 | ≤37 | 18 | 4 | 10.1 | 2 | 1.0 |
| `alpha_parameter` | 65 | 79 | 52 | No | 52 | 12.1 | 65 | 65 | 52 | 47 | 12.2 | 9.0 |
| `space_separated_parameters` | 65 | 79 | 52 | No | 52 | 12.1 | 65 | 65 | 52 | 47 | 12.2 | 9.0 |


See also
--------


* The function [`hsla()`](hsl), an historical alias for this function.
* The [`<color>`](../color_value) type that represents any color.
* [HSL Color Picker](https://hslpicker.com/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl>

hwb()
=====


The `hwb()` functional notation expresses a given color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.


Try it
------


Syntax
------



```
hwb(194 0% 0%) /\* #00c3ff \*/
hwb(194 0% 0% / .5) /\* #00c3ff with 50% opacity \*/

```
### Values



 **Note:** The HWB function does **not** use commas to separate its values as with previous color functions and the optional alpha value needs to be preceded with a forward slash (`/`) if specified.

   Functional notation: `hwb(H W B[ / A])`
  `H` (hue) is an [`<angle>`](../angle) of the color circle given in `deg`s, `rad`s, `grad`s, or `turn`s in the [CSS Color](https://drafts.csswg.org/css-color/#typedef-hue) specification. When written as a unitless [`<number>`](../number), it is interpreted as degrees, as specified in the [CSS Color Level 3](https://drafts.csswg.org/css-color-3/#hsl-color) specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an `<angle>`, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.

 `W` (whiteness) specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness).

 `B` (blackness) specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness).

 `A` (alpha) can be a [`<number>`](../number) between `0` and `1`, or a [`<percentage>`](../percentage), where the number `1` corresponds to `100%` (full opacity).

  
### Formal syntax



```
<hwb()> =   
  hwb( [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<hue> =   
  [<number>](../number)  [|](../value_definition_syntax#single_bar)  
  [<angle>](../angle)     
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # the-hwb-notation](https://w3c.github.io/csswg-drafts/css-color/#the-hwb-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hwb` | 101 | 101 | 96 | No | 87 | 15 | 101 | 101 | 96 | 70 | 15 | 19.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb>

lch()
=====


The `lch()` functional notation expresses a given color in the LCH color space. It has the same L axis as [`lab()`](lab), but uses polar coordinates C (Chroma) and H (Hue).


Syntax
------



```
lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);
lch(52.2345% 72.2 56.2 / .5);

```
### Values



* Functional notation: `lch(L C H [/ A])`
	+ `L` is a [`<number>`](../number) between `0` and `100` or a [`<percentage>`](../percentage) between `0%` and `100%` that specifies the CIE Lightness where the number `0` corresponds to `0%` (black) and the number `100` corresponds to `100%` (white).
	+ `C` is a [`<number>`](../number) or a [`<percentage>`](../percentage) where `0%` is `0` and `100%` is the number `150`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed `230`).
	+ `H` is a [`<number>`](../number) or a [`<angle>`](../angle) that specifies the hue angle along the positive "a" axis (toward purplish red), `90deg` points along the positive "b" axis (toward mustard yellow), `180deg` points along the negative "a" axis (toward greenish cyan), and `270deg` points along the negative "b" axis (toward sky blue).
	+ `A` (alpha) can be a [`<number>`](../number) between `0` and `1`, or a [`<percentage>`](../percentage), where the number `1` corresponds to `100%` (full opacity).

   **Note:** Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`. This case is notable where `100%` is equal to the number `100` for the `L` value and `150` for the `C` value. 

 
### Formal syntax



```
<lch()> =   
  lch( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<hue> =   
  [<number>](../number)  [|](../value_definition_syntax#single_bar)  
  [<angle>](../angle)     
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Adjusting lightness, chroma, and hue with lch()



The following example shows the effect of varying the `L` (lightness), `C` (chroma), and `H` (hue) values of the `lch()` functional notation.

 
```
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>

```
 
```
[data-color="blue"] {
  background-color: lch(0% 100 240);
}
[data-color="blue-light"] {
  background-color: lch(100% 100 240);
}

[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-chroma"] {
  background-color: lch(100% 30 20);
}

[data-color="green"] {
  background-color: lch(50% 132 130);
}
[data-color="green-hue"] {
  background-color: lch(50% 132 180);
}

```


### Adjusting opacity with lch()



 The following example shows the effect of varying the `A` (alpha) value of the `lch()` functional notation. The `red` and `red-alpha` elements overlap the `#background-div` element to demonstrate the effect of opacity. Giving `A` a value of `0.4` makes the color 40% opaque. 

 
```
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

```
 
```
[data-color="red"] {
  background-color: lch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: lch(50% 130 20 / 0.4);
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # lab-colors](https://w3c.github.io/csswg-drafts/css-color/#lab-colors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `lch` | 111 | 111 | 111 | No | 97 | 15 | 111 | 111 | No | No | 15 | No |


See also
--------


* The [`<color>` data type](../color_value) for a list of all color notations
* [LCH colors in CSS: what, why, and how?](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)
* [Safari Technology Preview 122 release notes](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/): includes `lch()` and [`lab()`](lab) colors.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch>

oklch()
=======


The `oklch()` functional notation expresses a given color in the Oklch color space. It has the same L axis as [`oklab()`](oklab), but uses polar coordinates C (Chroma) and H (Hue).


Syntax
------



```
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)

```
### Values


* Functional notation: `oklch(L C H [/ A])`
	+ `L` is a [`<number>`](../number) between `0` and `1` or a [`<percentage>`](../percentage) between `0%` and `100%`, where the number `0` corresponds to `0%` (black) and the number `1` corresponds to `100%` (white). `L` specifies the perceived lightness.
	+ `C` is a [`<number>`](../number) or a [`<percentage>`](../percentage), where `0%` is `0` and `100%` is the number `0.4`. It is a measure of the chroma (roughly representing the "amount of color"). Its minimum useful value is `0`, while the maximum is theoretically unbounded (but in practice does not exceed `0.5`).
	+ `H` is a [`<number>`](../number) or a [`<angle>`](../angle) that specifies the hue angle along the positive "a" axis (toward purplish red), `90deg` points along the positive "b" axis (toward mustard yellow), `180deg` points along the negative "a" axis (toward greenish cyan), and `270deg` points along the negative "b" axis (toward sky blue).
	+ `A` (alpha) can be a [`<number>`](../number) between `0` and `1` or a [`<percentage>`](../percentage) between `0%` and `100%`, where the number `1` corresponds to `100%` (full opacity).
### Formal syntax



```
<oklch()> =   
  oklch( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<hue> =   
  [<number>](../number)  [|](../value_definition_syntax#single_bar)  
  [<angle>](../angle)     
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Adjusting the lightness, chroma, and hue of a color



The following example shows the effect of varying the `L` (lightness), `C` (chroma), and `H` (hue) values of the `oklch()` color function.

 
```
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-chroma"></div>

<div data-color="green"></div>
<div data-color="green-hue"></div>

```
 
```
[data-color="blue"] {
  background-color: oklch(60% 0.4 240);
}
[data-color="blue-light"] {
  background-color: oklch(90% 0.4 240);
}

[data-color="red"] {
  background-color: oklch(100% 0.4 30);
}
[data-color="red-chroma"] {
  background-color: oklch(100% 0.3 40);
}

[data-color="green"] {
  background-color: oklch(60% 0.57 161);
}
[data-color="green-hue"] {
  background-color: oklch(60% 0.57 181);
}

```


### Adjusting the alpha value of a color



 The following example shows the effect of varying the `A` (alpha) value of the `oklch()` color function. The `red` and `red-alpha` elements overlap the `#background-div` element to demonstrate the effect of opacity. Giving `A` a value of `0.4` makes the color 40% opaque. 

 
```
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

```
 
```
[data-color="red"] {
  background-color: oklch(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklch(50% 130 20 / 0.4);
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # ok-lab](https://w3c.github.io/csswg-drafts/css-color/#ok-lab) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `oklch` | 111 | 111 | 111 | No | 97 | 15.4 | 111 | 111 | No | No | 15.4 | No |


See also
--------


* The [`<color>` data type](../color_value) for a list of all color notations
* [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/)
* [OKLCH in CSS](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)
* [Safari Technology Preview 137 release notes](https://webkit.org/blog/12156/release-notes-for-safari-technology-preview-137/): includes `oklch()` and [`oklab()`](oklab) colors


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch>

oklab()
=======



The `oklab()` functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. The `oklab()` works with a Cartesian coordinate system on the Oklab color space, the a- and b-axes. If you want a polar color system, chroma and hue, use [`oklch()`](oklch).

 Oklab is a perceptual color space and is useful to:

 * Transform an image to grayscale, without changing its lightness.
* Modify the saturation of colors, while keeping user perception of hue and lightness
* Create smooth and uniform gradients of colors (when interpolated manually, for example, in a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element).

 The function `oklab()` can represent any color from the Oklab color space that is wider than RGB and include wide gamut and P3 colors.



Syntax
------




```
/\* oklab(lightness a-axis b-axis) \*/
oklab(40.1% 0.1143 0.045);
oklab(59.69% 0.1007 0.1191);

/\* oklab(lightness a-axis b-axis / alpha) \*/
oklab(59.69% 0.1007 0.1191 / 0.5);

```
  **Note:** The oklab() function does **not** support commas to separate its values as some other color functions do, and the optional alpha value needs to be preceded with a forward slash (`/`) when specified.

 
### Values


* Functional notation: `oklab(L a b [/ A])`
	+ `L` is a [`<number>`](../number) between `0` and `1` or a [`<percentage>`](../percentage) between `0%` and `100%`, where the number `0` corresponds to `0%` (black) and the number `1` corresponds to `100%` (white). `L` specifies the perceived lightness.
	+ `a` is a [`<number>`](../number) between `-0.4` and `0.4` or a [`<percentage>`](../percentage) between `-100%` and `100%`. It specifies the distance along the `a` axis in the Oklab colorspace, that is, how green or red the color is.
	+ `b` is a [`<number>`](../number) between `-0.4` and `0.4` or a [`<percentage>`](../percentage) between `-100%` and `100%`. It specifies the distance along the `b` axis in the Oklab colorspace, that is, how blue or yellow the color is.
	+ `A` is a [`<number>`](../number) between `0` and `1` or a [`<percentage>`](../percentage), where the number `1` corresponds to `100%` (full opacity). `A` represents the transparency (or alpha channel) of the color.
### Formal syntax



```
<oklab()> =   
  oklab( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Adjusting the lightness and axes with oklab()



The following example shows the effect of varying the lightness, a-axis, and b-axis values of the `oklab()` function.

 
```
<div data-color="blue"></div>
<div data-color="blue-light"></div>

<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

```
 
```
[data-color="blue"] {
  background-color: oklab(0.5 -0.3 -0.4);
}
[data-color="blue-light"] {
  background-color: oklab(0.7 -0.3 -0.4);
}

[data-color="red"] {
  background-color: oklab(100% 0.4 0.4);
}
[data-color="red-a"] {
  background-color: oklab(100% 0.2 0.4);
}

[data-color="green"] {
  background-color: oklab(100% -100% 0.4);
}
[data-color="green-b"] {
  background-color: oklab(100% -100% 0.6);
}

```


### Adjusting opacity with oklab()



 The following example shows the effect of varying the `A` (alpha) value of the `oklab()` function. The `red` and `red-alpha` elements overlap the `#background-div` element to demonstrate the effect of opacity. Giving the `red-alpha` element an opacity of `0.4` makes it appear more transparent than the `red` element. 

 
```
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

```
 
```
[data-color="red"] {
  background-color: oklab(50% 130 20);
}
[data-color="red-alpha"] {
  background-color: oklab(50% 130 20 / 0.4);
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # ok-lab](https://w3c.github.io/csswg-drafts/css-color/#ok-lab) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `oklab` | 111 | 111 | 111 | No | 97 | 15.4 | 111 | 111 | No | No | 15.4 | No |


See also
--------


* The [`<color>` data type](../color_value) for a list of all color notations
* [`oklch()`](oklch): Another functional notation using the same color space as `oklab()` but in a polar coordinate system
* [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab>

color-contrast()
================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `color-contrast()` functional notation takes a [`color`](../color_value) value and compares it to a list of other [`color`](../color_value) values, selecting the one with the highest contrast from the list.



Syntax
------



```
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

```
### Values


 Functional notation: `color-contrast( <color> vs <color>#{2,} )`
  `<color>` is any valid [`color`](../color_value).

 `<color>#{2,}` is a comma-separated list of color values to compare with the first value.

  Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 6 # colorcontrast](https://w3c.github.io/csswg-drafts/css-color-6/#colorcontrast) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color-contrast` | No | No | No | No | No | 15 | No | No | No | No | 15 | No |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast>

circle()
========


The `circle()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) function is one of the [`<basic-shape>`](../basic-shape) [data types](../css_types).


Try it
------


Syntax
------



```
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

```
### Values


 `<shape-radius>`  This may be a [`<length>`](../length), or a [`<percentage>`](../percentage) or values `closest-side` and `farthest-side`.

  `closest-side`  Uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension.

  `farthest-side`  Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the closest side in any dimension.

    `<position>`  Moves the center of the circle. May be a [`<length>`](../length), or a [`<percentage>`](../percentage), or a values such as `left`.

  Examples
--------


### Basic circle



In the example below, the [`shape-outside`](../shape-outside) property has a value of `circle(50%)`, which defines a circle on a floated element for the text to flow round.



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # funcdef-basic-shape-circle](https://w3c.github.io/csswg-drafts/css-shapes/#funcdef-basic-shape-circle) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `circle` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |


See also
--------


* Properties that use this data type: [`clip-path`](../clip-path), [`shape-outside`](../shape-outside)
* [Guide to Basic Shapes](../css_shapes/basic_shapes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/circle>

ellipse()
=========


The `ellipse()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) function is one of the [`<basic-shape>`](../basic-shape) [data types](../css_types).


Try it
------


Syntax
------




```
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

```
 An ellipse is essentially a squashed circle and so `ellipse()` acts in a very similar way to [`circle()`](circle) except that we have to specify two radii x and y.


### Values


 `<shape-radius>`  Two radii, x and y in that order. These may be a [`<length>`](../length), or a [`<percentage>`](../percentage) or values `closest-side` and `farthest-side`.

  `closest-side`  Uses the length from the center of the shape to the closest side of the reference box. For ellipses, this is the closest side in the radius dimension.

  `farthest-side`  Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension.

    `<position>`  Moves the center of the ellipse. May be a [`<length>`](../length), or a [`<percentage>`](../percentage), or a values such as `left`.

  Examples
--------


### Basic ellipse() example



This example shows an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.



### Using closest-side / farthest-side values



The keyword values of `closest-side` and `farthest-side` are useful to create a quick ellipse based on the size of the floated element reference box.



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse](https://w3c.github.io/csswg-drafts/css-shapes/#funcdef-basic-shape-ellipse) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ellipse` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |


See also
--------


* Properties that use this data type: [`clip-path`](../clip-path), [`shape-outside`](../shape-outside)
* [Guide to Basic Shapes](../css_shapes/basic_shapes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/ellipse>

lab()
=====


The `lab()` functional notation expresses a given color in the CIE L\*a\*b\* color space. Lab represents the entire range of color that humans can see.


Syntax
------



```
lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

```
### Values



* Functional notation: `lab(L a b [/ A])`
	+ `L` is a [`<number>`](../number) between `0` and `100` or a [`<percentage>`](../percentage) between `0%` and `100%` that specifies the CIE Lightness where the number `0` corresponds to `0%` (black) and the number `100` corresponds to `100%` (white).
	+ `a` is a [`<number>`](../number) between `-125` and `125` or a [`<percentage>`](../percentage) between `-100%` and `100%`, specifying the distance along the `a` axis in the Lab colorspace, that is how green/red the color is.
	+ `b` is a [`<number>`](../number) between `-125` and `125` or a [`<percentage>`](../percentage) between `-100%` and `100%`, specifying the distance along the `b` axis in the Lab colorspace, that is how blue/yellow the color is.
	+ `A` (alpha) can be a [`<number>`](../number) between `0` and `1`, or a [`<percentage>`](../percentage), where the number `1` corresponds to `100%` (full opacity).

   **Note:** Usually when percentage values have a numeric equivalent in CSS, `100%` is equal to the number `1`. This case is notable where `100%` is equal to the number `100` for the `L` value and `125` for the `a` and `b` values. 

 
### Formal syntax



```
<lab()> =   
  lab( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  

```
Examples
--------


### Adjusting lightness and color axes with lab()



The following example shows the effect of varying the lightness, a-axis, and b-axis values of the `lab()` function.

 
```
<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

<div data-color="blue"></div>
<div data-color="blue-light"></div>

```
 
```
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}

```


### Adjusting opacity with lab()



 The following example shows the effect of varying the `A` (alpha) value of the `lab()` functional notation. The `red` and `red-alpha` elements overlap the `#background-div` element to demonstrate the effect of opacity. Giving `A` a value of `0.4` makes the color 40% opaque. 

 
```
<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

```
 
```
[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # lab-colors](https://w3c.github.io/csswg-drafts/css-color/#lab-colors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `lab` | 111 | 111 | 111 | No | 97 | 15 | 111 | 111 | No | No | 15 | No |


See also
--------


* The [`<color>` data type](../color_value) for a list of all color notations
* [LCH colors in CSS: what, why, and how?](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/)
* [Safari Technology Preview 122 release notes](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/): includes `lab()` and [`lch()`](lch) colors.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab>

color-mix()
===========


The `color-mix()` functional notation takes two [`<color>`](../color_value) values and returns the result of mixing them in a given colorspace by a given amount.


Syntax
------



```
color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);

```
### Values


* Functional notation: `color-mix( <color-interpolation-method> , [ [`<color>`](../color_value) && [`<percentage [0,100]>`](../percentage)? ]#{2} )`
	+ `<color-interpolation-method>` is the keyword `in` (for interpolation) followed by either:
		- `<rectangular-color-space>` or
		- `<polar-color-space>` and an optional `<hue-interpolation-method>`.
	+ `<rectangular-color-space>` is one of `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`.
	+ `<polar-color-space>` is one of `hsl`, `hwb`, `lch`, `oklch`.
	+ `<hue-interpolation-method>` is one of `shorter`, `longer`, `increasing`, `decreasing` followed by the keyword `hue`.
	+ `<color>` is any valid [`color`](../color_value)
	+ `<percentage>` is a number between 0 and 100 with an optional `%` sign. If no percentage is specified, the default is 50%.
### Formal syntax



```
<color-mix()> =   
  color-mix( <color-interpolation-method> , [[](../value_definition_syntax#brackets) [<color>](../color_value) [&&](../value_definition_syntax#double_ampersand) [<percentage [0,100]>](../percentage)[?](../value_definition_syntax#question_mark) []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)[{2}](../value_definition_syntax#curly_braces) )    
  
<color-interpolation-method> =   
  in [[](../value_definition_syntax#brackets) <rectangular-color-space> [|](../value_definition_syntax#single_bar) <polar-color-space> <hue-interpolation-method>[?](../value_definition_syntax#question_mark) []](../value_definition_syntax#brackets)    
  
<rectangular-color-space> =   
  srgb         [|](../value_definition_syntax#single_bar)  
  srgb-linear  [|](../value_definition_syntax#single_bar)  
  lab          [|](../value_definition_syntax#single_bar)  
  oklab        [|](../value_definition_syntax#single_bar)  
  xyz          [|](../value_definition_syntax#single_bar)  
  xyz-d50      [|](../value_definition_syntax#single_bar)  
  xyz-d65        
  
<polar-color-space> =   
  hsl    [|](../value_definition_syntax#single_bar)  
  hwb    [|](../value_definition_syntax#single_bar)  
  lch    [|](../value_definition_syntax#single_bar)  
  oklch    
  
<hue-interpolation-method> =   
  [[](../value_definition_syntax#brackets) shorter [|](../value_definition_syntax#single_bar) longer [|](../value_definition_syntax#single_bar) increasing [|](../value_definition_syntax#single_bar) decreasing []](../value_definition_syntax#brackets) hue    
  

```
Examples
--------


### Mixing two colors



In a supporting browser, the items have more blue, and therefore less white, as a higher percentage of `#34c9eb` is mixed in. When no value is given, the percentage defaults to 50%.

 
```
<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

```
 
```
li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 0%, white);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 25%, white);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 50%, white);
}

li:nth-child(4) {
  background-color: color-mix(in srgb, #34c9eb 75%, white);
}

li:nth-child(5) {
  background-color: color-mix(in srgb, #34c9eb 100%, white);
}

li:nth-child(6) {
  background-color: color-mix(in srgb, #34c9eb, white);
}

```


### Using hue interpolation methods



 Hue interpolation methods can be used to control how the [`<hue>`](../hue) is interpolated between two colors. For `shorter` the result will be the shortest distance between the two angles (the default) and conversely, `longer` uses the larger value between the two angles in a circle. 

 For `increasing`, the result will be the angle between 0 and 360 degrees and for `decreasing` the result will be the angle between -360 and 0 degrees.

 
```
<div id="shorter">shorter</div>
<div id="longer">longer</div>
<div id="increasing">increasing</div>
<div id="decreasing">decreasing</div>

```
 
```
/\* 20 degrees \*/
#shorter {
  background-color: color-mix(
    in hsl shorter hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

/\* 340 degrees \*/
#longer {
  background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

/\* The resulting angle is between 0 and 360 degrees \*/
#increasing {
  background-color: color-mix(
    in hsl increasing hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

/\* The resulting angle is between -360 and 0 degrees \*/
#decreasing {
  background-color: color-mix(
    in hsl decreasing hue,
    hsl(10 100% 50%),
    hsl(350 100% 50%)
  );
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 5 # color-mix](https://w3c.github.io/csswg-drafts/css-color-5/#color-mix) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color-mix` | 111 | 111 | 88 | No | 97 | 16.215 | 111 | 111 | No | No | 16.215 | No |


See also
--------


* [`<color_value>`](../color_value)
* [`<hue>`](../hue)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix>

inset()
=======


The `inset()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) function is one of the [`<basic-shape>`](../basic-shape) [data types](../css_types). It defines an inset rectangle.


Try it
------


Syntax
------



```
shape-outside: inset(20px 50px 10px 0 round 50px);

```
### Values


 `<length-percentage>{1,4}`  When all of the four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values.

  `<border-radius>`  The optional [`<border-radius>`](../border-radius) argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax.

  Examples
--------


### Basic inset example



In the example below we have an `inset()` shape used to pull content over the floated element. Change the offset values to see how the shape changes.



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # funcdef-basic-shape-inset](https://w3c.github.io/csswg-drafts/css-shapes/#funcdef-basic-shape-inset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inset` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |


See also
--------


* Properties that use this data type: [`clip-path`](../clip-path), [`shape-outside`](../shape-outside)
* [Guide to Basic Shapes](../css_shapes/basic_shapes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset>

scroll()
========



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `scroll()` [CSS function](../css_functions) can be used with [`animation-timeline`](../animation-timeline) to indicate an ancestor element and scrollbar axis that will provide the anonymous scroll timeline for animating the current element.

  The function is used to specify whether the element that provides the scroll timeline is the root element, or the nearest ancestor element that has any scrollbars. It also sets which scroll axis provides the scroll timeline. 

 Note that if the indicated axis does not contain a scrollbar then the animation timeline will be inactive (have zero progress).



Syntax
------



```
animation-timeline: scroll();

/\* values for both axis and scroller element \*/
animation-timeline: scroll(block nearest); /\* Default \*/
animation-timeline: scroll(inline nearest);
animation-timeline: scroll(vertical nearest);
animation-timeline: scroll(horizontal nearest);
animation-timeline: scroll(block root);
animation-timeline: scroll(inline root);
animation-timeline: scroll(vertical root);
animation-timeline: scroll(horizontal root);

/\* values for either axis or scroller element \*/
animation-timeline: scroll(nearest);
animation-timeline: scroll(root);
animation-timeline: scroll(inline);
animation-timeline: scroll(vertical);
animation-timeline: scroll(vertical);
animation-timeline: scroll(horizontal);

```
### Parameters



Allowed values for indicating the element that will provide the scroll timeline:

  `nearest`  (Default) The first parent of this element that has scrollbars in either axis.

  `root`  The root element.

   Allowed values for the scrollbar axis are:

  `block`   (Default) Scrollbar in the block axis of the scroll container. The block axis is the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `vertical`, while for vertical writing modes it is the same as `horizontal`. 

  `inline`   Scrollbar in the inline axis of the scroll container. The inline axis is the direction parallel to the flow of text in a line. For horizontal writing modes this is the same as the `horizontal` axis, while for vertical writing modes this is the same as `vertical`. 

  `vertical`  Scrollbar in the vertical axis of the scroll container.

  `horizontal`  Scrollbar in the horizontal axis of the scroll container.

  
### Formal syntax



```
<scroll()> =   
  scroll( [[](../value_definition_syntax#brackets) <scroller> [||](../value_definition_syntax#double_bar) <axis> []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<scroller> =   
  root     [|](../value_definition_syntax#single_bar)  
  nearest    
  
<axis> =   
  block       [|](../value_definition_syntax#single_bar)  
  inline      [|](../value_definition_syntax#single_bar)  
  vertical    [|](../value_definition_syntax#single_bar)  
  horizontal    
  

```
Examples
--------


### Setting an anonymous scroll timeline



 The `#square` element is animated using an anonymous scrollbar timeline, which is applied to the element to be animated using the `scroll()` functional notation. The timeline in this particular example is provided by the nearest parent element that has (any) scrollbar, from the scrollbar in the block direction. 

 #### HTML

 The HTML for the example is shown below.

 
```
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

```
 #### CSS

  The CSS below defines a square that rotates in alternate directions according to the timeline provided by the `animation-timeline` property. In this case the timeline is provided by `scroll(block nearest)`, which means that it will select the scrollbar in the block direction of the nearest ancestor element that has scrollbars; in this case the vertical scrollbar of the "container" element. 

 Note that the `block nearest` options below are actually the default, so we could instead just have had: `scroll()`.

 
```
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

```
  The CSS for the container sets its height to 300px and we also set the container to create a vertical scrollbar if it overflows. The "stretcher" CSS sets the block height to 600px, which forces the container element to overflow. These two together ensure that the container has a vertical scrollbar, which allows it to be used as the source of the anonymous scrollbar timeline. 

 
```
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

```
 #### Result

 Scroll to see the square element being animated.



Specifications
--------------




| Specification |
| --- |
| [Scroll-driven Animations # funcdef-scroll](https://w3c.github.io/csswg-drafts/scroll-animations/#funcdef-scroll) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll` | No | No | 101Zero scroll range is treated as 100% but should be 0% (see [bug 1780865](https://bugzil.la/1780865)). | No | No | No | No | No | No | No | No | No |


See also
--------


* [Using CSS animations](../css_animations/using_css_animations)
* [`scroll-timeline-axis`](../scroll-timeline-axis)
* [`scroll-timeline`](../scroll-timeline)
* [`animation-timeline`](../animation-timeline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll>

image()
=======



The `image()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](../css_functions) defines an [`<image>`](../image) in a similar fashion to the [`url()`](../url) function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.

  **Note:** The CSS `image()` function should not confused with [`Image()`, the `HTMLImageElement` constructor](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image).

 

Syntax
------




```
<image()> =   
  image( <image-tags>[?](../value_definition_syntax#question_mark) [[](../value_definition_syntax#brackets) <image-src>[?](../value_definition_syntax#question_mark) , [<color>](../color_value)[?](../value_definition_syntax#question_mark) ]! )    
  
<image-tags> =   
  ltr  [|](../value_definition_syntax#single_bar)  
  rtl    
  
<image-src> =   
  <url>     [|](../value_definition_syntax#single_bar)  
  [<string>](../string)    
  
<url> =   
  url( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )  [|](../value_definition_syntax#single_bar)  
  src( [<string>](../string) [<url-modifier>](../url-modifier)[\*](../value_definition_syntax#asterisk) )    
  

```
 where:

  
`image-tags` Optional
  The directionality of the image, either `ltr` for left-to-right or `rtl` for right-to-left.

  
`image-src` Optional
  Zero or more [`url()`](../url)s or [`<string>`](../string)s specifying the image sources, with optional image fragment identifiers.

  
`color` Optional
  A color, specifying a solid background color to use as a fallback if no `image-src` is found, supported, or declared.

  
### Bi-directional awareness


The first, optional parameter of the `image()` notation is the directionality of the image. If included, and the image is used on an element with opposite directionality, the image will be flipped horizontally in horizontal writing modes. If the directionality is omitted, the image won't be flipped if the language direction is changed.

### Image fragments



One key difference between `url()` and `image()` is the ability to add a media fragment identifier — a starting point along the x and y axis, along with a width and height — onto the image source to display only a section of the source image. The section of the image defined in the parameter becomes a standalone image. The syntax looks like so:

 
```
background-image: image("myimage.webp#xywh=0,20,40,60");

```
 The background image of the element will be the portion of the image *myImage.webp* that starts at the coordinate 0px, 20px (the top left-hand corner) and is 40px wide and 60px tall.

 The `#xywh=#,#,#,#` media fragment syntax takes four comma separated numeric values. The first two represent the X and Y coordinates for the starting point of the box that will be created. The third value is the width of the box, and the last value is the height. By default, these are pixel values. The [spacial dimension definition in the media specification](https://www.w3.org/TR/media-frags/#naming-space) indicates that percentages will be supported as well:

 
```
xywh=160,120,320,240        /\* results in a 320x240 image at x=160 and y=120 \*/
xywh=pixel:160,120,320,240  /\* results in a 320x240 image at x=160 and y=120 \*/
xywh=percent:25,25,50,50    /\* results in a 50%x50% image at x=25% and y=25% \*/

```
 The image fragments can be used in `url()` notation as well. The `#xywh=#,#,#,#` media fragment syntax is 'backwards compatible' in that a media fragment will be ignored if not understood, and won't break the source call when used with `url()`. If the browser doesn't understand the media fragments notation, it ignores the fragment, displaying the entire image.

 Browsers that understand `image()` also understand the fragment notation. Therefore, if the fragment is not understood within `image()`, the image will be considered invalid.


### Color fallback



If a color is specified in `image()` along with your image sources, it acts as a fallback if the images are invalid and do not appear. In such cases, the `image()` function renders as if no image were included, generating a solid-color image. As a use case, consider a dark image being used as a background for some white text. A dark background color may be needed for foreground text to be legible, if the image does not render.

 Omitting image sources while including a color is valid and creates a color swatch. Unlike declaring a [`background-color`](../background-color), which is placed under or behind all the background images, this can be used to put (generally semi-transparent) colors over other images.

 The size of the color swatch can be set with the [`background-size`](../background-size) property. This is different from the `background-color`, which sets a color to cover the entire element. Both `image(color)` and `background-color` placements are impacted by the [`background-clip`](../background-clip) and [`background-origin`](../background-origin) properties.


Accessibility concerns
----------------------



Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

 * [MDN Understanding WCAG, Guideline 1.1 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
* [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)

 This feature can help improve accessibility by providing a fallback color when an image fails to load. While this can and should be done by including a background-color on every background image, the CSS `image()` function allows adding allows only including background colors should an image fail to load, which means you can add a fall back color should a transparent PNG/GIF/WebP not load.


Examples
--------


### Directionally-sensitive images




```
<ul>
  <li dir="ltr">Bullet is a right facing arrow on the left</li>
  <li dir="rtl">Bullet is the same arrow, flipped to point left.</li>
</ul>

```
 
```
ul {
  list-style-image: image(ltr "rightarrow.png");
}

```
 In the left-to-right list items — those with `dir="ltr"` set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is. List items with `dir="rtl"` set on the `<li>` or inheriting the right-to-left directionality from an ancestor, such as documents set to Arabic or Hebrew, will have the bullet display on the right, horizontally flipped, as if `transform: scaleX(-1)` had been set. The text will also be displayed left-to-right.



### Displaying a section of the background image




```
<div class="box">Hover over me. What cursor do you see?</div>

```
 
```
.box:hover {
  cursor: image("sprite.png#xywh=32,64,16,16");
}

```
 When the user hovers over the box, the cursor will change to display the 16x16 px section of the sprite image, starting at x=32 and y=64.



### Putting color on top of a background image




```
.quarterlogo {
  background-image: image(rgba(0, 0, 0, 0.25)), url("firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}

```
 
```
<div class="quarterlogo">
  If supported, a quarter of this div has a darkened logo
</div>

```
 The above will put a semi-transparent black mask over the Firefox logo background image. Had we used the [`background-color`](../background-color) property instead, the color would have appeared behind the logo image instead of on top of it. Additionally, the entire container would have had the same background color. Because we used `image()` along with the [`background-size`](../background-size) property (and prevented the image from repeating with the [`background-repeat`](../background-repeat) property, the color swatch will only cover a quarter of the container.



Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 4 # image-notation](https://w3c.github.io/csswg-drafts/css-images-4/#image-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `image` | No | No | No["See [bug 703217](https://bugzil.la/703217).", "The [`-moz-image-rect()`](https://developer.mozilla.org/docs/Web/CSS/-moz-image-rect) function supports fragments as of Firefox 4."] | No | No | No | No | No | NoThe [`-moz-image-rect()`](https://developer.mozilla.org/docs/Web/CSS/-moz-image-rect) function supports fragments as of Firefox 4. | No | No | No |


See also
--------


* [`<image>`](../image)
* [`element()`](../element())
* [`url()`](../url)
* [`clip-path`](../clip-path)
* [`-moz-image-rect()`](../-moz-image-rect)
* [`<gradient>`](../gradient)
* [`image-set()`](image-set)
* [`cross-fade()`](../cross-fade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/image/image>

polygon()
=========


The `polygon()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) function is one of the [`<basic-shape>`](../basic-shape) [data types](../css_types).


Try it
------


Syntax
------



```
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%);

```
### Values


 `<fill-rule>`  An optional value of `nonzero` (the default when omitted) or `evenodd`, which specifies the [filling rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule).

  `[<length-percentage><length-percentage>]#`  Three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.

  Examples
--------


### Basic polygon() example



In this example a shape is created for text to follow using the `polygon()`, you can change any of the values to see how the shape is changed.



Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1 # funcdef-basic-shape-polygon](https://w3c.github.io/csswg-drafts/css-shapes/#funcdef-basic-shape-polygon) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `polygon` | 37 | 79 | 54 | No | 24 | 10.1 | 37 | 37 | 54 | 24 | 10.3 | 3.0 |


See also
--------


* Properties that use this data type: [`clip-path`](../clip-path), [`shape-outside`](../shape-outside)
* [Guide to Basic Shapes](../css_shapes/basic_shapes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/polygon>

revert-layer
============



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `revert-layer` CSS keyword rolls back the value of a property in a [`cascade layer`](@layer) to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.

 If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the [`computed value`](computed_value) derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous [style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin).

 This keyword can be applied to any CSS property, including the CSS shorthand property [`all`](all).



Revert-layer vs. revert
-----------------------



The `revert-layer` keyword lets you rollback styles to the ones specified in previous cascade layers. All cascade layers exist in the [author origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin). The [`revert`](revert) keyword, in comparison, lets you remove styles applied in the author origin and roll back to styles in user origin or user-agent origin.

 The `revert-layer` keyword is ideally meant for applying on properties inside a layer. However, if the `revert-layer` keyword is set on a property outside a layer, the value of the property will roll back to the default value established by the user agent's stylesheet (or by user styles, if any exist). So in this scenario, the `revert-layer` keyword behaves like the [`revert`](revert) keyword.


Examples
--------


### Default cascade layer behavior



In the example below, two cascade layers are defined in the CSS, `base` and `special`. By default, rules in the `special` layer will override competing rules in the `base` layer because `special` is listed after `base` in the `@layer` declaration statement.

 #### HTML

 
```
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

```
 #### CSS

 
```
@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

```
 #### Result


 All the `<li>` elements match the `item` rule in the `special` layer and are red. This is the default cascade layer behavior, where rules in the `special` layer take precedence over rules in the `base` layer.


### Revert to style in previous cascade layer



Let's examine how the `revert-layer` keyword changes the default cascade layer behavior. For this example, the `special` layer contains an additional `feature` rule targeting the first `<li>` element. The `color` property in this rule is set to `revert-layer`.

 #### HTML

 
```
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

```
 #### CSS

 
```
@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

```
 #### Result


 With `color` set to `revert-layer`, the `color` property value rolls back to the value in the matching `feature` rule in the previous layer `base`, and so 'Item one' is now green.


### Revert to style in previous origin



This example shows the `revert-layer` keyword behavior when there is no cascade layer to revert to *and* there is no matching CSS rule in the current layer to inherit the property value.

 #### HTML

 
```
<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

```
 #### CSS

 
```
@layer base {
  .item {
    color: revert-layer;
  }
}

```
 #### Result


 The style for all `<li>` elements rolls back to the defaults in the user-agent origin.


Specifications
--------------




| Specification |
| --- |
| [CSS Cascading and Inheritance Level 5 # revert-layer](https://w3c.github.io/csswg-drafts/css-cascade-5/#revert-layer) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `revert-layer` | No | No | 97 | No | No | No | No | No | 97 | No | No | No |


See also
--------


* [`initial`](initial): Sets a property to its initial value
* [`inherit`](inherit): Sets an element's property the same as its parent
* [`revert`](revert): Resets a property to the value established by the user-agent stylesheet (or user styles if any exist)
* [`unset`](unset): Sets a property to its inherited value if the property inherits or to its initial value if the property does not inherit
* [`all`](all): Resets all properties to their initial, inherited, reverted, or unset state at once


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer>

font-variant-emoji
==================



The `font-variant-emoji` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the default presentation style for displaying emojis.

 Traditionally, this was done by appending a *Variation Selector*, `U+FE0E` for text and `U+FE0F` for emoji, to the emoji codepoint. Only emojis listed as contributing to a [Unicode emoji presentation sequence](https://www.unicode.org/emoji/charts/emoji-variants.html) are affected by this property.



Syntax
------




```
/\* Keyword values \*/
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

/\* Global values \*/
font-variant-emoji: inherit;
font-variant-emoji: initial;
font-variant-emoji: revert;
font-variant-emoji: revert-layer;
font-variant-emoji: unset;

```
 The `font-variant-emoji` property is specified using a single keyword value from the list below.


### Values


 `normal`  Allows a browser to choose how to display the emoji. This often follows the operating system setting.

  `text`  Renders the emoji as if it were using the unicode text variation selector (`U+FE0E`).

  `emoji`  Renders the emoji as if it were using the unicode emoji variation selector (`U+FE0F`).

  `unicode`  Renders the emoji in accordance with the [Emoji presentation properties](https://www.unicode.org/reports/tr51/tr51-23.html#Emoji_Presentation). If the `U+FE0E` or `U+FE0F` variation selector is present, then it will override this value setting.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
font-variant-emoji =   
  normal   [|](value_definition_syntax#single_bar)  
  text     [|](value_definition_syntax#single_bar)  
  emoji    [|](value_definition_syntax#single_bar)  
  unicode    
  

```
Examples
--------


### Changing the way an emoji is displayed



This example shows how you can render an emoji in its `text` or `emoji` presentation.

 #### HTML

 
```
<section class="emojis">
  <div class="emoji">
    <h2>text presentation</h2>
    <div class="text-presentation">☎</div>
  </div>
  <div class="emoji">
    <h2>emoji presentation</h2>
    <div class="emoji-presentation">☎</div>
  </div>
</section>

```
 #### CSS

 
```
.text-presentation {
  font-variant-emoji: text;
}

.emoji-presentation {
  font-variant-emoji: emoji;
}

```
 #### Result



Accessibility concerns
----------------------



While the use of emojis may seem fun, you should consider their impact on accessibility, specifically for users with visual and cognitive impairments. Consider the following factors while using emojis:

 * Display on screen-readers: Screen-readers will read out the alt text of an emoji. Keep this in mind to consider the position of an emoji in the content. Repeated and overuse of emojis will have a detrimental effect on screen-reader users. It is better to use emojis than emoticons; emoticons will be read out as punctuation characters.
* Contrast with background: When using emojis, consider their colors and how that will work with the background color, especially if you have background colors that can change, such as light/dark modes.
* Intent of use: Do not use emojis to replace words because your understanding of the emoji meaning may differ from that of the users'. Also consider that emojis might have different meanings in different cultures and geographies. Our recommendation is to preferably limit usage to commonly known emojis.


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-variant-emoji-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-variant-emoji-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-variant-emoji` | No | No | 108 | No | No | No | No | No | 108 | No | No | No |


See also
--------


* <font-variant>
* <font-variant-alternates>
* <font-variant-caps>
* <font-variant-east-asian>
* <font-variant-ligatures>
* <font-variant-numeric>
* [Emojis and accessibility: How to use them properly](https://uxdesign.cc/emojis-in-accessibility-how-to-use-them-properly-66b73986b803)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji>

Using multiple backgrounds
==========================



You can apply **multiple backgrounds** to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

 Specifying multiple backgrounds is easy:

 
```
.myclass {
  background: background1, background2, /\* … ,\*/ backgroundN;
}

```
 You can do this with both the shorthand [`background`](../background) property and the individual properties thereof except for [`background-color`](../background-color). That is, the following background properties can be specified as a list, one per background: [`background`](../background), [`background-attachment`](../background-attachment), [`background-clip`](../background-clip), [`background-image`](../background-image), [`background-origin`](../background-origin), [`background-position`](../background-position), [`background-repeat`](../background-repeat), [`background-size`](../background-size).



Example
-------


In this example, three backgrounds are stacked: the Firefox logo, an image of bubbles, and a [linear gradient](../gradient/linear-gradient):

### HTML



```
<div class="multi-bg-example"></div>

```
### CSS



```
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
}

```
### Result



(If image does not appear in CodePen, click the 'Tidy' button in the CSS section)


 As you can see here, the Firefox logo (listed first within [`background-image`](../background-image)) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'. Each subsequent sub-property ([`background-repeat`](../background-repeat) and [`background-position`](../background-position)) applies to the corresponding backgrounds. So the first listed value for [`background-repeat`](../background-repeat) applies to the first (frontmost) background, and so forth.


See also
--------


* [Using CSS gradients](../css_images/using_css_gradients)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds>

CSS compositing and blending
============================



The **compositing and blending** CSS module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new [stacking context](css_positioning/understanding_z_index/the_stacking_context).

 The properties in this CSS module can be used to define the blending mode that should be used, if any, to blend an element's background images and colors into a single background image. This module provides 16 blending modes. You can also define how an element's borders, background, and content, including text, emojis, and images, should be blended with the background of its container.



### Compositing and blending in action



In this example, each box has a border, two striped background images, and a solid color background. The common background for all the boxes contains a pattern of circles. The three boxes in the second row are set to blend with the background of the container.


 Notice how the background, border, and the content are all impacted as a result of the blending. To see the code for this sample, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/compositing.html).


Reference
---------


### Properties


* [`background-blend-mode`](background-blend-mode)
* [`isolation`](isolation)
* [`mix-blend-mode`](mix-blend-mode)
Related concepts
----------------


* [`<blend-mode>`](blend-mode) data type
* [`backdrop-filter`](backdrop-filter) CSS property
* [`filter`](filter) CSS property
* [`mask-composite`](mask-composite) CSS property
* [`background-color`](background-color) CSS property
* [`background-image`](background-image) CSS property
* [stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context) glossary term
* [`<feBlend>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feBlend) SVG filter primitive
* [`<feComposite>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite) SVG filter primitive
Specifications
--------------




| Specification |
| --- |
| [Compositing and Blending Level 2](https://drafts.fxtf.org/compositing/)  |
| [Compositing and Blending Level 1](https://www.w3.org/TR/compositing-1/)  |


See also
--------


* Properties in the [CSS filter effects](filter_effects) module enable applying filters effects, such as blurring and changing color intensity, to images, backgrounds, and borders.
* [Compositing And Blending In CSS](https://www.sarasoueidan.com/blog/compositing-and-blending-in-css/) (2015)
* [Editing Images in CSS: Blend Modes](https://code.tutsplus.com/tutorials/editing-images-in-css-blend-modes--cms-26058) (2022)
* [web.dev: blend modes](https://web.dev/learn/css/blend-modes/) (2021)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Compositing_and_Blending>

Implementing image sprites in CSS
=================================



**Image sprites** are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

  **Note:** When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests.

 

Implementation
--------------



Suppose an image is given to every item with class `toolbtn`:

 
```
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

```
 A background position can be added either as two x, y values after the [`url()`](../url) in the background, or as [`background-position`](../background-position). For example:

 
```
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}

```
 This would slide the starting point of the background image for the element with the ID `btn1` 20 pixels to the left and the element with the ID `btn2` 40 pixels to the left (assuming they have the class `toolbtn` assigned and are affected by the image rule above).

 Similarly, you can also make hover states with:

 
```
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}

```

See also
--------


* [Full working demo at CSS Tricks](https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS>

Overview of shapes
==================



The [CSS Shapes Level 1 Specification](https://www.w3.org/TR/css-shapes/) describes geometric shapes in CSS. They are, in Level 1 of the specification, designed to be applied to floated items. This article provides an overview of what you can do with shapes.

 You could for example float an item left, which would cause the text to wrap round the right and bottom of the item in a rectangular fashion. If you then apply a circle shape, the text would then wrap round the line of the circle.

 There are a number of ways to create these Shapes and in these guides we will find out how CSS Shapes work, and consider some ways you might like to use them.



What does the specification define?
-----------------------------------



The specification defines three new properties:

 * [`shape-outside`](../shape-outside) — allows definition of basic shapes
* [`shape-image-threshold`](../shape-image-threshold) — Sets an opacity threshold value. If an image is being used to define the shape, only the parts of the image that are the same opacity or greater than the threshold value are used in the shape. Any other parts are ignored.
* [`shape-margin`](../shape-margin) — sets a margin around the defined shape


Defining basic shapes
---------------------



The `shape-outside` property allows us to a define a shape. It takes a variety of values, all of which define different shapes, specified in the [`<basic-shape>`](../basic-shape) datatype. We can start by looking at a very simple case.

 In the following example I have an image floated left. I have then applied the `shape-outside` property to it with a value of `circle(50%)`. The result is that the content now curves around the circular shape rather than following the rectangle created by the box of the image.


 As in this level of the specification an element has to be floated in order to apply `<basic-shape>` to it; this has the side-effect of creating a simple fallback for many cases. If you do not have Shapes support in the browser, the user will see content flowing around the sides of a rectangular box as before. If they do have Shapes support then the visual display is enhanced.


### Basic shapes



The value `circle(50%)` is an example of a basic shape. The specification defines four `<basic-shape>` values, which are:

 * `inset()`
* `circle()`
* `ellipse()`
* `polygon()`

 Using the value `inset()` wraps text around a rectangular shape however you are able to add offset values, thus pulling the line boxes of any wrapping content closer to the object than would otherwise happen.

 We have already seen how `circle()` creates a circular shape. An `ellipse()` is essentially a squashed circle. If none of these simple shapes do the trick you can create a `polygon()` and make the shape as complex as you want.

 In our [Guide to Basic Shapes](basic_shapes) we explore each of the possible Basic Shapes and how to create them.


### Shapes from the box value



Shapes can also be created around the box value. Therefor, you could create your shape on:

 * `border-box`
* `padding-box`
* `content-box`
* `margin-box`

 In the example below, you can change the value `border-box` to any of the other allowed values to see how the shape moves closer or further away from the box.


 To explore the box values in more detail, see our guide covering [Shapes from box values](from_box_values).


### Shapes from images



An interesting way to generate your path is to use an image with an alpha channel — the text will then wrap around the non-transparent parts of the image. This allows the overlay of wrapped content around an image, or the use of an image which is never displayed on the page purely as a method of creating a complex shape without needing to carefully map a polygon.

 Note that images used in this way must be [CORS compatible](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), otherwise `shape-outside` will act as if `none` had been given as the value, and you will get no shape.

 In this next example, we have an image with a fully transparent area, and we are using an image as the URL value for `shape-outside`. The shape is created around the opaque area — the image of the balloon.


 #### `shape-image-threshold`

 The `shape-image-threshold` property is used to set the threshold of image transparency used to define the area of the image used for the shape. If the value of `shape-image-threshold` is `0.0` (which is the initial value) then the area must be fully transparent. If the value is `1.0` then it is fully opaque. Values in between mean that you can set a semi-transparent area as the defining area of the shape.

 You can see the threshold in action if we use a gradient as the image on which to define our shape. In the example below, if you change the threshold the path that the shape takes changes based on the level of opacity you have selected.


 We take a deeper look at creating shapes from images in the [Shapes from Images](shapes_from_images) guide.


The `shape-margin` property
---------------------------



The [`shape-margin`](../shape-margin) property adds a margin to `shape-outside`. This will further shorten the line boxes of any content wrapping the shape, pushing it away from the shape itself.

 In the example below we have added a `shape-margin` to a basic shape. Change the margin to push the text further away from the path the shape would take by default.



Using Generated Content as the floated item
-------------------------------------------



In the examples above, we have used images or a visible element to define the shape, meaning that you can see the shape on the page. Instead, you might want to cause some text to flow along a non-rectangular invisible line. You can do this with Shapes, however you will still need a floated item, which you can then make invisible. That could be a redundant element inserted into the document, an empty [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) or [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) perhaps, but our preference is to use generated content. This means we can keep things used for styling inside the CSS.

 In this next example, we use generated content to insert an element with height and width of 150px. We can then use Basic Shapes, Box Values or even the Alpha Channel of an image to create a shape for the text to wrap around.



Relationship to `clip-path`
---------------------------



The Basic Shapes and Box values used to create Shapes are the same as those used as values for [`clip-path`](../clip-path). Therefore if you want to create a shape using an image, and also clip away part of that image, you can use the same values.

 The image below is a square image with a blue background. We have defined a shape using `shape-outside: ellipse(40% 50%);` and also used `clip-path: ellipse(40% 50%);` to clip away the same area that we have used to define the shape.



Developer Tools for Shapes
--------------------------



Along with CSS Shapes support in the browser, Firefox are shipping a [Shape Path Editor](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html) in the Firefox DevTools. This tool means that you can inspect any shapes on your page, and even change the values in the live page. If your polygon isn't quite right you can use the Shapes Editor to tweak it, then copy the new value back into your CSS.

 The Shape Path Editor will be enabled by default in Firefox 60 for shapes generated via `clip-path`. You can also use it to edit shapes generated via `shape-outside`, but only when you enable it via the `layout.css.shape-outside.enabled` pref.


Future CSS Shapes Features
--------------------------


The initial Shapes specification included a property `shape-inside` for creating shapes inside an element. This property, along with the possibility of creating shapes on non-floated elements, has been moved to [level 2](https://drafts.csswg.org/css-shapes-2/) of the specification. As the `shape-inside` property was initially in Level 1 of the specification, you may find tutorials on the web detailing both properties.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes>

Scaling of SVG backgrounds
==========================


Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the [`background-image`](background-image) property, and even more to keep in mind when also scaling them using the [`background-size`](background-size) property. This article describes how scaling of SVG images is handled when using these properties.


The algorithm, in summary
-------------------------



The algorithm can for the most part be summarized by these four rules. There are some edge cases that aren't covered by these rules, but this covers the majority of cases.

 1. If [`background-size`](background-size) specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins.
2. If the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
3. If the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins.
4. If none of the above cases are met, the image is rendered at the same size as the background area.

 It's worth noting that the sizing algorithm only cares about the image's dimensions and proportions, or lack thereof. An SVG image with fixed dimensions will be treated just like a raster image of the same size.

  **Note:** If you are trying to stretch your SVG to a different aspect ratio with CSS—for example in order to stretch it over the page background—make sure your SVG includes `preserveAspectRatio="none"`. Find out more about `[preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)`.

 
Source image examples
---------------------



Before diving in to look at the results of using different kinds of source images and seeing how they look when used with [`background-size`](background-size), it would be helpful to look at a few example source images that have different dimensions and sizing settings.

 In each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the SVG source.


### Dimensionless and proportionless



This image is both dimensionless and proportionless. It doesn't care what size it is, nor does it care about remaining at a particular aspect ratio. This would make a good gradient desktop background that would work regardless of your screen size and its aspect ratio.

  ![no-dimensions-or-ratio.png] 

 [SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg)


### One specified dimension and proportionless



This image specifies a width of 100 pixels but no height or intrinsic ratio. This is, basically, a thin strip of wallpaper that could be stretched across the entire height of a block.

  ![100px-wide-no-height-or-ratio.png] 

 [SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg)


### One specified dimension with intrinsic ratio



This image specifies a 100 pixel height but no width. It also specifies an intrinsic aspect ratio of 3:4. This ensures that its width:height ratio is always 3:4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio).

 This is very much like specifying a specific width and height, since once you have one dimension and a ratio, the other dimension is implied, but it's still a useful example.

  ![100px-height-3x4-ratio.png] 

 [SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg)


### No width or height with intrinsic ratio



This image doesn't specify either a width or a height; instead, it specifies an intrinsic ratio of 1:1. Think of this like a program icon. It's always square, and is usable at any size, such as 32x32, 128x128, or 512x512, for example.

  ![no-dimensions-1x1-ratio.png] 

 [SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg)


Scaling examples
----------------



Now let's see some examples of what happens as we apply different scaling to these images. In each of the examples below, the enclosing rectangles are 300 pixels wide and 200 pixels tall. In addition, the backgrounds have [`background-repeat`](background-repeat) set to no-repeat for clarity.

  **Note:** The screenshots below show the **expected** rendering. Not all browsers currently render these correctly.

 
### Specifying fixed lengths for both dimensions



If you use [`background-size`](background-size) to specify fixed lengths for both dimensions, those lengths are always used, per rule 1 above. In other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.

 #### Source: No dimensions or intrinsic ratio

 Given this CSS:

 
```
background: url(no-dimensions-or-ratio.svg);
background-size: 125px 175px;

```
 The rendered output would look like this:

  ![fixed-no-dimensions-or-ratio.png] 

 #### Source: One specified dimension, no intrinsic ratio

 Given this CSS:

 
```
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 250px 150px;

```
 The rendered output would look like this:

  ![fixed-100px-wide-no-height-or-ratio.png] 

 #### Source: One specified dimension with intrinsic ratio

 Given this CSS:

 
```
background: url(100px-height-3x4-ratio.svg);
background-size: 275px 125px;

```
 The rendered output would look like this:

  ![fixed-100px-height-3x4-ratio.png] 

 #### Source: No specified width or height with intrinsic ratio

 Given this CSS:

 
```
background: url(no-dimensions-1x1-ratio.svg);
background-size: 250px 100px;

```
 The rendered output would look like this:

  ![fixed-no-dimensions-1x1-ratio.png] 


### Using contain or cover



Specifying `cover` for [`background-size`](background-size) makes the picture as small as possible while still covering the entire background area. `contain`, on the other hand, makes the image as large as possible while not being clipped by the background area.

 For an image with an intrinsic ratio, exactly one size matches the `cover`/fit criteria alone. But if there is no intrinsic ratio specified, `cover`/fit isn't sufficient, so the large/small constraints choose the resulting size.

 #### Source: No dimensions or intrinsic ratio

 If an image doesn't specify either dimensions or an intrinsic ratio, neither rule 2 nor rule 3 apply, so rule 4 takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.

 
```
background: url(no-dimensions-or-ratio.svg);
background-size: contain;

```
 The rendered output looks like this:

  ![no-dimensions-or-ratio-contain.png] 

 #### Source: One specified dimension, no intrinsic ratio

 Similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.

 
```
background: url(100px-wide-no-height-or-ratio.svg);
background-size: contain;

```
 The rendered output looks like this:

  ![100px-wide-no-height-or-ratio-contain.png] 

 #### Source: One specified dimension with intrinsic ratio

 Things change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting `contain` or `cover`). For example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with `contain` means drawing a 150x200 background.

 ##### contain case

 
```
background: url(100px-height-3x4-ratio.svg);
background-size: contain;

```
 The rendered output looks like this:

  ![100px-height-3x4-ratio-contain.png] 

 Notice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.

 ##### cover case

 
```
background: url(100px-height-3x4-ratio.svg);
background-size: cover;

```
 The rendered output looks like this:

  ![100px-height-3x4-ratio-cover.png] 

 Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

 #### Source: No dimensions with intrinsic ratio

 When using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly.

 ##### contain case

 
```
background: url(no-dimensions-1x1-ratio.svg);
background-size: contain;

```
 The rendered output looks like this:

  ![no-dimensions-1x1-ratio-contain.png] 

 Notice that the image is sized to fit the smallest dimension while preserving the 1:1 aspect ratio.

 ##### cover case

 
```
background: url(no-dimensions-1x1-ratio.svg);
background-size: cover;

```
 The rendered output looks like this:

  ![no-dimensions-1x1-ratio-cover.png] 

 Here, the image is sized so that it fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.


### Automatic sizing using "auto" for both dimensions



If [`background-size`](background-size) is set to `auto` or `auto auto`, rule 2 says that rendering must preserve any intrinsic ratio that's provided.

 #### Source: No dimensions or intrinsic ratio

 When no intrinsic ratio or dimensions are specified by the source image, rule 4 takes effect, and the image is rendered to fill the background area.

 
```
background: url(no-dimensions-or-ratio.svg);
background-size: auto auto;

```
 The rendered output looks like this:

  ![auto-no-dimensions-or-ratio.png] 

 #### Source: One dimension and no intrinsic ratio

 If no intrinsic ratio is specified, but at least one dimension is specified, rule 3 takes effect, and we render the image obeying those dimensions.

 
```
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto auto;

```
 The rendered output looks like this:

  ![auto-100px-wide-no-height-or-ratio.png] 

 Note here that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the background area since it's not specified (either explicitly or by an intrinsic ratio).

 #### Source: One dimension and an intrinsic ratio

 If we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing one dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.

 
```
background: url(100px-height-3x4-ratio.svg);
background-size: auto auto;

```
 The rendered output looks like this:

  ![auto-100px-height-3x4-ratio.png] 

 Since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that's how it's rendered in the `auto` case.

 #### Source: No fixed dimensions with intrinsic ratio

 When an intrinsic ratio is specified, but no dimensions, rule 4 is applied — except that rule 2 also applies. The image is therefore rendered just like for the `contain` case.

 
```
background: url(no-dimensions-1x1-ratio.svg);
background-size: auto auto;

```
 The rendered output looks like this:

  ![auto-no-dimensions-1x1-ratio.png] 


### Using "auto" and one specific length



Given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.

 #### Source: No dimensions or intrinsic ratio

 If the image has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the `auto` dimension.

 
```
background: url(no-dimensions-or-ratio.svg);
background-size: auto 150px;

```
  ![1auto-no-dimensions-or-ratio.png] 

 Here, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the CSS.

 #### Source: One specified dimension with no intrinsic ratio

 If the image has one specified dimension but no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to `auto` in the CSS.

 
```
background: url(100px-wide-no-height-or-ratio.svg);
background-size: 200px auto;

```
  ![100px-wide-no-height-or-ratio-length-auto.png] 

 Here, the 200px specified in the CSS overrides the 100px width specified in the SVG, per rule 1. Since there's no intrinsic ratio or height provided, `auto` selects the height of the background area as the height for the rendered image.

 
```
background: url(100px-wide-no-height-or-ratio.svg);
background-size: auto 125px;

```
  ![100px-wide-no-height-or-ratio-auto-length.png] 

 In this case, the width is specified as auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, so that is selected per rule 1.

 #### Source: One specified dimension with intrinsic ratio

 When a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden by the CSS. When an intrinsic ratio is also specified, that's used to determine the other dimension.

 
```
background: url(100px-height-3x4-ratio.svg);
background-size: 150px auto;

```
  ![1auto-100px-height-3x4-ratio.png] 

 In this case, we use the width of the image specified in the CSS set at 150px, so rule 1 is applied. The intrinsic 3:4 aspect ratio then determines the height for the `auto` case.

 #### Source: No specified dimensions with intrinsic ratio

 If no dimensions are specified in the SVG, the specified dimension in the CSS is applied, then the intrinsic ratio is used to select the other dimension, per rule 2.

 
```
background: url(no-dimensions-1x1-ratio.svg);
background-size: 150px auto;

```
  ![1auto-no-dimensions-1x1-ratio.png] 

 The width is set by the CSS to 150px. The `auto` value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.


See also
--------


* [`background-size`](background-size)
* Blog post: [Properly resizing vector image backgrounds](https://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds>

Resizing background images with background-size
===============================================


The **[`background-size`](../background-size)** CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image. By doing so, you can scale the image upward or downward as desired.


Tiling a large image
--------------------


Let's consider a large image, a 2982x2808 Firefox logo image. We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed `background-size` value of 150 pixels.

### HTML



```
<div class="tiledBackground"></div>

```
### CSS



```
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

```
### Result


Stretching an image
-------------------



You can also specify both the horizontal and vertical sizes of the image, like this:

 
```
background-size: 300px 150px;

```
 The result looks like this:

  ![New Firefox logo stretched] 


Scaling an image up
-------------------



On the other end of the spectrum, you can scale an image up in the background. Here we scale a 32x32 pixel favicon to 300x300 pixels:

  ![MDN Logo scaled] 

 
```
.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

```
 As you can see, the CSS is actually essentially identical, save the name of the image file.


Special values: "contain" and "cover"
-------------------------------------


Besides [`<length>`](../length) values, the [`background-size`](../background-size) CSS property offers two special size values, `contain` and `cover`. Let's take a look at these.

### contain



The `contain` value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing the example below to see this in action.

 #### HTML

 
```
<div class="bgSizeContain">
  <p>Try resizing this element!</p>
</div>

```
 #### CSS

 
```
.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

```
 #### Result



### cover



The `cover` value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.

 #### HTML

 
```
<div class="bgSizeCover">
  <p>Try resizing this element!</p>
</div>

```
 #### CSS

 
```
.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

```
 #### Result



See also
--------


* [`background-size`](../background-size)
* [`background`](../background)
* [Scaling of SVG backgrounds](../scaling_of_svg_backgrounds)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images>

CSS filter effects
==================


The properties in the **CSS filter effects** module let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.


### Filter effects in action



Play with the various sliders to apply filter effects to the image below:


 To see the code for this filter effects sample, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/filters.html).


### Properties


* [`backdrop-filter`](backdrop-filter)
* [`filter`](filter)
### Functions


* [`blur()`](filter-function/blur)
* [`brightness()`](filter-function/brightness)
* [`contrast()`](filter-function/contrast)
* [`drop-shadow()`](filter-function/drop-shadow)
* [`grayscale()`](filter-function/grayscale)
* [`hue-rotate()`](filter-function/hue-rotate)
* [`invert()`](filter-function/invert)
* [`opacity()`](filter-function/opacity)
* [`saturate()`](filter-function/saturate)
* [`sepia()`](filter-function/sepia)
Guides
------


 [Using CSS filter effects](filter_effects/using_filter_effects)  Overview of the concepts surrounding CSS filter effects, including properties, filter functions, and SVG filters, with an explanation of filter values, source order, and value interactions.

  Related concepts
----------------


* [`<image>`](image) data type
* [`<filter-function>`](filter-function) data type
* [`background-image`](background-image) CSS property
* [`background-blend-mode`](background-blend-mode) CSS property
* [`mix-blend-mode`](mix-blend-mode) CSS property
* [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) glossary term
* [`color-interpolation-filters`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color-interpolation-filters) SVG property
Specifications
--------------




| Specification |
| --- |
| [Filter Effects Module Level 2](https://drafts.fxtf.org/filter-effects-2/)  |
| [Filter Effects Module Level 1](https://drafts.fxtf.org/filter-effects-1/)  |


See also
--------


* Properties in the CSS [compositing and blending](compositing_and_blending) module enable blending an element's background layers together and blending an element with its container.
* The SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element and the SVG filter primitives, including [`<feSpotLight>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpotLight), [`<feBlend>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feBlend), [`<feColorMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix), [`<feComponentTransfer>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer), [`<feComposite>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComposite), [`<feConvolveMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix), [`<feDiffuseLighting>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDiffuseLighting), [`<feDisplacementMap>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap), [`<feDropShadow>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow), [`<feFlood>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood), [`<feGaussianBlur>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur), [`<feImage>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feImage), [`<feMerge>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMerge), [`<feMorphology>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feMorphology), [`<feOffset>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feOffset), [`<feSpecularLighting>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feSpecularLighting), [`<feTile>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTile), and [`<feTurbulence>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Filter_Effects>

CSS Logical Properties and Values
=================================



**CSS Logical Properties and Values** is a module of [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

 The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.



### Block vs. inline



Logical properties and values use the abstract terms *block* and *inline* to describe the direction in which they flow. The physical meaning of these terms depends on the [writing mode](css_writing_modes).

  Block dimension  The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.

  Inline dimension  The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.

  
Reference
---------


### Properties for sizing


* [`block-size`](block-size)
* [`inline-size`](inline-size)
* [`max-block-size`](max-block-size)
* [`max-inline-size`](max-inline-size)
* [`min-block-size`](min-block-size)
* [`min-inline-size`](min-inline-size)
### Properties for margins, borders, and padding


* [`border-block`](border-block)
* [`border-block-color`](border-block-color)
* [`border-block-end`](border-block-end)
* [`border-block-end-color`](border-block-end-color)
* [`border-block-end-style`](border-block-end-style)
* [`border-block-end-width`](border-block-end-width)
* [`border-block-start`](border-block-start)
* [`border-block-start-color`](border-block-start-color)
* [`border-block-start-style`](border-block-start-style)
* [`border-block-start-width`](border-block-start-width)
* [`border-block-style`](border-block-style)
* [`border-block-width`](border-block-width)
* [`border-color`](border-color)
* [`border-inline`](border-inline)
* [`border-inline-color`](border-inline-color)
* [`border-inline-end`](border-inline-end)
* [`border-inline-end-color`](border-inline-end-color)
* [`border-inline-end-style`](border-inline-end-style)
* [`border-inline-end-width`](border-inline-end-width)
* [`border-inline-start`](border-inline-start)
* [`border-inline-start-color`](border-inline-start-color)
* [`border-inline-start-style`](border-inline-start-style)
* [`border-inline-start-width`](border-inline-start-width)
* [`border-inline-style`](border-inline-style)
* [`border-inline-width`](border-inline-width)
* [`border-start-start-radius`](border-start-start-radius)
* [`border-start-end-radius`](border-start-end-radius)
* [`border-end-start-radius`](border-end-start-radius)
* [`border-end-end-radius`](border-end-end-radius)
* [`border-style`](border-style)
* [`border-width`](border-width)
* [`margin`](margin) (`logical`  Experimental  keyword)
* [`margin-block`](margin-block)
* [`margin-block-end`](margin-block-end)
* [`margin-block-start`](margin-block-start)
* [`margin-inline`](margin-inline)
* [`margin-inline-end`](margin-inline-end)
* [`margin-inline-start`](margin-inline-start)
* [`padding`](padding) (`logical`  Experimental  keyword)
* [`padding-block`](padding-block)
* [`padding-block-end`](padding-block-end)
* [`padding-block-start`](padding-block-start)
* [`padding-inline`](padding-inline)
* [`padding-inline-end`](padding-inline-end)
* [`padding-inline-start`](padding-inline-start)
### Properties for floating and positioning


* [`clear`](clear) (`inline-end` and `inline-start` keywords)
* [`float`](float) (`inline-end` and `inline-start` keywords)
* [`inset`](inset)
* [`inset-block`](inset-block)
* [`inset-block-end`](inset-block-end)
* [`inset-block-start`](inset-block-start)
* [`inset-inline`](inset-inline)
* [`inset-inline-end`](inset-inline-end)
* [`inset-inline-start`](inset-inline-start)
### Properties for size containment


* [`contain-intrinsic-block-size`](contain-intrinsic-block-size)
* [`contain-intrinsic-inline-size`](contain-intrinsic-inline-size)
### Other properties


* [`caption-side`](caption-side) (`inline-end` and `inline-start` keywords)
* [`overflow-block`](overflow-block)
* [`overflow-inline`](overflow-inline)
* [`overscroll-behavior-block`](overscroll-behavior-block)
* [`overscroll-behavior-inline`](overscroll-behavior-inline)
* [`resize`](resize) (`block` and `inline` keywords)
* [`text-align`](text-align) (`end` and `start` keywords)
### Deprecated properties


* `offset-block-end`  Non-standard   Deprecated  (now [`inset-block-end`](inset-block-end))
* `offset-block-start`  Non-standard   Deprecated  (now [`inset-block-start`](inset-block-start))
* `offset-inline-end`  Non-standard   Deprecated  (now [`inset-inline-end`](inset-inline-end))
* `offset-inline-start`  Non-standard   Deprecated  (now [`inset-inline-start`](inset-inline-start))
Guides
------


* [Basic concepts of logical properties and values](css_logical_properties/basic_concepts)
* [Logical properties for sizing](css_logical_properties/sizing)
* [Logical properties for margins, borders, and padding](css_logical_properties/margins_borders_padding)
* [Logical properties for floating and positioning](css_logical_properties/floating_and_positioning)
Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1](https://drafts.csswg.org/css-logical/)  |


Browser compatibility
---------------------



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties>

CSS backgrounds and borders
===========================



The **CSS backgrounds and borders** module provides properties for adding borders, rounded corners, and box shadows to elements.

 You can add different types of border styles, including borders made of images of any image type, from raster images to CSS gradients. Borders can be square or rounded, and a different radius can be set for each corner. Elements can be rounded whether or not they have a visible border.

 Box shadows include inset and outset shadow, single or multiple shadows, and solid or allowed to fade to transparent. An outer box-shadow casts a shadow as if the border-box of the element were opaque. An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The shadow can be solid or include a spread distance with the shadow color transitioning to transparent.

 The properties in this module also let you define whether cells inside a [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) should have shared or separate borders.



### Backgrounds, borders, and box shadows in action



This sample of borders, backgrounds, and box shadows consists of centered background images made of linear and radial gradients. A series of box shadows make the border appear to "pop". The element on the left has a border image set. The element on the right has a rounded dotted border.


 The background images are defined with [`background-image`](background-image). The images are centered with [`background-position`](background-position). Different values of the [`background-clip`](background-clip) property for the multiple background images are used to make the background images stay within the content box. The background color gets clipped to the padding box preventing the background from appearing through the transparent sections for the [`border-image`](border-image) and the [`dotted`](border-style) [`border`](border). The rounded corners in the element on the right are created using the [`border-radius`](border-radius) property. A single [`box-shadow`](box-shadow) declaration is used to set all the shadows, both inset and outset.

 To see the code for this sample, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/backgrounds.html).


Reference
---------


### Properties


* [`background-attachment`](background-attachment)
* [`background-clip`](background-clip)
* [`background-color`](background-color)
* [`background-image`](background-image)
* [`background-origin`](background-origin)
* [`background-position`](background-position)
* [`background-repeat`](background-repeat)
* [`background-size`](background-size)
* [`background`](background) shorthand
* [`background-position-x`](background-position-x)  Experimental
* [`background-position-y`](background-position-y)  Experimental
* `background-position-inline`  Experimental
* `background-position-block`  Experimental
* [`border-bottom-color`](border-bottom-color)
* [`border-bottom-style`](border-bottom-style)
* [`border-bottom-width`](border-bottom-width)
* [`border-bottom`](border-bottom) shorthand
* [`border-left-color`](border-left-color)
* [`border-left-style`](border-left-style)
* [`border-left-width`](border-left-width)
* [`border-left`](border-left) shorthand
* [`border-right-color`](border-right-color)
* [`border-right-style`](border-right-style)
* [`border-right-width`](border-right-width)
* [`border-right`](border-right) shorthand
* [`border-top-color`](border-top-color)
* [`border-top-style`](border-top-style)
* [`border-top-width`](border-top-width)
* [`border-top`](border-top) shorthand
* [`border-color`](border-color) shorthand
* [`border-style`](border-style) shorthand
* [`border-width`](border-width) shorthand
* [`border`](border) shorthand
* [`border-collapse`](border-collapse)
* [`border-bottom-left-radius`](border-bottom-left-radius)
* [`border-bottom-right-radius`](border-bottom-right-radius)
* [`border-top-left-radius`](border-top-left-radius)
* [`border-top-right-radius`](border-top-right-radius)
* [`border-radius`](border-radius) shorthand
* [`border-image-outset`](border-image-outset)
* [`border-image-repeat`](border-image-repeat)
* [`border-image-slice`](border-image-slice)
* [`border-image-source`](border-image-source)
* [`border-image-width`](border-image-width)
* [`border-image`](border-image) shorthand
* [`box-shadow`](box-shadow)
Guides
------


 [Learn CSS: background and borders](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)  Explains how to implement decorative images using CSS background images.

  [Using multiple backgrounds](css_backgrounds_and_borders/using_multiple_backgrounds)  Explains how to set one or more backgrounds on an element.

  [Resizing background images](css_backgrounds_and_borders/resizing_background_images)  Describes how to change the size and repeating behavior of background images.

  [Learn CSS: the box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)  Explains how borders, along with other box model properties, impact the CSS box model.

  [Using CSS gradients](css_images/using_css_gradients)  Explains how to create CSS gradient background images.

  Related concepts
----------------


* [`border-block-end-color`](border-block-end-color) property
* [`border-block-start-color`](border-block-start-color) property
* [`border-inline-end-color`](border-inline-end-color) property
* [`border-inline-start-color`](border-inline-start-color) property
* [`border-block-end-style`](border-block-end-style) property
* [`border-block-start-style`](border-block-start-style) property
* [`border-inline-end-style`](border-inline-end-style) property
* [`border-inline-start-style`](border-inline-start-style) property
* [`border-block-end-width`](border-block-end-width) property
* [`border-block-start-width`](border-block-start-width) property
* [`border-inline-end-width`](border-inline-end-width) property
* [`border-inline-start-width`](border-inline-start-width) property
* [`border-start-start-radius`](border-start-start-radius) property
* [`border-start-end-radius`](border-start-end-radius) property
* [`border-end-start-radius`](border-end-start-radius) property
* [`border-end-end-radius`](border-end-end-radius)  property
* [`box-sizing`](box-sizing) property
* [`box-decoration-break`](box-decoration-break) property
* [`text-shadow`](text-shadow) property
* [`url()`](url) CSS function
* [`<color>`](color) data type
* [`<image>`](image) data type
* [`<position>`](position) data type
* [`currentcolor`](color_value#currentcolor_keyword) keyword
Specifications
--------------




| Specification |
| --- |
| [CSS Backgrounds and Borders Module Level 3](https://drafts.csswg.org/css-backgrounds/)  |


See also
--------


* Interactive tools that let you visually create borders images, rounded corners, and box shadows:
	+ [Border-image generator](css_backgrounds_and_borders/border-image_generator)
	+ [Border-radius generator](css_backgrounds_and_borders/border-radius_generator)
	+ [Box-shadow generator](css_backgrounds_and_borders/box-shadow_generator)
* [Applying color to HTML elements using CSS](css_colors/applying_color), including for borders.
* The [`drop-shadow()`](filter-function/drop-shadow) filter function that applies a drop shadow effect to the input image. The function is used by the [`filter`](filter) and [`backdrop-filter`](backdrop-filter) properties.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders>

CSS Writing Modes
=================


**CSS Writing Modes** is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts).


Reference
---------


### Properties


* [`direction`](direction)
* `glyph-orientation-horizontal`
* [`text-combine-upright`](text-combine-upright)
* [`text-orientation`](text-orientation)
* [`unicode-bidi`](unicode-bidi)
* [`writing-mode`](writing-mode)
Specifications
--------------




| Specification |
| --- |
| [CSS Writing Modes Level 4](https://drafts.csswg.org/css-writing-modes/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes>

CSS Fragmentation
=================



**CSS Fragmentation** is a module of CSS that defines how content is displayed when it is broken (fragmented) across multiple [pages](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media), regions, or [columns](css_columns).

 Fragmentation occurs when an inline box wraps onto multiple lines. It also occurs 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*.



Reference
---------


### Properties


* [`box-decoration-break`](box-decoration-break)
* [`break-after`](break-after)
* [`break-before`](break-before)
* [`break-inside`](break-inside)
* [`orphans`](orphans)
* [`widows`](widows)
Specifications
--------------




| Specification |
| --- |
| [CSS Fragmentation Module Level 3](https://drafts.csswg.org/css-break/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation>

Box-shadow generator
====================



This tool lets you construct CSS [`box-shadow`](../box-shadow) effects, to add box shadow effects to your CSS objects.


 The box-shadow generator enables you to add one or more box shadows to an element.

 On opening the tool, you'll find a rectangle in the top-right section of the tool. That's the element you're going to be applying shadows to. When this element is selected (as it is, when you first load the page) you can apply some basic styling to it:

 * Set the element's [`color`](../color) using the color picker tool.
* Give the element a [`border`](../border) using the "border" checkbox.
* Use the sliders to set the element's [`top`](../top), [`left`](../left), [`width`](../width), and [`height`](../height) properties.

 To add a box shadow, click the "+" button at the top-left. This adds a shadow, and lists it in the column on the left. Now you can set the values of the new shadow:

 * Set the shadow's [`color`](../color) using the color picker tool.
* Set the shadow to be inset using the "inset" checkbox.
* Use the sliders to set the element's position, blur, and spread.

 To add another shadow, click "+" again. Now any values you set will apply to this new shadow. Change the order in which these two shadows are applied using the ↑ and ↓ buttons at the top-left. Select the first shadow again by clicking it in column on the left. To update the element's own styles, select it by clicking the button labelled "element" along the top.

 You can add [`::before`](../::before) and [`::after`](../::after) pseudo-elements to the element, and give them box shadows as well. To switch between the element and its pseudo-elements, use the buttons along the top labeled "element", ":before", and ":after".

 The box at the bottom-right contains the CSS for the element and any `before::` or `::after` pseudo-elements.



See also
--------


 [Border-image generator](border-image_generator)  This interactive tool lets you visually create border images (the [`border-image`](../border-image) property).

  [Border-radius generator](border-radius_generator)  This interactive tool lets you visually create rounded corners (the [`border-radius`](../border-radius) property).

  

 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator>

page
====



The `page` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is used to specify the named page, a specific type of page defined by the [`@page`](@page) <at-rule>.

 If there are multiple selectors that are using a named page consecutively then a forced page break using [`break-after`](break-after) may be needed.



Syntax
------



```
/\* set a named page \*/
page: exampleName;
page: chapterIntro;

/\* Use ancestors named page \*/
page: auto; /\* default value \*/

/\* Global values \*/
page: inherit;
page: initial;
page: revert;
page: revert-layer;
page: unset;

```
### Values


 `auto`  Default value. Use the value of the nearest ancestor with a non-`auto` value. If no ancestor has a named page value set, the used value for auto is the empty string.

  [`<custom-ident>`](custom-ident)  Case-sensitive name defined in a [`@page`](@page) at-rule.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
page =   
  auto            [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)    
  

```
Examples
--------


### Named page example



#### HTML

 There are two parts to this HTML:

 * The print controls
* The content to be printed

 The print controls allow the user to select how the `section`s in the `article` will be printed.

 
```
<!-- print options -->
<fieldset id="printStyle">
  <legend>How would you like to print</legend>
  <label for="single"
 ><input type="radio" id="single" name="type" value="single" checked />No
    Pages</label
 >
  <label for="double"
 ><input type="radio" id="grouped" name="type" value="grouped" />Pages with
    Grouped Chapters</label
 >
  <label for="double"
 ><input type="radio" id="paged" name="type" value="paged" />Chapters
    Paged</label
 >
  <button id="print">Print</button>
</fieldset>
<!-- Content to be printed -->
<article id="print-area" data-print="single">
  <section id="toc">
    <h2>Table of contents</h2>
    <ul>
      <li>Foreword</li>
      <li>Introduction</li>
      <li>Chapter One - named pages</li>
      <li>Chapter Two - page orientation</li>
      <li>Chapter Three - page margins</li>
      <li>Conclusion</li>
    </ul>
  </section>
  <section id="foreword">
    <h2>Foreword</h2>
    <p>
      This book is all about how the CSS <code>@page</code> at-rule can help
      with printing HTML books.
    </p>
  </section>
  <section id="introduction">
    <h2>Introduction</h2>
    <p>
      This book is a concept to show how an <em>HTML</em> document can easily be
      printed out in pages.
    </p>
  </section>
  <section id="chapter1" class="chapter">
    <h2>Named pages</h2>
    <p>Lorem ipsum</p>
  </section>
  <section id="chapter2" class="chapter">
    <h2>Page Orientation</h2>
    <p>Lorem ipsum</p>
  </section>
  <section id="chapter3" class="chapter">
    <h2>Page Margins</h2>
    <p>There are 16 page margins that can be set:</p>
    <ul>
      <li>@top-left-corner</li>
      <li>@top-left</li>
      <li>@top-middle</li>
      <li>@top-right</li>
      <li>@top-right-corner</li>
      <li>@left-top</li>
      <li>@left-middle</li>
      <li>@left-bottom</li>
      <li>@right-top</li>
      <li>@right-middle</li>
      <li>@right-bottom</li>
      <li>@bottom-left-corner</li>
      <li>@bottom-left</li>
      <li>@bottom-middle</li>
      <li>@bottom-right</li>
      <li>@bottom-right-corner</li>
    </ul>
    <p>They can be used to show what appears in these parts of the margin</p>
  </section>
  <section id="conclusion">
    <h2>Conclusion</h2>
    <p>Now go ahead and write books.</p>
  </section>
</article>

```
 #### CSS

 The first part of the CSS sets up the **named** pages, these include the size and orientation and also some content to go in the [`@top-middle` margin](@page#margin_at-rules) of the printed pages.

 
```
@page toc {
  size: a4 portrait;
  @top-middle {
    content: "Table of contents";
  }
}

@page foreword {
  size: a4 portrait;
  @top-middle {
    content: "Foreword";
  }
}

@page introduction {
  size: a4 portrait;
  @top-middle {
    content: "Introduction";
  }
}

@page conclusion {
  size: a4 portrait;
  @top-middle {
    content: "Conclusion";
  }
}

@page chapter {
  size: a4 landscape;
  @top-middle {
    content: "Chapter";
  }
}

```
 The next part of the CSS uses [attribute selectors](attribute_selectors) to apply the print dimensions, orientation, and margins defined in the named `@page` rules defined in the previous CSS section to elements using the `page` property.

 The sections with `class="chapter"` are concurrent and appear as one page. The `break-after: page;` is used to split them up, which splits each chapter into a separately printed page.

 
```
@media print {
  fieldset {
    display: none;
  }
  section {
    font-size: 2rem;
    font-family: Roboto;
  }
  .chapter {
    border: tomato 2px solid;
  }
  [data-print="grouped"] > #toc,
 [data-print="paged"] > #toc {
    page: toc;
    font-family: Courier;
  }
  [data-print="grouped"] > #foreword,
 [data-print="paged"] > #foreword {
    page: foreword;
    font-family: Courier;
  }
  [data-print="grouped"] > #introduction,
 [data-print="paged"] > #introduction {
    page: introduction;
    font-family: Courier;
  }
  [data-print="grouped"] > #conclusion,
 [data-print="paged"] > #conclusion {
    page: conclusion;
    font-family: Courier;
  }
  [data-print="grouped"] > .chapter,
 [data-print="paged"] > .chapter {
    page: chapter;
  }
  [data-print="paged"] > .chapter {
    border: none;
    break-after: page;
  }
  .chapter > ul {
    columns: 2;
  }
}

```
 #### JavaScript

 The JavaScript updates the value of the `data-print` attribute, which is the attribute on which the named page is applied, when you select a different printing option:

 
```
const printArea = document.querySelector("#print-area");
const printButton = document.querySelector("#print");
const printOption = document.querySelector("#printStyle");
printOption.addEventListener("change", (event) => {
  if (event.target.value === "single") {
    printArea.dataset.print = "single";
  } else if (event.target.value === "grouped") {
    printArea.dataset.print = "grouped";
  } else {
    printArea.dataset.print = "paged";
  }
});
printButton.addEventListener("click", () => {
  window.print();
});

```
 #### Result

 What is printed, and what is shown in the print preview dialog, will change depending on which print style radio button is selected.



Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # using-named-pages](https://w3c.github.io/csswg-drafts/css-page/#using-named-pages) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `page` | 85 | 85 | 110 | No | 71 | preview | 85 | 85 | 110 | 60 | No | 14.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/page>

page-orientation
================



The `page-orientation` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) descriptor for the [`@page`](../@page) at-rule controls the rotation of a printed page. It handles the flow of content across pages when the orientation of a page is changed. This behavior differs from the [`size`](size) descriptor in that a user can define the direction in which to rotate the page.

 This descriptor helps with the layout and orientation of printed documents, especially when documents are printed double-sided. A user can specify how the pages will be rotated when printed. This is particularly useful to lay out content such as tables, which may be wider than the rest of the content, in a different orientation.

  **Note:** [Margin boxes](../@page#margin_at-rules) and other positional elements have no special interaction with this descriptor. Margins are laid out as normal in the unrotated page, then rotated along with everything else.

 

Syntax
------



```
/\* Displays the print content in an upright position \*/
@page {
  page-orientation: upright;
}

/\* Displays the print content rotated counter-clockwise \*/
@page {
  page-orientation: rotate-left;
}

/\* Displays the print content rotated counter-clockwise \*/
@page {
  page-orientation: rotate-right;
}

```
Values
------


 `upright`  No orientation is applied and the page is laid out and formatted as normal.

  `rotate-left`  After a page is laid out, the page must be displayed rotated a quarter turn to the left (counter-clockwise).

  `rotate-right`  After the page is laid out, the page must be displayed rotated a quarter turn to the right (clockwise).

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
page-orientation =   
  upright       [|](../value_definition_syntax#single_bar)  
  rotate-left   [|](../value_definition_syntax#single_bar)  
  rotate-right    
  

```
Examples
--------


### Rotating printed pages



This example shows how the contents of a print document can be rotated to suit the page content and the page position.

 #### CSS

 In this first part of the CSS code, [named pages](../@page#named_pages) are set up to define the direction in which to rotate the content.

 
```
@page upright {
  size: portrait;
  page-orientation: upright;
}

@page left {
  size: landscape;
  page-orientation: rotate-left;
}

@page right {
  size: landscape;
  page-orientation: rotate-right;
}

```
 The following second part of the CSS code declares a named page rule defined above for the selectors, such as `<section class="left">…</section>`.

 
```
@media print {
  .upright {
    page: upright;
  }
  .left {
    page: left;
  }
  .right {
    page: right;
  }
}

```

### Result



Click the print button to see the pages rotated.



Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3 # page-orientation-prop](https://w3c.github.io/csswg-drafts/css-page/#page-orientation-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `page-orientation` | 85 | 85 | preview | No | 71 | No | 85 | 85 | No | 60 | No | 14.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@page/page-orientation>

CSS Custom Properties for Cascading Variables
=============================================


**CSS Custom Properties for Cascading Variables** is a [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) module that allows for the creation of custom properties that can be used over and over.


Reference
---------


### Properties


* [`--*`](--*)
Specifications
--------------




| Specification |
| --- |
| [CSS Custom Properties for Cascading Variables Module Level 1](https://drafts.csswg.org/css-variables/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables>

prefers-color-scheme
====================


 The `prefers-color-scheme` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../media_queries/using_media_queries#targeting_media_features) is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting. 


Embedded elements
-----------------



 For SVG and iframes, `prefers-color-scheme` lets you set a CSS style for the SVG or iframe based on the [`color-scheme`](../color-scheme) of the parent element in the web page. SVGs must be used embedded (i.e., `<img src="circle.svg" alt="circle" />`) as opposed to [inlined in HTML](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction#basic_example). An example of using `prefers-color-scheme` in SVGs can be found in the [Color scheme inheritance](#color_scheme_inheritance) section. 

  Using `prefers-color-scheme` is allowed in [cross-origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#cross-origin_network_access) `<svg>` and `<iframe>` elements. Cross-origin elements are elements retrieved from a different host than the page that is referencing them. To learn more about SVGs, see the [SVG documentation](https://developer.mozilla.org/en-US/docs/Web/SVG) and for more information about iframes, see the [iframe documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe). 


Syntax
------


 `light`  Indicates that user has notified that they prefer an interface that has a light theme, or has not expressed an active preference.

  `dark`  Indicates that user has notified that they prefer an interface that has a dark theme.

  Examples
--------


### Detecting a dark or light theme



A common usage is to use a light color scheme by default, and then use `prefers-color-scheme: dark` to override the colors to a darker variant. It is also possible to do it the other way around.

 This example shows both options: Theme A uses light colors, but can be overridden to dark colors. Theme B uses dark colors, but can be overridden to light colors. In the end, if the browser supports `prefers-color-scheme`, both themes will be light or dark.

 #### HTML

 
```
<div class="box theme-a">Theme A (initial)</div>
<div class="box theme-a adaptive">Theme A (changed if dark preferred)</div>
<br />

<div class="box theme-b">Theme B (initial)</div>
<div class="box theme-b adaptive">Theme B (changed if light preferred)</div>

```
 #### CSS

 Theme A (brown) uses a light color scheme by default, but will switch to a dark scheme based on the media query:

 
```
.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

```
 Theme B (blue) uses a dark color scheme by default, but will switch to a light scheme based on the media query:

 
```
.theme-b {
  background: #447;
  color: #bbd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bcd;
    color: #334;
    outline: 5px dotted #000;
  }
}

```
 #### Result

 The left boxes shows Theme A and Theme B as they would appear without the `prefers-color-scheme` media query. The right boxes show the same themes, but one of them will be changed to a darker or lighter variant based on the user's active color scheme. The outline of one box will be dashed or dotted if it was changed based on your browser or operating systems settings.



### Color scheme inheritance



 The following example shows how to use `prefers-color-scheme` with the [`color-scheme` property](../color-scheme) inherited from a parent element. A script is used to set the source of the `<img>` elements and their `alt` attributes. This would normally be done in HTML as `<img src="circle.svg" alt="circle" />`. 

  You should see three circles, with one drawn in a different color. The first circle inherits the `color-scheme` from the OS and can be toggled using the system OS's theme switcher. 

  The second and third circles inherit the `color-scheme` from the embedding element; the `@media` query allows setting styles of the SVG content based on the parent element's `color-scheme`. In this case, the parent element with a `color-scheme` CSS property is a `<div>`. 

 
```
<div>
  <img />
</div>

<div style="color-scheme: light">
  <img />
</div>
<div style="color-scheme: dark">
  <img />
</div>

<!-- Embed an SVG for all <img> elements -->
<script>
 for (let img of document.querySelectorAll("img")) {
 img.alt = "circle";
 img.src =
 "data:image/svg+xml;base64," +
 btoa(`
 <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
 <style>
 :root { color: blue }
 @media (prefers-color-scheme: dark) {
 :root { color: purple }
 }
 </style>
 <circle fill="currentColor" cx="16" cy="16" r="16"/>
 </svg>
 `);
 }
</script>

```


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # prefers-color-scheme](https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-color-scheme) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `prefers-color-scheme` | 76 | 79 | 67 | No | 62 | 12.1 | 76 | 76 | 67 | 54 | 13 | 14.2 |
| `no-preference` | 76–80 | 79–80 | 67–79 | No | 62–71 | 12.1 | 76–80 | 76–80 | 67–79 | 54 | 13 | 14.2 |
| `respects-inherited-scheme` | No | No | 105 | No | No | No | No | No | 105 | No | No | No |


See also
--------


* [`color-scheme`](../color-scheme) CSS property
* [Simulate prefers-color-scheme in Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#view-media-rules-for-prefers-color-scheme) (Firefox Page Inspector > Examine and edit CSS)
* [Video tutorial: Coding a Dark Mode for your Website](https://www.youtube.com/watch?v=jmepqJ5UbuM)
* [Redesigning your product and website for dark mode](https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode)
* Changing color schemes in [Windows](https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/), [macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/), [Android](https://www.theverge.com/2019/5/7/18530599/google-android-q-features-hands-on-dark-mode-gestures-accessibility-io-2019), or [other platforms](https://support.mozilla.org/en-US/questions/1271928).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme>

Basic concepts of multi-column layout
=====================================


Multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper. This guide explains how the specification works with some common use case examples.


Key concepts and terminology
----------------------------



Multicol is unlike any of the other layout methods we have in CSS; it fragments the content, including all descendant elements, into columns. This happens in the same way that content is fragmented into pages when we work with [CSS Paged Media](../css_pages) by creating a print stylesheet.

 The properties defined by the specification are:

 * [`column-width`](../column-width)
* [`column-count`](../column-count)
* [`columns`](../columns)
* [`column-rule-color`](../column-rule-color)
* [`column-rule-style`](../column-rule-style)
* [`column-rule-width`](../column-rule-width)
* [`column-rule`](../column-rule)
* [`column-span`](../column-span)
* [`column-fill`](../column-fill)
* [`column-gap`](../column-gap)

 By adding `column-count` or `column-width` to an element, the element becomes a *multi-column container* or *multicol container* for short. The columns are anonymous boxes and described as column boxes in the specification.


Defining columns
----------------


To create a multicol container, you must use at least one of the `column-*` properties, these being `column-count` and `column-width`.

### Specifying the number of columns



The `column-count` property specifies the number of columns that you would like the content to be displayed as. The browser will then assign the correct amount of space to each column box to create the requested number of columns.

 In the below example, we use the `column-count` property to create three columns on the `.container` element. The content, including the children of `.container`, is then split between the three columns.


 In the above example, the content is wrapped in paragraph `p` tags with default styling. Therefore, there is a margin above each paragraph. You can see how this margin causes the first line of text to be pushed down. This is because a multicol container creates a new Block Formatting Context (BFC) which means margins on child elements do not collapse with any margin on the container.


### Specifying the width of columns



The `column-width` property is used to set the optimal width for every column box. If you declare a column-width, the browser will work out how many columns of that width will fit into the multicol container and distribute any extra space equally between the columns. Therefore, the column width should be seen as a minimum width, as column boxes are likely to be wider due to the additional space.

 The column box will only shrink to be smaller than the declared column width in the case of a single column with less available width than the value of `column-width`.

 In the below example, we use the `column-width` property with a value of 200px. We get as many 200 pixel columns as will fit the container, with the extra space shared equally.



### Specifying both number and width of columns



If you specify both the properties on a multicol container, then `column-count` will act as a maximum number of columns. Therefore, the behavior as described for `column-width` will happen, until the number of columns in `column-count` is reached. After this point, no more columns will be drawn, and the extra space is distributed evenly between the existing columns, even if there is enough room for more columns of the specified `column-width` size.

 When using both properties together, you may get fewer columns than specified in the value for `column-count`.

 In this next example, we use `column-width` of 200px and `column-count` of 2. Even if there is space for more than two columns, we get two. If there is not enough space for two columns of 200px, however, we get one.



### Shorthand for column properties



You can use the `columns` shorthand to set `column-count` and `column-width`. If you set a length unit, this will be used for `column-width`, set an integer and it will be used for `column-count`. You can set both, separating the two values with a space.

 This CSS would give the same result as example 1, `column-count` set to 3.

 
```
.container {
  columns: 3;
}

```
 This CSS would give the same result as example 2, with `column-width` of 200px.

 
```
.container {
  columns: 200px;
}

```
 This CSS would give the same result as example 3, with both `column-count` and `column-width` set.

 
```
.container {
  columns: 2 200px;
}

```

Next steps
----------


In this guide, we've learned the basic use of multi-column layout. In the next guide, we will look at how much we can [style the columns themselves](styling_columns).



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol>

Shapes from box values
======================



A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this.

 The [box values](https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values) allowable as a shape value are:

 * `content-box`
* `padding-box`
* `border-box`
* `margin-box`

 The `border-radius` values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.



CSS box model
-------------



The values listed above correspond to the various parts of the CSS Box Model. A box in CSS has content, padding, border, and margin.

  ![The Box Model consists of the margin, border, padding and content boxes.] 

 By using Box Values for Shapes we can wrap our content around the edges defined by these values. In all of the examples below I am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow.


### margin-box



The `margin-box` is the shape defined by the outside margin edge and includes the corner radius of the shape, should [`border-radius`](../border-radius) have been used in defining the element.

 In the example below, we have a circular purple item which is a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) with a height, width, and background color. The `border-radius` property has been used to create a circle by setting `border-radius: 50%`. As the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it.



### border-box



The `border-box` value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS [`border`](../border) property. In this case it will be the same as `padding-box`, the shape defined by the outside padding edge.

 In the example below you can see how the text now follows the line created by the border. Change the border size and the content follows it.



### padding-box



The `padding-box` value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border. If you have no padding then `padding-box` is the same as `content-box`.



### content-box



The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius − border-width − padding. This Means that it is impossible to have a negative value here.



When to use box values
----------------------



Using box values is a simple way to create shapes; however, this is by nature only going to work with very simple shapes that can be defined using the well-supported `border-radius` property. The examples shown above show one such use case. You can create a circular shape using border-radius and then curve text around it.

 You can create some interesting effects however with just this simple technique. In my final example of this section, I have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text.


 For more complex shapes, you will need to use one of the [basic shapes](basic_shapes) as a value, or define your shape from an image as covered in other guides in this section.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/From_box_values>

CSS Multi-column Layout
=======================


**CSS Multi-column Layout** is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.


Basic example
-------------



In the following example, the [`column-count`](column-count) property has been applied to the `<div>` element with the class `container`. As the value of `column-count` is `3`, the content is arranged into three columns of the same size.



Relationship to fragmentation
-----------------------------


Multiple-column layout is closely related to [Paged Media](css_pages), in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore, the properties now defined in the [CSS Fragmentation](css_fragmentation) specification are required to control how content breaks between columns.

Reference
---------


### Properties for multi-column layout


* [`column-count`](column-count)
* [`column-fill`](column-fill)
* [`column-gap`](column-gap)
* [`column-rule`](column-rule)
* [`column-rule-color`](column-rule-color)
* [`column-rule-style`](column-rule-style)
* [`column-rule-width`](column-rule-width)
* [`column-span`](column-span)
* [`column-width`](column-width)
* [`columns`](columns)
### Properties related to CSS fragmentation


* [`break-after`](break-after)
* [`break-before`](break-before)
* [`break-inside`](break-inside)
* [`orphans`](orphans)
* [`widows`](widows)
Guides
------


 [Basic concepts of multi-column layout](css_columns/basic_concepts_of_multicol)  An overview of the Multiple-column Layout specification

  [Styling columns](css_columns/styling_columns)  How to use column rules and manage the spacing between columns.

  [Spanning and balancing](css_columns/spanning_columns)  How to make elements span across all columns and controlling the way columns are filled.

  [Handling overflow in multi-column layout](css_columns/handling_overflow_in_multicol)  What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.

  [Handling content breaks in multi-column layout](css_columns/handling_content_breaks_in_multicol)  Introduction to the Fragmentation specification and how to control where column content breaks.

  Specifications
--------------




| Specification |
| --- |
| [CSS Multi-column Layout Module Level 1](https://drafts.csswg.org/css-multicol/)  |


See also
--------



Other CSS layout technologies include:

 * [CSS Flexible Box Layout](css_flexible_box_layout) (CSS flexbox)
* [CSS Grid Layout](css_grid_layout)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns>

Styling columns
===============


As column boxes created inside multi-column (*multicol*) containers are anonymous boxes, there is little we can do to style them. However, we do have a few things that we can do. This guide explains how to change the gap and style rules between columns.


Styling column boxes
--------------------


Sadly, column boxes cannot be styled at present. The anonymous boxes that make up your columns can't be targeted in any way, meaning it isn't possible to change a box's background color or have one column larger than the others. Perhaps in future versions of the specification it might be. For now, however, we are able to change the spacing and add lines between columns.

Column gaps
-----------



The gap between columns is controlled using the `column-gap` property. This property was originally defined in the Multi-column Layout specification. However, it is now defined in [Box Alignment](../css_box_alignment) in order to unify gaps between boxes in other specifications such as [CSS Grid Layout](../css_grid_layout/box_alignment_in_css_grid_layout).

 The initial value of `column-gap` in multicol is `1em`. This means your columns will not run into each other. In other layout methods, the initial value for `column-gap` is 0. If you use the keyword value "normal", the gap will be set to 1em.

 You can change the gap by using any length unit as the value of `column-gap`. In the example below, the `column-gap` is set to 40px.


 The allowed value for `column-gap` is a `<length-percentage>`, this means percentages are allowed. Percentage values for `column-gap` are calculated as a percentage of the width of the multicol container.


Column rules
------------



The specification defines `column-rule-width`, `column-rule-style` and `column-rule-color`, providing a shorthand `column-rule`. These properties work in exactly the same way as the `border` properties: any valid `border-style` can be used as a `column-rule-style`.

 These properties are applied to the element which is the multicol container and therefore all columns will have the same rule. Rules are only drawn between columns and not on the outer edges. Rules should also only be drawn between columns which have content.

 In this next example, a 5px-dotted rule with a color of `rebeccapurple` has been created using the longhand values.


 Note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. Instead, the rule overlays the gap.

 The example below uses a very wide rule of 40px and a 10px gap. The rule displays under the content of the columns. To make space on both sides of the rule, the gap would need to be increased to be larger than 40px.



Next steps
----------


This article details all the current ways in which column boxes can be styled. In the next guide, we will take a look at making elements inside a container [span across all columns](spanning_columns).



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Styling_Columns>

<named-color>
=============



The `<named-color>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) is the name of a color, such as `red`, `blue`, `black`, or `lightseagreen`. Syntactically, a `<named-color>` is an [`<ident>`](ident).

 A `<named-color>` value can be used anywhere a [`<color>`](color_value) can be used.



Syntax
------



```
color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

```
### Value



Named colors consists of standard colors, the [`transparent`](#transparent) and [`currentcolor`](color_value#currentcolor_keyword) keywords.

 #### Standard colors

 Basic colors have standard, easy-to-remember names:

 

| Keyword | RGB hex value | Sample |
| --- | --- | --- |
| `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |

 In addition to these 16 colors, about 150 other colors have a keyword associated to them:

 

| Keyword | RGB hex value | Sample |
| --- | --- | --- |
| `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aqua` | `#00ffff` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `black` | `#000000` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blue` | `#0000ff` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan` | `#00ffff` (synonym of `aqua`) |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `fuchsia` | `#ff00ff` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `gray` | `#808080` |  |
| `green` | `#008000` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080` (synonym of `gray`) |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `lime` | `#00ff00` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta` | `#ff00ff` (synonym of `fuchsia`) |  |
| `maroon` | `#800000` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `navy` | `#000080` |  |
| `oldlace` | `#fdf5e6` |  |
| `olive` | `#808000` |  |
| `olivedrab` | `#6b8e23` |  |
| `orange` | `#ffa500` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `purple` | `#800080` |  |
| `rebeccapurple` | `#663399` |  |
| `red` | `#ff0000` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `silver` | `#c0c0c0` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `teal` | `#008080` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `transparent` | See [transparent](#transparent). |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `white` | `#ffffff` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellow` | `#ffff00` |  |
| `yellowgreen` | `#9acd32` |  |

 Initially, in [CSS Level 1](https://www.w3.org/TR/REC-CSS1/#color-units), only 16 basic colors were defined, with `orange` added in [CSS Level 2](https://www.w3.org/TR/CSS2/syndata.html#value-def-color). Web designers found this list too short, and browser vendors added numerous names for colors based on the X11 color names. In [SVG 1.0](https://www.w3.org/TR/2001/REC-SVG-20010904/), then in [CSS Colors Level 3](https://www.w3.org/TR/css-color-3/#svg-color), these names got standardized, formally defined, and made uniform (some had different spellings that are now aliases). They are called *extended color keywords*, *X11 colors*, or *SVG colors*.

 In [CSS Colors Level 4](https://www.w3.org/TR/css-color-4/#named-colors), an additional color, `rebeccapurple` was added to honor [web pioneer Eric Meyer](https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/).


### transparent



The `transparent` keyword represents a fully transparent color. This makes the background behind the colored item completely visible. Technically, `transparent` is a shortcut for `rgba(0,0,0,0)`.

 To prevent unexpected behavior, such as in a [`<gradient>`](gradient), the current CSS spec states that `transparent` should be calculated in the [alpha-premultiplied color space](https://www.w3.org/TR/css-color-4/#interpolation-alpha). However, be aware that older browsers may treat it as black with an alpha value of `0`.

 The `transparent` keyword wasn't a true color in CSS Level 2 (Revision 1). It was a special keyword that could be used instead of a regular `<color>` value on two CSS properties: [`background`](background) and [`border`](border). It was essentially added to allow developers to override an inherited solid color. With the advent of alpha channels in CSS Colors Level 3, `transparent` was redefined as a true color. It can now be used wherever a `<color>` value can be used.


Description
-----------



All names specify a color in the [sRGB color space](https://en.wikipedia.org/wiki/SRGB). Although the names more or less describe their respective colors, they are essentially artificial, without a strict rationale behind the terms used.

 The color keywords all represent plain, solid colors without transparency.

 Several keywords are aliases for each other:

 * `aqua` / `cyan`
* `fuchsia` / `magenta`
* `darkgray` / `darkgrey`
* `darkslategray` / `darkslategrey`
* `dimgray` / `dimgrey`
* `lightgray` / `lightgrey`
* `lightslategray` / `lightslategrey`
* `gray` / `grey`
* `slategray` / `slategrey`

 Though many keywords have been adapted from [X11](https://en.wikipedia.org/wiki/X_Window_System), their RGB values may differ from the corresponding color on X11 systems since manufacturers sometimes tailor X11 colors to their specific hardware.


Examples
--------


### Using named colors



#### HTML

 
```
<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

```
 #### CSS

 
```
#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # named-colors](https://w3c.github.io/csswg-drafts/css-color/#named-colors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `named-color` | 1 | 12 | 1 | 3Internet Explorer 8 and later support gray color keywords spelled with an *e* (`grey`, `darkgrey`, `darkslategrey`, `dimgrey`, `lightgrey`, and `lightslategrey`). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with *a* (`gray`, `darkgray`, `darkslategray`, `dimgray`, `lightgray`, and `lightslategray`). | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `rebeccapurple` | 38 | 12 | 33 | 11 | 25 | 9 | 38 | 38 | 33 | 25 | 8 | 3.0 |


See also
--------


* [`<color>`](color_value): the data type of whose definition `<named-color>` is a constituent part.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/named-color>

<hex-color>
===========



The `<hex-color>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) is a notation for describing the *hexadecimal color syntax* of an [sRGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency. It can be used everywhere a [`<color>`](color_value) type is allowed.

 A `<hex-color>` value can be used everywhere where a [`<color>`](color_value) can be used.



Syntax
------



```
#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

```
### Value



 
`R` or `RR`
  The *red* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `1` means `11`.

  
`G` or `GG`
  The *green* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `c` means `cc`.

  
`B` or `BB`
  The *blue* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `9` means `99`.

  
`A` or `AA` Optional
  The *alpha* component of the color, indicating its transparency, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `e` means `ee`. `0` represents a fully transparent color, and `ff` a fully opaque one.

    **Note:** The syntax is case-insensitive `#00ff00` is the same as `#00FF00`.

 
Examples
--------




```
<p>Hexadecimal syntax for a fully opaque hot pink</p>

<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>

```
 
```
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}

```


Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # hex-notation](https://w3c.github.io/csswg-drafts/css-color/#hex-notation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hex-color` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `alpha_hexadecimal_notation` | 62 | 79 | 49 | No | 49 | 10 | 62 | 62 | 49 | 47 | 9.3 | 8.0 |


See also
--------


* [`<color>`](color_value) the data type these values belong to.
* [`rgb()`](color_value/rgb), the function allowing to set the three components of the color, as well as its transparency, using decimal values.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color>

forced-colors
=============


The `forced-colors` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) is used to detect if the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. An example of a forced colors mode is Windows High Contrast mode.


Syntax
------


The `forced-colors` media feature indicates whether or not the browser is currently in forced-colors mode.

### Values


 `none`  Forced colors mode is not active; the page's colors are not being forced into a limited palette.

  `active`  Indicates that forced colors mode is active. The browser provides the color palette to authors through the [CSS system color](../color_value#system_colors) keywords and, if appropriate, triggers the appropriate value of [`prefers-color-scheme`](prefers-color-scheme) so that authors can adapt the page. The browser selects the value for `prefers-color-scheme` based on the lightness of the `Canvas` system color (see the [color adjust spec](https://www.w3.org/TR/css-color-adjust-1/#forced) for more details).

  Usage notes
-----------


### Properties affected by forced-color mode



In forced colors mode, the values of the following properties are treated as if they have no author-level values specified. That is, browser-specified values are used instead. The browser-specified values do not affect the style cascade; the values are instead forced by the browser at paint time.

 These browser-specified values are selected from the set of system colors — this ensures a consistent contrast for common UI elements for users that have forced colors enabled.

 * [`color`](../color)
* [`background-color`](../background-color)
* [`text-decoration-color`](../text-decoration-color)
* [`text-emphasis-color`](../text-emphasis-color)
* [`border-color`](../border-color)
* [`outline-color`](../outline-color)
* [`column-rule-color`](../column-rule-color)
* [`-webkit-tap-highlight-color`](../-webkit-tap-highlight-color)
* [SVG fill attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)
* [SVG stroke attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)

 Additionally the following properties have special behavior in forced colors mode:

 * [`box-shadow`](../box-shadow) is forced to 'none'
* [`text-shadow`](../text-shadow) is forced to 'none'
* [`background-image`](../background-image) is forced to 'none' for values that are not url-based
* [`color-scheme`](../color-scheme) is forced to 'light dark'
* [`scrollbar-color`](../scrollbar-color) is forced to 'auto'

 The system colors that are forced for the above properties depend on the context of the element. For example the [`color`](../color) property on button element will be forced to `ButtonText`. On normal text it will be forced to `CanvasText`. See the [list of system colors](../color_value#system_colors) for additional details of when each might be appropriate in various UI contexts.

   **Note:** user agents choose system colors based on native element semantics, *not* on added ARIA roles. As an example, adding `role="button"` to a `div` will **not** cause an element's color to be forced to `ButtonText` 

  In addition to these adjustments, browsers will help ensure text legibility by drawing "backplates" behind text. This is particularly important for preserving contrast when text is placed on top of images.

 There are two cases where the user agent does not force the values for the above properties — when a [`forced-color-adjust`](../forced-color-adjust) value of `none` is applied to an element, or when a system color is specified by the author.

 When forced-color-adjust is set to `none` on an element, none of the forced color values will apply, and author styles will be applied as normal. Additionally, the backplate for text will be disabled.

 When a system color is specified, it will be used instead of the value that would otherwise have been forced.

 You can also use system colors with any property *other* than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.


### Accessibility concerns



In general, web authors should **not** be using the `forced-colors` media feature to create a separate design for users with this feature enabled. Instead, its intended usage is to make small tweaks to improve usability or legibility when the default application of forced colors does not work well for a given portion of a page.

 The high contrast provided by forced colors mode's reduced palette and text backplates is often essential for some users to be able to read or use a given website, so adjustments that affect content should be chosen carefully and targeted to content that is otherwise not legible.


### User preferences


This media feature is active only if the user has enabled color scheme preferences in their operating system. One example of such a feature is High Contrast mode on Windows.

Examples
--------



 **Note:** The below example will only work when using a browser that supports this media feature, and with a preference such as High Contrast mode enabled in your OS.

  This example is a button that normally gets its contrast via [`box-shadow`](../box-shadow). Under forced colors mode, box-shadow is forced to none, so the example uses the forced-colors media feature to ensure there is a border of the appropriate color (ButtonText in this case)


### HTML



```
<button class="button">Press me!</button>

```
### CSS



```
.button {
  border: 0;
  padding: 10px;
  box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode \*/
    border: 2px ButtonText solid;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # forced-colors](https://w3c.github.io/csswg-drafts/mediaqueries-5/#forced-colors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `forced-colors` | 89 | 79 | 89 | No | No | No | NoSee [bug 970285](https://crbug.com/970285). | NoSee [bug 970285](https://crbug.com/970285). | 89 | No | No | NoSee [bug 970285](https://crbug.com/970285). |


See also
--------


* [@media](../@media)
* [Styling for Windows high contrast with standards for forced colors.](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/)
* [`forced-color-adjust`](../forced-color-adjust)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors>

Basic concepts of grid layout
=============================


[CSS Grid Layout](../css_grid_layout) introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS Grid Layout and the new terminology that is part of the CSS Grid Layout Level 1 specification. The features shown in this overview will then be explained in greater detail in the rest of this guide.


What is a grid?
---------------


A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. CSS grid layout has the following features:

### Fixed and flexible track sizes


You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages or with the `fr` unit designed for this purpose.

### Item placement


You can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. Grid also contains an algorithm to control the placement of items not given an explicit position on the grid.

### Creation of additional tracks to hold content


You can define an explicit grid with grid layout. The Grid Layout specification is flexible enough to add additional rows and columns when needed. Features such as adding "as many columns that will fit into a container" are included.

### Alignment control


Grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned.

### Control of overlapping content



More than one item can be placed into a grid cell or area and they can partially overlap each other. This layering may then be controlled with the [`z-index`](../z-index) property.

 Grid is a powerful specification that, when combined with other parts of CSS such as [flexbox](../css_flexible_box_layout), can help you create layouts that were previously impossible to build in CSS. It all starts by creating a grid in your **grid container**.


Grid container
--------------



We create a *grid container* by declaring `display: grid` or `display: inline-grid` on an element. As soon as we do this, all *direct children* of that element become *grid items*.

 In this example, I have a containing div with a class of wrapper and, inside are five child elements.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 I make the `.wrapper` a grid container.

 
```
.wrapper {
  display: grid;
}

```

 All the direct children are now grid items. In a web browser, you won't see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work with the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html), available as part of Firefox's Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value `grid`. Click this and then the grid on this element will be overlaid in the browser window.

  ![Using the Grid Highlighter in DevTools to view a grid] 

 As you learn and then work with the CSS Grid Layout, this tool will give you a better idea of what is happening with your grids visually.

 If we want to start making this more grid-like we need to add column tracks.


Grid tracks
-----------



We define rows and columns on our grid with the [`grid-template-rows`](../grid-template-rows) and [`grid-template-columns`](../grid-template-columns) properties. These define grid tracks. A *grid track* is the space between any two adjacent lines on the grid. The image below shows a highlighted track – this is the first-row track in our grid.

  ![A box with 3 grid items. Above the three items is a solid light green area which is the track.] 

 Grid tracks are defined in the explicit grid by using the `grid-template-columns` and `grid-template-rows` properties or the shorthand `grid` or `grid-template` properties. Tracks are also created in the implicit grid by positioning a grid item outside of the tracks created in the explicit grid.


### Basic example



I can add to our earlier example by adding the `grid-template-columns` property, then defining the size of the column tracks.

 I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

```


### The fr unit



Tracks can be defined using any length unit. Grid also introduces an additional length unit to help us create flexible grid tracks. The new `fr` unit represents a fraction of the available space in the grid container. The next grid definition would create three equal width tracks that grow and shrink according to the available space.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

```


### Unequal sizes



In this next example, we create a definition with a `2fr` track then two `1fr` tracks. The available space is split into four. Two parts are given to the first track and one part each to the next two tracks.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

```


### Mixing flexible and absolute sizes



In this final example, we mix absolute sized tracks with `fr` units. The first track is 500 pixels, so the fixed width is taken away from the available space. The remaining space is divided into three and assigned in proportion to the two flexible tracks.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}

```


### Track listings with repeat() notation



Large grids with many tracks can use the `repeat()` notation, to repeat all or a section of the track listing. For example the grid definition:

 
```
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

```
 Can also be written as:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

```
 Repeat notation can be used for a part of the track listing. In this next example I have created a grid with an initial 20-pixel track, then a repeating section of 6 `1fr` tracks then a final 20-pixel track.

 
```
.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

```
 Repeat notation takes the track listing, and uses it to create a repeating pattern of tracks. In this next example, my grid will consist of 10 tracks, a `1fr` track, and then followed by a `2fr` track. This pattern will be repeated five times.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

```

### Implicit and explicit grids



When creating our example grid we specifically defined our column tracks with the [`grid-template-columns`](../grid-template-columns) property, but the grid also created rows on its own. These rows are part of the implicit grid. Whereas the explicit grid consists of any rows and columns defined with [`grid-template-columns`](../grid-template-columns) or [`grid-template-rows`](../grid-template-rows).

 If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.

 You can also define a set size for tracks created in the implicit grid with the [`grid-auto-rows`](../grid-auto-rows) and [`grid-auto-columns`](../grid-auto-columns) properties.

 In the below example, we use `grid-auto-rows` to ensure that tracks created in the implicit grid are 200 pixels tall.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

```


### Track sizing and minmax



When setting up an explicit grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. For example, I may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then I would like the row to stretch to that height.

 Grid has a solution for this with the [`minmax()`](../minmax) function. In this next example I am using `minmax()` in the value of [`grid-auto-rows`](../grid-auto-rows). This means automatically created rows will be a minimum of 100 pixels tall, and a maximum of `auto`. Using `auto` means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

```
 
```
<div class="wrapper">
  <div>One</div>
  <div>
    Two
    <p>I have some more content in.</p>
    <p>This makes me taller than 100 pixels.</p>
  </div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```


Grid lines
----------



It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.

  ![Diagram showing numbered grid lines.] 

 Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.


### Positioning items against lines



We will be exploring line based placement in full detail in a later article. The following example demonstrates doing this in a simple way. When placing an item, we target the line – rather than the track.

 In the following example I am placing the first two items on our three column track grid, using the [`grid-column-start`](../grid-column-start), [`grid-column-end`](../grid-column-end), [`grid-row-start`](../grid-row-start) and [`grid-row-end`](../grid-row-end) properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.

 The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

```

  **Note:** Don't forget that you can use the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) in Firefox Developer Tools to see how the items are positioned against the lines of the grid.

 
### Line-positioning shorthands



The longhand values used above can be compressed onto one line for columns with [`grid-column`](../grid-column), and one line for rows with [`grid-row`](../grid-row). The following example would give the same positioning as in the previous code, but with far less CSS. The value before the forward slash character (`/`) is the start line, the value after the end line.

 You can omit the end value if the area only spans one track.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.box2 {
  grid-column: 1;
  grid-row: 3 / 5;
}

```

Grid cells
----------



A *grid cell* is the smallest unit on a grid. Conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. In the below image, I have highlighted the first cell of the grid.

  ![The first cell of the grid highlighted] 


Grid areas
----------



Items can span one or more cells both by row or by column, and this creates a *grid area*. Grid areas must be rectangular – it isn't possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.

  ![A grid area] 


Gutters
-------



*Gutters* or *alleys* between grid cells can be created using the [`column-gap`](../column-gap) and [`row-gap`](../row-gap) properties, or the shorthand [`gap`](../gap). In the below example, I am creating a 10-pixel gap between columns and a `1em` gap between rows.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

```
  **Note:** When grid first shipped in browsers the [`column-gap`](../column-gap), [`row-gap`](../row-gap) and [`gap`](../gap) were prefixed with the `grid-` prefix as `grid-column-gap`, `grid-row-gap` and `grid-gap` respectively.

 Browsers all now support unprefixed values, however the prefixed versions will be maintained as aliases making them safe to use.

  
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```

 Any space used by gaps will be accounted for before space is assigned to the flexible length `fr` tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a thick line.


Nesting grids
-------------



A grid item can become a grid container. In the following example, I have the three-column grid that I created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in a normal document flow.

  ![Nested grid in flow] 


### Nesting without subgrid



If I set `box1` to `display: grid` I can give it a track definition and it too will become a grid. The items then lay out on this new grid.

 
```
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

```
 
```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  gap: 3px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.box {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.box1 {
  grid-column: 1 / 4;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

```

 In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the [`gap`](../gap) of the parent and the lines in the nested grid do not align to the lines in the parent grid.


### Subgrid



In addition to regular grids, *subgrid* let us create nested grids that use the track definition of the parent grid.

 To use them, we edit the above nested grid example to change the track definition of `grid-template-columns: repeat(3, 1fr)`, to `grid-template-columns: subgrid`. The nested grid then use the parent grid tracks to layout items.

 
```
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: subgrid;
}

```

Layering items with z-index
---------------------------


Grid items can occupy the same cell, and in this case we can use the [`z-index`](../z-index) property to control the order in which overlapping items stack.

### Overlapping without z-index



If we return to our example with items positioned by line number, we can change this to make two items overlap.

 
```
<div class="wrapper">
  <div class="box box1">One</div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
}

```

 The item `box2` is now overlapping `box1`, it displays on top as it comes later in the source order.


### Controlling the order



We can control the order in which items stack up by using the `z-index` property - just like positioned items. If we give `box2` a lower `z-index` than `box1` it will display below `box1` in the stack.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 2;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

```


Next steps
----------


In this article, we took a very quick look at the possibilities of grid layouts. Explore and play with the code examples, and then move on to [the next part of this guide](relationship_of_grid_layout), where we will really start to dig into the details of CSS Grid Layout.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout>

<system-color>
==============



The `<system-color>` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [data type](css_types) usually reflects the default color choices used for the different parts of a web page.

 However, user agents can provide an accessibility feature called *forced colors mode*, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, `<system-color>` exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is [high contrast mode on Windows](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/).

 In forced colors mode, authors should use colors from the `<system-color>` type for all properties that are *not* in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.

 Authors can detect forced colors mode using the [`forced-colors`](@media/forced-colors) media feature.

 A `<system-color>` value can be used anywhere a [`<color>`](color_value) can be used.



Syntax
------



Note that these keywords are *case insensitive*, but are listed here with mixed case for readability.

  `AccentColor`  Background of accented user interface controls

  `AccentColorText`  Text of accented user interface controls

  `ActiveText`  Text of active links

  `ButtonBorder`  Base border color of controls

  `ButtonFace`  Background color of controls

  `ButtonText`  Text color of controls

  `Canvas`  Background of application content or documents

  `CanvasText`  Text color in application content or documents

  `Field`  Background of input fields

  `FieldText`  Text in input fields

  `GrayText`  Text color for disabled items (e.g. a disabled control)

  `Highlight`  Background of selected items

  `HighlightText`  Text color of selected items

  `LinkText`  Text of non-active, non-visited links

  `Mark`  Background of text that has been specially marked (such as by the HTML `mark` element)

  `MarkText`  Text that has been specially marked (such as by the HTML `mark` element)

  `VisitedText`  Text of visited links

  
### Deprecated system color keywords



The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated for use on public web pages.

  
`ActiveBorder`  Deprecated 
  Active window border.

  
`ActiveCaption`  Deprecated 
  Active window caption. Should be used with `CaptionText` as foreground color.

  
`AppWorkspace`  Deprecated 
  Background color of multiple document interface.

  
`Background`  Deprecated 
  Desktop background.

  
`ButtonHighlight`  Deprecated 
  The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

  
`ButtonShadow`  Deprecated 
  The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

  
`CaptionText`  Deprecated 
  Text in caption, size box, and scrollbar arrow box. Should be used with the `ActiveCaption` background color.

  
`InactiveBorder`  Deprecated 
  Inactive window border.

  
`InactiveCaption`  Deprecated 
  Inactive window caption. Should be used with the `InactiveCaptionText` foreground color.

  
`InactiveCaptionText`  Deprecated 
  Color of text in an inactive caption. Should be used with the `InactiveCaption` background color.

  
`InfoBackground`  Deprecated 
  Background color for tooltip controls. Should be used with the `InfoText` foreground color.

  
`InfoText`  Deprecated 
  Text color for tooltip controls. Should be used with the `InfoBackground` background color.

  
`Menu`  Deprecated 
  Menu background. Should be used with the `MenuText` or `-moz-MenuBarText` foreground color.

  
`MenuText`  Deprecated 
  Text in menus. Should be used with the `Menu` background color.

  
`Scrollbar`  Deprecated 
  Background color of scroll bars.

  
`ThreeDDarkShadow`  Deprecated 
  The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

  
`ThreeDFace`  Deprecated 
  The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the `ButtonText` foreground color.

  
`ThreeDHighlight`  Deprecated 
  The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

  
`ThreeDLightShadow`  Deprecated 
  The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

  
`ThreeDShadow`  Deprecated 
  The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

  
`Window`  Deprecated 
  Window background. Should be used with the `WindowText` foreground color.

  
`WindowFrame`  Deprecated 
  Window frame.

  
`WindowText`  Deprecated 
  Text in windows. Should be used with the `Window` background color.

  
### Firefox non-standard system color extensions



Firefox also supports some non-standard extensions to the system color keyword set.

  
`-moz-ButtonDefault`  Non-standard 
  The border color that goes around buttons that represent the default action for a dialog box.

  
`-moz-ButtonHoverFace`  Non-standard 
  The background color of a button that the mouse pointer is over (which would be `ThreeDFace` or `ButtonFace` when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverText` foreground color.

  
`-moz-ButtonHoverText`  Non-standard 
  The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverFace background` color.

  
`-moz-CellHighlight`  Non-standard 
  Background color for selected item in a tree widget. Should be used with the `-moz-CellHighlightText` foreground color. See also `-moz-html-CellHighlight`.

  
`-moz-CellHighlightText`  Non-standard 
  Text color for a selected item in a tree. Should be used with the `-moz-CellHighlight background` color. See also `-moz-html-CellHighlightText`.

  
`-moz-Combobox`  Non-standard 
  Background color for combo-boxes. Should be used with the `-moz-ComboboxText` foreground color. In versions prior to 1.9.2, use `-moz-Field` instead.

  
`-moz-ComboboxText`  Non-standard 
  Text color for combo-boxes. Should be used with the `-moz-Combobox` background color. In versions prior to 1.9.2, use `-moz-FieldText` instead.

  
`-moz-Dialog`  Non-standard 
  Background color for dialog boxes. Should be used with the `-moz-DialogText` foreground color.

  
`-moz-DialogText`  Non-standard 
  Text color for dialog boxes. Should be used with the `-moz-Dialog` background color.

  
`-moz-dragtargetzone`  Non-standard , `-moz-EvenTreeRow`  Non-standard 
  Background color for even-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-OddTreeRow`.

  
`-moz-html-CellHighlight`  Non-standard 
  Background color for highlighted item in HTML [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)s. Should be used with the `-moz-html-CellHighlightText` foreground color. Prior to Gecko 1.9, use `-moz-CellHighlight`.

  
`-moz-html-CellHighlightText`  Non-standard 
  Text color for highlighted items in HTML [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)s. Should be used with the `-moz-html-CellHighlight` background color. Prior to Gecko 1.9, use `-moz-CellHighlightText`.

  
`-moz-mac-accentdarkestshadow`  Non-standard , `-moz-mac-accentdarkshadow`  Non-standard , `-moz-mac-accentface`  Non-standard , `-moz-mac-accentlightesthighlight`  Non-standard , `-moz-mac-accentlightshadow`  Non-standard , `-moz-mac-accentregularhighlight`  Non-standard , `-moz-mac-accentregularshadow`  Non-standard 
  Accent colors.

  
`-moz-mac-chrome-active`  Non-standard , `-moz-mac-chrome-inactive`  Non-standard 
  Colors for inactive and active browser chrome.

  
`-moz-mac-focusring`  Non-standard , `-moz-mac-menuselect`  Non-standard , `-moz-mac-menushadow`  Non-standard , `-moz-mac-menutextselect`  Non-standard , `-moz-MenuHover`  Non-standard 
  Background color for hovered menu items. Often similar to `Highlight`. Should be used with the `-moz-MenuHoverText` or `-moz-MenuBarHoverText` foreground color.

  
`-moz-MenuHoverText`  Non-standard 
  Text color for hovered menu items. Often similar to `HighlightText`. Should be used with the `-moz-MenuHover` background color.

  
`-moz-MenuBarText`  Non-standard 
  Text color in menu bars. Often similar to `MenuText`. Should be used on top of `Menu` background.

  
`-moz-MenuBarHoverText`  Non-standard 
  Color for hovered text in menu bars. Often similar to `-moz-MenuHoverText`. Should be used on top of `-moz-MenuHover` background.

  
`-moz-nativehyperlinktext`  Non-standard 
  Default platform hyperlink color.

  
`-moz-OddTreeRow`  Non-standard 
  Background color for odd-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-EvenTreeRow`.

  
`-moz-win-communicationstext`  Non-standard 
  Should be used for text in objects with `[`appearance`](appearance): -moz-win-communications-toolbox;`.

  
`-moz-win-mediatext`  Non-standard 
  Should be used for text in objects with `[`appearance`](appearance): -moz-win-media-toolbox`.

  
`-moz-win-accentcolor`  Non-standard 
  Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.

  
`-moz-win-accentcolortext`  Non-standard 
  Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

  
Examples
--------


### Using system colors



In this example we have a button that normally gets its contrast using the [`box-shadow`](box-shadow) property. In forced colors mode, `box-shadow` is forced to `none`, so the example uses the `forced-colors` media feature to ensure there is a border of the appropriate color (`ButtonBorder` in this case).

 #### HTML

 
```
<button class="button">Press me!</button>

```
 #### CSS

 
```
.button {
  border: 0;
  padding: 10px;
  box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* Use a border instead, since box-shadow
 is forced to 'none' in forced-colors mode \*/
    border: 2px ButtonBorder solid;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4 # css-system-colors](https://w3c.github.io/csswg-drafts/css-color/#css-system-colors) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `system-color` | 1 | 12 | 1 | 3 | 3.5 | 1 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |
| `mark_marktext_buttonborder` | No | No | 109 | No | No | No | No | No | 109 | No | No | No |


See also
--------


* [`<color>`](color_value): the data type these keywords belong to.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/system-color>

CSS Containment
===============



 The aim of the CSS Containment specification is to improve performance of web pages by allowing the browser to isolate a subtree of the page from the rest of the page. If the browser knows that a part of the page is independent, rendering can be optimized and performance improved. 

  In addition, it lets developers indicate whether or not an element should render its contents at all, and whether it should render its contents when it is offscreen. This allows the user agent to apply containment on elements when appropriate, and potentially defer layout and rendering until it is actually needed. 

  The specification defines the CSS properties [`contain`](contain) and [`content-visibility`](content-visibility). This document describes the basic aims of the specification. For details on CSS container queries, see [CSS Container Queries](css_container_queries). 



Basic example
-------------



Many webpages contain several sections which are independent of each other. For example a listing of article headlines and content, as in the markup below.

 
```
<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <p>More content here.</p>
</article>

```
 Each article has the [`contain`](contain) property with a value of `content` applied in the CSS.

 
```
article {
  contain: content;
}

```
 Each article is independent of the other articles on the page, and so they have been given `contain: content` to indicate to the browser that this is the case. The browser can then use this information to make decisions about how to render the content. For example, it might not render articles that are outside the viewable area.

  If we give each `<article>` the `contain` property with a value of `content`, when new elements are inserted the browser does not need to recalculate layout or repaint any area outside of the containing element's subtree. If the `<article>` is styled such that its size depends on its contents (e.g. with `height: auto`), then the browser may need to account for its size changing. 

 We have told it by way of the `contain` property that each article is independent.

  The `content` value is shorthand for `contain: layout paint style`. It tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds. Nothing can visibly overflow. 

  This information is something that is usually known, and in fact quite obvious, to the web developer creating the page. However browsers cannot guess at your intent and cannot assume that an article will be entirely self-contained. Therefore this property gives you a nice way to explain to the browser this fact, and allow it to make performance optimizations based on that knowledge. 


Key concepts and terminology
----------------------------


### 
`contain` values



The values for the [`contain`](contain) property indicate the type of containment that you want to apply to that element.

 #### Layout containment

 
```
article {
  contain: layout;
}

```
 Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using `contain: layout` you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.

 In addition:

 * `float` layout will be performed independently.
* Margins won't collapse across a layout containment boundary
* The layout container will be a containing block for `absolute`/`fixed` position descendants.
* The containing box creates a stacking context, therefore [`z-index`](z-index) can be used.

 #### Paint containment

 
```
article {
  contain: paint;
}

```
 Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for `paint` containment as `layout` containment (see above).

 Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

 #### Size containment

 
```
article {
  contain: size;
}

```
 Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

  If you turn on `contain: size` you need to also specify the size of the element you have applied this to using [`contain-intrinsic-size`](contain-intrinsic-size) (or the equivalent longhand properties). It will end up being zero-sized in most cases, if you don't manually give it a size. 

 #### Style containment

 
```
article {
  contain: style;
}

```
  Despite the name, style containment does not provide scoped styles such as you would get with the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). The main use case is to prevent situations where a [CSS Counter](css_counter_styles/using_css_counters) could be changed in an element, which could then affect the rest of the tree. 

 Using `contain: style` would ensure that the [`counter-increment`](counter-increment) and [`counter-set`](counter-set) properties created new counters scoped to that subtree only.

 #### Special values

 There are two special values of contain:

 * `content`
* `strict`

 We encountered the first in the example above. Using `contain: content` turns on `layout` and `paint` containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply `size` containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

 To gain as much containment as possible use `contain: strict`, which behaves the same as `contain: size layout paint style`:

 
```
contain: strict;

```

### `content-visibility`



[`content-visibility`](content-visibility) controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. Basically it enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

 Its possible values are:

 * `visible`: The default behavior — an element's contents are laid out and rendered as normal.
* `hidden`: The element skips its contents. The skipped contents must not be accessible to user agent features such as find-in-page, tab-order navigation, etc., nor be selectable or focusable.
* `auto`: The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips its contents. Unlike `hidden`, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.


### Relevant to the user



The specification refers to the concept of [relevant to the user](https://w3c.github.io/csswg-drafts/css-contain/#relevant-to-the-user). An element that is relevant to the user should be rendered, as it is visible, and/or being interacted with by the user.

 To be precise, an element is relevant to the user if any of the following are true:

 * The element appears in the viewport, or a user-agent-defined margin around the viewport (50% of the viewport dimensions, to give the app time to prepare for when the element visibility changes).
* The element or its contents receive focus.
* The element or its contents are selected, for example by dragging over the text with the mouse cursor or by some other highlight operation.
* The element or its contents are placed in the [top layer](https://w3c.github.io/csswg-drafts/css-position-4/#top-layer).


### Skips its contents



The specification refers to the concept of [skips its contents](https://w3c.github.io/csswg-drafts/css-contain/#skips-its-contents). This means that the element referred to is not relevant to the user and will not be rendered to improve performance.

 To be precise, when an element skips its contents:

 * It has layout, style, paint, and size containment turned on.
* Its contents are not painted, as if [`visibility: hidden`](visibility) was set on it.
* Its contents do not receive pointer events, as if [`pointer-events: none`](pointer-events) was set on it.


Reference
---------


### CSS Properties


* [`contain`](contain)
* [`content-visibility`](content-visibility)
Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 2 # contain-property](https://w3c.github.io/csswg-drafts/css-contain/#contain-property) |
| [CSS Containment Module Level 2 # content-visibility](https://w3c.github.io/csswg-drafts/css-contain/#content-visibility) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Containment` | 85 | 85 | 109 | No | 71 | No | 85 | 85 | No | 60 | No | 14.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Containment` | 52 | 79 | 69 | No | 39 | 15.4 | 52 | 52 | 79 | 41 | 15.4 | 6.0 |
| `inline-size` | 105 | 105 | 101 | No | 91 | 15.4 | 105 | 105 | 101 | 72 | 15.4 | 20.0 |
| `style` | 52 | 79 | 103 | No | 39 | 15.4 | 52 | 52 | 103 | 41 | 15.4 | 6.0 |

### css.properties.contain


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.content-visibility


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


See also
--------


* [An Introduction to CSS Containment](https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/)
* The [`contentvisibilityautostatechange`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event) event


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment>

CSS Container Queries
=====================



 Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are an alternative to [media queries](media_queries), which apply styles to elements based on viewport size or other device characteristics. 

  ![A media query based on the viewport's width, which is the full width of the browser, and a container query based on the width of a container context, which is the width of the container element.] 



Using container queries
-----------------------



 To use container queries, you need to declare a **containment context** on an element so that the browser knows you might want to query the dimensions of this container later. To do this, use the [`container-type`](container-type) property with a value of `size`, `inline-size`, or `normal`. 

 These values have the following effects:

  `size`   The query will be based on the [inline and block](css_logical_properties/basic_concepts#block_and_inline_dimensions) dimensions of the container. Applies layout, style, and size containment to the container. 

  `inline-size`   The query will be based on the [inline](css_logical_properties/basic_concepts#block_and_inline_dimensions) dimensions of the container. Applies layout, style, and inline-size containment to the element. 

  `normal`  The element is not a query container for any container size queries, but remains a query container for container style queries.

   Consider the following example of a card component for a blog post with a title and some text:

 
```
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

```
 You can create a containment context using the `container-type` property:

 
```
.post {
  container-type: inline-size;
}

```
  Next, use the [`@container`](@container) at-rule to define a container query. The query in the following example will apply styles to elements based on the size of the nearest ancestor with a containment context. Specifically, this query will apply a larger font size for the card title if the container is wider than `700px`: 

 
```
/\* Default heading styles for the card title \*/
.card h2 {
  font-size: 1em;
}

/\* If the container is larger than 700px \*/
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

```
  Using container queries, the card can be reused in multiple areas of a page without needing to know specifically where it will be placed each time. If the container with the card is narrower than `700px`, the font of the card title will be small, and if the card is in a container that's wider than `700px`, the font of the card title will be bigger. 

 For more information on the syntax of container queries, see the [`@container`](@container) page.


### Naming containment contexts



 In the previous section, a container query applied styles based on the nearest ancestor with a containment context. It's possible to give a containment context a name using the [`container-name`](container-name) property. Once named, the name can be used in a `@container` query so as to target a specific container. The following example creates a containment context with the name `sidebar`: 

 
```
.post {
  container-type: inline-size;
  container-name: sidebar;
}

```
 You can then target this containment context using the `@container` at-rule:

 
```
@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

```
 More information on naming containment contexts is available on the [`container-name`](container-name) page.


### Shorthand container syntax



The shorthand way of declaring a containment context is to use the `container` property:

 
```
.post {
  container: sidebar / inline-size;
}

```
 For more information on this property, see the [`container`](container) reference.


### Container query length units



 When applying styles to a container using container queries, you can use container query length units. These units specify a length relative to the dimensions of a query container. Components that use units of length relative to their container are more flexible to use in different containers without having to recalculate concrete length values. 

 The container query length units are:

 * `cqw`: 1% of a query container's width
* `cqh`: 1% of a query container's height
* `cqi`: 1% of a query container's inline size
* `cqb`: 1% of a query container's block size
* `cqmin`: The smaller value of either `cqi` or `cqb`
* `cqmax`: The larger value of either `cqi` or `cqb`

 The following example uses the `cqi` unit to set the font size of a heading based on the inline size of the container:

 
```
@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

```
 For more information on these units, see the [Container query length units](length#container_query_length_units) reference.


Fallbacks for container queries
-------------------------------



 For browsers that don't yet support container queries, [`grid`](grid) and [`flex`](flex) can be used to create a similar effect for the card component used on this page. The following example uses a [`grid-template-columns`](grid-template-columns) declaration to create a two-column layout for the card component. 

 
```
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

```
 If you want to use a single-column layout for devices with a smaller viewport, you can use a media query to change the grid template:

 
```
@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}

```

See also
--------


* [Media queries](media_queries)
* CSS [`@container`](@container) at-rule
* CSS [`contain`](contain) property
* CSS [`container`](container) shorthand property
* CSS [`container-name`](container-name) property
* CSS [`content-visibility`](content-visibility) property
* [Say Hello to CSS Container Queries](https://ishadeed.com/article/say-hello-to-css-container-queries/) by Ahmad Shadeed
* [Container Queries: a Quick Start Guide](https://www.oddbird.net/2021/04/05/containerqueries/)
* [Collection of Container Queries articles](https://github.com/sturobson/Awesome-Container-Queries)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries>

Using CSS counters
==================



 **CSS counters** let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists. 

  Counters are, in essence, variables maintained by CSS whose values may be incremented or decremented by CSS rules that track how many times they're used. You can define your own named counters, and you can also manipulate the `list-item` counter that is created by default for all ordered lists. 



Using counters
--------------



 To use a counter it must first be initialized to a value with the [`counter-reset`](../counter-reset) property. The counter's value can then be increased or decreased using [`counter-increment`](../counter-increment) property. The current value of a counter is displayed using the [`counter()`](../counter) or [`counters()`](../counters) function, typically within a [pseudo-element](../pseudo-elements) [`content`](../content) property. 

  Counters can only be set, reset, or incremented in elements that generate boxes. For example, if an element is set to `display: none` then any counter operation on that element will be ignored. 

 The properties of counters can be scoped to specific elements using style containment which is described in more detail in the [`contain`](../contain) property.


### Manipulating a counter's value



 To use a CSS counter, it must first be initialized to a value with the [`counter-reset`](../counter-reset) property. The property can also be used to change the counter value to any specific number. 

 Below we initialize a counter named `section` to the default value (0).

 
```
counter-reset: section;

```
  You can also initialize multiple counters, optionally specifying an initial value for each. Below we initialize the `section` and `topic` counters to the default value, and the `page` counter to 3. 

 
```
counter-reset: section page 3 topic;

```
  Once initialized, a counter's value can be increased or decreased using [`counter-increment`](../counter-increment). For example, the following declaration would increment the `section` counter by one on every `h3` tag. 

 
```
h3::before {
  counter-increment: section; /\* Increment the value of section counter by 1 \*/
}

```
 You can specify the value to increment or decrement the counter after the counter name, using a positive or negative number.

 The counter's name must not be `none`, `inherit`, or `initial`; otherwise the declaration is ignored.


### Displaying a counter



The value of a counter can be displayed using either the [`counter()`](../counter) or [`counters()`](../counters) function in a [`content`](../content) property.

 For example, the following declaration uses `counter()` to prefix each `h3` heading with the text `Section <number>:`, where `<number>` is the value of the count in decimal (the default display style):

 
```
h3::before {
  counter-increment: section; /\* Increment the value of section counter by 1 \*/
  content: "Section " counter(section) ": "; /\* Display counter value in default style (decimal) \*/
}

```
  The [`counter()`](../counter) function is used when the numbering of nesting levels does not include the context of parent levels. For example, here each nested level restarts from one: 

 
```
1 One
  1 Nested one
  2 Nested two
2 Two
  1 Nested one
  2 Nested two
  3 Nested three
3 Three

```
  The [`counters()`](../counters) function is used when the count for nested levels must include the count from parent levels. For example, you might use this to lay out sections as shown: 

 
```
1 One
  1.1 Nested one
  1.2 Nested two
2 Two
  2.1 Nested one
  2.2 Nested two
  2.3 Nested three
3 Three

```
  The [`counter()`](../counter) function has two forms: `counter(<counter-name>)` and `counter(<counter-name>, <counter-style>)`. The generated text is the value of the innermost counter of the given name in scope at the pseudo-element. 

  The [`counters()`](../counters) function also has two forms: `counters(<counter-name>, <separator>)` and `counters(<counter-name>, <separator>, <counter-style>)`. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string (`<separator>`). 

  The counter is rendered in the specified `<counter-style>` for both methods (`decimal` by default). You can use any of the [`list-style-type`](../list-style-type) values or your own [custom styles](../css_counter_styles). 

 Examples showing the use of `counter()` and `counters()` are given below in the [basic example](#basic_example) and [Example of a nested counter](#example_of_a_nested_counter), respectively.


### Reversed counters



 A reversed counter is one that is intended to count down (decrement) rather than up (increment). Reversed counters are created using the `reversed()` function notation when naming the counter in [`counter-reset`](../counter-reset). 

  Reversed counters have a default initial value equal to the number of elements (unlike normal counters, which have a default value of 0). This makes it easy to implement a counter that counts from the number of elements down to one. 

 For example, to create a reversed counter named `section` with a default initial value, you would use the following syntax:

 
```
counter-reset: reversed(section);

```
 You can of course specify any initial value that you like.

 The counter value is decreased by specifying a negative value for [`counter-increment`](../counter-increment).

   **Note:** You can also use [`counter-increment`](../counter-increment) to decrement a non-reversed counter. The main benefit of using a reversed counter is the default initial value, and that the `list-item` counter automatically decrements reversed counters. 

 
### List item counters



Ordered lists, as created using [`<ol>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) elements, implicitly have a counter named `list-item`.

  Like other counters, this has a default initial value of 0 for upward counters and "number of items" for reversed counters. Unlike author-created counters, `list-item` *automatically* increments or decrements by one for each list element, depending on whether or not the counter is reversed. 

  The `list-item` counter can be used to manipulate the default behavior of ordered lists using CSS. For example, you can change the default initial value, or use [`counter-increment`](../counter-increment) to change the way in which the list items increment or decrement. 


Examples
--------


### Basic example



This example adds "Section [the value of the counter]:" to the beginning of each heading.

 #### CSS

 
```
body {
  counter-reset: section; /\* Set a counter named 'section', and its initial value is 0. \*/
}

h3::before {
  counter-increment: section; /\* Increment the value of section counter by 1 \*/
  content: "Section " counter(section) ": "; /\* Display the word 'Section ', the value of
 section counter, and a colon before the content
 of each h3 \*/
}

```
 #### HTML

 
```
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

```
 #### Result



### Basic example: reversed counter



 This example is the same as the one above but uses a reversed counter. If your browser supports the `reversed()` function notation, the result will look like this: 

  ![reversed counter] 

 #### CSS

 
```
body {
  counter-reset: reversed(
    section
  ); /\* Set a counter named 'section', and its initial value is 0. \*/
}

h3::before {
  counter-increment: section -1; /\* Decrement the value of section counter by 1 \*/
  content: "Section " counter(section) ": "; /\* Display the word 'Section ', the value of
 section counter, and a colon before the content
 of each h3 \*/
}

```
 #### HTML

 
```
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

```
 #### Result



### A more sophisticated example



 A counter need not necessarily be shown every time it is incremented. This example counts all links with the counter showing only when a link has no text, as a convenient replacement. 

 #### CSS

 
```
:root {
  counter-reset: link;
}

a[href] {
  counter-increment: link;
}

a[href]:empty::after {
  content: "[" counter(link) "]";
}

```
 #### HTML

 
```
<p>See <a href="https://www.mozilla.org/"></a></p>
<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
<p>See also <a href="https://developer.mozilla.org/"></a></p>

```
 #### Result



### Example of a nested counter



 A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the [`counters()`](../counters) function, separating text can be inserted between different levels of nested counters. 

 #### CSS

 
```
ol {
  counter-reset: section; /\* Creates a new instance of the
 section counter with each ol
 element \*/
  list-style-type: none;
}

li::before {
  counter-increment: section; /\* Increments only this instance
 of the section counter \*/
  content: counters(section, ".") " "; /\* Combines the values of all instances
 of the section counter, separated
 by a period \*/
}

```
 #### HTML

 
```
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3 # auto-numbering](https://drafts.csswg.org/css-lists/#auto-numbering) |


See also
--------


* [`contain`](../contain)
* [`counter-reset`](../counter-reset)
* [`counter-set`](../counter-set)
* [`counter-increment`](../counter-increment)
* [`@counter-style`](../@counter-style)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters>

CSS Counter Styles
==================


**CSS Counter Styles** is a module of CSS that lets you define your own counter styles.


Reference
---------


### Properties


* [`counter-increment`](counter-increment)
* [`counter-reset`](counter-reset)
### Functions


* [`symbols()`](@counter-style/symbols)
### At-rules


* [`@counter-style`](@counter-style)
	+ [`system`](@counter-style/system)
	+ [`additive-symbols`](@counter-style/additive-symbols)
	+ [`negative`](@counter-style/negative)
	+ [`prefix`](@counter-style/prefix)
	+ [`suffix`](@counter-style/suffix)
	+ [`range`](@counter-style/range)
	+ [`pad`](@counter-style/pad)
	+ [`speak-as`](@counter-style/speak-as)
	+ [`fallback`](@counter-style/fallback)
Guides
------


 [Using CSS counters](css_counter_styles/using_css_counters)  Describes how to use counters to number any HTML element or to perform complex counting.

  Specifications
--------------




| Specification |
| --- |
| [CSS Counter Styles Level 3 # the-counter-style-rule](https://w3c.github.io/csswg-drafts/css-counter-styles/#the-counter-style-rule) |
| [CSS Lists and Counters Module Level 3 # increment-set](https://w3c.github.io/csswg-drafts/css-lists/#increment-set) |
| [CSS Lists and Counters Module Level 3 # counter-reset](https://w3c.github.io/csswg-drafts/css-lists/#counter-reset) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Counter_Styles` | 2 | 12 | 1 | 8 | 9.2 | 3 | 4.4 | 18 | 25 | 10.1 | 1 | 1.0 |
| `reset_does_not_affect_siblings` | No | No | 82 | No | No | No | No | No | 82 | No | No | No |
| `reversed` | No | No | 96 | No | No | No | No | No | 96 | No | No | No |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Counter_Styles` | 2 | 12 | 1 | 8 | 9.2 | 3 | 4.4 | 18 | 25 | 10.1 | 1 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Counter_Styles` | 91 | 91 | 33 | No | 77 | NoSee [bug 167645](https://webkit.org/b/167645). | 91 | 91 | 33 | 64 | NoSee [bug 167645](https://webkit.org/b/167645). | 16.0 |
| `additive-symbols` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `fallback` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `negative` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `pad` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `prefix` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `range` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `speak-as` | No | No | 33 | No | No | No | No | No | 33 | No | No | No |
| `suffix` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |
| `symbols` | 91Does not support `<image>` as a value for the `symbols` descriptor. | 91Does not support `<image>` as a value for the `symbols` descriptor. | 33Does not support `<image>` as a value for the `symbols` descriptor. | No | 77Does not support `<image>` as a value for the `symbols` descriptor. | No | 91Does not support `<image>` as a value for the `symbols` descriptor. | 91Does not support `<image>` as a value for the `symbols` descriptor. | 33Does not support `<image>` as a value for the `symbols` descriptor. | 64Does not support `<image>` as a value for the `symbols` descriptor. | No | 16.0Does not support `<image>` as a value for the `symbols` descriptor. |
| `system` | 91 | 91 | 33 | No | 77 | No | 91 | 91 | 33 | 64 | No | 16.0 |

### css.at-rules.counter-style


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.counter-increment


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.counter-reset


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles>

CSS animations
==============


The animations CSS module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.


### Animations in action



To view the animation in the box below, click the checkbox 'Play the animation' or hover the cursor over the box. When the animating is active, the cloud at the top changes shape, snowflakes fall, and the snow level at the bottom rises. To pause the animation, uncheck the checkbox or move your cursor away from the box.


 This sample animation uses [`animation-iteration-count`](animation-iteration-count) to make the flakes fall repeatedly, [`animation-direction`](animation-direction) to make the cloud move back and forth, [`animation-fill-mode`](animation-fill-mode) to raise the snow level in response to the cloud movement, and [`animation-play-state`](animation-play-state) to pause the animation.

 To see the code for this animation, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/animation.html).


Reference
---------


### Properties


* [`animation`](animation) shorthand
* [`animation-composition`](animation-composition)  Experimental
* [`animation-delay`](animation-delay)
* [`animation-direction`](animation-direction)
* [`animation-duration`](animation-duration)
* [`animation-fill-mode`](animation-fill-mode)
* [`animation-iteration-count`](animation-iteration-count)
* [`animation-name`](animation-name)
* [`animation-play-state`](animation-play-state)
* [`animation-timing-function`](animation-timing-function)
* [`animation-timeline`](animation-timeline)
### At-rules


* [`@keyframes`](@keyframes)
### Functions


* [`scroll()`](animation-timeline/scroll)
### Events



All animations, even those with 0 seconds duration, throw animation events.

 * [`animationstart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event)
* [`animationend`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
* [`animationcancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event)
* [`animationiteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event)


### Interfaces


* [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
* [`AnimationEvent`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent)
* [`CSSKeyframeRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframeRule)
* [`CSSKeyframesRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule)
Guides
------


 [Using CSS animations](css_animations/using_css_animations)  Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other.

  [CSS animations tips and tricks](css_animations/tips)  Tips and tricks to help you get the most out of CSS animations.

  Related concepts
----------------


* [`will-change`](will-change) CSS property
* [`<easing-function>`](easing-function) data type
* [`prefers-reduced-motion`](@media/prefers-reduced-motion) media query
* [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve) glossary term
Specifications
--------------




| Specification |
| --- |
| [CSS Animations Level 2](https://w3c.github.io/csswg-drafts/css-animations-2/)  |
| [CSS Animations Level 1](https://w3c.github.io/csswg-drafts/css-animations/)  |


See also
--------


* Experimental  The CSS scroll timeline [`scroll-timeline-name`](scroll-timeline-name) and [`scroll-timeline-axis`](scroll-timeline-axis) properties, along with the [`scroll-timeline`](scroll-timeline) shorthand, create animations tied to the scroll offset of a scroll container.
* Properties in the [transitions](css_transitions) CSS module to trigger animations based on user actions
* The [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) HTML element along with [canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) to draw graphics and animations
* The [`SVGAnimationElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement) interface for all the animation-related element interfaces, including [`SVGAnimateElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimateElement), [`SVGSetElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGSetElement), [`SVGAnimateColorElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimateColorElement), [`SVGAnimateMotionElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimateMotionElement), and [`SVGAnimateTransformElement`](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimateTransformElement)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations>

CSS Transitions
===============


**CSS Transitions** is a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes.


Reference
---------


### Properties


* [`transition`](transition)
* [`transition-delay`](transition-delay)
* [`transition-duration`](transition-duration)
* [`transition-property`](transition-property)
* [`transition-timing-function`](transition-timing-function)
Guides
------


 [Using CSS transitions](css_transitions/using_css_transitions)  Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other.

  Specifications
--------------




| Specification |
| --- |
| [CSS Transitions](https://drafts.csswg.org/css-transitions/)  |


See also
--------


* Related to CSS Transitions, [CSS Animations](css_animations) provide finer control over animated properties.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions>

CSS Flow Layout
===============



*Normal Flow*, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken *out of flow* it works independently.

 In normal flow, **inline** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the [Writing Mode](css_writing_modes) of the document. **Block** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.



Basic Example
-------------



The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.

 The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.



Guides
------


* [Block and Inline Layout in Normal Flow](css_flow_layout/block_and_inline_layout_in_normal_flow)
* [In Flow and Out of Flow](css_flow_layout/in_flow_and_out_of_flow)
* [Formatting Contexts Explained](css_flow_layout/intro_to_formatting_contexts)
* [Flow Layout and Writing Modes](css_flow_layout/flow_layout_and_writing_modes)
* [Flow Layout and Overflow](css_flow_layout/flow_layout_and_overflow)
Reference
---------


### Glossary Entries


* [Block (CSS)](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout>

Block and inline layout in normal flow
======================================



In this guide, we will explore the basics of how Block and Inline elements behave when they are part of the normal flow.

 Normal Flow is defined in the [CSS 2.1 specification](https://www.w3.org/TR/CSS2/visuren.html#normal-flow), which explains that any boxes in normal flow will be part of a *formatting context*. They can be either block or inline, but not both at once. We describe block-level boxes as participating in a *block formatting context*, and inline-level boxes as participating in an *inline formatting context*.

 The behavior of elements which have a block or inline formatting context is also defined in this specification. For elements with a block formatting context, the spec says:

 
>  "In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
> 
>  In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)." - 9.4.1
> 
>  

 For elements with an inline formatting context:

 
>  "In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box." - 9.4.2
> 
>  

 Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes. The behavior on block and inline elements is the same when working in a vertical writing mode, and we will explore this in a future guide on Flow Layout and Writing Modes.



Elements participating in a block formatting context
----------------------------------------------------



Block elements in a horizontal writing mode such as English, layout vertically, one below the other.

  ![Inline direction is horizontal. Block direction is vertical.] 

 In a vertical writing mode then would lay out horizontally.

  ![Inline direction is vertical. Block direction is horizontal.] 

 In this guide, we will be working in English and therefore a horizontal writing mode. However, everything described should work in the same way if your document is in a vertical writing mode.

 As defined in the specification, the margins between two block boxes are what creates separation between the elements. We see this with a very simple layout of two paragraphs, to which I have added a border. The default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.


 If we set margins on the paragraph element to `0` then the borders will touch.


 By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. If we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. Each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode.



### Margin collapsing



The spec explains that margins between block elements *collapse*. This means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins.

 In the example below, the paragraphs have a top margin of `20px` and a bottom margin of `40px`. The size of the margin between the paragraphs is `40px` as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first.


 You can read more about margin collapsing in our article [Mastering Margin Collapsing](../css_box_model/mastering_margin_collapsing).

  **Note:** If you are not sure whether margins are collapsing, check the Box Model values in your browser DevTools. This will give you the actual size of the margin which can help you to identify what is happening.

  ![Screen shot box model panel in browser dev tools which shows the four values for margin, border, and padding along with height and width in a graphic at top and lists box-sizing, display, float, line-height, position, and z-index below the graphic.] 

 
Elements participating in an inline formatting context
------------------------------------------------------



Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don't tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.

 In the following example, we have three inline boxes created by a paragraph with a [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) element inside it.


 The boxes around the words before the `<strong>` element and after the `<strong>` element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.

 The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example, the `<strong>` element is 300%; since that content spans two lines, it now defines the height of the line boxes of those two lines.


 Find out more about how Block and Inline Boxes behave in our Guide to the [Visual Formatting Model](../visual_formatting_model).


The display property and flow layout
------------------------------------



In addition to the rules existing in CSS2.1, new levels of CSS further describe the behavior of block and inline boxes. The [`display`](../display) property defines how a box and any boxes inside it behave. In the CSS Display Model Level 3, we can learn more about how the `display` property changes the behavior of boxes and the boxes they generate.

 The display type of an element defines the outer display type; this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), which I have given `display: flex`. The flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of `block`.

 The flex items however are participating in a flex formatting context, because their parent is the element with `display: flex`, which has an inner display type of `flex`, establishing the flex formatting context for the direct children.


 Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of *flow* however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.

 This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (`display: flex`) and Grid Layout (`display: grid`) is still participating in block and inline layout, due to the outer display type of those methods being `block`.


### Changing the Formatting Context an element participates in



Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example, a [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) element is used to highlight a word and displays bold in browsers. It would not generally make sense for that `<strong>` element to be displayed as a block level element, breaking onto a new line. If you did want all `<strong>` elements to display as block elements, you could do so by setting `display: block` on `<strong>`. This means that you can always use most of the semantic HTML elements to markup your content, and then change the way it displays using CSS.



Summary
-------


In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behavior of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.

See also
--------


* [CSS Basic Box Model](../css_box_model)
* *[Normal Flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow)* - Learn Layout
* [Inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)
* [Block-level elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow>

Adapting to the new multi-keyword syntax of display
===================================================



[CSS Display Module Level 3](https://drafts.csswg.org/css-display/) describes the multi-keyword syntax for the [`display`](../display) property. This guide explains the change to the syntax, including the reasoning behind this change. It also details the in-built backwards compatibility for the `display` property.

  **Note:** this syntax may also be referred to as "two-value syntax" or "multi-value syntax."

 

What happens when we change the value of the display property?
--------------------------------------------------------------



One of the first things we learn about CSS is that some elements are block-level and some are inline-level. For example, an `<h1>` or a `<p>` are block-level by default, and a `<span>` is inline-level. Using the [`display`](../display) property we can switch between block and inline. For example to make a heading inline we would use the following CSS:

 
```
h1 {
  display: inline;
}

```
 More recently we have gained [CSS Grid Layout](../css_grid_layout) and [Flexbox](../css_flexible_box_layout). To access these we also use values of the `display` property — `display: grid` and `display: flex`. Only when the value of `display` is changed do the children become flex or grid items and begin to respond to the other properties in the grid or flexbox specifications. Changing an element's `display` value changes the formatting context of its direct children.

 What grid and flexbox demonstrate, however, is that an element has both an **outer** and an **inner** display type. The outer display type describes whether the element is block-level or inline-level. The inner display type describes how the children of that box behave.

 As an example, when we use `display: flex` we create a block-level container, with flex children. The children are described as participating in a flex formatting context. You can see this if you take a `<span>` — normally an inline-level element — and apply `display: flex` to it. The `<span>` becomes a block-level element. It behaves as block-level things do in relationship to other boxes in the layout. It's as if you had applied `display: block` to the span, however we also get the changed behavior of the children.

 The live example below has a `<span>` with `display: flex` applied. It has become a block-level box taking up all available space in the inline direction. You can now use `justify-content: space-between;` to put this space between the two flex items.


 We can create inline flex containers. If you create a flex container using the single value of `inline-flex` you will have an inline-level box with flex children. The children behave in the same way as the flex children of a block-level container. The only thing that has changed is that the parent is now an inline-level box. It therefore behaves like other inline-level things, and doesn't take up the full width (or size in the inline dimension) that a block-level box does. This means that some following text could come up alongside the flex container.


 The same is true when working with grid layout. Using `display: grid` will give you a block-level box, which creates a grid formatting context for the direct children. Using `display: inline-grid` will create an inline-level box, which creates a grid formatting context for the children.


The multi-keyword syntax
------------------------



As you can see from the above explanation, the `display` property has gained considerable new powers. In addition to indicating whether something is block-level or inline-level in relationship to other boxes on the page, it now also indicates the formatting context inside the box it is applied to. In order to better describe this behavior, the `display` property has been refactored to allow for two values — an outer and inner value — to be set on it, as well as the single values we are used to.

 This means that instead of setting `display: flex` to create a block-level box with flex children, we will use `display: block flex`. Instead of `display: inline-flex` to create an inline-level box with flex children, we will use `display: inline flex`. The example below, which will work in Firefox 70 and upwards, demonstrates these values.


 There are mappings for all of the existing values of `display`; the most common ones are listed in the table below. To see a full list take a look at the table found in the [`display` property specification](https://drafts.csswg.org/css-display/#display-value-summary).

 

| Single value | New value |
| --- | --- |
| `block` | `block flow` |
| `flow-root` | `block flow-root` |
| `inline` | `inline flow` |
| `inline-block` | `inline flow-root` |
| `flex` | `block flex` |
| `inline-flex` | `inline flex` |
| `grid` | `block grid` |
| `inline-grid` | `inline grid` |


display: block flow-root and display: inline flow-root
------------------------------------------------------



In terms of how these new values help to clarify CSS layout, we can take a look at a couple of values in the table that might seem less familiar. The multi-keyword `display: block flow-root` maps to a fairly recent single value; `display: flow-root`. This value's only purpose is to create a new [Block Formatting Context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC). A BFC ensures that everything inside your box stays inside it, and things from outside the box cannot intrude into it. The most obvious use-case for creating a new BFC is to contain floats, and avoid the need for clearfix hacks.

 In the example below we have a floated item inside a container. The float is contained by the bordered box, which wraps it and the text alongside. If you remove the line `display: flow-root` then the float will poke out of the bottom of the box. If you are using Firefox you can replace it with the newer `display: block flow-root`, which will achieve the same as the single `flow-root` value.


 The `flow-root` value makes sense if you think about block and inline layout, which is sometimes called [normal flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow). Our HTML page creates a new formatting context (floats and margins cannot extend out from the boundaries) and our content lays out in normal flow, using block and inline layout, unless we change the value of `display` to use some other formatting context. Creating a grid or flex container also creates a new formatting context (a grid or flex formatting context, respectively.) These also contain everything inside them. However, if you want to contain floats and margins but continue using block and inline layout, you can create a new flow root, and start over with block and inline layout. From that point downwards everything is contained inside the new flow root.

 The multi-keyword syntax for `display: flow-root` being `display: block flow-root` therefore makes a lot of sense. You are creating a block formatting context, with a block-level box and children participating in normal flow. What about the matched pair `display: inline flow-root`? This is the new way of describing `display: inline-block`.

 The value `display: inline-block` has been around since the early days of CSS. The reason we tend to use it is to allow padding to push inline items away from an element, when creating navigation items for example, or when wanting to add a background with padding to an inline element as in the example below.


 An element with `display: inline-block` however, will also contain floats. It contains everything inside the inline-level box. Therefore `display: inline-block` does exactly what `display: flow-root` does, but with an inline-level, rather than a block-level box. The new syntax accurately describes what is happening with this value. In the example above, you can change `display: inline-block` to `display: inline flow-root` in Firefox and get the same result.


What about the old values of display?
-------------------------------------



The single values of `display` are described in the specification as legacy values, and currently you gain no benefit from using the multi-keyword versions, as there is a direct mapping for each multi-keyword version to a legacy version, as demonstrated in the table above.

 To deal with single values of `display` [the specification](https://www.w3.org/TR/css-display-3/#outer-role) explains what to do if only the outer value of `block` or `inline` is used:

 
>  "If a `<display-outside>` value is specified but `<display-inside>` is omitted, the element's inner display type defaults to flow."
> 
>  

 This means that the behavior is exactly as it is in a single value world. If you specify `display: block` or `display: inline`, that changes the outer display value of the box but any children continue in normal flow.

 If only an inner value of `flex`, `grid`, or `flow-root` is specified then [the specification](https://www.w3.org/TR/css-display-3/#inner-model) explains that the outer value should be set to `block`:

 
>  "If a `<display-inside>` value is specified but `<display-outside>` is omitted, the element's outer display type defaults to block—except for ruby, which defaults to inline."
> 
>  

 Finally, we have some legacy [pre-composed inline-level values](https://www.w3.org/TR/css-display-3/#legacy-display) of:

 * `inline-block`
* `inline-table`
* `inline-flex`
* `inline-grid`

 If a supporting browser comes across these as single values then it treats them the same as the multi-keyword versions:

 * `inline flow-root`
* `inline table`
* `inline flex`
* `inline grid`

 So all of the current situations are neatly covered, meaning that we maintain compatibility of existing and new sites that use the single values, while allowing the spec to evolve.


Can I start to use the multi-keyword syntax?
--------------------------------------------



As demonstrated above, there is not a lot of advantage in using the multi-keyword version right now; if you did, your page would only work in Firefox! Other browsers do not yet implement the multi-keyword versions. Therefore `display: block flex` will only get you flex layout in Firefox and will be ignored as invalid in Chrome. You can see current support in the **Multi-keyword values** row of the [browser compatibility table for the CSS `display` property](../display#browser_compatibility). See also the following [Chrome issue](https://crbug.com/804600).

 There is value in thinking about the values of `display` in this multi-keyword way however. If you consider the outer and inner values when you change the value of `display`, you will understand immediately what impact the value will have on the box itself, and how it displays and behaves in the layout, and the direct children.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/display/multi-keyword_syntax_of_display>

Introduction to formatting contexts
===================================



This article introduces the concept of formatting contexts, of which there are several types, including block formatting contexts, inline formatting contexts, and flex formatting contexts. The basics of how they behave and how you can make use of these behaviors are also introduced.

 Everything on a page is part of a **formatting context**, or an area which has been defined to lay out content in a particular way. A **block formatting context** (BFC) will lay child elements out according to block layout rules, a **flex formatting context** will lay its children out as [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), etc. Each formatting context has specific rules about how layout behaves when in that context.



Block formatting contexts
-------------------------


The outermost element in a document that uses block layout rules establishes the first, or **initial block formatting context**. This means that every element inside the `<html>` element's block is laid out according to normal flow following the rules for block and inline layout. Elements participating in a BFC use the rules outlined by the CSS Box Model, which defines how an element's margins, borders, and padding interact with other blocks in the same context.

### Creating a new block formatting context



The [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) element is not the only element capable of creating a block formatting context. Any block-level element can be made to create a BFC by the application of certain CSS properties.

 A new BFC is created in the following situations:

 * elements made to float using [`float`](../float)
* [absolutely positioned](../position#types_of_positioning) elements
* elements with [`display: inline-block`](../display#inline-block)
* table cells or elements with `display: table-cell`, including anonymous table cells created when using the `display: table-*` properties
* table captions or elements with `display: table-caption`
* block elements where `overflow` has a value other than `visible`
* elements with `display: flow-root` or `display: flow-root list-item`
* elements with [`contain: layout`](../contain#layout), `content`, or `strict`
* [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)
* grid items
* [multicol containers](../css_columns/basic_concepts_of_multicol)
* elements with [`column-span`](../column-span) set to `all`

 This is useful because a new BFC will behave much like the outermost document in that it becomes a mini-layout inside the main layout. A BFC contains everything inside it, [`float`](../float) and [`clear`](../clear) only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context.


### BFC creation examples



Let's have a look at a couple of these in order to see the effect creating a new BFC.

 In the example below, we have a floated element inside a `<div>` with a border applied. The content of that `<div>` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the `<div>` now runs through the float. As explained in the [guide to in-flow and out of flow elements](in_flow_and_out_of_flow), the float has been taken out of flow so the background and border of the div only contain the content and not the float.


 Creating a new BFC would contain the float. A typical way to do this in the past has been to set `overflow: auto` or set other values than the initial value of `overflow: visible`.


 Setting `overflow: auto` created a new BFC containing the float. Our `<div>` now becomes a mini-layout inside our layout. Any child element will be contained inside it.

 The problem with using `overflow` to create a new BFC is that the `overflow` property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used `overflow` for this purpose. If you do this, it would be a good idea to comment the code to explain.


### Explicitly creating a BFC using display: flow-root



Using `display: flow-root` (or `display: flow-root list-item`) on the containing block will create a new BFC without any other potentially problematic side-effects.


 With `display: flow-root` on the [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

 The name of the `flow-root` keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like [`<html>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) does), given how the new context is created and its flow layout functions.


Inline formatting contexts
--------------------------



Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong), [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), or [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) elements are used on text.

 The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.



Other formatting contexts
-------------------------


This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.

Summary
-------


In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (BFC). In the next guide, we will find out [how normal flow interacts with different writing modes](flow_layout_and_writing_modes).

See also
--------


* [Block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)
* [Visual Formatting Model](../visual_formatting_model)
* [CSS Box Model](../css_box_model)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts>

In flow and out of flow
=======================



The [previous guide](block_and_inline_layout_in_normal_flow) explained block and inline layout in normal flow. All elements that are in flow will be laid out using this method.

 The following example contains a heading, paragraph, a list and a final paragraph which contains a `strong` element. The heading and paragraphs are block level, the `strong` element inline. The list is displayed using flexbox to arrange the items into a row, however it too is participating in block and inline layout - the container has an outside `display` type of `block`.


 All of the elements can be said to be in flow. Appearing on the page in the order that they are in the source.



Taking an item out of flow
--------------------------



All elements are in-flow apart from:

 * floated items
* items with `position: absolute` (including `position: fixed` which acts in the same way)
* the root element (`html`)

 Out of flow items create a new Block Formatting Context (BFC) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page. The root element therefore is out of flow, as the container for everything in our document, and establishes the Block Formatting Context for the document.


### Floated items



In this example, there is a `div` and then two paragraphs. A background color has been added to the paragraphs, and the `div` is floated left. The `div` is now out of flow.

 As a float it is first laid out according to where it would be in normal flow, then taken out of flow and moved to the left as far as possible.


 You can see the background color of the following paragraph running underneath, it is only the line boxes of that paragraph that have been shortened to cause the effect of wrapping content around the float. The box of our paragraph is still displaying according to the rules of normal flow. This is why, to make space around a floated item, you must add a margin to the item, in order to push the line boxes away from it. You cannot apply anything to the following in-flow content to achieve that.


### Absolute positioning



Giving an item `position: absolute` or `position: fixed` removes it from flow, and any space that it would have taken up is removed. In the next example I have three paragraph elements, the second element has `position: absolute`, with offset values of `top: 30px` and `right: 30px`. It has been removed from document flow.


 Using `position: fixed` also removes the item from flow, however the offsets are based on the viewport rather than the containing block.

 When taking an item out of flow with positioning, you will need to manage the possibility of content overlapping. Out of flow essentially means that the other elements on your page no longer know that element exists so will not respond to it.


### Relative positioning and flow



If you give an item relative positioning with `position: relative`, it remains in flow. However, you are then able to use the offset values to push it around. The space that it would have been placed in normal flow is reserved however, as you can see in the example below.


 When you do anything to remove or shift an item from where it would be placed in normal flow, you can expect to need to do some managing of the content and the content around it to prevent overlaps. Whether that involves clearing floats, or ensuring that an element with `position: absolute` does not sit on top of some other content. For this reason methods which remove elements from being in-flow should be used with understanding of the effect that they have.


Summary
-------


In this guide, we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context), in [Formatting Contexts Explained](intro_to_formatting_contexts).

See also
--------


* [Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning) in the CSS Layout learn area


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow>

Controlling ratios of flex items along the main axis
====================================================


In this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — [`flex-grow`](../flex-grow), [`flex-shrink`](../flex-shrink), and [`flex-basis`](../flex-basis). Fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox.


A first look
------------



Our three properties control the following aspects of a flex item's flexibility:

 * `flex-grow`: How much of the positive free space does this item get?
* `flex-shrink`: How much negative free space can be removed from this item?
* `flex-basis`: What is the size of the item before growing and shrinking happens?

 The properties are usually expressed as the shorthand [`flex`](../flex) property. The following code would set the `flex-grow` property to `2`, `flex-shrink` to `1` and `flex-basis` to `auto`.

 
```
.item {
  flex: 2 1 auto;
}

```
 If you have read the article [Basic Concepts of Flexbox](basic_concepts_of_flexbox), then you will have already had an introduction to the properties. Here we will explore them in depth in order that you can fully understand what the browser is doing when you use them.


Important concepts when working on the main axis
------------------------------------------------


There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the *natural* size of flex items before any growing or shrinking takes place, and to the concept of free space.

### Flex item sizing



In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don't have a width or a height applied using an absolute length unit?

 There is a concept in CSS of [`min-content`](../min-content) and [`max-content`](../max-content); these keywords can be used in place of a [length unit](../length).

 In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of `min-content`. You should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the `min-content` size of that string. Essentially, the longest word in the string is dictating the size.

 The second paragraph has a value of `max-content` and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.


 Remember this behavior and what effects `min-content` and `max-content` have as we explore `flex-grow` and `flex-shrink` later in this article.


### Positive and negative free space



To talk about these properties we need to understand the concept of **positive and negative free space**. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, [`flex-direction`](../flex-direction) is `row`, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.

  ![Image showing space left over after items have been displayed.] 

 We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.

  ![The items overflow the container] 

 It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.

 In the following examples I am working with [`flex-direction`](../flex-direction) set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with `flex-direction: column`. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.


The flex-basis property
-----------------------



The [`flex-basis`](../flex-basis) property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is `auto`. If `flex-basis` is set to `auto` then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case `200px` would be the `flex-basis` for this item.

 If your item is instead auto-sized, then `auto` resolves to the size of its content. At this point your knowledge of `min-` and `max-content` sizing becomes useful, as flexbox will take the `max-content` size of the item as the `flex-basis`. The following live example can help to demonstrate this.

 In this example I have created a series of inflexible boxes, with both `flex-grow` and `flex-shrink` set to `0`. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a `flex-basis` of `150px`, whereas the other two items have no width and so are sized according to their content width.


 In addition to the `auto` keyword, you can use the `content` keyword as the `flex-basis`. This will result in the `flex-basis` being taken from the content size even if there is a width set on the item. You can also get the same effect by using `auto` as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.

 If you want flexbox to completely ignore the size of the item when doing space distribution then set `flex-basis` to `0`. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at `flex-grow`.


The flex-grow property
----------------------



The [`flex-grow`](../flex-grow) property specifies the **flex grow factor**, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.

 If all of your items have the same `flex-grow` factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use `1` as the value, however you could give them all a `flex-grow` of `88`, or `100`, or `1.2` if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.


### Combining `flex-grow` and `flex-basis`



Things can get confusing in terms of how `flex-grow` and `flex-basis` interact. Let's consider the case of three flex items of differing content lengths and the following `flex` rules applied to them:

 `flex: 1 1 auto;`

 In this case the `flex-basis` value is `auto` and the items don't have a width set, and so are auto-sized. This means that flexbox is looking at the `max-content` size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:

  ![Images shows the positive free space as a hatched area] 

 We are working with a `flex-basis` equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:

  ![The positive space is distributed between items] 

 If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:

 `flex: 1 1 0;`

 Here we are saying that the size of the item for the purposes of our space distribution calculation is `0` — all the space is up for grabs and as all of the items have the same `flex-grow` factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.

 Try changing the `flex-grow` factor from 1 to 0 in this live example to see the different behavior:



### Giving items different flex-grow factors



Our understanding of how `flex-grow` works with `flex-basis` allows us to have further control over our individual item sizes by assigning items different `flex-grow` factors. If we keep our `flex-basis` at `0` so all of the space can be distributed, we could assign each of the three flex items a different `flex-grow` factor. In the example below I am using the following values:

 * `1` for the first item.
* `1` for the second item.
* `2` for the third item.

 Working from a `flex-basis` of `0` this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.


 Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to `.25`, `.25`, and `.50` — you should see the same result.


The flex-shrink property
------------------------



The [`flex-shrink`](../flex-shrink) property specifies the **flex shrink factor**, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

 This property deals with situations where the browser calculates the `flex-basis` values of the flex items, and finds that they are too large to fit into the flex container. As long as `flex-shrink` has a positive value the items will shrink in order that they do not overflow the container.

 So where `flex-grow` deals with adding available space, `flex-shrink` manages taking away space to make boxes fit into their container without overflowing.

 In the next live example I have three items in a flex container; I've given each a width of 200 pixels, and the container is 500 pixels wide. With `flex-shrink` set to `0` the items are not allowed to shrink and so they overflow the box.


 Change the `flex-shrink` value to `1` and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.


### Combining `flex-shrink` and `flex-basis`



You could say that `flex-shrink` works in pretty much the same way as `flex-grow`. However there are two reasons why it isn't *quite* the same.

 While it is usually subtle, defined in the specification is one reason why `flex-shrink` isn't quite the same for negative space as `flex-grow` is for positive space:

 
>  "Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced."
> 
>  

 The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their `min-content` size — the size that they become if they take advantage of any soft wrapping opportunities available to them.

 You can see this `min-content` flooring happen in the below example, where the `flex-basis` is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that `min-content` size. As the box gets smaller space is then just removed from the third item.


 In practice the shrinking behavior does tend to give you reasonable results. You don't usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behavior for content that needs to be shrunk in order to fit into a container.


### Giving items different `flex-shrink` factors



In the same way as `flex-grow`, you can give flex-items different `flex-shrink` factors. This can help change the default behavior if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.

 In the following live example the first item has a `flex-shrink` factor of 1, the second `0` (so it won't shrink at all), and the third `4`. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for `flex-grow` you can use decimals or larger numbers here. Choose whatever makes most sense to you.



Mastering sizing of flex items
------------------------------


The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:

### What sets the base size of the item?


1. Is `flex-basis` set to `auto`, and does the item have a width set? If so, the size will be based on that width.
2. Is `flex-basis` set to `auto` or `content`? If so, the size is based on the item size.
3. Is `flex-basis` a length unit, but not zero? If so this is the size of the item.
4. Is `flex-basis` set to `0`? if so then the item size is not taken into consideration for the space-sharing calculation.
### Do we have available space?



Items can't grow with no positive free space, and they won't shrink unless there is negative free space.

 1. If we took all of the items and added up their widths (or heights if working in a column), is that total **less** than the total width (or height) of the container? If so, then you have positive free space and `flex-grow` comes into play.
2. If we took all of the items and added up their widths (or heights if working in a column), is that total **more** than the total width (or height) of the container? If so, you have negative free space and `flex-shrink` comes into play.


### Other ways to distribute space



If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The [`justify-content`](../justify-content) property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.

 With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax>

Ordering flex items
===================


New layout methods such as Flexbox and Grid bring with them the possibility of controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using Flexbox. We will also consider the implications of reordering items from an accessibility point of view.


Reverse the display of the items
--------------------------------



the [`flex-direction`](../flex-direction) property can take one of four values:

 * `row`
* `column`
* `row-reverse`
* `column-reverse`

 The first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line.

  ![The items are displayed in a row starting on the left.] 

  ![The items are displayed as a column starting from the top ] 

 The second two values reverse the items by switching the start and end lines.

  ![The items are displayed in reverse order starting on the right-hand line.] 

  ![The items are displayed in a column in reverse order starting at the bottom line.] 

 Remember that the start line relates to writing modes. The row-related examples above demonstrate how `row` and `row-reverse` work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then `row` would start on the right, `row-reverse` on the left.

  ![Flex containers with Arabic letters showing how row starts from the right-hand side and row-reverse from the left.] 

 This can seem like a neat way to display things in reverse order however you should be mindful that the items are only *visually* displayed in reverse order. The specification says the following on this matter:

 
>  "Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation." - [Ordering and Orientation](https://www.w3.org/TR/css-flexbox-1/#flow-order)
> 
>  

 If your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.

 If you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. The specification continues with a warning not to use reordering to fix issues in your source:

 
>  "Authors *must not* use order or the \*-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document."
> 
>  

  **Note:** For some years Firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently from other browsers. This has now been fixed. You should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so.

  In the live example below I have added a focus style in order that as you tab from link to link you can see which is highlighted. If you change the order using `flex-direction` you can see how the tab order continues to follow the order that the items are listed in the source.


 In the same way that changing the value of `flex-direction` does not change the order in which items are navigated to, changing this value does not change paint order. It is a visual reversal of the items only.


The order property
------------------



In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the [`order`](../order) property.

 The `order` property is designed to lay the items out in *ordinal groups*. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.

 As an example, I have 5 flex items, and assign `order` values as follows:

 * Source item 1: `order: 2`
* Source item 2: `order: 3`
* Source item 3: `order: 1`
* Source item 4: `order: 3`
* Source item 5: `order: 1`

 These items would be displayed on the page in the following order:

 * Source item 3: `order: 1`
* Source item 5: `order: 1`
* Source item 1: `order: 2`
* Source item 2: `order: 3`
* Source item 4: `order: 3`

  ![Items have a number showing their source order which has been rearranged.] 

 You can play around with the values in this live example below and see how that changes the order. Also, try changing `flex-direction` to `row-reverse` and see what happens — the start line is switched so the ordering begins from the opposite side.


 Flex items have a default `order` value of `0`, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit `order` value.

 You can also use negative values with `order`, which can be quite useful. If you want to make one item display first and leave the order of all other items unchanged, you can give that item order of `-1`. As this is lower than 0 the item will always be displayed first.

 In the live code example below I have items laid out using Flexbox. By changing which item has the class `active` assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.


 The items are displayed in what is described in the specification as *order-modified document order*. The value of the order property is taken into account before the items are displayed.

 Order also changes the paint order of the items; items with a lower value for `order` will be painted first and those with a higher value for `order` painted afterwards.


The order property and accessibility
------------------------------------



Use of the `order` property has exactly the same implications for accessibility as changing the direction with `flex-direction`. Using `order` changes the order in which items are painted, and the order in which they appear visually. It does not change the sequential navigation order of the items. Therefore if a user is tabbing between the items, they could find themselves jumping around your layout in a very confusing way.

 By tabbing around any of the live examples on this page, you can see how `order` is potentially creating a strange experience for anyone not using a pointing device of some kind. To read more about this disconnect of visual order and logical order and some of the potential problems it raises for accessibility, see the following resources.

 * [Flexbox and the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
* [HTML Source Order vs CSS Display Order](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html)
* [The Responsive Order Conflict for Keyboard Focus](https://alastairc.uk/2017/06/the-responsive-order-conflict/)


Use cases for order
-------------------



There are sometimes places where the fact that the logical and therefore reading order of flex items is separate from the visual order, is helpful. Used carefully the `order` property can allow for some useful common patterns to be easily implemented.

 You might have a design, perhaps a card that will display a news item. The heading of the news item is the key thing to highlight and would be the element that a user might jump to if they were tabbing between headings to find the content they wanted to read. The card also has a date; the finished design we want to create is something like this.

  ![A design component with a date, then heading and then content.] 

 Visually the date appears above the heading, in the source. However, if the card was read out by a screen reader I would prefer that the title was announced first and then the publication date. We can make this so using the `order` property.

 The card is going to be our flex container, with `flex-direction` set to column. I then give the date an `order` of `-1`. This pulls it up above the heading.


 These small tweaks are the sort of cases where the `order` property makes sense. Keep the logical order as the reading and tab order of the document, and maintain that in the most accessible and structured fashion. Then use `order` for purely visual design tweaks. When doing so take care that you are not reordering items that could be accessed by the keyboard as a user is tabbing around. Especially when using newer layout methods you should ensure that your browser testing includes testing the site using only a keyboard, rather than a mouse or a touchscreen. You will quickly see if your development choices make getting around the content difficult.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items>

view-transition-name
====================



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `view-transition-name` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property provides the selected element with a distinct identifying name (a [`<custom-ident>`](custom-ident)) and causes it to participate in a separate [view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) from the root view transition — or no view transition if the `none` value is specified.



Syntax
------



```
/\* <custom-ident> value examples \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* Keyword value \*/
view-transition-name: none;

```
### Values


 [`<custom-ident>`](custom-ident)  A distinct identifying name that causes the selected element to participate in a separate [view transition](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, [`ViewTransition.ready`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready) will reject and the transition will be skipped.

  `none`  The selected element will not participate in a view transition.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
view-transition-name =   
  none            [|](value_definition_syntax#single_bar)  
  [<custom-ident>](custom-ident)    
  

```
Examples
--------



```
figcaption {
  view-transition-name: figure-caption;
}

```
Specifications
--------------




| Specification |
| --- |
| [CSS View Transitions Module Level 1 # view-transition-name-prop](https://w3c.github.io/csswg-drafts/css-view-transitions/#view-transition-name-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `view-transition-name` | 111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | No |


See also
--------


* [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
* [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name>

Flow layout and overflow
========================


When there is more content than can fit into a container, an overflow situation occurs. Understanding how overflow behaves is important in dealing with any element with a constrained size in CSS. This guide explains how overflow works when working with normal flow.


What is overflow?
-----------------



Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:


 The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the [`overflow`](../overflow) property which has an initial value of `visible`. This is why we can see the overflow content.


Controlling overflow
--------------------



There are other values that control how overflow content behaves. To hide overflowing content use a value of `hidden`. This may cause some of your content to not be visible.


 Using a value of `scroll` contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.


 Using a value of `auto` will display the content with no scrollbars if the content fits inside the box. If it doesn't fit then scrollbars will be added. Comparing the next example with the example for `overflow: scroll` you should see `overflow scroll` has horizontal and vertical scrollbars when it only needs vertical scrolling. The `auto` example below only adds the scrollbar in the direct we need to scroll.


 As we have already learned, using any of these values, other than the default of `visible,` will create a new Block Formatting Context.

 Note: In the [Working Draft of Overflow Level 3](https://www.w3.org/TR/css-overflow-3/), there is an additional value `overflow: clip`. This will act like `overflow: hidden` however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.

 The overflow property is in reality a shorthand for the [`overflow-x`](../overflow-x) and [`overflow-y`](../overflow-y) properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for `overflow-x` and therefore the horizontal direction, and the second for `overflow-y` and the vertical direction. In the below example, I have only specified `overflow-y: scroll` so we do not get the unwanted horizontal scrollbar.



Flow Relative Properties
------------------------



In the guide to [Writing Modes and Flow Layout](flow_layout_and_writing_modes), we looked at the newer properties of `block-size` and `inline-size` which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - [`overflow-block`](../@media/overflow-block) and [`overflow-inline`](../@media/overflow-inline). These correspond to `overflow-x` and `overflow-y` but the mapping depends on the writing mode of the document.

 These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.


Indicating Overflow
-------------------


In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.

### Inline-Axis Overflow



The [`text-overflow`](../text-overflow) property deals with text overflowing in the inline direction. It takes one of two values `clip`, in which case content is clipped when it overflows, this is the initial value and therefore the default behavior. We also have `ellipsis` which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.



### Block-Axis Overflow



There is also a proposal for a `block-overflow` property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.

 This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.


Summary
-------


Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow>

Flow layout and writing modes
=============================



The CSS 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode. [Layout](block_and_inline_layout_in_normal_flow) properties should work in the same way in vertical writing modes. In this guide, we look at how flow layout behaves when used with different document writing modes.

 This is not a comprehensive guide to the use of writing modes in CSS, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways. The [external resources](#external_resources) and [see also](#see_also) sections of this document link to more writing modes resources.



Writing modes specification
---------------------------



The CSS Writing Modes Level 3 Specification defines the impact a change the document writing mode has on flow layout. In the writing modes introduction, [the specification says](https://drafts.csswg.org/css-writing-modes-3/#text-flow),

 
>  "A writing mode in CSS is determined by the [`writing-mode`](../writing-mode), [`direction`](../direction), and [`text-orientation`](../text-orientation) properties. It is defined primarily in terms of its inline base direction and block flow direction."
> 
>  

 The specification defines the *inline base direction* as the direction in which content is ordered on a line. This defines the start and end of the inline direction. The start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line.

 The *block flow direction* is the direction in which boxes, for example paragraphs, stack in that writing mode. The CSS writing-mode property controls the block flow direction. If you want to change your page, or part of your page, to `vertical-lr` then you can set `writing-mode: vertical-lr` on the element and this will change the direction of the blocks and therefore the inline direction as well.

 While certain languages will use a particular writing mode or text direction, we can also use these properties for creative effect, such as running a heading vertically.



Block flow direction
--------------------



The [`writing-mode`](../writing-mode) property accepts the values `horizontal-tb`, `vertical-rl` and `vertical-lr`. These values control the direction that blocks flow on the page. The initial value is `horizontal-tb,` which is a top to bottom block flow direction with a horizontal inline direction. Left to right languages, such as English, and Right to left languages, such as Arabic, are all `horizontal-tb`.

 The following example shows blocks using `horizontal-tb`.


 The value `vertical-rl` gives you a right-to-left block flow direction with a vertical inline direction, as shown in the next example.


 The final example demonstrates the third possible value for `writing-mode` — `vertical-lr`. This gives you a left-to-right block flow direction and a vertical inline direction.



Nested writing modes
--------------------



When a nested box is assigned a different writing mode to its parent, then an inline level box will display as if it has `display: inline-block`.


 A block-level box will establish a new block formatting context, meaning that if its inner display type would be `flow`, it will get a computed display type of `flow-root`. This is shown in the next example where the box which displays as `horizontal-tb` contains a float which is contained due to its parent establishing a new BFC.



Replaced elements
-----------------



Replaced elements such as images will not change their orientation based on the `writing-mode` property. However, replaced elements such as form controls which include text, should match the writing mode in use.



Logical properties and values
-----------------------------



Once you are working in writing modes other than `horizontal-tb` many of the properties and values that are mapped to the physical dimensions of the screen seem strange. For example, if you give a box a width of 100px, in `horizontal-tb` that would control the size in the inline direction. In `vertical-lr` it controls the size in the block direction because it does not rotate with the text.


 Therefore, we have new properties of [`block-size`](../block-size) and [`inline-size`](../inline-size). If we give our block an `inline-size` of 100px, it doesn't matter whether we are in a horizontal or a vertical writing mode, `inline-size` will always mean the size in the inline direction.


 The [CSS Logical Properties and Values](../css_logical_properties) specification includes logical versions of the properties that control margins, padding and borders as well as other mappings for things that we have typically used physical directions to specify.


Summary
-------


In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. CSS is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block size. This will be useful when creating components which can work in different writing-modes.

See also
--------


* [Writing Modes](../css_writing_modes)
* [Writing Modes And CSS Layout](https://www.smashingmagazine.com/2019/08/writing-modes-layout/)
* [CSS Writing Modes](https://24ways.org/2016/css-writing-modes/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes>

Mastering wrapping of flex items
================================


Flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once. There is however the ability to wrap flex items onto new lines, creating new rows if [`flex-direction`](../flex-direction) is `row` and new columns if `flex-direction` is `column`. In this guide I will explain how this works, what it is designed for and what situations really require [CSS Grid Layout](../css_grid_layout) rather than flexbox.


Making things wrap
------------------



The initial value of the [`flex-wrap`](../flex-wrap) property is `nowrap`. This means that if you have a set of flex items that are too wide for their container, they will overflow it. If you want to cause them to wrap once they become too wide you must add the `flex-wrap` property with a value of `wrap`, or use the shorthand [`flex-flow`](../flex-flow) with values of `row wrap` or `column wrap`.

 Items will then wrap in the container. In the next example I have ten items all with a `flex-basis` of `160px` and the ability to grow and shrink. Once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. As the items can grow, they will expand larger than 160 px in order to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line.


 We can see the same thing happening with columns. The container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely.



Wrapping and flex-direction
---------------------------



Wrapping works as you might expect when combined with `flex-direction`. If `flex-direction` is set to `row-reverse` then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.


 Note that the reversing is only happening in the inline, row direction. We start on the right then go onto the second line and again start from the right. We aren't reversing in both directions, starting from the bottom coming up the container!


Single-dimensional layout explained
-----------------------------------



As we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space.

 There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.

 If you want layout in two dimensions then you probably want Grid Layout. We can compare our wrapped row example above with the CSS Grid version of that layout to see the difference. The following live sample uses CSS Grid Layout to create a layout that has as many columns of at least 160 pixels as will fit, distributing the extra space between all columns. However, in this case the items stay in their grid and don't stretch out when there are fewer of them on the final row.


 This is the difference between one and two-dimensional layout. In a one dimensional method like flexbox, we only control the row or column. In two dimensional layout like grid we control both at the same time. If you want the space distribution row by row, use flexbox. If you don't, use Grid.


How do flexbox-based grid systems work?
---------------------------------------



Typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. If you assign percentage widths to flex items — either as `flex-basis` or by adding a width to the item itself leaving the value of `flex-basis` as `auto` — you can get the impression of a two dimensional layout. You can see this working in the example below.

 Here I have set `flex-grow` and `flex-shrink` to `0` to make inflexible flex items and I'm then controlling flexibility using percentages, just like we used to do in float layouts.


 If you need flex items to line up in the cross axis, controlling the width in this way will achieve that. In most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component.


Creating gutters between items
------------------------------



To create gaps or gutters between flex items, use the [`gap`](../gap) property.

 The gap property in CSS is a shorthand for `row-gap` and `column-gap`, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.

 In Flexbox, the `gap` property is applied to the flex container. It creates a fixed space between adjacent flex items. However, the `gap` property is not the only thing that can put space between items. Margins, paddings, `justify-content`, and `align-content` can also increase the size of the gutter, affecting the actual size of the gap.

 To see how the `gap` property differs from `margin` in both axes, try changing the `gap` value in the container `.box` and adding a `margin` value to the `.box > *` rule in the stylesheet below. Click the Reset button to revert to the previous values.



Collapsed items
---------------



The flexbox specification details what should happen if a flex item is collapsed by setting `visibility: collapse` on an item. See the MDN documentation for the [`visibility`](../visibility) property. The specification describes the behavior as follows:

 
>  "Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line's cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container's main size, but is guaranteed to have no effect on its cross size and won't cause the rest of the page's layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change." - [Collapsed items](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse)
> 
>  

 This behavior is useful if you want to target flex items using JavaScript to show and hide content for example. The example in the specification demonstrates one such pattern.

 In the following live example I have a non-wrapped flex container. The third item has more content than the others yet is set to `visibility: collapse` and therefore the flex container is retaining a *strut* of the height required to display this item. If you remove `visibility: collapse` from the CSS or change the value to `visible`, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change.

  **Note:** Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden.

 
 When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done *after* collapsing. So the browser needs to re-do the wrapping behavior to account for the new space that the collapsed item has left in the inline direction.

 This means that items might end up on a different line to the one they started on. In the case of an item being shown and hidden it could well cause the items to end up in a different row.

 I have created this behavior in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text.


 If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can't shift rows.


### The difference between `visibility: hidden` and `display: none`


When you set an item to `display: none` in order to hide it, the item is removed from the formatting structure of the page. What this means in practice is that counters ignore it, and things like transitions do not run. Using `visibility: hidden` keeps the box in the formatting structure which is useful in that it still behaves as if it were part of the layout even though the user can't see it.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items>

Relationship of flexbox to other layout methods
===============================================



In this article we will take a look at how Flexbox fits in with all the other CSS modules. We'll find out which specifications you also need to take notice of if you want to learn flexbox, and find out why flexbox is different to some other modules.

  **Note:** CSS versions 1 and 2 were a single monolithic specification where all of CSS was defined in one large document. As CSS became a more feature rich language, maintaining one huge specification became problematic, with different parts of CSS moving on at different speeds. CSS was therefore modularized, and the various CSS Specifications are different modules that make up CSS today. These modules relate to each other, and are at different stages of development.

 

The box alignment module
------------------------



For many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. Flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis.

 These properties started life in the flexbox specification, but are now also part of the [Box Alignment Specification](https://www.w3.org/TR/css-align-3/). This specification details how alignment works in all layout — not just flexbox. Box alignment deals with alignment and justification, including creating gaps or gutters between flex items.

 The reason that the Box alignment properties remain detailed in the flexbox specification as well as being in box alignment is to ensure that completion of the flexbox spec is not held up by box alignment, which has to detail these methods for all layout types. There is a note in the flexbox spec stating that in the future, once it is completed, the definitions in Box Alignment Level 3 will supersede those of flexbox:

 
>  "Note: While the alignment properties are defined in CSS Box Alignment [CSS-ALIGN-3], Flexible Box Layout reproduces the definitions of the relevant ones here so as to not create a normative dependency that may slow down advancement of the spec. These properties apply only to flex layout until CSS Box Alignment Level 3 is finished and defines their effect for other layout modes. Additionally, any new values defined in the Box Alignment module will apply to Flexible Box Layout; in other words, the Box Alignment module, once completed, will supersede the definitions here."
> 
>  

 In a later article in this series — [Aligning items in a flex container](aligning_items_in_a_flex_container) — we will take a thorough look at how the Box Alignment properties apply to flex items.


Writing Modes
-------------



In the [Basic concepts of flexbox](basic_concepts_of_flexbox) article, I explained that flexbox is **writing mode aware**. Writing modes are fully detailed in the CSS [Writing Modes specification](https://www.w3.org/TR/css-writing-modes-3/), which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding **block** and **inline** directions is key to new layout methods.

 It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See [this article](https://24ways.org/2016/css-writing-modes/) for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons.


### The writing modes



The writing modes specification defines the following values of the [`writing-mode`](../writing-mode) property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.

 * `horizontal-tb`
* `vertical-rl`
* `vertical-lr`
* `sideways-rl`
* `sideways-lr`


 Note that `sideways-rl` and `sideways-lr` have support only in Firefox currently. There are also some known issues with regard to `writing-mode` and flexbox. You can see more information on browser support in the [MDN documentation for writing-mode](../writing-mode). However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!

 Note that you would not normally use CSS and the `writing-mode` property to change an entire document to another writing mode. This would be done via HTML, by adding a `dir` and `lang` attribute to the `html` element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.


Flexbox and other layout methods
--------------------------------



The flexbox specification contains a [definition of what happens](https://www.w3.org/TR/css-flexbox-1/#flex-containers) if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.

 An element set to `display: flex` behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.

 With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having `display: flex` applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the [`vertical-align`](../vertical-align) property, as used with `inline-block` or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.

 In this next live example the child elements have been floated, and then their container has had `display: flex` added. If you remove `display: flex`, you should see that the `.box` element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply `display: flex` and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.



Flexbox and Grid Layout
-----------------------



[CSS Grid Layout](../css_grid_layout) and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the `flex` properties that may have been assigned to the child elements will be ignored.

 You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.


### Flex and grid — what's the difference?



A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing?

 The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. The example below has a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.


 If we create a very similar layout using Grid, we can control the layout in both rows and columns.


 These examples point to another key difference between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.

 In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.

 As a ground rule, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.

 For more comparisons of grid and flexbox see the article [Relationship of Grid Layout to other layout methods](../css_grid_layout/relationship_of_grid_layout). This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.


Flexbox and display: contents
-----------------------------



The `contents` value of the [`display`](../display) property is a new value that is described in the spec as follows:

 
>  "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree."
> 
>  

 This value of `display` controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.

 In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.

 By adding `display: contents` to the wrapper around the nested elements, you can see that the item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the `display: contents` line to see it return.

 Note that this only removes the box from the layout; the sub-children don't become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.

  **Warning:** Current implementations in most browsers will remove any element with `display: contents` from the accessibility tree (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. This is incorrect behavior according to the specification, see [`display: contents`](../display#display_contents).

  Also, having removed the box you cannot then use it to — for example — add a background color behind the nested sub children. If you remove `display: contents` in this live example you will see that the direct child we are removing has an orange background color. This also disappears when the box disappears.


 Browser support for `display:contents` is limited and required for this demo to work. Firefox supports `display: contents` already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods>

Relationship of grid layout to other layout methods
===================================================


CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.


Grid and flexbox
----------------


The basic difference between CSS Grid Layout and [CSS Flexbox Layout](../css_flexible_box_layout) is that flexbox was designed for layout in one dimension - either a row *or* a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.

### One-dimensional versus two-dimensional layout



A simple example can demonstrate the difference between one- and two-dimensional layouts.

 In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels.

 I have also set the [`flex-wrap`](../flex-wrap) property to `wrap`, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  flex: 1 1 150px;
}

```

 In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when working by column) is an independent flex line in the flex container. Space distribution happens across the flex line.

 A common question then is how to make those items line up. This is where you want a two-dimensional layout method: You want to control the alignment by row and column, and this is where grid comes in.


### The same layout with CSS grids



In this next example, I create the same layout using Grid. This time we have three `1fr` column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

```

 A simple question to ask yourself when deciding between grid or flexbox is:

 * do I only need to control the layout by row *or* column – use a flexbox
* do I need to control the layout by row *and* column – use a grid


### Content out or layout in?



In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space *on that line*.

 Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

 If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.


### Box alignment



The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually.

 The alignment properties from the flexbox specification have been added to a new specification called [Box Alignment Level 3](https://drafts.csswg.org/css-align/). This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well.

 In a later guide in this series, I'll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid.

 In the first example, which uses flexbox, I have a container with three items inside. The wrapper [`min-height`](../min-height) is set, so it defines the height of the flex container. I have set [`align-items`](../align-items) on the flex container to `flex-end` so the items will line up at the end of the flex container. I have also set the [`align-self`](../align-self) property on `box1` so it will override the default and stretch to the height of the container and on `box2` so it aligns to the start of the flex container.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

```
 
```
.wrapper {
  display: flex;
  align-items: flex-end;
  min-height: 200px;
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: flex-start;
}

```


### Alignment in CSS Grids



This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to `start` and `end` rather than `flex-start` and `flex-end`. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  grid-auto-rows: 200px;
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: start;
}

```


### The `fr` unit and `flex-basis`



We have already seen how the `fr` unit works to assign a proportion of available space in the grid container to our grid tracks. The `fr` unit, when combined with the [`minmax()`](../minmax) function can give us very similar behavior to the `flex` properties in flexbox while still enabling the creation of a layout in two dimensions.

 If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way that the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.

 In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.

 #### Auto-filling grid tracks

 We can use grid to create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the `auto-fill` and `auto-fit` properties.

 In this next example, I have used the `auto-fill` keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

```


### A flexible number of tracks



This isn't quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining `auto-fit` and the [`minmax()`](../minmax) function. In this next example, I create auto filled tracks with `minmax`. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be `1fr`. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the `1fr` maximum as an instruction to share out the remaining space between the items.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

```

 We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.


Grid and absolutely positioned elements
---------------------------------------


Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

### A grid container as containing block



To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item `position: absolute` it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

 In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has `position: relative` and so becomes the positioning context of this item.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
    This block is absolutely positioned. In this example the grid container is
    the containing block and so the absolute positioning offset values are
    calculated in from the outer edges of the area it has been placed into.
  </div>
  <div class="box4">Four</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}

```

 You can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usual for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn't cause the additional row to be created to span to row line 3.

 If we remove `position: absolute` from the rules for `.box3` you can see how it would display without the positioning.


### A grid container as parent



If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove `position: relative` from the wrapper above, positioning context is from the viewport, as shown in this image.

  ![Image of grid container as parent] 

 Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.


### With a grid area as the parent



If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside `.box3` of the grid.

 I have given `.box3` position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
    Three
    <div class="abspos">
      This block is absolutely positioned. In this example the grid area is the
      containing block and so the absolute positioning offset values are
      calculated in from the outer edges of the grid area.
    </div>
  </div>
  <div class="box4">Four</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
.abspos {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #000;
  padding: 10px;
}

```


Grid and display: contents
--------------------------



A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and `display: contents`. The `contents` value of the display property is a new value that is described in the [Display specification](https://drafts.csswg.org/css-display/#box-generation) as follows:

 
>  "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree."
> 
>  

 If you set an item to `display: contents`, the box it would normally create disappears and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example.


### Grid layout with nested child elements



In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don't become part of the grid layout and so display using regular block layout.

 
```
<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

```


### Using display: contents



If I now add `display: contents` to the rules for `box1`, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

 
```
<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: contents;
}

```

 This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use `display: contents` in a similar way with flexbox to enable nested items to become flex items.

 As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don't be afraid to mix it with other methods of doing layout to get the different effects you need.


See also
--------


* [Flexbox guides](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
* [Multiple-column layout guides](../css_columns)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout>

Typical use cases of flexbox
============================


In this guide, we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method.


Why choose flexbox?
-------------------



In a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. These are the uses that flexbox was designed for. You can read more about the difference between flexbox and CSS Grid Layout in [Relationship of Flexbox to other layout methods](relationship_of_flexbox_to_other_layout_methods), where we discuss how flexbox fits into the overall picture of CSS Layout.

 In reality we also often use Flexbox for jobs that might be better done by Grid Layout, as a fallback for Grid, and also in order to get alignment capabilities. This is something that may well change once Box Alignment is implemented in Block Layout. In this guide we'll look at some of the typical things you might use flexbox for today.


Navigation
----------



A common pattern for navigation is to have a list of items displayed as a horizontal bar. This pattern, as basic as it seems, was difficult to achieve before flexbox. It forms the most simple of flexbox examples, and could be considered the ideal flexbox use case.

 When we have a set of items that we want to display horizontally, we may well end up with additional space. We need to decide what to do with that space, and have a couple of options. We either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space.


### Space distributed outside the items



To distribute the space between or around the items we use the alignment properties in flexbox, and the [`justify-content`](../justify-content) property. You can read more about this property in [Aligning Items in a flex container](aligning_items_in_a_flex_container), which deals with aligning items on the main axis.

 In the below live example we display the items at their natural size and by using `justify-content: space-between` make equal amounts of space between the items. You can change how the space is distributed using the `space-around` value, or where supported, `space-evenly`. You could also use `flex-start` to place the space at the end of the items, `flex-end` to place it before them, or `center` to center the navigation items.



### Space distributed within the items



A different pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them. In this case we would use the [`flex`](../flex) properties to allow items to grow and shrink in proportion to one another as described in [Controlling ratios of flex items along the main axis](controlling_ratios_of_flex_items_along_the_main_ax).

 If you wanted to respect the size property of my navigation items but have the available space shared out equally among them, then you might use `flex: auto`, which is the shorthand for `flex: 1 1 auto` — all items grow and shrink from a flex-basis of auto. This would mean that the longer item would have more space because it started from a larger size, even though the same amount of available space is assigned to it as the others.

 In the live example below try changing `flex: auto` to `flex: 1`. This is the shorthand for `flex: 1 1 0` and causes all of the items to become the same width, as they are working from a flex-basis of 0 allowing all of the space to be distributed evenly.



Split navigation
----------------



Another way to align items on the main axis is to use auto margins. This enables the design pattern of a navigation bar where one group of items are aligned left and another group aligned right.

 Here we are using the auto margins technique described in [Using auto margins for main axis alignment](aligning_items_in_a_flex_container#using_auto_margins_for_main_axis_alignment). The items are aligned on the main axis with `flex-start` as this is the initial behavior of flexbox, and we are aligning the item on the right by giving it a left margin of auto. You can move the class from one item to another to change where the split happens.

 Also in this example we are using margins on the flex items to create a gap between items, and a negative margin on the container in order that the items still remain flush with the right and left edges. Until the `gap` properties from the Box Alignment specification are implemented in flexbox, we have to use margins in this way if we want to create a gutter between items.



Center item
-----------



Before flexbox, developers would joke that the hardest problem in web design was vertical centering. This has now been made straightforward using the alignment properties in flexbox, as the following live example shows.

 You can play with the alignment, aligning the item to the start with `flex-start` or end with `flex-end`.


 In the future we may not need to make a container a flex container just to center a single item, as the Box Alignment properties will ultimately be implemented in Block layout. For now however, if you need to properly center one thing inside another, flexbox is the way to do it. As in the example above, make a container into a flex container, and then use either `align-items` on the parent element or target the flex item itself with `align-self`.


Card layout pushing footer down
-------------------------------



Whether you use flexbox or CSS Grid to lay out a list of card components, these layout methods only work on direct children of the flex or grid component. This means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. Any content inside uses regular block layout, meaning that on a card with less content the footer will rise up to the bottom of the content rather than stick to the bottom of the card.

  ![Two card components showing that the internals of the component do not stretch with the wrapper.] 

 Flexbox can solve this. We make the card a flex container, with [`flex-direction`](../flex-direction)`: column`. We then set the content area to `flex: 1`, which is the shorthand for `flex: 1 1 0` — the item can grow and shrink from a flex basis of `0`. As this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. If you remove the `flex` property from the live example you will see how the footer then moves up to sit directly under the content.



Media objects
-------------



The media object is a common pattern in web design — this pattern has an image or other element to one side and text to the right. Ideally a media object should be able to be flipped — moving the image from left to right.

 We see this pattern everywhere, used for comments, and anywhere we need to display images and descriptions. With flexbox we can allow the part of the media object containing the image to take its sizing information from the image, and then the body of the media object flexes to take up the remaining space.

 In the live example below you can see our media object. I have used the alignment properties to align the items on the cross axis to `flex-start`, and then set the `.content` flex item to `flex: 1`. As with our column layout card pattern above, using `flex: 1` means this part of the card can grow.


 Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.

 To prevent the image growing too large, add a [`max-width`](../max-width) to the image. As that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a `flex-basis` of auto. Any [`width`](../width) or max-width applied to the image will become the `flex-basis`.

 
```
.image img {
  max-width: 100px;
}

```
 You could also allow both sides to grow and shrink in proportion. If you set both sides to `flex: 1`, they will grow and shrink from a [`flex-basis`](../flex-basis) of 0, so you will end up with two equal-sized columns. You could either take the content as a guide and set both to `flex: auto`, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such as a width on the image.

 
```
.media .content {
  flex: 1;
  padding: 10px;
}

.image {
  flex: 1;
}

```
 You could also give each side different [`flex-grow`](../flex-grow) factors, for example setting the side with the image to `flex: 1` and the content side to `flex: 3`. This will mean they use a `flex-basis` of `0` but distribute that space at different rates according to the `flex-grow` factor you have assigned. The flex properties we use to do this are described in detail in the guide [Controlling ratios of flex items along the main axis](controlling_ratios_of_flex_items_along_the_main_ax).

 
```
.media .content {
  flex: 3;
  padding: 10px;
}

.image {
  flex: 1;
}

```

### Flipping the media object



To switch the display of the media object so that the image is on the right and the content is on the left we can use the `flex-direction` property set to `row-reverse`. The media object now displays the other way around. I have achieved this in the live example by adding a class of `flipped` alongside the existing `.media` class. This means you can see how the display changes by removing that class from the HTML.



Form controls
-------------



Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element paired with a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), perhaps for a search form or where you want your visitor to enter an email address.

 Flexbox makes this type of layout easy to achieve. I have contained my `<button>` and `<input>` field in a wrapper which I have given a border and set to `display: flex`. I then use the flex properties to allow the `<input>` field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.


 You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background color I didn't need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.


 Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.


Conclusion
----------



While exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. Quite often you have more than one choice. Mix items that cannot stretch with those that can, use the content to inform the size, or allow flexbox to share out space in proportion. It's up to you.

 Think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox>

Grid layout using line-based placement
======================================



In the [article covering the basic concepts of grid layout](basic_concepts_of_grid_layout), we started to look at how to position items on a grid using line numbers. In this article we will fully explore how this fundamental feature of the specification works.

 Starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines. The lines are numbered for columns and rows, and are indexed from 1. Note that grid is indexed according to the writing mode of the document. In a left to right language such as English line 1 is on the left-hand side of the grid. If you are working in a right-to-left language such as Arabic then line 1 will be the far right of the grid. We will learn more about the interaction between writing modes and grids in a later guide.



A basic example
---------------



As a very simple example we can take a grid with 3 column tracks and 3 row tracks. This gives us 4 lines in each dimension.

 Inside our grid container we have four child elements. If we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. If you use the [Firefox Grid Highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) you can see how the grid has defined columns and rows.

  ![Our Grid highlighted in DevTools] 

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

```
 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```


Positioning items by line number
--------------------------------



We can use line-based placement to control where these items sit on the grid. We would like the first item to start on the far left of the grid and span a single column track. It should also start on the first row line, at the top of the grid and span to the fourth row line.

 
```
.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}

```
 As you position some items, other items on the grid will continue to be laid out using the auto-placement rules. We will take a proper look at how these work in a later guide but you can see as you work that grid is laying out un-placed items into empty cells of the grid.

 Addressing each item individually we can place all four items spanning row and column tracks. Note that we can leave cells empty if we wish. One of the very nice things about Grid Layout is the ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

```


The `grid-column` and `grid-row` shorthands
-------------------------------------------



We have quite a lot of code here to position each item. It should come as no surprise to know there is a [shorthand](../shorthand_properties). The [`grid-column-start`](../grid-column-start) and [`grid-column-end`](../grid-column-end) properties can be combined into [`grid-column`](../grid-column), [`grid-row-start`](../grid-row-start) and [`grid-row-end`](../grid-row-end) into [`grid-row`](../grid-row).

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

```


Default spans
-------------


In the above examples, we specified every end row and column line, in order to demonstrate the properties, however in practice if an item only spans one track you can omit the `grid-column-end` or `grid-row-end` value. Grid defaults to spanning one track.

### Default spans with longhand placement



This means that our initial, long-hand, example would look like this:

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

```


### Default spans with shorthand placement



Our shorthand would look like the following code, with no forward slash and second value for the items spanning one track only.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}

```


The `grid-area` property
------------------------



We can take things a step further and define each area with a single property – [`grid-area`](../grid-area). The order of the values for grid-area are as follows.

 * grid-row-start
* grid-column-start
* grid-row-end
* grid-column-end

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
.box2 {
  grid-area: 1 / 3 / 3 / 4;
}
.box3 {
  grid-area: 1 / 2 / 2 / 3;
}
.box4 {
  grid-area: 3 / 2 / 4 / 4;
}

```

 This order of values for `grid-area` can seem a little strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example. It may help to realize that this is due to grid using the flow-relative directions defined in the CSS Writing Modes specification. We will explore how grids work with writing modes in a later article however we have the concept of four flow-relative directions:

 * block-start
* block-end
* inline-start
* inline-end

 We are working in English, a left-to-right language. Our block-start is the top row line of the grid container, block-end is the final row line of the container. Our inline-start is the left-hand column line as inline-start is always the point from which text would be written in the current writing mode, inline-end is the final column line of our grid.

 When we specify our grid area using the `grid-area` property we first define both start lines `block-start` and `inline-start`, then both end lines `block-end` and `inline-end`. This seems unusual at first as we are used to the physical properties of top, right, bottom and left but makes more sense if you start to think of websites as being multi-directional in writing mode.


Counting backwards
------------------



We can also count backwards from the block and inline end of the grid, for English that would be the right-hand column line and final row line. These lines can be addressed as `-1`, and you can count back from there – so the second last line is `-2`. It is worth noting that the final line is the final line of the *explicit grid*, the grid defined by `grid-template-columns` and `grid-template-rows`, and does not take into account any rows or columns added in the *implicit grid* outside of that.

 In this next example, we have flipped the layout we were working with by working from the right and bottom of our grid when placing the items.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column-start: -1;
  grid-column-end: -2;
  grid-row-start: -1;
  grid-row-end: -4;
}
.box2 {
  grid-column-start: -3;
  grid-column-end: -4;
  grid-row-start: -1;
  grid-row-end: -3;
}
.box3 {
  grid-column-start: -2;
  grid-column-end: -3;
  grid-row-start: -1;
  grid-row-end: -2;
}
.box4 {
  grid-column-start: -2;
  grid-column-end: -4;
  grid-row-start: -3;
  grid-row-end: -4;
}

```


### Stretching an item across the grid



Being able to address the start and end lines of the grid is useful as you can then stretch an item right across the grid with:

 
```
.item {
  grid-column: 1 / -1;
}

```

Gutters or Alleys
-----------------



The CSS Grid Specification includes the ability to add gutters between column and row tracks with the [`column-gap`](../column-gap) and [`row-gap`](../row-gap) properties. These specify a gap that acts much like the [`column-gap`](../column-gap) property in multi-column layout.

  **Note:** When grid first shipped in browsers the [`column-gap`](../column-gap), [`row-gap`](../row-gap) and [`gap`](../gap) properties were prefixed with the `grid-` prefix as `grid-column-gap`, `grid-row-gap` and `grid-gap` respectively.

 Browsers are updating their rendering engines to remove this prefix, however the prefixed versions will be maintained as aliases, making them safe to use.

  Gaps only appear between tracks of the grid, they do not add space to the top and bottom, left or right of the container. We can add gaps to our earlier example by using these properties on the grid container.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 1em;
}

```


### The gap shorthand



The two properties can also be expressed as a shorthand, [`gap`](../gap). If you only give one value for `gap` it will apply to both column and row gaps. If you specify two values, the first is used for `row-gap` and the second for `column-gap`.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 1em 20px;
}

```
 In terms of line-based positioning of items, the gap acts as if the line has gained extra width. Anything starting at that line starts after the gap and you cannot address the gap or place anything into it. If you want gutters that act more like regular tracks you can of course define a track for the purpose instead.


Using the `span` keyword
------------------------



In addition to specifying the start and end lines by number, you can specify a start line and then the number of tracks you would like the area to span.

 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```
 
```
.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

```

 You can also use the `span` keyword in the value of `grid-row-start`/`grid-row-end` and `grid-column-start/grid-column-end`. The following two examples will create the same grid area. In the first we set the start row line, then the end line we explain that we want to span 3 lines. The area will start at line 1 and span 3 lines to line 4.

 
```
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: span 3;
}

```
 In the second example, we specify the end row line we want the item to finish at and then set the start line as `span 3`. This means the item will need to span upwards from the specified row line. The area will start at line 4 and span 3 lines to line 1.

 
```
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3;
  grid-row-end: 4;
}

```
 To become familiar with line based positioning in grid try to build a few common layouts by placing items onto grids with varying numbers of columns. Remember that if you do not place all of the items, any leftover items will be placed according to auto-placement rules. This may result in the layout you want, but if something is appearing somewhere unexpected, check that you have set a position for it.

 Also, remember that items on the grid can overlap each other when you place them explicitly like this. That can create some nice effects, however you can also end up with things overlapping incorrectly if you specify the wrong start or end line. The [Firefox Grid Highlighter](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) can be very useful as you learn, especially if your grid is quite complicated.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid>

Grid template areas
===================


In the [previous guide](line-based_placement_with_css_grid) we looked at grid lines, and how to position items against those lines. When you use CSS Grid Layout you always have lines, and this can be a straightforward way to place items on your grid. However, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement. This method involves placing our items using named template areas, and we will find out exactly how this method works. You will see very quickly why we sometimes call this the ascii-art method of grid layout!


Naming a grid area
------------------



You have already encountered the [`grid-area`](../grid-area) property. This is the property that can take as a value all four of the lines used to position a grid area.

 
```
.box1 {
  grid-area: 1 / 1 / 4 / 2;
}

```
 What we are doing here when defining all four lines, is defining the area by specifying the lines that enclose that area.

  ![The Grid Area defined by lines] 

 We can also define an area by giving it a name and then specify the location of that area in the value of the [`grid-template-areas`](../grid-template-areas) property. You can choose what you would like to name your area. For example, if I wish to create the layout shown below I can identify four main areas.

 * a header
* a footer
* a sidebar
* the main content

  ![An image showing a simple two column layout with header and footer] 

 With the [`grid-area`](../grid-area) property I can assign each of these areas a name. This will not yet create any layout, but we now have named areas to use in a layout.

 
```
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

```
 Having defined these names I then create my layout. This time, instead of placing my items using line numbers specified on the items themselves, I create the whole layout on the grid container.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}

```
 
```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

```

 Using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container. We can see the layout described as the value of the [`grid-template-areas`](../grid-template-areas) property.


Leaving a grid cell empty
-------------------------



We have completely filled our grid with areas in this example, leaving no white space. However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop character, '`.`'. If I want to only display the footer directly under the main content I would need to leave the three cells underneath the sidebar empty.

 
```
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    ". . . ft ft ft ft ft ft";
}

```
 
```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

```

 In order to make the layout neater I can use multiple `.` characters. As long as there is at least one white space between the full stops it will be counted as one cell. For a complex layout there is a benefit to having the rows and columns neatly aligned. It means that you can actually see, right there in the CSS, what this layout looks like.


Spanning multiple cells
-----------------------



In our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. You can add extra white space in order to keep your columns neatly lined up in the value of `grid-template-areas`. You can see that I have done this in order that the `hd` and `ft` line up with `main`.

 The area that you create by chaining the area names must be rectangular, at this point there is no way to create an L-shaped area. The specification does note that a future level might provide this functionality. You can however span rows just as easily as columns. For example we could make our sidebar span down to the end of the footer by replacing the `.` with `sd`.

 
```
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "sd sd sd ft ft ft ft ft ft";
}

```

 The value of [`grid-template-areas`](../grid-template-areas) must show a complete grid, otherwise it is invalid (and the property is ignored). This means that you must have the same number of cells for each row, if empty with a full stop character demonstrating that the cell is to be left empty. You will also create an invalid grid if your areas are not rectangular.


Redefining the grid using media queries
---------------------------------------



As our layout is now contained in one part of the CSS, this makes it very easy to make changes at different breakpoints. You can do this by redefining the grid, the position of items on the grid, or both at once.

 When doing this, define the names for your areas outside of any media queries. That way the content area would always be called `main` no matter where on the grid it is placed.

 For our layout above, we might like to have a very simple layout at narrow widths, defining a single column grid and stacking up our items.

 
```
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}

.wrapper {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hd"
    "main"
    "sd"
    "ft";
}

```
 We can then redefine that layout inside media queries to go to our two columns layout, and perhaps take it to a three column layout if the available space is even wider. Note that for the wide layout I keep my nine column track grid, I redefine where items are placed using `grid-template-areas`.

 
```
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "sd sd sd main main main main main main"
      "sd sd sd ft ft ft ft ft ft";
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-areas:
      "hd hd hd hd hd hd hd hd hd"
      "sd sd main main main main main ft ft";
  }
}

```


Using `grid-template-areas` for UI elements
-------------------------------------------


Many of the grid examples you will find online make the assumption that you will use grid for main page layout, however grid can be just as useful for small elements as those larger ones. Using [`grid-template-areas`](../grid-template-areas) can be especially nice as it is easy to see in the code what your element looks like.

### Media object example



As a very simple example we can create a "media object". This is a component with space for an image or other media on one side and content on the other. The image might be displayed on the right or left of the box.

  ![Images showing an example media object design] 

 Our grid is a two-column track grid, with the column for the image sized at `1fr` and the text `3fr`. If you wanted a fixed width image area, then you could set the image column as a pixel width, and assign the text area `1fr`. A single column track of `1fr` would then take up the rest of the space.

 We give the image area a grid area name of `img` and the text area `content`, then we can lay those out using the `grid-template-areas` property.

 
```
\* {
  box-sizing: border-box;
}

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}

```
 
```
<div class="media">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>

```


### Displaying the image on the other side of the box



We might want to be able to display our box with the image the other way around. To do this, we redefine the grid to put the `1fr` track last, and flip the values in [`grid-template-areas`](../grid-template-areas).

 
```
\* {
  box-sizing: border-box;
}

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media.flipped {
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "content img";
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}

```
 
```
<div class="media flipped">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>

```


Grid definition shorthands
--------------------------



Having looked at various ways of placing items on our grids and many of the properties used to define grid, this is a good time to take a look at a couple of shorthands that are available for defining the grid and many things about it all in one line of CSS.

 These can quickly become difficult to read for other developers, or even your future self. However they are part of the specification and it is likely you will come across them in examples or in use by other developers, even if you choose not to use them.

 Before using any shorthand it is worth remembering that shorthands not only enable the setting of many properties in one go, they also act to **reset things** to their initial values that you do not, or cannot set in the shorthand. Therefore if you use a shorthand, be aware that it may reset things you have applied elsewhere.

 The two shorthands for the grid container are the Explicit Grid Shorthand `grid-template` and the Grid Definition Shorthand `grid`.


### `grid-template`



The [`grid-template`](../grid-template) property sets the following properties:

 * [`grid-template-rows`](../grid-template-rows)
* [`grid-template-columns`](../grid-template-columns)
* [`grid-template-areas`](../grid-template-areas)

 The property is referred to as the Explicit Grid Shorthand because it is setting those things that you control when you define an explicit grid, and not those which impact any implicit row or column tracks that might be created.

 The following code creates a layout using [`grid-template`](../grid-template) that is the same as the layout created earlier in this guide.

 
```
.wrapper {
  display: grid;
  grid-template:
    "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

```
 The first value is our `grid-template-areas` value but we also declare the size of the row at the end of each row. This is what the `minmax(100px, auto)` is doing.

 Then after `grid-template-areas` we have a forward slash, after that is an explicit track listing of column tracks.


### `grid`



The [`grid`](../grid) shorthand goes a step further and also sets properties used by the implicit grid. So you will be setting:

 * [`grid-template-rows`](../grid-template-rows)
* [`grid-template-columns`](../grid-template-columns)
* [`grid-template-areas`](../grid-template-areas)
* [`grid-auto-rows`](../grid-auto-rows)
* [`grid-auto-columns`](../grid-auto-columns)
* [`grid-auto-flow`](../grid-auto-flow)

 You can use this syntax in the exact same way as the [`grid-template`](../grid-template) shorthand, just be aware than when doing so you will reset the other values set by the property.

 
```
.wrapper {
  display: grid;
  grid:
    "hd hd hd hd hd hd hd hd hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft ft ft ft ft ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

```
 We will revisit the other functionality offered by this shorthand later in these guides when we take a look at auto placement and the grid-auto-flow property.

 If you have worked through these initial guides you now should be in a position to create grid layouts using line-based placement or named areas. Take some time to build some common layout patterns using grid, while there are lots of new terms to learn, the syntax is relatively straightforward. As you develop examples, you are likely to come up with some questions and use cases for things we haven't covered yet. In the rest of these guides we will be looking at some more of the detail included in the specification – in order that you can begin to create advanced layouts with it.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas>

Grid layout using named grid lines
==================================


In previous guides we've looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas. In this guide we are going to look at how these two things work together when we use named lines. Line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track sizes. Once you work through some examples it should become clearer and easier to work with.


Naming lines when defining a grid
---------------------------------



You can assign some or all of the lines in your grid a name when you define your grid with the `grid-template-rows` and `grid-template-columns` properties. To demonstrate I'll use the simple layout created in the guide on line-based placement. This time I'll create the grid using named lines.

 When defining the grid, I name my lines inside square brackets. Those names can be anything you like. I have defined a name for the start and end of the container, both for rows and columns. Then defined the center block of the grid as `content-start` and `content-end` again, both for columns and rows although you do not need to name all of the lines on your grid. You might choose to name just some key lines for your layout.

 
```
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

```
 Once the lines have names, we can use the name to place the item rather than the line number.

 
```
.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}

.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}

.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}

```
 
```
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>

```

 Everything else about line-based placement still works in the same way and you can mix named lines and line numbers. Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.


### Giving lines multiple names


You may want to give a line more than one name, perhaps it denotes the sidebar-end and the main-start for example. To do this add the names inside the square brackets with whitespace between them `[sidebar-end main-start]`. You can then refer to that line by either of the names.

Implicit grid areas from named lines
------------------------------------



When naming the lines, I mentioned that you can name these anything you like. The name is a [custom ident](https://drafts.csswg.org/css-values-4/#custom-idents), an author-defined name. When choosing the name you need to avoid words that might appear in the specification and be confusing - such as `span`. Idents are not quoted.

 While you can choose any name, if you append `-start` and `-end` to the lines around an area, as I have in the example above, grid will create you a named area of the main name used. Taking the above example, I have `content-start` and `content-end` both for rows and for columns. This means I get a grid area named `content`, and could place something in that area should I wish to.

 I'm using the same grid definitions as above, however this time I am going to place a single item into the named area `content`.

 
```
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
.thing {
  grid-area: content;
}

```
 
```
<div class="wrapper">
  <div class="thing">I am placed in an area named content.</div>
</div>

```

 We don't need to define where our areas are with `grid-template-areas` as our named lines have created an area for us.


Implicit Grid lines from named areas
------------------------------------



We have seen how named lines create a named area, and this also works in reverse. Named template areas create named lines that you can use to place your items. If we take the layout created in the guide to Grid Template Areas, we can use the lines created by our areas to see how this works.

 In this example I have added an extra div with a class of `overlay`. We have named areas created using the `grid-area` property, then a layout created in `grid-template-areas`. The area names are:

 * `hd`
* `ft`
* `main`
* `sd`

 This gives us column and row lines:

 * `hd-start`
* `hd-end`
* `sd-start`
* `sd-end`
* `main-start`
* `main-end`
* `ft-start`
* `ft-end`

 You can see the named lines in the image, note that some lines have two names - for example `sd-end` and `main-start` refer to the same column line.

  ![An image showing the implicit line names created by our grid areas.] 

 To position `overlay` using these implicit named lines is the same as positioning an item using lines that we have named.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd hd hd hd hd hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft ft ft ft ft ft";
}

.header {
  grid-area: hd;
}

.footer {
  grid-area: ft;
}

.content {
  grid-area: main;
}

.sidebar {
  grid-area: sd;
}

.wrapper > div.overlay {
  z-index: 10;
  grid-column: main-start / main-end;
  grid-row: hd-start / ft-end;
  border: 4px solid rgb(92, 148, 13);
  background-color: rgba(92, 148, 13, 0.4);
  color: rgb(92, 148, 13);
  font-size: 150%;
}

```
 
```
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
  <div class="overlay">Overlay</div>
</div>

```

 Given that we have this ability to position created lines from named areas and areas from named lines, it is worth taking a little bit of time to plan your naming strategy when starting out creating your grid layout. By selecting names that will make sense to you and your team you will help everyone to use the layouts you create more easily.


Multiple lines with the same name with repeat()
-----------------------------------------------


If you want to give all of the lines in your grid a unique name then you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. If you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too.

### Twelve-column grid using repeat()



In this next example I am creating a grid with twelve equal width columns. Before defining the 1fr size of the column track I am also defining a line name of `[col-start]`. This means that we will end up with a grid that has 12 column lines all named `col-start` before a `1fr` width column.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
}

```
 Once you have created the grid you can place items onto it. As we have multiple lines named `col-start` if you place an item to start after line `col-start` grid uses the first line named `col-start`, in our case that will be the far left line. To address another line use the name, plus the number for that line. To place our item from the first line named col-start to the 5th, we can use:

 
```
.item1 {
  grid-column: col-start / col-start 5;
}

```
 You can also use the `span` keyword here. My next item will be placed from the 7th line named `col-start` and span 3 lines.

 
```
.item2 {
  grid-column: col-start 7 / span 3;
}

```
 
```
<div class="wrapper">
  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
</div>

```

 If you take a look at this layout in the Firefox Grid Highlighter you can see how the column lines are shown, and how our items are placed against these lines.

  ![The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.] 


### Defining named lines with a track list



The repeat syntax can also take a track list, it doesn't just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower `1fr` width column named `col1-start` followed by a wider `3fr` column named `col2-start`.

 
```
.wrapper {
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
}

```
 If your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition. The following definition, creates four `1fr` tracks, which each have a start and end line.

 
```
.wrapper {
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

```
 If we write this definition out without using repeat notation it would look like this.

 
```
.wrapper {
  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end];
}

```
 If you have used a track list then you can use the `span` keyword not just to span a number of lines but also to span a number of lines of a certain name.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
}

.item1 {
  grid-column: col1-start / col2-start 2;
}

.item2 {
  grid-row: 2;
  grid-column: col1-start 2 / span 2 col1-start;
}

```
 
```
<div class="wrapper">
  <div class="item1">
    I am placed from col1-start line 1 to col2-start line 2
  </div>
  <div class="item2">
    I am placed from col1-start line 2 spanning 2 lines named col1-start
  </div>
</div>

```


### Twelve-column grid framework



Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don't need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.

 If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid "framework" is:

 
```
.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(12, [col-start] 1fr);
}

```
 We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.

 
```
<div class="wrapper">
  <header class="main-header">I am the header</header>
  <aside class="side1">I am sidebar 1</aside>
  <article class="content">I am the main article</article>
  <aside class="side2">I am sidebar 2</aside>
  <footer class="main-footer">I am the footer</footer>
</div>

```
 I could then place this on my grid layout framework like this.

 
```
.main-header,
.main-footer {
  grid-column: col-start / span 12;
}

.side1 {
  grid-column: col-start / span 3;
  grid-row: 2;
}

.content {
  grid-column: col-start 4 / span 6;
  grid-row: 2;
}

.side2 {
  grid-column: col-start 10 / span 3;
  grid-row: 2;
}

```

 Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.

  ![The layout with the grid highlighted.] 

 That's all I need. I don't need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the `1fr` column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines>

Auto-placement in grid layout
=============================


In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. You can see auto-placement in action in the simplest of ways by creating a grid on a set of items.


Default placement
-----------------



If you give the items no placement information they will position themselves on the grid, one in each grid cell.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

```
 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```


Default rules for auto-placement
--------------------------------


As you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell. The default flow is to arrange items by row. Grid will lay an item out into each cell of row 1. If you have created additional rows using the `grid-template-rows` property then grid will continue placing items in these rows. If the grid does not have enough rows in the explicit grid to place all of the items new *implicit* rows will be created.

### Sizing rows in the implicit grid



The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.

 You can however control the size of these rows with the property `grid-auto-rows`. To cause all created rows to be 100 pixels tall for example you would use:

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
}

```


### Sizing rows using minmax()



You can use [`minmax()`](../minmax) in your value for [`grid-auto-rows`](../grid-auto-rows) enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>
    Four <br />This cell <br />Has extra <br />content. <br />Max is auto
    <br />so the row expands.
  </div>
  <div>Five</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

```


### Sizing rows using a track listing



You can also pass in a track listing, this will repeat. The following track listing will create an initial implicit row track as 100 pixels and a second as `200px`. This will continue for as long as content is added to the implicit grid.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: 100px 200px;
}

```


### Auto-placement by column



You can also ask grid to auto-place items by column. Using the property [`grid-auto-flow`](../grid-auto-flow) with a value of `column`. In this case grid will add items in rows that you have defined using [`grid-template-rows`](../grid-template-rows). When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized. You can control the size of implicit column tracks with [`grid-auto-columns`](../grid-auto-columns), this works in the same way as [`grid-auto-rows`](../grid-auto-rows).

 In this next example I have created a grid with three row tracks of 200 pixels height. I am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items.

 
```
.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: 300px 100px;
}

```
 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

```


The order of auto placed items
------------------------------


A grid can contain a mixture of items. Some of the items may have a position on the grid, but others may be auto-placed. This can be helpful, if you have a document order that reflects the order in which items sit on the grid you may not need to write CSS rules to place absolutely everything. The specification contains a long section detailing the [Grid item placement algorithm](https://drafts.csswg.org/css-grid/#auto-placement-algo), however for most of us we just need to remember a few simple rules for our items.

### Order modified document order


Grid places items that have not been given a grid position in what is described in the specification as "order modified document order". This means that if you have used the `order` property at all, the items will be placed by that order, not their DOM order. Otherwise they will stay by default in the order that they are entered in the document source.

### Items with placement properties



The first thing grid will do is place any items that have a position. In the example below I have 12 grid items. Item 2 and item 5 have been placed using line based placement on the grid. You can see how those items are placed and the other items then auto-place in the spaces. The auto-placed items will place themselves before the placed items in DOM order, they don't start after the position of a placed item that comes before them.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

```


### Deal with items that span tracks



You can use placement properties while still taking advantage of auto-placement. In this next example I have added to the layout by setting odd items to span two tracks both for rows and columns. I do this with the [`grid-column-end`](../grid-column-end) and [`grid-row-end`](../grid-row-end) properties and setting the value of this to `span 2`. What this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks.

 You can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn't fit into a track, it will move to the next row until it finds a space the item can fit in.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>

```
 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
.wrapper div:nth-child(4n + 1) {
  grid-column-end: span 2;
  grid-row-end: span 2;
  background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

```


### Filling in the gaps



So far, other than items we have specifically placed, grid is always progressing forward and keeping items in DOM order. This is generally what you want, if you are laying out a form for example you wouldn't want the labels and fields to become jumbled up in order to fill in some gap. However sometimes, we are laying things out that don't have a logical order and we would like to create a layout that doesn't have gaps in it.

 To do this, add the property [`grid-auto-flow`](../grid-auto-flow) with a value of `dense` to the container. This is the same property you use to change the flow order to `column`, so if you were working in columns you would add both values `grid-auto-flow: column dense`.

 Having done this, grid will now backfill the gaps, as it moves through the grid it leaves gaps as before, but then if it finds an item that will fit in a previous gap it will pick it up and take it out of DOM order to place it in the gap. As with any other reordering in grid this does not change the logical order. Tab order for example, will still follow the document order. We will take a look at the potential accessibility issues of Grid Layout in a later guide, but you should take care when creating this disconnect between the visual order and display order.

 
```
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>

```
 
```
.wrapper div:nth-child(4n + 1) {
  grid-column-end: span 2;
  grid-row-end: span 2;
  background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
  grid-auto-flow: dense;
}

```


### Anonymous grid items



There is a mention in the specification of anonymous grid items. These are created if you have a string of text inside your grid container, that is not wrapped in any other element. In the example below we have three grid items, assuming you had set the parent with a class of `grid` to `display: grid`. The first is an anonymous item as it has no enclosing markup, this item will always be dealt with via the auto-placement rules. The other two are grid items enclosed in a div, they might be auto-placed or you could place these with a positioning method onto your grid.

 
```
<div class="grid">
  I am a string and will become an anonymous item
  <div>A grid item</div>
  <div>A grid item</div>
</div>

```
 Anonymous items are always auto-placed because there is no way to target them. Therefore if you have some unwrapped text for some reason in your grid, be aware that it might show up somewhere unexpected as it will be auto-placed according to the auto-placement rules.


### Use cases for auto-placement



Auto-placement is useful whenever you have a collection of items. That could be items that do not have a logical order such as a gallery of photos, or product listing. In that case you might choose to use the dense packing mode to fill in any holes in your grid. In my image gallery example I have some landscape and some portrait images. I have set landscape images – with a class of `landscape` to span two column tracks. I then use `grid-auto-flow: dense` to create a densely packed grid.

 Try removing the line `grid-auto-flow: dense` to see the content reflow to leave gaps in the layout.


 Auto-placement can also help you lay out interface items which do have logical order. An example is the definition list in this next example. Definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of `dt` and `dd` items. In my example I am allowing auto-placement to place the items, however I have classes that start a `dt` in column 1, and `dd` in column 2, this ensure that terms go on one side and definitions on the other - no matter how many of each we have.

 
```
<div class="wrapper">
  <dl>
    <dt>Mammals</dt>
    <dd>Cat</dd>
    <dd>Dog</dd>
    <dd>Mouse</dd>
    <dt>Fish</dt>
    <dd>Guppy</dd>
    <dt>Birds</dt>
    <dd>Pied Wagtail</dd>
    <dd>Owl</dd>
  </dl>
</div>

```
 
```
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 300px;
  margin: 1em;
  line-height: 1.4;
}
dt {
  grid-column: 1;
  font-weight: bold;
}
dd {
  grid-column: 2;
}

```


What can't we do with auto-placement (yet)?
-------------------------------------------



There are a couple of things that often come up as questions. Currently we can't do things like target every other cell of the grid with our items. A related issue may have already come to mind if you followed the last guide about named lines on the grid. It would be to define a rule that said "auto-place items against the next line named "n", and grid would then skip other lines. There is [an issue raised about this](https://github.com/w3c/csswg-drafts/issues/796) on the CSSWG GitHub repository, and you would be welcome to add your own use cases to this.

 It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout>

Grids, logical values, and writing modes
========================================


In these guides, I have already touched on an important feature of grid layout: the support for different writing modes that is built into the specification. For this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs. physical properties as we do so.


Logical and physical properties and values
------------------------------------------



CSS is full of **physical** positioning keywords – left and right, top and bottom. If we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. In the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container:

 
```
.container {
  position: relative;
}
.item {
  position: absolute;
  top: 20px;
  left: 30px;
}

```
 
```
<div class="container">
  <div class="item">Item</div>
</div>

```
 Another place you might see physical keywords in use, is when using `text-align: right` to align text to the right. There are also physical **properties** in CSS. We add margins, padding, and borders using these physical properties of [`margin-left`](../margin-left), [`padding-left`](../padding-left), and so on.

 We call these keywords and properties *physical* because they relate to the screen you are looking at. Left is always left, no matter what direction your text is running.

 This can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. Browsers are pretty good at dealing with text direction, and you don't even need to be working in a [rtl](https://developer.mozilla.org/en-US/docs/Glossary/RTL) language to take a look. In the example below, I have two paragraphs. The first paragraph has [`text-align`](../text-align) set to `left`, the second has no `text-align` property set. I have added `dir="rtl"` to the `html` element, which switches the writing mode from the default for an English language document of `ltr`. You can see that the first paragraph remains left to right, due to the `text-align` value being `left`. The second however, switches direction and the text runs from right to left .

  ![A simple example of text direction.] 

 This is a very simple example of the problem with physical values and properties being used in CSS. They prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom.


### Logical properties and values


Logical properties and values do not make an assumption about text direction. Which is why in Grid Layout we use the keyword `start` when aligning something to the start of the container. For me, working in English, `start` may well be on the left, however it doesn't have to be, and the word `start` infers no physical location.

Block and Inline
----------------



Once we begin dealing with logical, rather than physical properties, we stop seeing the world as left to right, and top to bottom. We need a new reference point, and this is where understanding the *block* and *inline* axes, that we met previously in the guide to *alignment*, becomes very useful. If you can start to see layout in terms of block and inline, the way things work in grid start to make a lot more sense.

  ![An image showing the default direction of the Block and Inline Axes.] 


CSS writing modes
-----------------


I'm going to introduce another specification here, that I will be using in my examples: the CSS Writing Modes specification. This spec details how we can use these different writing modes in CSS, not just for the support of languages that have a different writing mode to English, but also for creative purposes. I'll be using the [`writing-mode`](../writing-mode) property to make changes to the writing mode applied to our grid, in order to demonstrate how the logical values work. If you want to dig into writing modes further, however, then I would recommend that you read Jen Simmons excellent article on [CSS Writing Modes](https://24ways.org/2016/css-writing-modes/). This goes into more depth on that specification than we will touch upon here.

### writing-mode



Writing Modes are more than just left to right and right to left text, and the `writing-mode` property helps us display text running in other directions. The [`writing-mode`](../writing-mode) property can have values of:

 * `horizontal-tb`
* `vertical-rl`
* `vertical-lr`
* `sideways-rl`
* `sideways-lr`

 The value `horizontal-tb` is the default for text on the web. It is the direction in which you are reading this guide. The other properties will change the way that text flows in our document, matching the different writing modes found around the world. Again, for full details of these see [Jen's article](https://24ways.org/2016/css-writing-modes/). As a simple example, I have two paragraphs below. The first uses the default `horizontal-tb`, and the second uses `vertical-rl`. In the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom.

 
```
<div class="wrapper">
  <p style="writing-mode: horizontal-tb">
    I have writing mode set to the default <code>horizontal-tb</code>
  </p>
  <p style="writing-mode: vertical-rl">
    I have writing mode set to <code>vertical-rl</code>
  </p>
</div>

```


Writing modes in grid layouts
-----------------------------


If we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of where the Block and Inline Axis are.

### Default writing mode



The grid in this example has three columns and two row tracks. This means there are three tracks running down the block axis. In default writing mode, grid auto-places items starting at the top left, moving along to the right, filling up the three cells on the inline axis. It then moves onto the next line, creating a new Row track, and fills in more items:

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

```


### Setting writing mode



If we add `writing-mode: vertical-lr` to the grid container, we can see that the block and inline Axis are now running in a different direction. The block or *column* axis now runs across the page from left to right, Inline runs down the page, creating rows from top to bottom.

 
```
.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

```

  ![An image showing the direction of Block and Inline when writing-mode is vertical-lr] 


Logical values for alignment
----------------------------



With the block and inline axis able to change direction, the logical values for the alignment properties start to make more sense.

 In this next example, I am using alignment to align items inside a grid that is set to `writing-mode: vertical-lr`. The `start` and `end` properties work in exactly the same way that they do in the default writing mode, and remain logical in a way that using left and right, top and bottom to align items would not do. This occurs once we've flipped the grid onto the side, like this:

 
```
.wrapper {
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.item1 {
  grid-column: 1 / 4;
  align-self: start;
}

.item2 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-self: start;
}

.item3 {
  grid-column: 3;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: end;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

```

 If you want to see how these work, with a right to left as well as top to bottom writing mode, switch `vertical-lr` to `vertical-rl`, which is a vertical writing mode running from right to left.


Auto-placement and Writing Modes
--------------------------------


In the example already shown, you can see how writing mode changes the direction in which items place themselves onto the grid. Items will, by default, place themselves along the Inline axis then move onto a new row. However, that inline axis may not always run from left to right.

Line-based placement and Writing Modes
--------------------------------------


The key thing to remember when placing items by line number, is that line 1 is the start line, no matter which writing mode you are in. Line -1 is the end line, no matter which writing mode you are in.

### Line-based placement with left to right text



In this next example, I have a grid which is in the default `ltr` direction. I have positioned three items using line-based placement.

 * Item 1 starts at column line 1, spanning one track.
* Item 2 starts at column line -1, spanning to -3.
* Item 3 starts at column line 1, spanning to column line 3.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.item1 {
  grid-column: 1;
}
.item2 {
  grid-column: -1 / -3;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

```


### Line-based placement with right to left text



If I now add the [`direction`](../direction) property with a value of `rtl` to the grid container, line 1 becomes the right-hand side of the grid, and line -1 on the left.

 
```
.wrapper {
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}
.item1 {
  grid-column: 1;
}
.item2 {
  grid-column: -1 / -3;
}
.item3 {
  grid-column: 1 / 3;
  grid-row: 2;
}

```
 
```
<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

```

 What this demonstrates, is that if you are switching the direction of your text, either for entire pages or for parts of pages, and are using lines: you may want to name your lines, if you do not want the layout to completely switch direction. For some things, for example, where a grid contains text content, this switching may be exactly what you want. For other usage it may not.


### The strange order of values in the `grid-area` property



You can use the [`grid-area`](../grid-area) property to specify all four lines of a grid area as one value. When people first encounter this, they are often surprised that the values do not follow the same order as the shorthand for margin – which runs clockwise: top, right, bottom, left.

 The order of `grid-area` values is:

 * `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`

 Which for English, in left-to-right means the order is:

 * `top`
* `left`
* `bottom`
* `right`

 This is anti-clockwise! So the reverse of what we do for margins and padding. Once you realize that `grid-area` sees the world as "block and inline", you can remember that we are setting the two starts, then the two ends. It becomes much more logical once you know!


Mixed writing modes and grid layout
-----------------------------------



In addition to displaying documents, using the correct writing mode for the language, writing modes can be used creatively within documents that are otherwise `ltr`. In this next example I have a grid layout with a set of links down one side. I've used writing modes to turn these on their side in the column track:

 
```
.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr auto;
  font: 1em Helvetica, Arial, sans-serif;
}
.wrapper nav {
  writing-mode: vertical-lr;
}
.wrapper ul {
  list-style: none;
  margin: 0;
  padding: 1em;
  display: flex;
  justify-content: space-between;
}
.wrapper a {
  text-decoration: none;
}

```
 
```
<div class="wrapper">
  <div class="content">
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
      shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
      Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi
      beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki
      bean chickweed potato bell pepper artichoke.
    </p>
    <p>
      Nori grape silver beet broccoli kombu beet greens fava bean potato
      quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil
      turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter
      purslane fennel azuki bean earthnut pea sierra leone bologi leek soko
      chicory celtuce parsley jícama salsify.
    </p>
  </div>
  <nav>
    <ul>
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </nav>
</div>

```


Physical values and grid layout
-------------------------------



We encounter physical properties frequently when building websites, and while the grid placement and alignment properties and values respect writing modes, there are things you may want to do with Grid that force you to use physical properties and values. In the guide to [Box alignment and grids](box_alignment_in_css_grid_layout), I demonstrated how auto margins work in a grid area. Using an auto margin to push one item away from the others is a common flexbox trick too, however this also ties the layout to the physical space.

 If you use absolute positioning within a grid area, then you will again be using physical offsets to push the item around inside the grid area. The key thing is to be aware of, is the tension between physical and logical properties and values. For example, be aware that you may need to make changes to your CSS to cope with a switch from `ltr` to `rtl`.


### Logical properties for everything!



Our new layout methods give us the ability to use these logical values to place items, however, as soon as we start to combine them with the physical properties used for margins and padding, we need to remember that those physical properties will not change according to writing mode.

 The [CSS Logical Properties specification](https://drafts.csswg.org/css-logical/) means that you can use the [logical equivalents](../css_logical_properties) for properties, such as [`margin-left`](../margin-left) and [`margin-right`](../margin-right), in your CSS. These properties and values have good support in modern browsers. Your understanding of block and inline through grid will help you to understand how to use these too.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes>

Grid layout and accessibility
=============================



Those of us who have been doing web development for more years than we care to remember might consider that CSS Grid is a little bit like using "tables for layout". Back in the early days of web design, the way we constructed page layout was to use HTML tables, then fragment our design into the cells of those tables in order to create a layout. This had some advantages over the "CSS Positioning" that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the markup, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.

 In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the [CSS Zen Garden](http://www.csszengarden.com/) showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.

 [CSS Grid Layout](../css_grid_layout) does not have the same issues that tables did, our grid structure is defined in CSS rather than in the markup. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from markup, however is it possible to go too far with this idea? Is it possible that we could *create* an accessibility issue through our use of grids?



Re-ordering content in CSS Grid Layout
--------------------------------------



We've already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the [`order`](../order) property, which will change how items auto-place. We can use `grid-auto-flow: dense` which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.

 The [specification](https://drafts.csswg.org/css-grid/#order-accessibility) includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.

 
>  Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) HTML5).
> 
>  

 If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.

 The specification warns authors (the CSSWG term for web developers) not to do this reordering.

 
>  Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.
> 
>  

 What does this mean for designing with grid layout in practice?


### Visual not logical re-ordering



Any time you reorder things with grid layout – or with flexbox – you only perform *visual reordering*. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.

 In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1;
  grid-row: 2;
}

```
 
```
<div class="wrapper">
  <div class="box box1"><a href="">One</a></div>
  <div class="box box2"><a href="">Two</a></div>
  <div class="box box3"><a href="">Three</a></div>
  <div class="box box4"><a href="">Four</a></div>
  <div class="box box5"><a href="">Five</a></div>
</div>

```

 The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.


How should we approach accessibility for grid layout?
-----------------------------------------------------



From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?

  Start with a structured and accessible document  A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for *your smallest screen devices too*. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.

  Create a responsive, and responsible grid  With a solid document you can begin to add your layout, it is likely you will be using [media queries](../media_queries) to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to *tab around the document*. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.

  Returning to the source  If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a [`float`](../float)-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.

  
Grid and the danger of markup flattening
----------------------------------------



Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to *flatten* markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) element inside a grid container, *that* `ul` becomes a grid item – the child [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) elements do not.

 The <subgrid> value of `grid-template-columns` and `grid-template-rows` will solve this problem once widely implemented. It will allow the grid to be inherited by grid items and passed down the tree.

 Given that interoperable support for subgrid is limited, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) elements instead as then you can have the element to be a direct child of a container set to `display: grid`. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!


Further reading
---------------



There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with [`flex-direction`](../flex-direction) and the [`order`](../order) property.

 The concept of visual display following document source order is detailed in the *WCAG Techniques for Success Criteria – [Technique C27](https://www.w3.org/TR/WCAG20-TECHS/C27.html)*.

 As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading *[Flexbox & the Keyboard Navigation Disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)* from Léonie Watson. Also [the video of Léonie's presentation from ffconf](https://www.youtube.com/watch?v=spxT2CmHoPk) is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding [tab order in various browsers](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) – although this was prior to grid support being fully implemented in Firefox.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility>

CSS Grid Layout and progressive enhancement
===========================================


In Spring of 2017, we saw for the first time a major specification like Grid being shipped into browsers almost simultaneously, and we now have CSS Grid Layout support in the public versions of Firefox, Chrome, Opera, Safari and Edge. However, while evergreen browsers mean that many of us are going to see the majority of users having Grid Layout support very quickly, there are also old or non-supporting browsers to contend with. In this guide we will walk through a variety of strategies for support.


The supporting browsers
-----------------------


CSS Grid Layout is unprefixed in all modern browsers. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid Layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production.

Is it safe to use CSS grids for my layout?
------------------------------------------


Yes. As with any front-end technology choice, the decision to use CSS Grid Layout will come down to the browsers your site visitors are typically using.

Starting to use Grid in production
----------------------------------


It is worth noting that you do not have to use grid in an *all or nothing* way. Start by enhancing elements in your design with grid, that could otherwise display using an older method. Overwriting of legacy methods with grid layout works surprisingly well, due to the way grid interacts with these other methods.

### Floats



[Floats](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats) used to be used to create multiple column layouts. If you're supporting an old codebase with floated layouts, there will be no conflict. Grid items ignore the float property; the fact is that *a grid item takes precedence.* In the example below, I have a simple media object. If the [`float`](../float) is not removed from legacy CSS, as the container is a grid container, it's OK. We can use the alignment properties that are implemented in CSS Grids.

 The [`float`](../float) no longer applies, and I can use the CSS Box Alignment property [`align-self`](../align-self) to align my content to the end of the container:

 
```
\* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}
.media::after {
  content: "";
  display: block;
  clear: both;
}
.media .text {
  padding: 10px;
  align-self: end;
}

/\* old code we can't remove \*/
.media .image {
  float: left;
  width: 150px;
  margin-right: 20px;
}

```
 
```
<div class="media">
  <div class="image">
    <img src="https://via.placeholder.com/150x150" alt="placeholder" />
  </div>
  <div class="text">
    This is a media object example. I am using floats for older browsers and
    grid for new ones.
  </div>
</div>

```

 The image below shows the media object in a non-supporting browser on the left, and a supporting one on the right:

  ![A simple example of overriding a floated layout using grid. Both have the image aligned left. The text is vertically aligned at top in the float example and at the bottom in the grid example.] 


### Using feature queries



The above example is very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers. However, things are not always so simple.

 #### A more complex example

 In this next example, I have a set of floated cards. I have given the cards a [`width`](../width), in order to [`float`](../float) them. To create gaps between the cards, I use a [`margin`](../margin) on the items, and then a negative margin on the container:

 
```
.wrapper ul {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.wrapper li {
  float: left;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}

```
 
```
<div class="wrapper">
  <ul>
    <li class="card">
      <h2>One</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Two</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Three</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Four</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Five</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
  </ul>
</div>

```

 The example demonstrates the typical problem that we have with floated layouts: if additional content is added to any one card, the layout breaks.

  ![A floated cards layout demonstrating the problem caused by uneven content height. The top row has 3 cards. The fourth card is floated under the third card. Then a bottom row has contains the fifth and sixth cards. There is a largish empty space under the fourth card. ] 

 As a concession for older browsers, I have set a [`min-height`](../min-height) on the items, and hope that my content editors won't add too much content and make a mess of the layout!

 I then enhance the layout using grid. I can turn my [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) into a grid container with three column tracks. However, the width I have assigned to the list items themselves still applies, and it now makes those items a third of the width of the track:

  ![Six very tall, very narrow grid items with text overflowing on the right. After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.] 

 If I reset the width to `auto`, then this will stop the float behavior happening for older browsers. I need to be able to define the width for older browsers, and remove the width for grid supporting browsers. Thanks to [CSS Feature Queries](../@supports) I can do this, right in my CSS.

 #### A solution using feature queries

 *Feature queries* will look very familiar if you have ever used a [media query](../media_queries) to create a responsive layout. Rather than checking a [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) width, or some feature of the browser or device, we check for support of a CSS property and value pair using an [`@supports`](../@supports) rule. Inside the feature query, we can then write any CSS we need to apply our modern layout, and remove anything required for the older layout.

 
```
@supports (display: grid) {
  .wrapper {
    /\* do anything for grid supporting browsers here. \*/
  }
}

```
 Feature queries have excellent browser support, and all of the browsers that support the updated grid specification support feature queries too. You can use them to deal with the issue we have with our enhanced: floated layout.

 I use an `@supports` rule to check for support of `display: grid`. I then do my grid code on the [`<ul>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul), set my width and [`min-height`](../min-height) on the [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) to `auto`. I also remove the margins and negative margins, and replace the spacing with the [`gap`](../gap) property. This means I don't get a final margin on the last row of boxes. The layout now works, even if there is more content in one of the cards, than the others:

 
```
.wrapper ul {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.wrapper li {
  float: left;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
@supports (display: grid) {
  .wrapper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
  }
  .wrapper li {
    width: auto;
    min-height: auto;
    margin: 0;
  }
}

```
 
```
<div class="wrapper">
  <ul>
    <li class="card">
      <h2>One</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Two</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Three</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Four</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Five</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
  </ul>
</div>

```


Overwriting other values of `display`
-------------------------------------



Due to the problems of creating grids of items using floats, many of us would use a different method to the floated method shown above to layout a set of cards. Using `display: inline-block` is an alternate method.

 Once again I can use feature queries to overwrite a layout that uses `display: inline-block`, and again I don't need to overwrite everything. An item that is set to `inline-block` becomes a grid item, and so the behavior of `inline-block` no longer applies. I have used the [`vertical-align`](../vertical-align) property on my item when in the `inline-block` display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item:

 
```
.wrapper ul {
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}

.wrapper li {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
@supports (display: grid) {
  .wrapper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
  }
  .wrapper li {
    width: auto;
    margin: 0;
  }
}

```
 
```
<div class="wrapper">
  <ul>
    <li class="card">
      <h2>One</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Two</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Three</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Four</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Five</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>We can use CSS Grid to overwrite older methods.</p>
    </li>
  </ul>
</div>

```

 Once again it is the width on the item we need to address, and then any other properties we want to enhance. In this example I have again used `gap`, rather than margins and negative margins to create my gutters.


How does the specification define these overrides?
--------------------------------------------------



The CSS Grid Layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. The key sections of the specification are:

 * [Establishing Grid Containers](https://drafts.csswg.org/css-grid/#grid-containers)
* [Grid Items](https://drafts.csswg.org/css-grid/#grid-items)
* [Grid Item Display](https://drafts.csswg.org/css-grid/#grid-item-display)

 As this behavior is detailed in the specification, you are safe to rely on using these overrides in your support for older browsers. Nothing described here should be seen as a "hack". Rather, we are taking advantage of the fact that the grid specification details the interaction between different layout methods.


### Other values of display



When an element has a parent set to `display: grid` it is *blockified*, as defined in the [CSS display specification](https://drafts.csswg.org/css-display-3/#blockify). In the case of our item set to `inline-block`, this is why `display: inline-block` no longer applied.

 If you are using `display: table` for your legacy layout, an item set to `display: table-cell` generates anonymous boxes. Therefore, if you use `display: table-cell` without any parent element set to `display-table`, an anonymous table wrapper is created around any adjacent cells, just as if you had wrapped them in a div or other element set to `display: table`. If you have an item set to `display: table-cell`, and then in a feature query change the parent to `display: grid`, this anonymous box creation will not happen. This means you can overwrite `display: table` based layouts, without having additional anonymous boxes.


### Floated elements


As we have already seen, [`float`](../float) and also [`clear`](../clear) have no effect on a grid item. Therefore you do not need to explicitly set items to `float: none`.

### Vertical alignment


The alignment property [`vertical-align`](../vertical-align) has no effect on a grid item. In layouts using `display: inline-block` or `display: table`, you might use the vertical-align property to perform basic alignment. In your grid layout you then have the far more powerful box alignment properties.

### Multiple-column layout


You can also use multiple column layout as your legacy browser plan, as the `column-*` properties do not apply when applied to a grid container.

Further reading
---------------


* For an excellent explanation of feature queries, and how to use them well, see [Using Feature Queries in CSS (2016)](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/).
* [CSS Grid and the New Autoprefixer (2018)](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement>

Realizing common layouts using grids
====================================


To round off this set of guides to CSS Grid Layout, we're going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using [grid-template-areas](grid_template_areas), a typical 12-column flexible grid system, and also a product listing using auto-placement. As you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. Choose the method you find most helpful for the problems that you are solving and the designs that you need to implement.


A responsive layout with 1 to 3 fluid columns using `grid-template-areas`
-------------------------------------------------------------------------



Many websites are a variation of this type of layout, with content, sidebars, a header and a footer. In a responsive design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens.

  ![Image of the three different layouts created by redefining our grid at two breakpoints.] 

 We're going to create this layout using the *named template areas* that we learned about in the guide *[Grid template areas](grid_template_areas)*.

 The markup is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block to place advertising.

 
```
<div class="wrapper">
  <header class="main-head">The header</header>
  <nav class="main-nav">
    <ul>
      <li><a href="">Nav 1</a></li>
      <li><a href="">Nav 2</a></li>
      <li><a href="">Nav 3</a></li>
    </ul>
  </nav>
  <article class="content">
    <h1>Main article area</h1>
    <p>
      In this layout, we display the areas in source order for any screen less
      that 500 pixels wide. We go to a two column layout, and then to a three
      column layout by redefining the grid, and the placement of items on the
      grid.
    </p>
  </article>
  <aside class="side">Sidebar</aside>
  <div class="ad">Advertising</div>
  <footer class="main-footer">The footer</footer>
</div>

```
 As we are using [`grid-template-areas`](../grid-template-areas) to create the layout. Outside of any media queries we need to name the areas. We name areas using the [`grid-area`](../grid-area) property.

 
```
.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}

```
 This will not create any layout, however the items now have names we can use to do so. Staying outside of any media queries we're now going to set up the layout for the mobile width. Here we're keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide *[Grid layout and accessibility](css_grid_layout_and_accessibility)*. We've not defined any column or row tracks but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid.

 
```
.wrapper {
  display: grid;
  gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}

```
 With our mobile layout in place, we can now proceed to add a [media query](../media_queries) to adapt this layout for bigger screens with enough real estate to display two columns.

 
```
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "header header"
      "nav nav"
      "sidebar content"
      "ad footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

```
 You can see the layout taking shape in the value of [`grid-template-areas`](../grid-template-areas). The `header` spans over two column tracks, as does the `nav`. In the third row track we have the `sidebar` alongside the `content`. In the fourth row track I have chosen to place my `ad` content – so it appears under the sidebar, then the `footer` next to it under the content. We're using a flexbox on the navigation to display it in a row spaced out.

 We can now add a final breakpoint to move to a three-column layout.

 
```
@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      "header header header"
      "nav content sidebar"
      "nav content ad"
      "footer footer footer";
  }
  nav ul {
    flex-direction: column;
  }
}

```
 The three-column layout has two `1fr` unit side columns and a middle column that has `4fr` as the track size. This means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center.

 In this layout we're displaying the `nav` in the left column, alongside the `content`. In the right column we have the `sidebar` and underneath it the advertisements (`ad`). The `footer` now spans right across the bottom of the layout. I then use a flexbox to display the navigation as a column.


 This is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. In particular we're changing the location of that `ad` block, as appropriate in my different column setups. I find this named areas method very helpful at a prototyping stage, it is easy to play around with the location of elements. You could always begin to use grid in this way for prototyping, even if you can't rely on it fully in production due to the browsers that visit your site.


A flexible 12-column layout
---------------------------



If you have been working with one of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. We can create this type of system using CSS Grid Layout. As a simple example, let's create a 12-column flexible grid that has 12 `1fr`-unit column tracks, they all have a start line named `col-start`. This means that we will have twelve grid lines named `col-start`.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

```
 To demonstrate how this grid system works I have four child elements inside my wrapper.

 
```
<div class="wrapper">
  <div class="item1">Start column line 1, span 3 column tracks.</div>
  <div class="item2">
    Start column line 6, span 4 column tracks. 2 row tracks.
  </div>
  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
  <div class="item4">
    Start at column line 3, span to the end of the grid (-1).
  </div>
</div>

```
 We can then place these on the grid using the named lines, and also the span keyword.

 
```
.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}

```

 As described in the [guide to named lines](layout_using_named_grid_lines), we are using the named line to place our item. As we have 12 lines all with the same name we use the name, and then the index of the line. You could also use the line index itself if you prefer and avoid using named lines at all.

 Rather than setting the end line number, I have chosen to say how many tracks this element should span, using the `span` keyword. I like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. To see how the blocks align themselves to the tracks, use the [Firefox Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html). It clearly demonstrates how our items are placed.

  ![Showing the items placed on the grid with grid tracks highlighted.] 

 There are some key differences with how a grid layout works over the grid systems you may have used previously. As you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. With CSS Grid Layout, we can place things into rows, with no danger of them rising up into the row above if it is left empty. Due to this *strict* column and row placement we can also easily leave white space in our layout. We also don't need special classes to pull or push things, to indent them into the grid. All we need to do is specify the start and end line for the item.


Building a layout using the 12-column system
--------------------------------------------



To see how this layout method works in practice, we can create the same layout that we created with [`grid-template-areas`](../grid-template-areas), this time using the 12-column grid system. Let's start with the same markup as used for the grid template areas example.

 
```
<div class="wrapper">
  <header class="main-head">The header</header>
  <nav class="main-nav">
    <ul>
      <li><a href="">Nav 1</a></li>
      <li><a href="">Nav 2</a></li>
      <li><a href="">Nav 3</a></li>
    </ul>
  </nav>
  <article class="content">
    <h1>Main article area</h1>
    <p>
      In this layout, we display the areas in source order for any screen less
      that 500 pixels wide. We go to a two column layout, and then to a three
      column layout by redefining the grid, and the placement of items on the
      grid.
    </p>
  </article>
  <aside class="side">Sidebar</aside>
  <div class="ad">Advertising</div>
  <footer class="main-footer">The footer</footer>
</div>

```
 We can then set up our grid, as for the example 12-column layout above.

 
```
.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
}

```
 We are once again going to make this a responsive layout, this time however using named lines. Every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the size of the screen.

 We start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid.

 
```
.wrapper > \* {
  grid-column: col-start / span 12;
}

```
 At the next breakpoint we want to move to a two-column layout. Our header and navigation still span the full grid, so we do not need to specify any positioning for them. The sidebar is starting on the first column line named col-start, spanning 3 lines. It goes after row line 3, as the header and navigation are in the first two row tracks.

 The ad panel is below the sidebar, so starts at grid row line 4. Then we have the content and footer starting at col-start 4 and spanning 9 tracks taking them to the end of the grid.

 
```
@media (min-width: 500px) {
  .side {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .ad {
    grid-column: col-start / span 3;
    grid-row: 4;
  }
  .content,
 .main-footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

```
 Finally we go to the three-column version of this layout. The header continues to span right across the grid, but now the navigation moves down to become the first sidebar, with the content and then the sidebar next to it. The footer now also spans across the full layout.

 
```
@media (min-width: 700px) {
  .main-nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .side {
    grid-column: col-start 11 / span 2;
    grid-row: 2;
  }
  .ad {
    grid-column: col-start 11 / span 2;
    grid-row: 3;
  }
  .main-footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
}

```

 Once again the [Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) is useful to help us see how our layout has taken shape.

  ![Showing the layout with grid tracks highlighted by the grid inspector.] 

 Something to note as we create this layout is that we haven't needed to explicitly position every element on the grid at each breakpoint. We have been able to inherit the placement set up for earlier breakpoints – an advantage of working "mobile first". We are also able to take advantage of grid auto-placement. By keeping elements in a logical order, auto-placement does quite a lot of work for us in placing items onto the grid. In the final example in this guide we will create a layout that entirely relies on auto-placement.


A product listing with auto-placement
-------------------------------------



Many layouts are essentially sets of "cards" – product listings, image galleries, and so on. A grid can make it very easy to create these listings in a way that is responsive without needing to add [media queries](../media_queries) to make it so. In this next example I'm combining CSS Grid and Flexbox Layouts to make a simple product listing layout.

 The markup for my listing is an unordered list of items. Each item contains a heading, some text of varying height, and a call to action link.

 
```
<ul class="listing">
  <li>
    <h2>Item One</h2>
    <div class="body">
      <p>The content of this listing item goes here.</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
  <li>
    <h2>Item Two</h2>
    <div class="body">
      <p>The content of this listing item goes here.</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
  <li class="wide">
    <h2>Item Three</h2>
    <div class="body">
      <p>The content of this listing item goes here.</p>
      <p>This one has more text than the other items.</p>
      <p>Quite a lot more</p>
      <p>Perhaps we could do something different with it?</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
  <li>
    <h2>Item Four</h2>
    <div class="body">
      <p>The content of this listing item goes here.</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
  <li>
    <h2>Item Five</h2>
    <div class="body">
      <p>The content of this listing item goes here.</p>
    </div>
    <div class="cta">
      <a href="">Call to action!</a>
    </div>
  </li>
</ul>

```
 We are going to create a grid with a flexible number of flexible columns. I want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. We achieve this with the `minmax()` function in our repeat notation for track sizing.

 
```
.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

```
 As soon as we add this CSS, the items start to lay out as a grid. If we make the window smaller or wider the number of column tracks changes – without us needing to add breakpoints using media queries and redefine the grid.

 We can then tidy up the internals of the boxes using a little touch of flexbox. I set the list item to `display: flex` and the `flex-direction` to `column`. We can then use an auto margin on the `.cta` to push this bar down to the bottom of the box.

 
```
.listing li {
  border: 1px solid #ffe066;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.listing .cta {
  margin-top: auto;
  border-top: 1px solid #ffe066;
  padding: 10px;
  text-align: center;
}
.listing .body {
  padding: 10px;
}

```
 This is really one of the key reasons someone would use flexbox rather than grid, if he/she's just aligning or distributing something in a single dimension, that's a flexbox use case.



Preventing gaps with the dense keyword
--------------------------------------



This is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. It might be nice to cause those to span two tracks, and then they won't be so tall. We have a class of `wide` on my larger item, and we add a rule [`grid-column-end`](../grid-column-end) with a value of `span 2`. Now when grid encounters this item, it will assign it two tracks. At some breakpoints, this means that we'll get a gap in the grid – where there isn't space to lay out a two-track item.

  ![The layout has gaps as there is not space to layout a two track item.] 

 We can cause a grid to backfill those gaps by setting [`grid-auto-flow`](../grid-auto-flow)`: dense` on the grid container. Take care when doing this however as it does take items away from their logical source order. You should only do this if your items do not have a set order – and be aware of the [issues](css_grid_layout_and_accessibility#visual_not_logical_re-ordering) of the tab order following the source and not your reordered display.

 
```
.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  gap: 20px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}

```

 This technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.


Further exploration
-------------------



The best way to learn to use grid layout is to continue to build examples like the ones we have covered here. Pick something that you normally build using your framework of choice, or using floats, and see if you can build it using grid. Don't forget to find examples that are impossible to build with current methods. That might mean taking inspiration from magazines or other non-web sources. Grid Layout opens up possibilities that we have not had before, we don't need to be tied to the same old layouts to use it.

 * [CSS Grid Layout](../css_grid_layout)
* [CSS Layout: Grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
* [Grid by Example](https://gridbyexample.com)
* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
* [CSS Grid Website Layout Examples](https://www.quackit.com/css/grid/examples/css_grid_website_layout_examples.cfm)




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout>

Media queries
=============



**Media queries** are a key component of [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) that allow you to apply CSS styles depending on the presence or value of device characteristics.

  It's common to apply a media query based on the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) size so that layout choices can be made for devices with different screen sizes. For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens. 

  ![A laptop and a mobile device with different viewport sizes that can be queried using media queries.] 

  In [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), use the [`@media`](@media) <at-rule> to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use [`@import`](@import). 

 When designing reusable HTML components, you may also use [container queries](css_container_queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.



### Media queries in HTML



In [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), media queries can be applied to various elements:

 * In the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element's [`media`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#media) attribute, they define the media to which a linked resource (typically CSS) should be applied.
* In the [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element's [`media`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#media) attribute, they define the media to which that source should be applied. (This is only valid inside [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) elements.)
* In the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element's [`media`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#media) attribute, they define the media to which the style should be applied.


### Media queries in JavaScript



 In [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), you can use the [`Window.matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method to test the window against a media query. You can also use [`MediaQueryList.addListener()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener) to be notified whenever the state of a query changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state. 

 You can learn more about programmatically using media queries in [Testing media queries](media_queries/testing_media_queries).


Reference
---------


### At-rules


* [`@import`](@import)
* [`@media`](@media)
Guides
------


 [Using media queries](media_queries/using_media_queries)  Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.

  [Testing media queries programmatically](media_queries/testing_media_queries)  Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).

  [Using media queries for accessibility](media_queries/using_media_queries_for_accessibility)  Learn how Media Queries can help users understand your website better.

  Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4](https://drafts.csswg.org/mediaqueries/)  |
| [CSS Conditional Rules Module Level 3](https://drafts.csswg.org/css-conditional/)  |


See also
--------


* [Container queries](css_container_queries)
* Use [`@supports`](@supports) to apply styles that depend on browser support for various CSS technologies.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries>

resolution
==========


The `resolution` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the pixel density of the output device.


Syntax
------


The `resolution` feature is specified as a [`<resolution>`](../resolution) value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed `min-resolution` and `max-resolution` variants to query minimum and maximum values, respectively.

Examples
--------


### HTML



```
<p>This is a test of your device's pixel density.</p>

```
### CSS



```
/\* Exact resolution \*/
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/\* Minimum resolution \*/
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/\* Maximum resolution \*/
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # resolution](https://w3c.github.io/csswg-drafts/mediaqueries/#resolution) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `resolution` | 29 | 12 | 83.5Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 9 | 1610–15 | 16 | 4.4 | 29 | 84Supports [`<integer>`](https://developer.mozilla.org/docs/Web/CSS/integer) values only. | 1610.1–14 | 16 | 2.0 |


See also
--------


* [`window.devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)
* The [`image-resolution`](../image-resolution) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution>

Using media queries
===================



 **Media queries** allow you to apply CSS styles depending on a device's general type (such as print vs. screen) or other characteristics such as screen resolution or browser [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) width. Media queries are used for the following: 

 * To conditionally apply styles with the [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`@media`](../@media) and [`@import`](../@import) [at-rules](../at-rule).
* To target specific media for the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style), [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link), [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source), and other [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) elements with the `media=` attribute.
* To [test and monitor media states](testing_media_queries) using the [`Window.matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [`EventTarget.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) methods.

  **Note:** The examples on this page use CSS's `@media` for illustrative purposes, but the basic syntax remains the same for all types of media queries.

 

Syntax
------



 A media query is composed of an optional *media type* and any number of *media feature* expressions, which may optionally be combined in various ways using *logical operators*. Media queries are case-insensitive. 

 * [Media types](../@media#media_types) define the broad category of device for which the media query applies: `all`, `print`, `screen`. The type is optional (assumed to be `all`) except when using the `not` or `only` logical operators.
* [Media features](../@media#media_features) describe a specific characteristic of the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent), output device, or environment:
	+ [`any-hover`](../@media/any-hover)
	+ [`any-pointer`](../@media/any-pointer)
	+ [`aspect-ratio`](../@media/aspect-ratio)
	+ [`color`](../@media/color)
	+ [`color-gamut`](../@media/color-gamut)
	+ [`color-index`](../@media/color-index)
	+ [`device-aspect-ratio`](../@media/device-aspect-ratio)  Deprecated
	+ [`device-height`](../@media/device-height)  Deprecated
	+ [`device-width`](../@media/device-width)  Deprecated
	+ [`display-mode`](../@media/display-mode)
	+ [`dynamic-range`](../@media/dynamic-range)
	+ [`forced-colors`](../@media/forced-colors)
	+ [`grid`](../@media/grid)
	+ [`height`](../@media/height)
	+ [`hover`](../@media/hover)
	+ [`inverted-colors`](../@media/inverted-colors)
	+ [`monochrome`](../@media/monochrome)
	+ [`orientation`](../@media/orientation)
	+ [`overflow-block`](../@media/overflow-block)
	+ [`overflow-inline`](../@media/overflow-inline)
	+ [`pointer`](../@media/pointer)
	+ [`prefers-color-scheme`](../@media/prefers-color-scheme)
	+ [`prefers-contrast`](../@media/prefers-contrast)
	+ [`prefers-reduced-motion`](../@media/prefers-reduced-motion)
	+ [`resolution`](../@media/resolution)
	+ [`scripting`](../@media/scripting)
	+ [`update`](../@media/update-frequency)
	+ [`video-dynamic-range`](../@media/video-dynamic-range)
	+ [`width`](../@media/width).For example, the [`hover`](../@media/hover) feature allows a query to test against whether the device supports hovering over elements. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.
* [Logical operators](../@media#logical_operators) can be used to compose a complex media query: `not`, `and`, and `only`. You can also combine multiple media queries into a single rule by separating them with commas.

  A media query computes to `true` when the media type (if specified) matches the device on which a document is being displayed *and* all media feature expressions compute as true. Queries involving unknown media types are always false. 

   **Note:** A style sheet with a media query attached to its [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag [will still download](https://scottjehl.github.io/CSS-Download-Tests/) even if the query returns `false`, the download will happen but the priority of downloading will be much lower. Nevertheless, its contents will not apply unless and until the result of the query changes to `true`. You can read why this happens in Tomayac's blog [Why Browser Download Stylesheet with Non-Matching Media Queries](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-queries-eb61b91b85a2). 

 
Targeting media types
---------------------



 Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers: 

 
```
@media print {
  /\* … \*/
}

```
  You can also target multiple devices. For instance, this `@media` rule uses two media queries to target both screen and print devices: 

 
```
@media screen, print {
  /\* … \*/
}

```
  See [media type](../@media#media_types) for a list of all media types. Because they describe devices in only very broad terms, just a few are available; to target more specific attributes, use *media features* instead. 


Targeting media features
------------------------



 Media features describe the specific characteristics of a given [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent), output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's *primary* input mechanism (such as a mouse) can hover over elements: 

 
```
@media (hover: hover) {
  /\* … \*/
}

```
  Many media features are *range features*, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) width is equal to or narrower than 1250px: 

 
```
@media (max-width: 1250px) {
  /\* … \*/
}

```
  If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or `none`, in [Level 4](https://drafts.csswg.org/mediaqueries-4/)). For example, this CSS will apply to any device with a color screen: 

 
```
@media (color) {
  /\* … \*/
}

```
 If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.

 For more [Media feature](../@media#media_features) examples, please see the reference page for each specific feature.


Creating complex media queries
------------------------------



 Sometimes you may want to create a media query that depends on multiple conditions. This is where the *logical operators* come in: `not`, `and`, and `only`. Furthermore, you can combine multiple media queries into a *comma-separated list*; this allows you to apply the same styles in different situations. 

  In the previous example, we've already seen the `and` operator used to group a media *type* with a media *feature*. The `and` operator can also combine multiple media features into a single media query. The `not` operator, meanwhile, negates a media query, basically reversing its normal meaning. The `only` operator prevents older browsers from applying the styles. 

   **Note:** In most cases, the `all` media type is used by default when no other type is specified. However, if you use the `not` or `only` operators, you must explicitly specify a media type. 

 
### Combining multiple types or features



 The `and` keyword combines a media feature with a media type *or* other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems: 

 
```
@media (min-width: 30em) and (orientation: landscape) {
  /\* … \*/
}

```
 To limit the styles to devices with a screen, you can chain the media features to the `screen` media type:

 
```
@media screen and (min-width: 30em) and (orientation: landscape) {
  /\* … \*/
}

```

### Testing for multiple queries



 You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px *or* is a screen device in portrait mode: 

 
```
@media (min-height: 680px), screen and (orientation: portrait) {
  /\* … \*/
}

```
  Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true. 


### Inverting a query's meaning



 The `not` keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The `not` keyword can't be used to negate an individual feature query, only an entire media query. The `not` is evaluated last in the following query: 

 
```
@media not all and (monochrome) {
  /\* … \*/
}

```
 This means that the above query is evaluated like this:

 
```
@media not (all and (monochrome)) {
  /\* … \*/
}

```
 It wouldn't be evaluated like this:

 
```
@media (not all) and (monochrome) {
  /\* … \*/
}

```
 As another example, the following media query:

 
```
@media not screen and (color), print and (color) {
  /\* … \*/
}

```
 This means that the above query is evaluated like this:

 
```
@media (not (screen and (color))), print and (color) {
  /\* … \*/
}

```

### Improving compatibility with older browsers



 The `only` keyword prevents older browsers that do not support media queries with media features from applying the given styles. *It has no effect on modern browsers.* 

 
```
@media only screen and (color) {
  /\* … \*/
}

```

Syntax improvements in Level 4
------------------------------



 The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. Level 4 adds a *range context* for writing such queries. For example, using the `max-` functionality for width we might write the following: 

   **Note:** The Media Queries Level 4 specification has reasonable support in modern browsers, but some media features are not well supported. See the [`@media` browser compatibility table](../@media#browser_compatibility) for more details. 

  
```
@media (max-width: 30em) {
  /\* … \*/
}

```
 In Media Queries Level 4 this can be written as:

 
```
@media (width <= 30em) {
  /\* … \*/
}

```
 Using `min-` and `max-` we might test for a width between two values like so:

 
```
@media (min-width: 30em) and (max-width: 50em) {
  /\* … \*/
}

```
 This would convert to the Level 4 syntax as:

 
```
@media (30em <= width <= 50em) {
  /\* … \*/
}

```
 Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with **and**, **not**, and **or**.


### Negating a feature with `not`



Using `not()` around a media feature negates that feature in the query. For example, `not(hover)` would match if the device had no hover capability:

 
```
@media (not(hover)) {
  /\* … \*/
}

```

### Testing for multiple features with `or`



 You can use `or` to test for a match among more than one feature, resolving to `true` if any of the features are true. For example, the following query tests for devices that have a monochrome display or hover capability: 

 
```
@media (not (color)) or (hover) {
  /\* … \*/
}

```

See also
--------


* [@media](../@media)
* [Container queries](../css_container_queries)
* [Testing media queries programmatically](testing_media_queries)
* [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries)
* [Extended Mozilla media features](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#media_features)
* [Extended WebKit media features](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions#media_features)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries>

:-moz-only-whitespace
=====================



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

  **Note:** In [Selectors Level 4](https://drafts.csswg.org/selectors-4/#the-empty-pseudo), the [`:empty`](:empty) selector was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.

  The `:-moz-only-whitespace` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) matches elements that only contain text nodes that only contain [whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace). (This includes elements with empty text nodes and elements with no child nodes.)



Syntax
------



```
:-moz-only-whitespace {
  /\* ... \*/
}

```
Examples
--------


### Simple :-moz-only-whitespace example



#### HTML

 
```
<div> </div>

```
 #### CSS

 
```
div {
  border: 4px solid red;
}

:-moz-only-whitespace {
  border-color: lime;
}

```
 #### Result



Specifications
--------------


Briefly defined as `:blank` in [Selectors Level 4](https://drafts.csswg.org/selectors-4/#changes-2018-02), but then the functionality was merged into [`:empty`](:empty) and [`:blank`](:blank) redefined to mean empty [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:-moz-only-whitespace` | No | No | 1See [bug 1106296](https://bugzil.la/1106296). | No | No | No | No | No | 4See [bug 1106296](https://bugzil.la/1106296). | No | No | No |


See also
--------


* [`:blank`](:blank)  Experimental
* [`:empty`](:empty)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-only-whitespace>

max-content
===========


The `max-content` sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.


Syntax
------



```
/\* Used as a length \*/
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/\* used in grid tracks \*/
grid-template-columns: 200px 1fr max-content;

```
Examples
--------


### Using max-content for box sizing



#### HTML

 
```
<div id="container">
  <div class="item">Item</div>
  <div class="item">
    Item with more text in it which will overflow the fixed width box.
  </div>
</div>

```
 #### CSS

 
```
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}

.item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

```
 #### Result



### Sizing grid columns with max-content



#### HTML

 
```
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>

```
 #### CSS

 
```
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # valdef-width-max-content](https://w3c.github.io/csswg-drafts/css-sizing-3/#valdef-width-max-content) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `max-content` | 4622 | 7979 | 663 | No | 44 | 112 | 46 | 46 | 664 | 43 | 111 | 5.0 |


See also
--------


* Related sizing keywords: [`min-content`](min-content), [`fit-content`](fit-content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/max-content>

fit-content()
=============


The `fit-content()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) clamps a given size to an available size according to the formula `min(maximum size, max(minimum size, argument))`.


Try it
------



 The function can be used as a track size in [CSS Grid](css_grid_layout) properties, where the maximum size is defined by `max-content` and the minimum size by `auto`, which is calculated similar to `auto` (i.e., [`minmax(auto, max-content)`](minmax)), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

 See the [`grid-template-columns`](grid-template-columns) page for more information on the `max-content` and `auto` keywords.

 The `fit-content()` function can also be used as laid out box size for [`width`](width), [`height`](height), [`min-width`](min-width), [`min-height`](min-height), [`max-width`](max-width) and [`max-height`](max-height), where the maximum and minimum sizes refer to the content size.


Syntax
------



The `fit-content()` function accepts a `<length>` or a `<percentage>` as an argument.

 
```
/\* <length> values \*/
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/\* <percentage> value \*/
fit-content(40%)

```

### Values


 [`<length>`](length)  An absolute length.

  [`<percentage>`](percentage)  A percentage relative to the available space in the given axis.

 In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

  Examples
--------


### Sizing grid columns with fit-content



#### HTML

 
```
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>

```
 #### CSS

 
```
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # sizing-values](https://w3c.github.io/csswg-drafts/css-sizing-4/#sizing-values) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `fit-content_function` | 57 | 16 | 52 | No | 44 | 10.1 | 57 | 57 | 52 | 43 | 10.3 | 6.0 |

### css.properties.grid-template-columns.fit-content


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.properties.width.fit-content\_function


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


See also
--------


* Related sizing keywords: [`min-content`](min-content), [`max-content`](max-content)
* Related CSS Grid properties: [`grid-template`](grid-template), [`grid-template-rows`](grid-template-rows), [`grid-template-columns`](grid-template-columns), [`grid-template-areas`](grid-template-areas), [`grid-auto-columns`](grid-auto-columns), [`grid-auto-rows`](grid-auto-rows), [`grid-auto-flow`](grid-auto-flow)
* Grid Layout Guide: *[Line-based placement with CSS Grid](css_grid_layout/line-based_placement_with_css_grid)*
* Grid Layout Guide: *[Grid template areas - Grid definition shorthands](css_grid_layout/grid_template_areas#grid_definition_shorthands)*


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function>

min-content
===========


The `min-content` sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.


Syntax
------



```
/\* Used as a length \*/
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;

/\* used in grid tracks \*/
grid-template-columns: 200px 1fr min-content;

```
Examples
--------


### Using min-content for box sizing



#### HTML

 
```
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>

```
 #### CSS

 
```
.item {
  width: min-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

```
 #### Result



### Sizing grid columns with min-content



#### HTML

 
```
<div id="container">
  <div>Item</div>
  <div>Item with more text in it.</div>
  <div>Flexible item</div>
</div>

```
 #### CSS

 
```
#container {
  display: grid;
  grid-template-columns: min-content min-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 3 # valdef-width-min-content](https://w3c.github.io/csswg-drafts/css-sizing-3/#valdef-width-min-content) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `min-content` | 461–48 | 79 | 663 | No | 3315–35 | 112 | 464.4–48 | 4618–48 | 664 | 3314–35 | 111 | 5.01.0–5.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/min-content>

:-moz-first-node
================



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `:-moz-first-node` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) is a [Mozilla extension](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions) that represents any element that is the first child node of some other element. It differs from [`:first-child`](:first-child) because it does not match a first-child element with (non-whitespace) text before it.

  **Note:** Any whitespace at the start of an element is ignored for the determination of `:-moz-first-node`.

 

Syntax
------



```
:-moz-first-node {
  /\* ... \*/
}

```
Examples
--------


### CSS



```
span:-moz-first-node {
  background-color: lime;
}

```
### HTML



```
<p>
  <span>This matches!</span>
  <span>This doesn't match.</span>
</p>

<p>
  Blahblah.
  <span>This doesn't match because it's preceded by text.</span>
</p>

```
### Result


Specifications
--------------


Not part of any standard.

See also
--------


* [`:-moz-last-node`](:-moz-last-node)
* [`:first-child`](:first-child)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-first-node>

width
=====


The `width` CSS property sets an element's width. By default, it sets the width of the [content area](css_box_model/introduction_to_the_css_box_model#content_area), but if [`box-sizing`](box-sizing) is set to `border-box`, it sets the width of the [border area](css_box_model/introduction_to_the_css_box_model#border_area).


Try it
------



 The [`min-width`](min-width) and [`max-width`](max-width) properties override `width`.


Syntax
------



```
/\* <length> values \*/
width: 300px;
width: 25em;

/\* <percentage> value \*/
width: 75%;

/\* Keyword values \*/
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/\* Global values \*/
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;

```
### Values


 [`<length>`](length)  Defines the width as an absolute value.

  [`<percentage>`](percentage)  Defines the width as a percentage of the containing block's width.

  `auto`  The browser will calculate and select a width for the specified element.

  `max-content`  The intrinsic preferred width.

  `min-content`  The intrinsic minimum width.

  `fit-content([`<length-percentage>`](length-percentage))`  Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.

  Accessibility concerns
----------------------



Ensure that elements set with a `width` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.

 * [MDN Understanding WCAG, Guideline 1.4 explanations](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
* [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| [Inherited](inheritance) | no |
| Percentages | refer to the width of the containing block |
| [Computed value](computed_value) | a percentage or `auto` or the absolute length |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
width =   
  auto                                      [|](value_definition_syntax#single_bar)  
  [<length-percentage [0,∞]>](length-percentage)                 [|](value_definition_syntax#single_bar)  
  min-content                               [|](value_definition_syntax#single_bar)  
  max-content                               [|](value_definition_syntax#single_bar)  
  fit-content( [<length-percentage [0,∞]>](length-percentage) )    
  
<length-percentage> =   
  [<length>](length)      [|](value_definition_syntax#single_bar)  
  [<percentage>](percentage)    
  

```
Examples
--------


### Default width




```
p.goldie {
  background: gold;
}

```
 
```
<p class="goldie">The Mozilla community produces a lot of great software.</p>

```


### Example using pixels and ems




```
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}

```
 
```
<div class="px\_length">Width measured in px</div>
<div class="em\_length">Width measured in em</div>

```


### Example with percentage




```
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}

```
 
```
<div class="percent">Width in percentage</div>

```


### Example using "max-content"




```
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit uses a non-standard name \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
  width: max-content;
}

```
 
```
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

```


### Example using "min-content"




```
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
  width: min-content;
}

```
 
```
<p class="minblue">The Mozilla community produces a lot of great software.</p>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Box Sizing Module Level 4 # width-height-keywords](https://w3c.github.io/csswg-drafts/css-sizing-4/#width-height-keywords) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `auto` | 1 | 12 | 1 | 4 | 3.5 | 1 | 4.4 | 18 | 4 | 10.1 | 1 | 1.0 |
| `animatable` | 26 | 12 | 16 | 11 | 15 | 7 | 4.4 | 26 | 16 | 14 | 7 | 1.5 |
| `fill` | 46 | 79 | No | No | 33 | 12 | 46 | 46 | No | 33 | 12 | 5.0 |
| `fit-content` | 46221–48 | 7979 | 943 | No | 331515–35 | 1172 | 464.44.4–48 | 462518–48 | 944 | 331414–35 | 1171 | 5.01.51.0–5.0 |
| `fit-content_function` | No | No | 91 | No | No | No | No | No | No | No | No | No |
| `max-content` | 4622 | 7979 | 663 | No | 44 | 112 | 46 | 46 | 664 | 43 | 111 | 5.0 |
| `min-content` | 461–48 | 79 | 663 | No | 3315–35 | 112 | 464.4–48 | 4618–48 | 664 | 3314–35 | 111 | 5.01.0–5.0 |
| `stretch` | 22 | 79 | 3 | No | 15 | 7 | 4.4 | 25 | 4 | 14 | 7 | 5.0 |


See also
--------


* [The box model](css_box_model/introduction_to_the_css_box_model)
* [`height`](height)
* [`box-sizing`](box-sizing)
* [`min-width`](min-width), [`max-width`](max-width)
* The mapped logical properties: [`block-size`](block-size), [`inline-size`](inline-size)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/auto>

Variable fonts guide
====================



**Variable fonts** are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single [`@font-face`](../@font-face) reference. This article will give you all you need to know to get you started using variable fonts.

  **Note:** To use variable fonts on your operating system, you need to make sure that it is up to date. For example, Linux OSes need the latest Linux Freetype version, and macOS prior to High Sierra (10.13) does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

 

Variable Fonts: what they are, and how they differ
--------------------------------------------------


To better understand what's different about variable fonts, it is worth reviewing what non-variable ones are like and how they compare.

### Standard (or Static) fonts



In the past, a typeface would be produced as several individual fonts, and each font would represent one specific width/weight/style combination. So you would have separate files for 'Roboto Regular', 'Roboto Bold', and 'Roboto Bold Italic' — meaning that you could end up with 20 or 30 different font files to represent a complete typeface (it could be several times that for a large typeface that has different widths as well).

 In such a scenario, to use a typeface for typical use on a site for body copy you would need at least four files: regular, italic, bold, and bold italic. If you wanted to add more weights, like a lighter one for captions or a heavier one for extra emphasis, that would mean several more files. This results in more HTTP requests, and more data being downloaded (usually around 20k or more per file).


### Variable fonts



With a variable font, all of those permutations can be contained in a single file. That file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. The advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately.

 This allows for common typographic techniques such as setting different size headings in different weights for better readability at each size or using a slightly narrower width for data-dense displays. For comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for performance reasons alone).

 #### A note about font families, weights, and variants

 You might notice that we have been talking about having a specific font file for every weight and style (i.e. bold and italic and bold italic), rather than relying upon the browser to synthesize them. The reason for this is that most typefaces have very specific designs for bolder weights and italics that often include completely different characters (lower-case 'a' and 'g's are often quite different in italics, for example). To most accurately reflect the typeface design and avoid differences between browsers and how they may or may not synthesize the different styles, it's more accurate to load the specific font files where needed when using a non-variable font.

 You may also find that some variable fonts come split into two files: one for uprights and all their variations, and one containing the italic variations. This is sometimes done to reduce the overall file size in cases where the italics aren't needed or used. In all cases, it is still possible to link them with a common [`font-family`](../font-family) name so you can call them using the same `font-family` and appropriate [`font-style`](../font-style).


Introducing the 'variation axis'
--------------------------------



The heart of the new variable fonts format is the concept of an **axis of variation** describing the allowable range of that particular aspect of the typeface design. So the 'weight axis' describes how light or how bold the letterforms can be; the 'width axis' describes how narrow or how wide they can be; the 'italic axis' describes if italic letterforms are present and can be turned on or off accordingly, etc. Note that an axis can be a range or a binary choice. Weight might range from 1–999, whereas italic might be 0 or 1 (off or on).

 As defined in the specification, there are two kinds of axes: **registered** and **custom**:

 * Registered axes are those that are most frequently encountered, and common enough that the authors of the specification felt it was worth standardizing. The five currently registered axes are weight, width, slant, italic, and optical size. The W3C has undertaken to map them to existing CSS attributes, and in one case introduced a new one, which you'll see below.
* Custom axes are limitless: the typeface designer can define and scope any axis they like and are just required to give it a four-letter **tag** to identify it within the font file format itself. You can use these four-letter tags in CSS to specify a point along that axis of variation, as will be shown in the code examples below.


### Registered axes and existing CSS attributes



In this section we'll demonstrate the five registered axes defined with examples and the corresponding CSS. Where possible, both the standard and lower-level syntax are included. The lower-level syntax ([`font-variation-settings`](../font-variation-settings)) was the first mechanism implemented to test the early implementations of variable font support and is necessary to utilize new or custom axes beyond the five registered ones. However, the W3C's intent was for this syntax not to be used when other attributes are available. Therefore wherever possible, the appropriate property should be used, with the lower-level syntax of `font-variation-settings` only being used to set values or axes not available otherwise.

 #### Notes

 1. When using `font-variation-settings` it is important to note that axis names are case-sensitive. The registered axis names must be in lower case, and custom axes must be in upper case. For example: 
```
font-variation-settings: "wght" 375, "GRAD" 88;

```

`wght` (weight) is a registered axis, and `GRAD` (grade) is a custom one.
2. If you have set values using `font-variation-settings` and want to change one of those values, you must redeclare all of them (in the same way as when you set OpenType font features using [`font-feature-settings`](../font-feature-settings)). You can work around this limitation by using [CSS Custom Properties](../using_css_custom_properties) (CSS variables) for the individual values, and modifying the value of an individual custom property. Example code follows at the end of the guide.


### Weight



Weight (represented by the `wght` tag) defines the design axis of how thin or thick (light or heavy, in typical typographic terms) the strokes of the letterforms can be. For a long time in CSS there has existed the ability to specify this via the [`font-weight`](../font-weight) property, which takes numeric values ranging from 100 to 900 in increments of 100, and keywords like `normal` or `bold`, which are aliases for their corresponding numeric values (400 and 700 in this case). These are still applied when dealing with non-variable or variable fonts, but with variable ones, any number from 1 to 1000 is now valid.

 It should be noted that at this point there is no way in the `@font-face` declaration to 'map' a specific point on the variation axis of a variable font to the keyword `bold` (or any other keyword). This can generally be resolved fairly easily, but does require an extra step in writing your CSS:

 
```
font-weight: 375;

font-variation-settings: "wght" 375;

```
 The following live example's CSS can be edited to allow you to play with font-weight values.



### Width



Width (represented by the `wdth` tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. This is typically set in CSS using the [`font-stretch`](../font-stretch) property, with values expressed as a percentage above or below 'normal' (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%. If a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed.

  **Note:** The % symbol is not used when utilizing `font-variation-settings`.

  
```
font-stretch: 115%;

font-variation-settings: "wdth" 115;

```
 The following live example's CSS can be edited to allow you to play with font width values.



### Italic



The Italic (`ital`) axis works differently in that it is either on or off; there is no in-between. Italic designs often include dramatically different letterforms from their upright counterparts, so in the transition from upright to italic, several glyph (or character) substitutions usually occur. Italic and oblique are often used somewhat interchangeably, but in truth are quite different. Oblique is defined in this context with the term `slant` (see the below section), and a typeface would typically have one or the other, but not both.

 In CSS, both italic and oblique are applied to text using the [`font-style`](../font-style) property. Also note the introduction of `font-synthesis: none;` — which will prevent browsers from accidentally applying the variation axis and a synthesized italic. This can be used to prevent faux-bolding as well.

 
```
font-style: italic;

font-variation-settings: "ital" 1;

font-synthesis: none;

```
 The following live example's CSS can be edited to allow you to play with font italics.



### Slant



Slant (represented by the `slnt` tag), or as it's often referred to, 'oblique' — is different from true italics in that it changes the angle of the letterforms but doesn't perform any kind of character substitution. It is also variable, in that it is expressed as a numeric range. This allows the font to be varied anywhere along that axis. The allowed range is generally 0 (upright) to 20 degrees — any number value along that range can be supplied, so the font can be slanted just a tiny bit. However, any value from -90 to 90 degrees is valid.

  **Note:** The `deg` keyword is not used when utilizing `font-variation-settings`.

  
```
font-style: oblique 14deg;

font-variation-settings: "slnt" 14;

```
 The following live example's CSS can be edited to allow you to play with font slant/oblique values.



### Optical size



This is something new to digital fonts and CSS, but is a centuries-old technique in designing and creating metal type. Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (such as an equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. Conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.

 While this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn't print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering.

 Optical size values are generally intended to be automatically applied corresponding to `font-size`, but can also be manipulated using the lower-level `font-variation-settings` syntax.

 There is a new attribute, [`font-optical-sizing`](../font-optical-sizing), created to support variable fonts in CSS. When using `font-optical-sizing`, the only allowed values are `auto` or `none` — so this attribute only allows for turning optical sizing on or off. However when using `font-variation-settings: 'opsz' <num>`, you can supply a numeric value. In most cases you would want to match the `font-size` (the physical size the type is being rendered) with the `opsz` value (which is how optical sizing is intended to be applied when using `auto`). The option to provide a specific value is provided so that should it be necessary to override the default — for legibility, aesthetic, or some other reason — a specific value can be applied.

 
```
font-optical-sizing: auto;

font-variation-settings: "opsz" 36;

```
 The following live example's CSS can be edited to allow you to play with optical size values.



### Custom axes


Custom axes are just that: they can be any axis of design variation that the typeface designer imagines. There may be some that become fairly common — or even become registered — but only time will tell.

### Grade



Grade may become one of the more common custom axes as it has a known history in typeface design. The practice of designing different grades of a typeface was often done in reaction to intended use and printing technique. The term 'grade' refers to the relative weight or density of the typeface design, but differs from traditional 'weight' in that the physical space the text occupies does not change, so changing the text grade doesn't change the overall layout of the text or elements around it. This makes grade a useful axis of variation as it can be varied or animated without causing a reflow of the text itself.

 
```
font-variation-settings: "GRAD" 88;

```
 The following live example's CSS can be edited to allow you to play with font grade values.



### Using a variable font: @font-face changes



The syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional [`@font-face`](../@font-face) syntax now available in modern browsers.

 The basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like `font-weight` and `font-stretch` can be supplied, rather than named according to the font file being loaded.

 #### Example for a standard upright (Roman) font

 
```
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: normal;
}

```
 #### Example for a font that includes both upright and italics

 
```
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 20deg;
}

```
  **Note:** there is no set specific value for the upper-end degree measurement in this case; they indicate that there is an axis so the browser can know to render upright or italic (remember that italics are only on or off)

  #### Example for a font that contains only italics and no upright characters

 
```
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: italic;
}

```
 #### Example for a font that contains an oblique (slant) axis

 
```
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 12deg;
}

```
  **Note:** Not all browsers have implemented the full syntax for font format, so test carefully. All browsers that support variable fonts will still render them if you set the format to just the file format, rather than format-variations (i.e. `woff2` instead of `woff2-variations`), but it's best to use the proper syntax if possible.

   **Note:** Supplying value ranges for `font-weight`, `font-stretch`, and `font-style` will keep the browser from attempting to render an axis outside that range if you are using the appropriate attribute (i.e. `font-weight` or `font-stretch`), but will not block you from supplying an invalid value via `font-variation-settings`, so use with care.

 
Working with older browsers
---------------------------



Variable font support can be checked with CSS Feature Queries (see [`@supports`](../@supports)), so it's possible to use variable fonts in production and scope the CSS calling the variable fonts inside a feature query block.

 
```
h1 {
  font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: "wdth" 115) {
  h1 {
    font-family: some-variable-font-family;
  }
}

```

Sample pages
------------



The following example pages show two different ways to structure your CSS. The first uses the standard attributes wherever possible. The second example uses CSS Custom Properties to set values for a `font-variation-settings` string and shows how you can more easily update single variable values by overriding a single variable rather than rewriting the whole string. Note the hover effect on the `h2`, which only alters the grade axis custom property value.



Resources
---------


* [W3C CSS Fonts Module 4 Specification](https://drafts.csswg.org/css-fonts-4/) (editor's draft)
* [W3C GitHub issue queue](https://github.com/w3c/csswg-drafts/issues)
* [Microsoft Open Type Variations introduction](https://docs.microsoft.com/typography/opentype/spec/otvaroverview)
* [Microsoft OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg)
* [Wakamai Fondue](https://wakamaifondue.com) (a site that will tell you what your font can do via a simple drag-and-drop inspection interface)
* [Axis Praxis](https://www.axis-praxis.org) (the original variable fonts playground site)
* [V-Fonts.com](https://v-fonts.com) (a catalog of variable fonts and where to get them)
* [Font Playground](https://play.typedetail.com) (another playground for variable fonts with some very unique approaches to user interface)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide>

Subgrid
=======


Level 2 of the CSS Grid Layout specification includes a `subgrid` value for [`grid-template-columns`](../grid-template-columns) and [`grid-template-rows`](../grid-template-rows). This guide details what subgrid does, and gives some use cases and design patterns that are solved by the feature.


Introduction to subgrid
-----------------------



When you add `display: grid` to a grid container, only the direct children become grid items and can then be placed on the grid that you have created. The children of these items display in normal flow.

 You can "nest" grids by making a grid item a grid container. These grids however are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid.

 If you set the value `subgrid` on `grid-template-columns`, `grid-template-rows` or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent.

 For example, if you use `grid-template-columns: subgrid` and the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same size as the parent grid. Gaps are inherited but can also be overridden with a different [`gap`](../gap) value. Line names can be passed from the parent into the subgrid, and the subgrid can also declare its own line names.


Subgrid for columns
-------------------



In the example below I have a grid layout with nine `1fr` column tracks and four rows that are a minimum of 100px tall.

 I place `.item` from column line 2 to 7, and row 2 to 4. I then make this grid item into a grid, giving it column tracks that are a subgrid and defining rows as normal. As the item spans five column tracks, this means that the subgrid has five column tracks. I can then place `.subitem` on this grid.

 The rows in this example are not a subgrid and so behave as a nested grid does normally. The grid area on the parent expands to be large enough for this nested grid.


 Note that line numbering restarts inside the subgrid — column line 1, when inside the subgrid, is the first line of the subgrid. The subgridded element doesn't inherit the line numbers of the parent grid. This means that you can safely lay out a component that may be placed in different positions on the main grid, knowing that the line numbers on the component will always be the same.


Subgrid for rows
----------------



The next example is the same setup, however we are using `subgrid` as the value of `grid-template-rows` and defining explicit column tracks. So the column tracks behave as a regular nested grid, but the rows are tied to the two tracks that the child spans.



A subgrid in both dimensions
----------------------------



You can of course define both rows and columns as a subgrid, as in the example below. This means that your subgrid is tied in both dimensions to the number of tracks on the parent.



### No implicit grid in a subgridded dimension



If you need to autoplace items, and do not know how many items you will have, take care when creating a subgrid, as it will prevent additional rows being created to hold those items.

 Take a look at the next example — it uses the same parent and child grid as in the example above, however inside the subgrid I have twelve items trying to autoplace into ten grid cells. As the subgrid is on both dimensions there is nowhere for the extra two items to go and so they go into the last track of the grid, as defined in the specification.


 If we remove the `grid-template-rows` value we enable regular creation of implicit tracks and, although these won't line up with the tracks of the parent, as many as are required will be created.



The gap properties and subgrid
------------------------------



If you have a [`gap`](../gap), [`column-gap`](../column-gap), or [`row-gap`](../row-gap) specified on the parent, this will be passed into the subgrid, so it will have the same spacing between tracks as the parent. In some situations however you may wish the subgrid tracks to have a different gap or no gap. This can be achieved by using the `gap-*` properties on the grid container of the subgrid.

 You can see this in the example below. The parent grid has a gap of 20px for rows and columns. The subgrid has `row-gap` set to `0`.


 If you inspect this in the Firefox Grid Inspector you can see how the line of the grid is in the correct place down the center of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item.

  ![The smaller item displays in the gap as row-gap is set to 0 on the subgrid.] 


Named grid lines
----------------



When using CSS Grid you can name lines on your grid and then position items based on those names rather than the line number. The line names on the parent grid are passed into the subgrid, and you can place items using them. In the below example I have named lines on the parent `col-start` and `col-end` and then used those to place the subitem.


 You can also specify line names on the subgrid. This is achieved by adding a list of line names enclosed in square brackets after the `subgrid` keyword. If you have four lines in your subgrid, to name them all you could use the syntax `grid-template-columns: subgrid [line1] [line2] [line3] [line4]`

 Lines specified on the subgrid are added to any lines specified on the parent so you can use either or both. To demonstrate this, I have positioned one item in the example below using the parent lines, and one using the subgrid lines.



Using subgrids
--------------



Other than needing to take care of items that do not fit in your subgrid, a subgrid acts very similarly to any nested grid; the only difference is that the track sizing of the subgrid is set on the parent grid. As with any nested grid however, the size of content in the subgrid can change the track sizing, assuming a track sizing method is used that allows content to affect the size. In such a case, auto-sized row tracks for example will grow to fit content in the main grid and content in the subgrid.

 As the subgrid value acts in much the same way as a regular nested grid, it is easy to switch between the two. For example, if you realize that you need an implicit grid for rows, all you would need to do is remove the `subgrid` value of `grid-template-rows` and perhaps give a value for `grid-auto-rows` to control the implicit track sizing.


Specifications
--------------




| Specification |
| --- |
| [CSS Grid Layout Module Level 2 # subgrids](https://w3c.github.io/csswg-drafts/css-grid/#subgrids) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Subgrid` | NoSee [bug 618969](https://crbug.com/618969). | NoSee [bug 618969](https://crbug.com/618969). | 71 | No | NoSee [bug 618969](https://crbug.com/618969). | 16 | NoSee [bug 618969](https://crbug.com/618969). | NoSee [bug 618969](https://crbug.com/618969). | No | NoSee [bug 618969](https://crbug.com/618969). | 16 | NoSee [bug 618969](https://crbug.com/618969). |


See also
--------


* On the Mozilla Developer YouTube Channel, see the videos [Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) and [Don't Wait To Use Subgrid For Better Card Layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4)
* [Hello Subgrid!](https://noti.st/rachelandrew/i6gUcF/hello-subgrid) A presentation from CSSConf.eu


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid>

CSS Text
========


**CSS Text** is a module of CSS that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.


Reference
---------


### Properties


* [`hanging-punctuation`](hanging-punctuation)
* [`hyphenate-limit-chars`](hyphenate-limit-chars)
* [`hyphens`](hyphens)
* [`letter-spacing`](letter-spacing)
* [`line-break`](line-break)
* [`overflow-wrap`](overflow-wrap)
* [`tab-size`](tab-size)
* [`text-align`](text-align)
* [`text-align-last`](text-align-last)
* [`text-indent`](text-indent)
* [`text-justify`](text-justify)
* [`text-size-adjust`](text-size-adjust)
* [`text-transform`](text-transform)
* [`white-space`](white-space)
* [`word-break`](word-break)
* [`word-spacing`](word-spacing)
Specifications
--------------




| Specification |
| --- |
| [CSS Logical Properties and Values Level 1](https://drafts.csswg.org/css-logical/)  |
| [CSS Text Module Level 3](https://drafts.csswg.org/css-text/)  |
| [CSS Text Module Level 4](https://drafts.csswg.org/css-text-4/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text>

Wrapping and breaking text
==========================


This guide explains the various ways in which overflowing text can be managed in CSS.


What is overflowing text?
-------------------------



In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.


 CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of [`overflow`](../overflow) is `visible`, and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if `overflow` was set to `hidden` you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.

 In this next example, you can see what happens if `overflow` is set to `hidden`.



Finding the min-content size
----------------------------



To find the minimum size of the box that will contain its contents with no overflows, set the [`width`](../width) or [`inline-size`](../inline-size) property of the box to [`min-content`](../min-content).


 Using `min-content` is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.


Breaking long words
-------------------



If the box needs to be a fixed size, or you are keen to ensure that long words can't overflow, then the [`overflow-wrap`](../overflow-wrap) property can help. This property will break a word once it is too long to fit on a line by itself.


  **Note:** The `overflow-wrap` property acts in the same way as the non-standard property `word-wrap`. The `word-wrap` property is now treated by browsers as an alias of the standard property.

  An alternative property to try is [`word-break`](../word-break). This property will break the word at the point it overflows. It will cause a break-even if placing the word onto a new line would allow it to display without breaking.

 In this next example, you can compare the difference between the two properties on the same string of text.


 This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.

 In the example below there is a checkbox and label. Let's say, you want the label to break should it be too long for the box. However, you don't want it to break directly after the checkbox.



Adding hyphens
--------------



To add hyphens when words are broken, use the CSS [`hyphens`](../hyphens) property. Using a value of `auto`, the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of `manual`, then insert a hard or soft break character into the string. A hard break (`‐`) will always break, even if it is not necessary to do so. A soft break (`&shy;`) only breaks if breaking is needed.


 You can also use the [`hyphenate-character`](../hyphenate-character) property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).

 This property also takes the value `auto`, which will select the correct value to mark a mid-word line break according to the typographic conventions of the current content language.


The `<wbr>` element
-------------------



If you know where you want a long string to break, then it is also possible to insert the HTML [`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.

 In the below example the text breaks in the location of the [`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr).



See also
--------


* The HTML [`<wbr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) element
* The CSS [`word-break`](../word-break) property
* The CSS [`overflow-wrap`](../overflow-wrap) property
* The CSS [`white-space`](../white-space) property
* The CSS [`hyphens`](../hyphens) property
* [Overflow and Data Loss in CSS](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text>

Box alignment in grid layout
============================



The [Box Alignment](../css_box_alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS Grid Layout](../css_grid_layout).

 As this page aims to detail things which are specific to CSS Grid Layout and Box Alignment, it should be read in conjunction with the main [Box Alignment](../css_box_alignment) page which details the common features of box alignment across layout methods.



Basic example
-------------



In this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis. This space is distributed using `justify-content`. On the block (cross) axis the alignment of the items inside their grid areas is controlled with `align-items`. The first item overrides the `align-items` value set on the group by setting `align-self` to `center`.



Grid axes
---------



As a two-dimensional layout method, when working with grid layout we always have two axes on which to align our items. We have access to all of the box alignment properties to help us achieve this.

 The inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. Therefore, in a horizontal language such as English or Arabic the inline direction runs horizontally. Should you be in a vertical writing mode the inline axis will run vertically.

  ![Inline axes are horizontal.] 

 To align things on the inline axis you use the properties that start with `justify-`, [`justify-content`](../justify-content), [`justify-items`](../justify-items) and [`justify-self`](../justify-self).

 The block axis crosses the inline axis in the direction that blocks are displayed down the page — for example paragraphs in English are displayed one below the other vertically. This, therefore is the block dimension.

 To align things on the block axis you use the properties that start with `align-`, [`align-content`](../align-content), [`align-items`](../align-items) and [`align-self`](../align-self).

  ![The block axes are vertical.] 


Self alignment
--------------



* [`justify-self`](../justify-self)
* [`align-self`](../align-self)
* [`place-self`](../place-self)
* [`justify-items`](../justify-items)
* [`align-items`](../align-items)
* [`place-items`](../place-items)

 These properties deal with aligning the item inside the grid area it is placed into. The properties `align-items` and `justify-items` are applied to the grid container and set the `align-self` and `justify-self` properties as a group. This means that you can set alignment for all of your grid Items at once, then override any items that need a different alignment by applying the `align-self` or `justify-self` property to the rules for the individual grid Items.

 The initial value for `align-self` and `justify-self` is `stretch` so the item will stretch over the entire grid area. The exception to this rule is where the item has an intrinsic aspect ratio, for example an image. In this case the item will be aligned to `start` in both dimensions in order that the image is not distorted.


Content alignment
-----------------



* [`justify-content`](../justify-content)
* [`align-content`](../align-content)
* [`place-content`](../place-content)

 These properties deal with aligning the tracks of the grid when there is extra space to distribute. This scenario will occur if the tracks that you have defined total less than the total width of the grid container.


Gap and legacy grid-gap properties
----------------------------------



* [`row-gap`](../row-gap)
* [`column-gap`](../column-gap)
* [`gap`](../gap)

 The Grid specification originally contained the definition for the properties [`grid-row-gap`](../row-gap), [`grid-column-gap`](../column-gap) and [`grid-gap`](../gap). These have since been moved into the Box Alignment specification and renamed to [`row-gap`](../row-gap), [`column-gap`](../column-gap), and [`gap`](../gap). This allows them to be used for other layout methods where a gap between items makes sense.

 The updated properties have not yet been implemented in all browsers. Therefore, to use the gap properties in grid layout, you should use the `grid-row-gap`, `grid-column-gap` and `grid-gap` versions to ensure full compatibility. You could double up the properties and use both as you would for vendor prefixes.


Reference
---------


### CSS Properties


* [`justify-content`](../justify-content)
* [`align-content`](../align-content)
* [`place-content`](../place-content)
* [`justify-items`](../justify-items)
* [`align-items`](../align-items)
* [`place-items`](../place-items)
* [`justify-self`](../justify-self)
* [`align-self`](../align-self)
* [`place-self`](../place-self)
* [`row-gap`](../row-gap)
* [`column-gap`](../column-gap)
* [`gap`](../gap)
### Glossary Entries


* [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
* [Main Axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis)
Guides
------


* [Alignment in grid layout](../css_grid_layout/box_alignment_in_css_grid_layout)
External Resources
------------------


* [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
* [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout>

:-moz-submit-invalid
====================



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `:-moz-submit-invalid` CSS [pseudo-class](pseudo-classes) is a [Mozilla extension](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions) that represents any submit [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) on forms whose contents aren't valid based on their [validation constraints](https://developer.mozilla.org/en-US/docs/Learn/Forms#constraint_validation).

 By default, no style is applied. You can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields.



Syntax
------



```
:-moz-submit-invalid {
  /\* ... \*/
}

```
Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `:-moz-submit-invalid` | No | No | 88From Firefox 88 the feature has been placed behind a flag. See [bug 1694129](https://bugzil.la/1694129).4–88 | No | No | No | No | No | 4–88From version 88, the feature has been withdrawn. See [bug 1694129](https://bugzil.la/1694129). | No | No | No |


See also
--------


* [`:valid`](:valid)
* [`:invalid`](:invalid)
* [`:required`](:required)
* [`:optional`](:optional)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-submit-invalid>

Box alignment for block, absolutely positioned and table layout
===============================================================



The [Box Alignment Specification](../css_box_alignment) details how alignment works in various layout methods. In this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main [Box Alignment](../css_box_alignment) page, which details the common features of box alignment across layout methods.

  **Note:** At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.

 

align-content and justify-content
---------------------------------



The [`justify-content`](../justify-content) property does not apply to block containers or table cells.

 The [`align-content`](../align-content) property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as `space-between`, `space-around` or `space-evenly` is requested then the fallback alignment will be used, as the content is treated as a single [alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Subject).


justify-self
------------



The [`justify-self`](../justify-self) property is used to align an item inside its containing block on the inline axis.

 This property does not apply to floated elements or table cells.


align-self
----------


The [`align-self`](../align-self) property does not apply to block-level boxes (including floats), because there is more than one item in the block axis. It also does not apply to table cells.

### Absolutely positioned elements


The alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. The normal keyword resolves to `stretch`, unless the positioned item is a replaced element, in which case it resolves to `start`.

Aligning in these layout methods today
--------------------------------------



As we do not currently have browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.

 Alignment of blocks horizontally prior to flexbox was typically achieved by way of setting auto margins on the block. A [`margin`](../margin) of `auto` will absorb all available space in that dimension, therefore setting a left and right margin of auto, you can push a block into the center:

 
```
.container {
  width: 20em;
  margin-left: auto;
  margin-right: auto;
}

```
 In table layout, you have access to the [`vertical-align`](../vertical-align) property to align the contents of a cell inside that cell.

 For many use cases, turning the block container into a flex item will give you the alignment capability that you are looking for. In the example below, a container with a single item inside has been turned into a flex container for the purpose of being able to use the alignment properties.



Reference
---------


### CSS Properties


* [`justify-content`](../justify-content)
* [`align-content`](../align-content)
* [`justify-self`](../justify-self)
* [`align-self`](../align-self)
### Glossary Entries


* [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Subject)
* [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Container)
* [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_Alignment)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables>

Box alignment in Flexbox
========================


The [Box Alignment](../css_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of Flexbox. As this page aims to detail things which are specific to Flexbox and box alignment, it should be read in conjunction with the main [Box Alignment](../css_box_alignment) page which details the common features of box alignment across layout methods.


Basic example
-------------



In this example, three flex items are aligned on the main axis using [`justify-content`](../justify-content) and on the cross axis using [`align-items`](../align-items). The first item overrides the `align-items` values set on the group by setting [`align-self`](../align-self) to `center`.



The axes and flex-direction
---------------------------



Flexbox respects the writing mode of the document, therefore if you are working in English and set [`justify-content`](../justify-content) to `flex-end` this will align the items to the end of the flex container. If you are working with [`flex-direction`](../flex-direction) set to `row`, this alignment will be in the inline direction.

 However, in Flexbox you can change the main axis by setting `flex-direction` to `column`. In this case, `justify-content` will align items in the block direction. Therefore it is easiest to think about the main and cross axis when working in Flexbox like so:

 * The main axis = direction set by `flex-direction` = alignment via `justify-content`
* The cross axis = runs across the main axis = alignment via `align-content`, `align-self`/`align-items`


### Main Axis Alignment


* [`justify-content`](../justify-content)
### Cross Axis Alignment


* [`align-self`](../align-self)
* [`align-items`](../align-items)
* [`align-content`](../align-content)
### There is no justify-self in Flexbox



On the main axis, Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The `justify-content` property controls how that leftover space is used. Set `justify-content: flex-end` and the extra space is placed before the items, `justify-content: space-around` and it is placed either side of the item in that dimension, etc.

 This means that a `justify-self` property does not make sense in Flexbox as we are always dealing with moving the entire group of items around.

 On the cross axis `align-self` makes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end.


Alignment and auto margins
--------------------------



There is a specific use case in Flexbox where we might think that a `justify-self` property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern. For this use case, we can use an `auto` margin. A margin set to `auto` will absorb all available space in its dimension. This is how centering a block with auto margins works. By setting the left and right margin to `auto`, both sides of our block try to take up all of the available space and so push the box into the center.

 By setting a [`margin`](../margin) of `auto` on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with Flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space.



The `gap` properties
--------------------


* [`row-gap`](../row-gap)
* [`column-gap`](../column-gap)
* [`gap`](../gap)
### Creating fixed size gaps between items



On the main axis, the `column-gap` property creates fixed size gaps between adjacent items.

 On the cross axis the `row-gap` property creates spacing between adjacent flex lines, therefore `flex-wrap` must also be set to `wrap` for this to have any effect.



Reference
---------


### CSS Properties


* [`justify-content`](../justify-content)
* [`align-content`](../align-content)
* [`place-content`](../place-content)
* [`justify-items`](../justify-items)
* [`align-items`](../align-items)
* [`place-items`](../place-items)
* [`align-self`](../align-self)
* [`row-gap`](../row-gap)
* [`column-gap`](../column-gap)
* [`gap`](../gap)
### Glossary Entries


* [Cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
* [Main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis)
Guides
------


* [Alignment in flexbox](../css_flexible_box_layout/aligning_items_in_a_flex_container)
External Resources
------------------


* [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
* [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox>

:-moz-last-node
===============



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `:-moz-last-node` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [pseudo-class](pseudo-classes) is a [Mozilla extension](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions) that represents any element that is the last child node of some other element. It differs from [`:last-child`](:last-child) because it does not match a last-child element with (non-whitespace) text after it.

  **Note:** Any whitespace at the end of an element is ignored for the determination of `:-moz-last-node`.

 

Syntax
------



```
:-moz-last-node {
  /\* ... \*/
}

```
Examples
--------


### CSS



```
span:-moz-last-node {
  background-color: lime;
}

```
### HTML



```
<p>
  <span>This does not match.</span>
  <span>This matches!</span>
</p>

<p>
  <span>This doesn't match because it's followed by text.</span>
  Blahblah.
</p>

```
### Result


Specifications
--------------


Not part of any standard.

See also
--------


* [`:-moz-first-node`](:-moz-first-node)
* [`:last-child`](:last-child)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-last-node>

!important
==========



A `!` delimiter followed by the `important` keyword marks the declaration as important. The `!important` flag alters the rules selecting declarations inside the <cascade>. A declaration that is not *important* is called *normal*.

 To mark a declaration important, add the *important flag* (`!important`) after the value in the declaration. While white space is allowed between the delimiter and the keyword, the flag is generally written as `!important` without any white space.

 
```
selector {
  property: value; /\* normal declaration \*/
  property: value !important; /\* important declaration (preferred) \*/
  property: value ! important; /\* important declaration (not preferred) \*/
}

```
 The `!important` comes after the value of the property value pair declaration, preceded by at least one space. The important flag must be the last token in the declaration. In other words, there can be white space and comments between the flag and the declaration's ending semicolon, but nothing else.



Impact on the cascade
---------------------



When it comes to important declarations, the [cascade origin and layer orders](cascade) are reversed. Without the important flag, declarations in the author's style sheets override declarations in a user's style sheet, which override declarations in the user-agent's default style sheet.

 When a declaration is important, the order of precedence is reversed. Declarations marked as important in the user-agent style sheets override all important declarations in the user style sheets. Similarly, all important declarations in the user style sheets override all important declarations in the author's style sheets. Finally, all important declarations take precedence over all animations.

  **Note:** All important declarations take precedence over all animations. `!important` is not valid within [@keyframes animation](@keyframes) declarations.

  Reversing the precedence order for important declarations ensures users with special needs, such as personalized color schemes or large fonts, can override author styles when needed by marking some declarations in their user's style sheet as important. It also guarantees malicious extensions can't override important user-agent styles, which might break functionality or negatively impact security.

 Does anything have precedence over important declarations? Yes, [transitions](css_transitions). CSS transitions are a way to control the speed at which the property changes from one value to another. While transitioning from one value to another, a property will not match a specific important declaration.

 
```
a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

```
 In this example, the `color` and `background-color` properties will transition to the hovered state over two seconds. Even though default states are normal declarations and hover states are `!important` declarations, the transition does happen.


### Cascade layers


Within each of the three origins for style sheets – author, user, and user-agent – normal declarations in unlayered styles override layered style declarations, with the last declared having precedence over the layers declared before it. Important declarations reverse the order of precedence: important declarations in the first layer take precedence over important declarations in the next layer, and so on. Also, all the important declarations have precedence over important declarations made outside any layer.

### Inline styles


Inline styles are styles defined using the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) attributes. They can also be normal or important. Inline *normal* styles take precedence over all *normal* declarations, no matter the origin. Inline *important* styles take precedence over all other *important* author styles, no matter the layer, but important styles from user's or user-agent's style sheets and transitions override them.

### !important and specificity



While `!important` is not part of determining specificity, it is related. Important declarations override all other declarations from the same [origin and cascade layer](cascade).

 
```
#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

```
 This example displays a case of over-specifying a selector. No matter how high the selector <specificity> matches a normal declaration, an important declaration from the same source and cascade layer will always have precedence. In this case, the paragraph will always be red.

 When two important declarations from the same origin and layer apply to the same element, browsers select and use the declaration with the highest specificity.

 
```
#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

```
 In this case, the selector specificity matters. Only if the selectors had the same specificity would source order matter.


Impact on shorthand properties
------------------------------



Declaring a shorthand property with `!important` sets all of sub-properties as important. The two following selector style blocks are equivalent:

 
```
p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

```
 This example shows one of the several reasons avoiding the important flag is generally recommended.


Impact on custom properties
---------------------------



When the `!important` flag is added to a custom property value declaration, it makes the value assignment important. The `!important` flag is then stripped from the custom property value. The `!important` flag is not passed as part of the custom property value to the [`var()`](var()) function.

 
```
:root {
  --myColor: red !important;
  --myColor: blue;
}
p {
  color: var(--myColor);
}
blockquote {
  color: var(--myColor);
  color: purple;
}

```
 In this example, the paragraph will be red, not blue, as the custom property value assignment is important. The blockquote will be purple, because the purple normal declaration comes after the normal red declaration.



Best practices
--------------



Avoid using `!important` to override specificity. When intentionally creating important declarations for UI requirements, comment in your CSS code to explain to maintainers why they should not override that feature.

 Even when working to override high-specificity styles not under your control, such as styles in a 3rd party plugin declared with an [id selector](id_selectors), you don't need to use `!important`. Consider instead importing the 3rd party stylesheet script into a [named or anonymous layer](@layer) as your first cascade layer, instead of using `!important`. As long as the external styles do not include important declarations, your styles will take precedence over the widget styles, no matter the specificity.

 If you need to override an external stylesheet containing important declarations, create a cascade layer containing the needed overrides, and declare that layer first.


### Accessibility


Important styles from a user stylesheet take precedence over the author style sheet's important declarations, meaning adding an `!important` flag to a site's styles will not prevent individual users with special requirements, such as large fonts, from being able to override your styles by adding important styles in their own user's style sheet.

Browser compatibility
---------------------

See also
--------


* [CSS Specificity](specificity)
* [CSS Cascade](cascade)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/important>

CSS Fonts
=========


**CSS Fonts** is a module of CSS that defines font-related properties and how font resources are loaded. It lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character.


Basic example
-------------



The following example shows a simple use of basic font properties to style a paragraph of text.

 
```
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}

```
 
```
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out on an antique bed<br />
  An' my spirit did a midnite creep
</p>

```
 The result is as follows:



Variable fonts examples
-----------------------


You can find a number of variable fonts examples at [v-fonts.com](https://v-fonts.com/) and [axis-praxis.org](https://www.axis-praxis.org/); see also our [Variable fonts guide](css_fonts/variable_fonts_guide) for more information and usage information.

Reference
---------


### Properties


* [`font`](font)
* [`font-family`](font-family)
* [`font-feature-settings`](font-feature-settings)
* [`font-kerning`](font-kerning)
* [`font-language-override`](font-language-override)
* [`font-optical-sizing`](font-optical-sizing)
* [`font-size`](font-size)
* [`font-size-adjust`](font-size-adjust)
* [`font-stretch`](font-stretch)
* [`font-style`](font-style)
* [`font-synthesis`](font-synthesis)
* [`font-variant`](font-variant)
* [`font-variant-alternates`](font-variant-alternates)
* [`font-variant-caps`](font-variant-caps)
* [`font-variant-east-asian`](font-variant-east-asian)
* [`font-variant-ligatures`](font-variant-ligatures)
* [`font-variant-numeric`](font-variant-numeric)
* [`font-variant-position`](font-variant-position)
* [`font-variation-settings`](font-variation-settings)
* [`font-weight`](font-weight)
* [`line-height`](line-height)
### At-rules


* [`@font-face`](@font-face)
* [`@font-feature-values`](@font-feature-values)
Guides
------


 [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)  In this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

  [OpenType font features guide](css_fonts/opentype_fonts_guide)  Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — [`font-feature-settings`](font-feature-settings). This article provides you with all you need to know about using OpenType font features in CSS.

  [Variable fonts guide](css_fonts/variable_fonts_guide)  **Variable fonts** are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.

  Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts>

any-hover
=========


The `any-hover` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test whether *any* available input mechanism can hover over elements.


Syntax
------



The `any-hover` feature is specified as a keyword value chosen from the list below.

  `none`  None of the available input mechanism(s) can hover conveniently, or there is no pointing input mechanism.

  `hover`  One or more available input mechanisms can conveniently hover over elements.

  
Examples
--------


### Testing whether input methods can hover



#### HTML

 
```
<a href="#">Try hovering over me!</a>

```
 #### CSS

 
```
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # any-input](https://w3c.github.io/csswg-drafts/mediaqueries/#any-input) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `any-hover` | 41 | 16 | 64 | No | 28 | 9 | 41 | 41 | 64 | 28 | 9 | 5.0 |


See also
--------


* [the `hover` media feature](hover)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover>

aspect-ratio
============


The `aspect-ratio` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the aspect ratio of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport).


Syntax
------


The `aspect-ratio` feature is specified as a [`<ratio>`](../ratio) value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixed `min-aspect-ratio` and `max-aspect-ratio` variants to query minimum and maximum values, respectively.

Examples
--------



The example below is contained in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), which creates its own viewport. Resize the `<iframe>` to see `aspect-ratio` in action.

 Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the `<div>` inside the `<iframe>`. See if you can find which width and height values trigger this!


### HTML



```
<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>

```
### CSS



```
/\* Minimum aspect ratio \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* blue \*/
  }
}

/\* Maximum aspect ratio \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* cyan \*/
  }
}

/\* Exact aspect ratio, put it at the bottom to avoid override\*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* red \*/
  }
}

```
### Result




Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # aspect-ratio](https://w3c.github.io/csswg-drafts/mediaqueries/#aspect-ratio) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `aspect-ratio` | 3 | 12 | 3.5 | 9 | 10 | 5 | ≤37 | 18 | 4 | 10.1 | 4.2 | 1.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio>

display-mode
============



The `display-mode` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the display mode of an application. You can use it to provide a consistent user experience between launching a site from a URL and launching it from a desktop icon.

 This feature corresponds to the Web app manifest's [`display`](https://developer.mozilla.org/en-US/docs/Web/Manifest#display) member. Both apply to the top-level browsing context and any child browsing contexts. The feature query applies regardless of whether a web app manifest is present.



Syntax
------



The `display-mode` feature is specified as a keyword value chosen from the list below.

 

| Display mode | Description | Fallback display mode |
| --- | --- | --- |
| `fullscreen` | All of the available display area is used and no user agent [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome) is shown. | `standalone` |
| `standalone` | The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. | `minimal-ui` |
| `minimal-ui` | The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. | `browser` |
| `browser` | The application opens in a conventional browser tab or new window, depending on the browser and platform. | (none) |
| `window-controls-overlay` | In this mode, the application looks and feels like a standalone desktop application, and the [Window Controls Overlay](https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API) feature is enabled. | (none) |


Examples
--------


### The CSS is used if the device is at fullscreen



```
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

```
Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # display-mode](https://w3c.github.io/csswg-drafts/mediaqueries-5/#display-mode) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `display-mode` | 42 | 79 | 47Firefox 47 and later support `display-mode` values `fullscreen` and `browser`. Firefox 57 added support for `minimal-ui` and `standalone` values. | No | 29 | 13 | 42 | 42 | 47Firefox 47 and later support `display-mode` values `fullscreen` and `browser`. Firefox 57 added support for `minimal-ui` and `standalone` values. | 29 | 12.2 | 4.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode>

color
=====


The `color` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the number of bits per color component (red, green, blue) of the output device.


Syntax
------



The `color` feature is specified as an [`<integer>`](../integer) value that represents the number of bits per color component (red, green, blue) of the output device. If the device is not a color device, the value is zero. It is a range feature, meaning that you can also use the prefixed `min-color` and `max-color` variants to query minimum and maximum values, respectively.

  **Note:** If the various color components are represented by different numbers of bits, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

  See [Applying color to HTML elements using CSS](../css_colors/applying_color) to learn more about using CSS to apply color to HTML.


Examples
--------


### HTML



```
<p>
  This text should be black on non-color devices, red on devices with a low
  number of colors, and greenish on devices with a high number of colors.
</p>

```
### CSS



```
p {
  color: black;
}

/\* Any color device \*/
@media (color) {
  p {
    color: red;
  }
}

/\* Any color device with at least 8 bits per color component \*/
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # color](https://w3c.github.io/csswg-drafts/mediaqueries/#color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Applying color to HTML elements using CSS](../css_colors/applying_color)
* The CSS [`color`](../color) property
* The CSS [`<color>`](../color_value) data unit


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color>

color-index
===========


The `color-index` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the number of entries in the output device's color lookup table.


Syntax
------


The `color-index` feature is specified as an [`<integer>`](../integer) value representing the number of entries in the output device's color lookup table. (This value is zero if the device does not use such a table.) It is a range feature, meaning that you can also use the prefixed `min-color-index` and `max-color-index` variants to query minimum and maximum values, respectively.

Examples
--------


### Basic example



#### HTML

 
```
<p>This is a test.</p>

```
 #### CSS

 
```
p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}

```
 #### Result



### Custom stylesheet



This HTML will apply a special stylesheet for devices that have at least 256 colors.

 
```
<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://foo.bar.com/color-stylesheet.css" />

```

Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # color-index](https://w3c.github.io/csswg-drafts/mediaqueries/#color-index) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color-index` | 29 | 79 | No | No | 16 | 8 | 4.4 | 29 | No | 16 | 8 | 2.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-index>

color-gamut
===========


The `color-gamut` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) is used to apply CSS styles based on the approximate range of color [gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut) supported by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) and the output device.


Syntax
------



The `color-gamut` feature is specified as one of the following keyword values:

  `srgb`  The user agent and the output device can support approximately the [sRGB](https://en.wikipedia.org/wiki/SRGB) gamut or more. This includes the vast majority of color displays.

  `p3`  The user agent and the output device can support approximately the gamut specified by the [Display P3](https://www.color.org/chardata/rgb/DisplayP3.xalter) color space or more. The P3 gamut is larger than and includes the sRGB gamut.

  `rec2020`  The user agent and the output device can support approximately the gamut specified by the [ITU-R Recommendation BT.2020](https://en.wikipedia.org/wiki/Rec._2020) color space or more. The REC. 2020 gamut is larger than and includes the P3 gamut.

  
Examples
--------


### HTML



```
<p>This is a test.</p>

```
### CSS



```
p {
  padding: 10px;
  border: solid;
}

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # color-gamut](https://w3c.github.io/csswg-drafts/mediaqueries/#color-gamut) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `color-gamut` | 58 | 79 | 110 | No | 45 | 10 | 58 | 58 | 110 | 43 | 10 | 7.0 |


See also
--------


* [color()](../color_value/color) function to specify colors in a defined colorspace.
* [@media](../@media) at-rule that is used to specify the color-gamut expression.
* [Using media queries](../media_queries/using_media_queries) to understand when and how to use a media query.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut>

hover
=====


The `hover` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test whether the user's *primary* input mechanism can hover over elements.


Syntax
------



The `hover` feature is specified as a keyword value chosen from the list below.

  `none`  The primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing input mechanism.

  `hover`  The primary input mechanism can conveniently hover over elements.

  
Examples
--------


### HTML



```
<a href="#">Try hovering over me!</a>

```
### CSS



```
/\* default hover effect \*/
a:hover {
  color: black;
  background: yellow;
}

@media (hover: hover) {
  /\* when hover is supported \*/
  a:hover {
    color: white;
    background: black;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # hover](https://w3c.github.io/csswg-drafts/mediaqueries/#hover) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `hover` | 38Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See [bug 441613](https://crbug.com/441613). | 12 | 64 | No | 28 | 9 | 38Before Chrome 41, the implementation was buggy and reported `(hover: none)` on non-touch-based computers with a mouse/trackpad. See [bug 441613](https://crbug.com/441613). | 50 | 64 | 28 | 9 | 5.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover>

inverted-colors
===============


The `inverted-colors` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test whether the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) or underlying OS is inverting colors.


Syntax
------



The `inverted-colors` feature is specified as a keyword value chosen from the list below.

  `none`  Colors are displayed normally.

  `inverted`  All pixels within the displayed area have been inverted.

  
Examples
--------


### HTML



```
<p>
  If you're using inverted colors, this text should be blue on white (the
  inverse of yellow on black). If you're not, it should be red on light gray.
</p>
<p>
  If the text is gray, your browser doesn't support the `inverted-colors` media
  feature.
</p>

```
### CSS



```
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # inverted](https://w3c.github.io/csswg-drafts/mediaqueries-5/#inverted) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `inverted-colors` | No | No | No | No | No | 9.1 | No | No | No | No | 10 | No |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors>

overflow-block
==============


The `overflow-block` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](../containing_block) along the block axis.


Syntax
------



The `overflow-block` feature is specified as a keyword value chosen from the list below.

  `none`  Content that overflows the block axis is not displayed.

  `scroll`  Content that overflows the block axis can be seen by scrolling to it.

  `optional-paged`  Content that overflows the block axis can be seen by scrolling to it, but page breaks can be manually triggered (such as via [`break-inside`](../break-inside), etc.) to cause the following content to display on the following page.

  `paged`  Content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page.

  
Examples
--------


### HTML



```
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>

```
### CSS



```
@media (overflow-block: scroll) {
  p {
    color: red;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # mf-overflow-block](https://w3c.github.io/csswg-drafts/mediaqueries/#mf-overflow-block) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-block` | 113 | 113 | 66 | No | No | No | 113 | 113 | 66 | No | No | No |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-block>

any-pointer
===========



The `any-pointer` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) tests whether the user has *any* pointing device (such as a mouse), and if so, how accurate it is.

  **Note:** If you want to test the accuracy of the *primary* pointing device, use [`pointer`](pointer) instead.

 

Syntax
------



The `any-pointer` feature is specified as a keyword value chosen from the list below.

  `none`  No pointing device is available.

  `coarse`  At least one input mechanism includes a pointing device of limited accuracy.

  `fine`  At least one input mechanism includes an accurate pointing device.

    **Note:** More than one value can match if the available devices have different characteristics, although `none` only matches when none of them are pointing devices.

 
Examples
--------


This example creates a small checkbox for users with at least one fine pointer and a large checkbox for users with at least one coarse pointer. The big checkbox takes precedence because it is declared after the small one.

### HTML



```
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>

```
### CSS



```
input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # any-input](https://w3c.github.io/csswg-drafts/mediaqueries/#any-input) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `any-pointer` | 41 | 12 | 64 | No | 28 | 9 | 41 | 41 | 64 | 28 | 9 | 4.0 |


See also
--------


* [The `pointer` media feature](pointer)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer>

device-aspect-ratio
===================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

  **Note:** To query for the aspect ratio of the viewport, developers should use the [`aspect-ratio`](aspect-ratio) media feature instead.

  The `device-aspect-ratio` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the width-to-height aspect ratio of an output device.



Syntax
------


The `device-aspect-ratio` feature is specified as a [`<ratio>`](../ratio). It is a range feature, meaning that you can also use the prefixed `min-device-aspect-ratio` and `max-device-aspect-ratio` variants to query minimum and maximum values, respectively.

Examples
--------


### Using min-device-aspect-ratio



```
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}

```
Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # device-aspect-ratio](https://w3c.github.io/csswg-drafts/mediaqueries/#device-aspect-ratio) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `device-aspect-ratio` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-aspect-ratio>

device-height
=============



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

  **Note:** To query for the height of the viewport, developers should use the [`height`](height) media feature instead.

  The `device-height` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the height of an output device's rendering surface.



Syntax
------


The `device-height` feature is specified as a [`<length>`](../length) value. It is a range feature, meaning that you can also use the prefixed `min-device-height` and `max-device-height` variants to query minimum and maximum values, respectively.

Examples
--------


### Applying a special stylesheet for devices that are shorter than 800 pixels



```
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://foo.bar.com/short-styles.css" />

```
Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # device-height](https://w3c.github.io/csswg-drafts/mediaqueries/#device-height) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `device-height` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-height>

device-width
============



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

  **Note:** To query for the width of the viewport, developers should use the [`width`](width) media feature instead.

  The `device-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the width of an output device's rendering surface.



Syntax
------


The `device-width` feature is specified as a [`<length>`](../length) value. It is a range feature, meaning that you can also use the prefixed `min-device-width` and `max-device-width` variants to query minimum and maximum values, respectively.

Examples
--------


### Applying a special stylesheet for devices that are narrower than 800 pixels



```
<link
 rel="stylesheet"
 media="screen and (max-device-width: 799px)"
 href="http://foo.bar.com/narrow-styles.css" />

```
Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # device-width](https://w3c.github.io/csswg-drafts/mediaqueries/#device-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `device-width` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width>

dynamic-range
=============



The `dynamic-range` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) and the output device.

  **Note:** Some devices have high dynamic range capabilities that are not always 'on' and need to be activated (sometimes programmatically, sometimes by the user, sometimes based on the content). This media feature does not test whether the dynamic range capability is active; it only tests whether the device is capable of high dynamic range visuals.

 

Syntax
------



The `dynamic-range` feature is specified as a keyword value chosen from the list below.

  `standard`  This value matches any visual device and excludes devices lacking visual capabilities. A user agent or an output device that matches `high` will also match the `standard` value.

  `high`  This value matches user agents and output devices that support high peak brightness, high contrast ratio, and color depth greater than 24 bit or 8 bit per color component of RGB. **Peak brightness** refers to how bright the brightest point a light-emitting device, such as an LCD screen, can produce. In the case of a light-reflective device, such as paper or e-ink, peak brightness refers to the point that at least absorbs light. **Contrast ratio** refers to the ratio of the luminance of the brightest color to that of the darkest color that the system is capable of producing. Currently, there is no precise way to measure peak brightness and contrast ratio, and the determination of what counts as high peak brightness and high contrast ratio depends on the user agent.

  
Examples
--------



```
@media (dynamic-range: standard) {
  p {
    color: red;
  }
}

@media (dynamic-range: high) {
  p {
    color: green;
  }
}

```
Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # dynamic-range](https://w3c.github.io/csswg-drafts/mediaqueries-5/#dynamic-range) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `dynamic-range` | 98 | 98 | 100 | No | 84 | 13.1 | 98 | 98 | 100 | 68 | 13.4 | 18.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range>

grid
====



The `grid` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test whether the output device uses a grid-based screen.

 Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.



Syntax
------


The `grid` feature is specified as a [`<mq-boolean>`](../media_queries/using_media_queries) value (`0` or `1`) representing whether or not the output device is grid-based.

Examples
--------


### HTML



```
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>

```
### CSS



```
:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # grid](https://w3c.github.io/csswg-drafts/mediaqueries/#grid) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `grid` | 1 | 12 | 2 | 10 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/grid>

height
======


The `height` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to apply styles based on the height of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) (or the page box, for [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media)).


Syntax
------


The `height` feature is specified as a [`<length>`](../length) value representing the viewport height. It is a range feature, meaning that you can also use the prefixed `min-height` and `max-height` variants to query minimum and maximum values, respectively.

Examples
--------


### HTML



```
<div>Watch this element as you resize your viewport's height.</div>

```
### CSS



```
/\* Exact height \*/
@media (height: 360px) {
  div {
    color: red;
  }
}

/\* Minimum height \*/
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/\* Maximum height \*/
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # height](https://w3c.github.io/csswg-drafts/mediaqueries/#height) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `height` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/height>

monochrome
==========


The `monochrome` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the number of bits per pixel in the monochrome frame buffer of the output device.


Syntax
------


The `monochrome` feature is specified as an [`<integer>`](../integer) representing the number of bits per pixel in the monochrome frame buffer. If the device is not a monochrome device, the value is zero. It is a range feature, meaning that you can also use the prefixed `min-monochrome` and `max-monochrome` variants to query minimum and maximum values, respectively.

Examples
--------


### HTML



```
<p class="mono">Your device supports monochrome pixels!</p>
<p class="no-mono">Your device doesn't support monochrome pixels.</p>

```
### CSS



```
p {
  display: none;
}

/\* Any monochrome device \*/
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/\* Any non-monochrome device \*/
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # monochrome](https://w3c.github.io/csswg-drafts/mediaqueries/#monochrome) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `monochrome` | 1 | 79 | 2 | No | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/monochrome>

orientation
===========



The `orientation` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the orientation of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) (or the page box, for [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media)).

  **Note:** This feature does not correspond to *device* orientation. Opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

 

Syntax
------


The `orientation` feature is specified as a keyword value chosen from the list below.

### Keyword values


 `portrait`  The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.

  `landscape`  The viewport is in a landscape orientation, i.e., the width is greater than the height.

  Examples
--------


### Portrait orientation



In this example we have three boxes in the HTML, and use the `orientation` media feature to switch between a row layout (in landscape) and a column layout (in portrait).

 The example output is embedded in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) whose height is greater than its width, so the boxes get a column layout.

 #### HTML

 
```
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

```
 #### CSS

 
```
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

```
 #### Result



### Landscape orientation



This example has exactly the same code as the previous example: it has three boxes in the HTML, and uses the `orientation` media feature to switch between a row layout (in landscape) and a column layout (in portrait).

 However, in this example, the example output is embedded in an [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) whose height is less than its width, so the boxes get a row layout.

 #### HTML

 
```
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

```
 #### CSS

 
```
body {
  display: flex;
}

div {
  background: yellow;
  width: 200px;
  height: 200px;
  margin: 0.5rem;
  padding: 0.5rem;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

```


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # orientation](https://w3c.github.io/csswg-drafts/mediaqueries/#orientation) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `orientation` | 3 | 12 | 2 | 9 | 10.6 | 5 | ≤37 | 18 | 4 | 11 | 4.2 | 1.0 |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation>

pointer
=======



The `pointer` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) tests whether the user has a pointing device (such as a mouse), and if so, how accurate the *primary* pointing device is.

  **Note:** If you want to test the accuracy of *any* pointing device, use [`any-pointer`](any-pointer) instead.

 

Syntax
------



The `pointer` feature is specified as a keyword value chosen from the list below.

  `none`  The primary input mechanism does not include a pointing device.

  `coarse`  The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.

  `fine`  The primary input mechanism includes an accurate pointing device, such as a mouse.

  
Examples
--------


This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.

### HTML



```
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>

```
### CSS



```
input[type="checkbox"] {
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # pointer](https://w3c.github.io/csswg-drafts/mediaqueries/#pointer) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `pointer` | 41 | 12 | 64 | No | 28 | 9 | 41 | 50 | 64 | 28 | 9 | 5.0 |


See also
--------


* [The `any-pointer` media feature](any-pointer)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer>

scripting
=========


The `scripting` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test whether scripting (such as JavaScript) is available.


Syntax
------



The `scripting` feature is specified as a keyword value chosen from the list below.

  `none`  Scripting is completely unavailable on the current document.

  `initial-only`  Scripting is enabled during the initial page load, but not afterwards.

  `enabled`  Scripting is supported and active on the current document.

  
Examples
--------


### HTML



```
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">
  Your scripting is only enabled during the initial page load. Weird.
</p>
<p class="script-enabled">You have scripting enabled! :-)</p>

```
### CSS



```
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # scripting](https://w3c.github.io/csswg-drafts/mediaqueries-5/#scripting) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scripting` | NoSee [bug 489957](https://crbug.com/489957). | NoSee [bug 489957](https://crbug.com/489957). | 113 | No | No | No | NoSee [bug 489957](https://crbug.com/489957). | NoSee [bug 489957](https://crbug.com/489957). | 113 | No | No | NoSee [bug 489957](https://crbug.com/489957). |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting>

update
======



The `update` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test how frequently (if at all) the output device is able to modify the appearance of content once rendered.

 
```
@media (update: < none | slow | fast >) {
  /\* styles to apply if the update frequency of the output device is a match \*/
}

```


Syntax
------



The `update` feature is specified as a single keyword value chosen from the list below.

  `none`  Once it has been rendered, the layout can no longer be updated. Example: documents printed on paper.

  `slow`  The layout may change dynamically according to the usual rules of CSS, but the output device is not able to render or display changes quickly enough for them to be perceived as a smooth animation. Examples: e-book readers or severely underpowered devices.

  `fast`  The layout may change dynamically according to the usual rules of CSS, and the output device is not unusually constrained in speed, so regularly-updating things like [CSS Animations](../css_animations) can be used. Example: computer screens.

  
Examples
--------


### HTML



```
<p>
  If this text animates for you, your browser supports `update` and you are
  using a fast-updating device.
</p>

```
### CSS



```
@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # update](https://w3c.github.io/csswg-drafts/mediaqueries/#update) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `update-frequency` | 113 | 113 | 102 | No | No | No | 113 | 113 | 102 | No | No | No |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/update-frequency>

width
=====


The `width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the width of the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) (or the page box, for [paged media](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media)).


Syntax
------


The `width` feature is specified as a [`<length>`](../length) value representing the viewport width. It is a range feature, meaning that you can also use the prefixed `min-width` and `max-width` variants to query minimum and maximum values, respectively.

Examples
--------


### HTML



```
<div>Watch this element as you resize your viewport's width.</div>

```
### CSS



```
/\* Exact width \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* Minimum width \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* Maximum width \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # width](https://w3c.github.io/csswg-drafts/mediaqueries/#width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `width` | 1 | 12 | 2 | 9 | 10 | 3 | ≤37 | 18 | 4 | 10.1 | 1 | 1.0 |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width>

overflow-inline
===============


The `overflow-inline` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test how the output device handles content that overflows the initial [containing block](../containing_block) along the inline axis.


Syntax
------



The `overflow-inline` feature is specified as a keyword value chosen from the list below.

  `none`  Content that overflows the inline axis is not displayed.

  `scroll`  Content that overflows the inline axis can be seen by scrolling to it.

  
Examples
--------


### HTML



```
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>

```
### CSS



```
p {
  white-space: nowrap;
}

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 4 # mf-overflow-inline](https://w3c.github.io/csswg-drafts/mediaqueries/#mf-overflow-inline) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `overflow-inline` | 113 | 113 | 66 | No | No | No | 113 | 113 | 66 | No | No | No |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/overflow-inline>

prefers-contrast
================


The `prefers-contrast` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.


Syntax
------


 `no-preference`  Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the Boolean context.

  `more`  Indicates that user has notified the system that they prefer an interface that has a higher level of contrast.

  `less`  Indicates that user has notified the system that they prefer an interface that has a lower level of contrast.

  `custom`  Indicates that user has notified the system for using a specific set of colors, and the contrast implied by these colors matches neither `more` nor `less`. This value will match the color palette specified by users of [`forced-colors: active`](forced-colors).

  User preferences
----------------


Various operating systems do support such preferences and user agents are likely to rely on the settings provided by the operating system.

Examples
--------


This example has an annoying low contrast by default.

### HTML



```
<div class="contrast">low contrast box</div>

```
### CSS



```
.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

```
### Result


Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # prefers-contrast](https://w3c.github.io/csswg-drafts/mediaqueries-5/#prefers-contrast) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `prefers-contrast` | 96 | 96 | 101 | No | 82 | 14.1 | 96 | 96 | 101 | No | 14.5 | 17.0 |


See also
--------


* CSS <forced-colors> media query


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast>

video-dynamic-range
===================



The `video-dynamic-range` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [media feature](../@media#media_features) can be used to test the combination of brightness, contrast ratio, and color depth that are supported by the video plane of the [user agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent) and the output device.

 Some user agents, including many TVs, render video and graphics in two separate planes (bi-plane) with distinct screen characteristics. The `video-dynamic-range` feature is used to test the characteristics in the video plane.



Syntax
------



The `video-dynamic-range` feature is specified as a keyword value chosen from the list below.

  `standard`  This value matches any visual device and excludes devices lacking visual capabilities. A user agent or an output device that matches `high` will also match the `standard` value.

  `high`  This value matches user agents and output devices that support high peak brightness, high contrast ratio, and color depth greater than 24 bit or 8 bit per color component of RGB. **Peak brightness** refers to how bright the brightest point a light-emitting device, such as an LCD screen, can produce. In the case of a light-reflective device, such as paper or e-ink, peak brightness refers to the point that at least absorbs light. **Contrast ratio** refers to the ratio of the luminance of the brightest color to that of the darkest color that the system is capable of producing. Currently, there is no precise way to measure peak brightness and contrast ratio, and the determination of what counts as high peak brightness and high contrast ratio depends on the user agent.

  
Specifications
--------------




| Specification |
| --- |
| [Media Queries Level 5 # video-dynamic-range](https://w3c.github.io/csswg-drafts/mediaqueries-5/#video-dynamic-range) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `video-dynamic-range` | No | No | 100 | No | No | No | No | No | 100 | No | No | No |


See also
--------


* [Using Media Queries](../media_queries/using_media_queries)
* [@media](../@media)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@media/video-dynamic-range>

Guide to scroll anchoring
=========================



As a user of the web, you are probably familiar with the problem that scroll anchoring solves. You browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. This has happened because large images or some other elements have just loaded further up in the content.

 Scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.



How does it work?
-----------------


Scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. This means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how *far* they have moved through the document.

How do I turn on scroll anchoring?
----------------------------------


You don't! The feature is enabled by default in supporting browsers. In most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone.

What if I need to debug it?
---------------------------



If your page is not behaving well with scroll anchoring enabled, it is probably because some `scroll` event listener is not handling well the extra scrolling to compensate for the anchor node movement.

 You can check whether disabling scroll anchoring fixes the issue in Firefox by changing `layout.css.scroll-anchoring.enabled` to `false` in `about:config`.

 If it does, you can check what node is Firefox using as the anchor using the `layout.css.scroll-anchoring.highlight` switch. That will show a purple overlay on top of the anchor node.

 If one node doesn't seem appropriate to be an anchor, you can exclude it using [`overflow-anchor`](../overflow-anchor), as described below.


What if I need to disable it?
-----------------------------



The specification provides a new property, [`overflow-anchor`](../overflow-anchor), which can be used to disable scroll anchoring on all or part of the document. It's essentially a way to opt out of the new behavior.

 The only possible values are `auto` or `none`:

 * `auto` is the initial value; as long as the user has a supported browser the scroll anchoring behavior will happen, and they should see fewer content jumps.
* `none` means that you have explicitly opted the document, or part of the document, out of scroll anchoring.

 To opt out the entire document, you can set it on the [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) element:

 
```
body {
  overflow-anchor: none;
}

```
 To opt out a certain part of the document use `overflow-anchor: none` on its container element:

 
```
.container {
  overflow-anchor: none;
}

```
  **Note:** The specification details that once scroll anchoring has been opted out of, you cannot opt back into it from a child element. For example, if you opt out for the entire document, you will not be able to set `overflow-anchor: auto` elsewhere in the document to turn it back on for a subsection.

 
### Suppression triggers



The specification also details some *suppression triggers*, which will disable scroll anchoring in places where it might be problematic. If any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed.

 These suppression triggers are changes to the computed value of any of the following properties:

 * [`top`](../top), [`left`](../left), [`right`](../right), or [`bottom`](../bottom)
* [`margin`](../margin) or [`padding`](../padding)
* Any [`width`](../width) or [`height`](../height)-related properties
* [`transform`](../transform) and the individual transform properties [`translate`](../translate), [`scale`](../scale), and [`rotate`](../rotate)

 Additionally, [`position`](../position) changes anywhere inside the scrolling box also disable scroll anchoring.

  **Note:** In [Firefox bug 1584285](https://bugzil.la/1584285) the `layout.css.scroll-anchoring.suppressions.enabled` flag was added to Firefox Nightly in order to allow the disabling of these triggers.

 
Further reading
---------------


* [Explainer document on the WICG site](https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md)
* [Scroll anchoring for web developers on the Chromium blog](https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html)
* [Implement a pin-to-bottom scrolling element using scroll anchoring](https://blog.eqrion.net/pin-to-bottom/)
Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `Guide_to_scroll_anchoring` | 56 | 79 | 66 | No | 43 | No | 56 | 56 | No | 43 | No | 6.0 |


### Compatibility notes


If you need to test whether scroll anchoring is available in a browser, use [Feature Queries](../@supports) to test support for the `overflow-anchor` property.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring>

Basic shapes
============



CSS Shapes can be defined using the [`<basic-shape>`](../basic-shape) type, and in this guide I'll explain how each of the different values accepted by this type work. They range from simple circles to complex polygons.

 Before looking at shapes, it is worth understanding two pieces of information that go together to make these shapes possible:

 * The `<basic-shape>` type
* The reference box



The <basic-shape> type
----------------------



The `<basic-shape>` type is used as the value for all of our basic shapes. This type uses Functional Notation: the type of shape is followed by brackets, inside of which are additional values used to describe the shape.

 The arguments which are accepted vary depending on the shape that you are creating. We will cover these in the examples below.


The reference box
-----------------



Understanding the reference box used by CSS Shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from Box Values](from_box_values), which directly uses the reference box to create the shape.

 The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using `shape-outside: circle(50%)`. The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a basic shape, the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.

  ![An imaged clipped into a circle floated left, with a paragraph of text. The left edge of the text is circular abutting the clipped shape on the outside of the margin with the margin following the shape clipping.] 

 You can add the various box values after your basic shape definition. Therefore the default behavior is as if you have defined.

 
```
.shape {
  shape-outside: circle(50%) margin-box;
}

```
 You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.

 
```
.shape {
  shape-outside: circle(50%) border-box;
}

```
 What is worth noting is that the `margin-box` will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.

 For an excellent description of references boxes as they apply to CSS Shapes, see [Understanding Reference Boxes for CSS Shapes](http://razvancaliman.com/writing/css-shapes-reference-boxes/).


inset()
-------



The `inset()` type defines a rectangle, which may not seem very useful as floating an item will give you a rectangular shape around it. However the `inset()` types enables the definition of offsets, thus pulling the content in over the shape.

 Therefore `inset()` takes four values for the top, right, bottom and left values plus a final value for `border-radius`. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.

 
```
.shape {
  float: left;
  shape-outside: inset(20px 10px 20px 10px round 10px);
}

```
 Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:

 
```
.shape {
  float: left;
  shape-outside: inset(20px 10px round 10px);
}

```
 In the example below we have an `inset()` shape used to pull content over the floated element. Change the offset values to see how the shape changes.


 You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from `margin-box` to `border-box`, `padding-box` or `content-box` to see how the reference box used as the starting point before offsets are calculated changes.



circle()
--------



The `circle()` value for `shape-outside` can accept two possible arguments. The first is the `shape-radius`.

 Both `circle()` and `ellipse()` values for `shape-outside` are specified as accepting this argument of `<shape-radius>`. This argument can be a length or percentage but can also be one of the keywords `closest-side` or `farthest-side`.

 The keyword `closest-side` uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

 The keyword `farthest-side` uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

 The second argument is a `position`. If omitted this will be set to `center`. However you can use any valid position here to indicate the position of the center of the circle.

 Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword **at** followed by a position value.

 In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.


 In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`.

 As an additional example, if you use the keywords `top left` for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.



### The shape will be clipped by the margin box



When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the center of our circle towards the content by setting the position to 60%. The center of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.

 
```
img {
  float: left;
  shape-outside: circle(50% at 60%);
}

```
  ![The circle shape is clipped by the margin box](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes/shapes-circle-clipped.png) 


ellipse()
---------



An ellipse is essentially a squashed circle and so `ellipse()` acts in a very similar way to `circle()` except that we have to specify two radii x and y in that order.

 These may then be followed by position values as with `circle()` to move the center of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.


 The keyword values of `closest-side` and `farthest-side` are useful to create a quick ellipse based on the size of the floated element reference box.



polygon()
---------



The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a `polygon()`. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.

 In the example below I have created a shape for text to follow using the `polygon()`, you can change any of the values to see how the shape is changed.


 You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.

  ![The polygon basic shape, highlighted with the Shapes Inspector.] 

 Another useful resource is [Clippy](https://bennettfeely.com/clippy/) - a tool for creating shapes for `clip-path`, as the values for Basic Shapes are the same as those used for `clip-path`.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes>

ray()
=====



**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `ray()` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [function](css_functions) defines a line segment that begins from an [offset starting position](https://drafts.fxtf.org/motion/#offset-starting-position) and extends in the direction of the specified angle. The line segment is referred to as "ray". The length of a ray can be constrained by specifying a size and using the `contain` keyword.

 The `ray()` function is used in [CSS motion path](css_motion_path). It is used as a value for the [`offset-path`](offset-path) property to define the path that an animated element can follow. The element is initially positioned by moving the element's [`offset-anchor`](offset-anchor) point to the path's offset starting position. The default offset starting position of a ray is at the top-left corner of the element box.



Syntax
------




```
ray() = ray( <angle> && <ray-size>? && contain? )
<ray-size> = closest-side | closest-corner | farthest-side | farthest-corner | sides

```
 
```
/\* property: ray(expression) \*/
/\* all parameters specified \*/
offset-path: ray(50deg closest-corner contain);

/\* two parameters specified, order does not matter \*/
offset-path: ray(contain 200deg);

/\* only one parameter specified \*/
offset-path: ray(45deg);

```

### Parameters



 [`<angle>`](angle)  Specifies the direction in which the line segment extends from the offset starting position. The angle `0deg` lies on the y-axis pointing up, and positive angles increase in the clockwise direction.

  `<ray-size>`  Specifies the length of the line segment, which is the distance between [`offset-distance`](offset-distance)`: 0%` and `offset-distance: 100%`. This is an optional parameter and accepts one of the following keyword values:

 `closest-side`: Specifies the length of the line segment as the distance between the ray's starting point and the closest side of the [containing block](containing_block) of the element. This is the default value used when no `<size>` is specified. If the starting point lies on the containing block's boundary, the length of the line segment is zero. If the starting point is outside the containing block, the edge of the containing block is considered to extend to infinity.

 `closest-corner`: Specifies the length of the line segment as the distance between the ray's starting point and the closest corner in the element's containing block. If the starting point lies on a corner of the containing block, the length of the line segment is zero.

 `farthest-side`: Specifies the length of the line segment as the distance between the ray's starting point and the farthest side of the containing block of the element. If the starting point is outside the containing block, the edge of the containing block is considered to extend to infinity.

 `farthest-corner`: Specifies the length of the line segment as the distance between the ray's starting point and the farthest corner in the element's containing block.

 `sides`: Specifies the length of the line segment as the distance between the ray's starting point and the point where the line segment intersects the containing block's boundary. If the starting point is on or outside the containing block's boundary, the length of the line segment is zero.

    **Note:** While the size parameter is optional in the specification, some browsers implement `ray()` with a required size value. Including the default `closest-side` is the equivalent of omitting the size, but has better support.

   `contain`  Reduces the length of the line segment so that the element stays within the containing block even at `offset-distance: 100%`. Specifically, the segment's length is reduced to a maximum of half the width or half the height of the element's border box, whichever is greater.

  
Examples
--------


### Defining an angle for the ray



This example shows how an element's anchor point gets positioned initially at a ray's starting point and how the element gets oriented at the specified ray angle.

 #### CSS

 
```
.box1 {
  offset-path: ray(0deg closest-side);
}

.box2 {
  offset-anchor: 0 0;
  offset-path: ray(0deg closest-side);
}

.box3 {
  offset-anchor: 0 0;
  offset-path: ray(150deg closest-side);
}

.box4 {
  offset-anchor: 0 0;
  offset-rotate: 0deg;
  offset-path: ray(150deg closest-side);
}

```
 Similar to [`transform-origin`](transform-origin), the default anchor point is at the center of an element. This anchor point can be modified using the [`offset-anchor`](offset-distance) property. The default offset starting position of a path at is the top-left corner of the element box.

 In this example, various `offset-anchor` and `offset-path: ray()` values are applied to a box and results are displayed side-by-side for comparison. One box border is highlighted to demonstrate different ray starting points and box orientations. After a box is positioned at the ray's starting point, it is oriented in the direction of the specified ray angle.

 #### Result


 * `box1` gets initially positioned such that its anchor point (at the center) is at the offset starting position (top-left corner). `box1` is also rotated to orient it towards the `0deg` angle of the ray. This will now be the starting point of the path. You can observe the change in position and rotation of the box by comparing it to the faded `original` box in the background.
* The anchor point of `box2` is changed to the top-left corner (`0px 0px`) using the `anchor-position` property, and as a result, the element's anchor point and the offset starting position coincide. The ray angle is applied to the element at this starting point, the top-left corner. The box is rotated to match the `0deg` angle along y-axis and pointing up.
* With other settings the same as in `box2`, a greater positive angle of `150deg` is applied on `box3`. Starting from the top-left corner, the box is rotated in a clockwise direction to reach the specified angle.
* `box3` and `box4` have the same `offset-path` and `offset-anchor` values. In `box4`, a fixed rotation of `offset-rotate: 0deg` is applied to the element. As a result, the element will remain rotated at this specific angle all along the ray's path and prevents the element from rotating in the direction of the path. Notice in `box4` that the ray path is at `150deg`, but the box orientation will not change along the path.


### Animating an element along the ray



#### CSS

 
```
body {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 40px;
  margin-left: 40px;
}

.container {
   transform-style: preserve-3d;
   width: 150px;
   height: 100px;
   border: 2px dotted green;
}

.shape {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 5px;
  text-align: center;
  line-height: 40px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;
}

.shape2 {
  offset-path: ray(120deg sides contain);
}

.shape3 {
  offset-rotate: 0deg;
  offset-path: ray(120deg sides contain);
}

.shape4 {
  offset-path: ray(120deg closest-corner);
}

.shape5 {
  offset-path: ray(120deg farthest-corner);
}

@keyframes move {
  0%, 20% {
    offset-distance: 0%;
  }
  80%, 100% {
    offset-distance: 100%;
  }

```
 #### HTML

 
```
<div>
  <div class="container">
    <div class=" shape shape1">&mdash;</div>
  </div>
</div>

<pre>/* no offset-path applied */</pre>

<div>
  <div class="container">
    <div class="shape shape2">&mdash;</div>
  </div>
</div>

<pre>offset-path: ray(120deg sides contain);</pre>

<div>
  <div class="container">
    <div class="shape shape3">&mdash;</div>
  </div>
</div>

<pre>offset-path: ray(120deg sides contain);
offset-rotate: 0deg;</pre>

<div>
  <div class="container">
    <div class="shape shape4">&mdash;</div>
  </div>
</div>

<pre>offset-path: ray(120deg closest-corner)</pre>

<div>
  <div class="container">
    <div class="shape shape5">&mdash;</div>
  </div>
</div>

<pre>offset-path: ray(120deg farthest-corner)</pre>
</div>

```
 #### Result


 The first shape is shown as a reference for its position and orientation. A ray motion path is applied on the other shapes. In the first two `offset-path` samples, notice the orientation of the shape with and without `offset-rotate`. The last two shapes show the impact of corner size values. The `closest-corner` value creates a `0px` long offset path because the shape is already in the corner. The `farthest-corner` value creates the longest offset-path, going from the top-left corner of the container to the bottom-right corner.


Specifications
--------------



**No specification found**No specification data found for `css.types.ray`.  
[Check for problems with this page](#on-github) or contribute a missing `spec_url` to [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). Also make sure the specification is included in [w3c/browser-specs](https://github.com/w3c/browser-specs).



Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `ray` | 64 | 79 | 112`<ray-size>` is optional with the default value `closest-side`.72 | No | 51 | preview | No | 64 | No | No | No | No |


See also
--------


* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/ray>

CSS Overflow
============


The **CSS Overflow** module contains the features of CSS relating to scrollable overflow handling in visual media. In CSS overflow happens when the content of a box extends past one or more of the box's edges.


Ink overflow and scrollable overflow
------------------------------------



There are two types of overflow that you might encounter in CSS. The first is described as **ink overflow**. This is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc.

 The overflow that we sometimes need to manage in CSS is described as **scrollable overflow**. This is the content appearing outside of the box for which scrolling mechanisms need to be provided. The overflow properties are how we can control what happens when content overflows a box.


Basic example
-------------


The following interactive example shows how changing the value of the `overflow` property, changes how the overflow of a fixed height box is dealt with.

Try it
------


Reference
---------


### CSS properties


* [`overflow`](overflow)
* [`overflow-block`](overflow-block)
* [`overflow-inline`](overflow-inline)
* [`overflow-x`](overflow-x)
* [`overflow-y`](overflow-y)
* [`text-overflow`](text-overflow)
* `block-overflow`  Experimental
* `line-clamp`  Experimental
* `max-lines`  Experimental
* `continue`  Experimental
### Non-standard properties


* [`-webkit-line-clamp`](-webkit-line-clamp)  Non-standard
Specifications
--------------




| Specification |
| --- |
| [CSS Overflow Module Level 3 # propdef-overflow](https://drafts.csswg.org/css-overflow/#propdef-overflow) |


See also
--------


* Properties for controlling the look of scrollbars [`scrollbar-width`](scrollbar-width) and [`scrollbar-color`](scrollbar-color)
* How to [Debug scrollable overflow](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/debug_scrollable_overflow/index.html).


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Overflow>

CSS Shapes
==========


**CSS Shapes** describe geometric shapes for use in CSS. For the [Level 1 specification](https://drafts.csswg.org/css-shapes/), CSS Shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box.


Basic example
-------------



The example below shows an image that has been floated left, and the `shape-outside` property applied with a value of `circle(50%)`. This creates a circle shape, and the content wrapping the float now wraps around that shape. This changes the length of the wrapping text's line boxes.



Reference
---------


### Properties


* [`shape-image-threshold`](shape-image-threshold)
* [`shape-margin`](shape-margin)
* [`shape-outside`](shape-outside)
### Data types


* [`<basic-shape>`](basic-shape)
Guides
------


* [Overview of shapes](css_shapes/overview_of_css_shapes)
* [Shapes from box values](css_shapes/from_box_values)
* [Basic shapes](css_shapes/basic_shapes)
* [Shapes from images](css_shapes/shapes_from_images)
Specifications
--------------




| Specification |
| --- |
| [CSS Shapes Module Level 1](https://drafts.csswg.org/css-shapes/)  |


See also
--------


* [CSS Shapes resources](https://codepen.io/KristopherVanSant/post/css-shapes-resources)
* [CSS Shapes 101](https://alistapart.com/article/css-shapes-101/)
* [Creating non-rectangular layouts with CSS Shapes](https://www.sarasoueidan.com/blog/css-shapes/)
* [How to use CSS Shapes in your web design](https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498)
* [How to get started with CSS Shapes](https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/)
* [What I learned in one weekend with CSS Shapes](https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5)
* [CSS vs. SVG: Shapes and arbitrarily-shaped UI components](https://blog.adobe.com/en/2015/09/01/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components)
* [Edit shape paths in CSS — Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/edit_css_shapes/index.html)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes>

-moz-image-rect
===============



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


**Experimental:** **This is an [experimental technology](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete#experimental)**  
Check the [Browser compatibility table](#browser_compatibility) carefully before using this in production.

 The `-moz-image-rect` value for [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`background-image`](background-image) lets you use a portion of a larger image as a background.



Syntax
------



```
-moz-image-rect(url(), top, right, bottom, left);

```
### Values


 [`url()`](url)  The URI of the image from which to take the sub-image.

  `top`  The top edge, specified as an [`<integer>`](integer) or [`<percentage>`](percentage), of the sub-image within the specified image.

  `right`  The right edge, specified as an [`<integer>`](integer) or [`<percentage>`](percentage), of the sub-image within the specified image.

  `bottom`  The bottom edge, specified as an [`<integer>`](integer) or [`<percentage>`](percentage), of the sub-image within the specified image.

  `left`  The left edge, specified as an [`<integer>`](integer) or [`<percentage>`](percentage), of the sub-image within the specified image.

  Description
-----------



This property allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.

 This works very similarly to the [`-moz-image-region`](-moz-image-region) property, which is used with the [`list-style-image`](list-style-image) property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.

 The syntax for the rectangle is similar to the [`rect()`](shape#syntax) function generating a [`<shape>`](shape) CSS type. All four values are relative to the upper left corner of the image.


Examples
--------


This example loads an image and uses it in four segments to draw the Firefox logo in four [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) blocks. Clicking on their container causes the four segments to rotate around by swapping the [`background-image`](background-image) property values among the four [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) blocks.

### CSS



The CSS defines one container style, then the styles for the four boxes that comprise the complete image.

 The container looks like this:

 
```
#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}

```
 Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.

 
```
#box1 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}

```
 This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file `firefox.jpg`.

 
```
#box2 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}

```
 This defines the top-right corner of the image.

 The other corners follow a similar pattern:

 
```
#box3 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
#box4 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}

```

### HTML



The HTML is quite simple:

 
```
<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Top left</div>
  <div id="box2" style="left:133px;top:0px;">Top right</div>
  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>

```
 This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) block whose primary purpose is to receive click events and dispatch them to our JavaScript code.


### The JavaScript code



This code handles the click event when the container receives a mouse click.

 
```
function rotate() {
  let prevStyle = window
    .getComputedStyle(document.getElementById("box4"), null)
    .getPropertyValue("background-image");

  // Now that we've saved the last one, start rotating
  for (let i = 1; i <= 4; i++) {
    const curId = `box${i}`;

    // Shift the background images
    const curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}

```
 This uses [`window.getComputedStyle()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By copying the values of the [`background-image`](background-image) property from one element to the next with each mouse click, we achieve the desired effect.


### What it looks like


Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-image-rect` | No | No | 4 | No | No | NoSee [WebKit bug 32177](https://webkit.org/b/32177). | No | No | 4 | No | NoSee [WebKit bug 32177](https://webkit.org/b/32177). | No |


See also
--------


* [Mozilla CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions)
* [CSS Backgrounds and Borders module](css_backgrounds_and_borders)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect>

CSS Scroll Snap
===============


**CSS Scroll Snap** is a module of CSS that contains features to control panning and scrolling behavior with snap positions.


Key concepts
------------



CSS scroll snap enables snapping content as the user scrolls overflowing content within a [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container). Scroll snap introduces scroll snap positions, which enforce the scroll positions that a scroll container's [scrollport](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container) may end at after a scrolling operation has completed.

 To enable scroll snapping, the scrolling behavior is defined on the scroll container. The container's [`scroll-snap-type`](scroll-snap-type) property defines whether the scrollable viewport can be snapped to, the axis upon which the snapping occurs, and whether snapping is required or optional. To enable scrolling, the container should have a defined size and [`overflow`](overflow) must be enabled. There are optional [`scroll-padding`](scroll-padding) properties that can be set on the scroll container to create a snapping offset.

 The [`scroll-snap-align`](scroll-snap-align) property is set on every child of the scroll container, defining each child's snap position or lack thereof. The [`scroll-snap-stop`](scroll-snap-stop) property enables requiring that child is snapped to during scrolling and not passed over. There are several [`scroll-margin`](scroll-margin) properties that can be set on the snapped-to child elements to create an outset from the defined box.


Reference
---------


### Properties on containers


* [`scroll-snap-type`](scroll-snap-type)
* [`scroll-padding`](scroll-padding)
	+ [`scroll-padding-top`](scroll-padding-top)
	+ [`scroll-padding-right`](scroll-padding-right)
	+ [`scroll-padding-bottom`](scroll-padding-bottom)
	+ [`scroll-padding-left`](scroll-padding-left)
	+ [`scroll-padding-inline`](scroll-padding-inline)
	+ [`scroll-padding-inline-start`](scroll-padding-inline-start)
	+ [`scroll-padding-inline-end`](scroll-padding-inline-end)
	+ [`scroll-padding-block`](scroll-padding-block)
	+ [`scroll-padding-block-start`](scroll-padding-block-start)
	+ [`scroll-padding-block-end`](scroll-padding-block-end)
### Properties on children


* [`scroll-snap-align`](scroll-snap-align)
* [`scroll-margin`](scroll-margin)
	+ [`scroll-margin-top`](scroll-margin-top)
	+ [`scroll-margin-right`](scroll-margin-right)
	+ [`scroll-margin-bottom`](scroll-margin-bottom)
	+ [`scroll-margin-left`](scroll-margin-left)
	+ [`scroll-margin-inline`](scroll-margin-inline)
	+ [`scroll-margin-inline-start`](scroll-margin-inline-start)
	+ [`scroll-margin-inline-end`](scroll-margin-inline-end)
	+ [`scroll-margin-block`](scroll-margin-block)
	+ [`scroll-margin-block-start`](scroll-margin-block-start)
	+ [`scroll-margin-block-end`](scroll-margin-block-end)
* [`scroll-snap-stop`](scroll-snap-stop)
### Glossary terms


* [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container)
* [scrollport](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container)
Guides
------


* [Basic concepts of CSS Scroll Snap](css_scroll_snap/basic_concepts)
Specifications
--------------




| Specification |
| --- |
| [CSS Scroll Snap Module Level 1](https://drafts.csswg.org/css-scroll-snap/)  |


See also
--------


* [Well-controlled scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
* [Practical CSS scroll snapping/](https://css-tricks.com/practical-css-scroll-snapping/)
* [CSS Scroll Snap](https://12daysofweb.dev/2022/css-scroll-snap/)
* [Scroll snap examples on Codepen](https://codepen.io/collection/KpqBGW)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap>

::-webkit-scrollbar
===================



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `::-webkit-scrollbar` CSS pseudo-element affects the style of an element's scrollbar when it has `overflow:scroll;` set.

  **Note:** If `overflow:scroll;` is not set, no scrollbar is displayed.

   **Note:** `::-webkit-scrollbar` is only available in [Blink](https://www.chromium.org/blink/)- and [WebKit](https://webkit.org)-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and [others](https://en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based)). A standardized method of styling scrollbars is available with [`scrollbar-color`](scrollbar-color) and [`scrollbar-width`](scrollbar-width), but is currently only supported in Firefox.

 

CSS Scrollbar Selectors
-----------------------



You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers:

 * `::-webkit-scrollbar` — the entire scrollbar.
* `::-webkit-scrollbar-button` — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
* `::-webkit-scrollbar:horizontal{}` — the horizontal scrollbar.
* `::-webkit-scrollbar-thumb` — the draggable scrolling handle.
* `::-webkit-scrollbar-track` — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
* `::-webkit-scrollbar-track-piece` — the part of the track (progress bar) not covered by the handle.
* `::-webkit-scrollbar:vertical{}` — the vertical scrollbar.
* `::-webkit-scrollbar-corner` — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
* `::-webkit-resizer` — the draggable resizing handle that appears at the bottom corner of some elements.


Examples
--------


### CSS



```
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/\* Demonstrate a "mostly customized" scrollbar
 \* (won't be visible otherwise if width/height is specified) \*/
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /\* or add it to the track \*/
}

/\* Add a thumb \*/
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}

```
### HTML



```
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
  And pretty tall<br />
  thing with weird scrollbars.<br />
  Who thought scrollbars could be made weird?
</div>

```
### Result


Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3.2 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3–13 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3–13 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3–13 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3–13 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3–13 | 1.0 |




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `::-webkit-scrollbar` | 2 | 79 | NoSee [bug 1432935](https://bugzil.la/1432935). | No | 15 | 4 | ≤37 | 18 | NoSee [bug 1432935](https://bugzil.la/1432935). | 14 | 3From Safari 13, only `display: none` works with this pseudo-element. Other styles have no effect. | 1.0 |

### css.selectors.-webkit-scrollbar


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.selectors.-webkit-scrollbar-button


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.selectors.-webkit-scrollbar-thumb


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.selectors.-webkit-scrollbar-track


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.selectors.-webkit-scrollbar-track-piece


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.selectors.-webkit-scrollbar-corner


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


### css.selectors.-webkit-resizer


BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


See also
--------


* WebKit blog on [Styling Scrollbars](https://webkit.org/blog/363/styling-scrollbars/)
* [`scrollbar-width`](scrollbar-width)
* [`scrollbar-color`](scrollbar-color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar>

-webkit-text-fill-color
=======================


The `-webkit-text-fill-color` CSS property specifies the fill [color](color_value) of characters of text. If this property is not set, the value of the [`color`](color) property is used.


Syntax
------



```
/\* <color> values \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100 200 0);

/\* Global values \*/
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: revert;
-webkit-text-fill-color: revert-layer;
-webkit-text-fill-color: unset;

```
### Values


 `<color>`  The foreground fill color of the element's text content.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
-webkit-text-fill-color =   
  [<color>](color_value)    
  

```
Examples
--------


### Changing the fill color



#### CSS

 
```
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}

```
 #### HTML

 
```
<p>This text is green.</p>

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [Compatibility Standard # the-webkit-text-fill-color](https://compat.spec.whatwg.org/#the-webkit-text-fill-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-webkit-text-fill-color` | 1 | 12 | 49 | No | 15 | 3 | 37 | 18 | 49 | 15 | 2 | 1.0 |


See also
--------


* [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
* [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color)
* [`-webkit-text-stroke-width`](-webkit-text-stroke-width)
* [`-webkit-text-stroke`](-webkit-text-stroke)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color>

-webkit-text-stroke-color
=========================



The `-webkit-text-stroke-color` CSS property specifies the stroke [color](color_value) of characters of text. If this property is not set, the value of the [`color`](color) property is used.

 
```
/\* <color> values \*/
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);

/\* Global values \*/
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: revert;
-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;

```


Syntax
------


### Values


 `<color>`  The color of the stroke.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `currentcolor` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | computed color |
| Animation type | a [color](color_value#interpolation) |

Formal syntax
-------------



```
-webkit-text-stroke-color =   
  [<color>](color_value)    
  

```
Examples
--------


### Varying the stroke color



#### HTML

 
```
<p>Text with stroke</p>
<input type="color" value="#ff0000" />

```
 #### CSS

 
```
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #ff0000; /\* Can be changed in the live sample \*/
}

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [Compatibility Standard # the-webkit-text-stroke-color](https://compat.spec.whatwg.org/#the-webkit-text-stroke-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-webkit-text-stroke-color` | 1 | 15 | 49 | No | 15 | 3 | 37 | 18 | 49 | 15 | 2 | 1.0 |


See also
--------


* [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
* [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
* [`-webkit-text-fill-color`](-webkit-text-fill-color)
* [`-webkit-text-stroke-width`](-webkit-text-stroke-width)
* [`-webkit-text-stroke`](-webkit-text-stroke)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-color>

Shapes from images
==================


In this guide, we will take a look at how we can create a shape from an image file with an alpha channel or even from a CSS Gradient. This is a very flexible way to create shapes. Rather than drawing a path with a complex polygon in CSS, you can create the shape in a graphics program and then use the path created by the pixels less opaque than a threshold value.


Creating shapes from images
---------------------------



To use an image for creating a shape, the image needs to have an Alpha Channel, an area that is not fully opaque. The [`shape-image-threshold`](../shape-image-threshold) property is used to set a threshold for this opacity. Pixels that are more opaque than this value will be used to calculate the area of the shape.

 In the example below, there is an image of a star with a solid red area and an area that is fully transparent. The path to the image file is used as the value for the [`shape-outside`](../shape-outside) property. The content now wraps around the star shape.


 You can use [`shape-margin`](../shape-margin) to move the text away from the shape, giving a margin around the created shape and the text.



CORS compatibility
------------------


Something that you will run into when creating shapes from an image is that the image you use must be [CORS compatible](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). An image hosted on the same domain as your site should work, however, if your images are hosted on a different domain such as on a CDN you should ensure that they are sending the correct headers to enable them to be used for Shapes. Due to this requirement for CORS-compatible images, if you are previewing your file locally without using a local web server, your shape will not work.

### Is it a CORS issue?


DevTools can help you to identify CORS errors. In Chrome the Console will alert you to CORS problems. In Firefox if you inspect the property you will be alerted to the fact that the image could not be loaded. This should alert you to the fact that your image cannot be used as the source of a shape due to CORS.

Setting a threshold
-------------------



The [`shape-image-threshold`](../shape-image-threshold) property enables the creation of shapes from areas which are not fully transparent. If the value of `shape-image-threshold` is `0.0` (which is the initial value) then the area must be fully transparent. If the value is `1.0` then it is fully opaque. Values in between mean that you can set a semi-transparent area as the defining area.

 In the example below I am using a similar image to the initial example, however, in this image the background of the star is not fully transparent, it has a 20% opacity as created in my graphics program. If I set `shape-image-threshold` to `0.3` then I see the shape, if I set it to something smaller than `0.2` I do not get the shape.



Using images with generated content
-----------------------------------



In the above example, I have both used the image as the value of [`shape-outside`](../shape-outside) and also added it to the page. Many demos do this as it helps to show the shape we are following, however, the `shape-outside` property is not related to the image that is displayed on the page and so you do not need to display an image to use an image to create a shape.

 You do need something to float, but that could be some generated content as in the below example. I am floating generated content and using a larger star image to shape my content without displaying any image on the page.



Creating shapes using a gradient
--------------------------------



Because a [CSS gradient](../css_images/using_css_gradients) is treated as an image, you can use a gradient to generate a shape by having transparent or semi-transparent areas as part of the gradient.

 The next example uses generated content. The content has been floated, giving it a background image of a linear gradient. I am using that same value as the value of [`shape-outside`](../shape-outside). The linear gradient goes from purple to transparent. By changing the value of [`shape-image-threshold`](../shape-image-threshold), you can decide how transparent the pixels need to be that create the shape. You can play with that value in the example below to see how the diagonal line will move across the shape depending on that value.

 You could also try removing the background image completely, thus using the gradient purely to create the shape and not displaying it on the page at all.


 The next example uses a radial gradient with an ellipse, once again using a transparent part of the gradient to create the shape.


 You can experiment directly in these live examples to see how changing the gradient will change the path of your shape.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images>

-webkit-text-stroke-width
=========================


The `-webkit-text-stroke-width` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the width of the stroke for text.


Syntax
------



```
/\* Keyword values \*/
-webkit-text-stroke-width: thin;
-webkit-text-stroke-width: medium;
-webkit-text-stroke-width: thick;

/\* <length> values \*/
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-width: 0.1em;
-webkit-text-stroke-width: 1mm;
-webkit-text-stroke-width: 5pt;

/\* Global values \*/
-webkit-text-stroke-width: inherit;
-webkit-text-stroke-width: initial;
-webkit-text-stroke-width: revert;
-webkit-text-stroke-width: revert-layer;
-webkit-text-stroke-width: unset;

```
### Values


 `<line-width>`  The width of the stroke.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | absolute [`<length>`](length) |
| Animation type | discrete |

Formal syntax
-------------



```
-webkit-text-stroke-width =   
  <line-width>    
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Varying stroke widths



#### CSS

 
```
p {
  margin: 0;
  font-size: 4em;
  -webkit-text-stroke-color: red;
}

#thin {
  -webkit-text-stroke-width: thin;
}

#medium {
  -webkit-text-stroke-width: 3px;
}

#thick {
  -webkit-text-stroke-width: 1.5mm;
}

```
 #### HTML

 
```
<p id="thin">Thin stroke</p>
<p id="medium">Medium stroke</p>
<p id="thick">Thick stroke</p>

```
 #### Results



Specifications
--------------




| Specification |
| --- |
| [Compatibility Standard # the-webkit-text-stroke-width](https://compat.spec.whatwg.org/#the-webkit-text-stroke-width) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-webkit-text-stroke-width` | 1 | 15 | 49 | No | 15 | 3 | 38 | 18 | 49 | 15 | 2 | 1.0 |


See also
--------


* [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
* [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color)
* [`-webkit-text-stroke`](-webkit-text-stroke)
* [`-webkit-text-fill-color`](-webkit-text-fill-color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width>

Using feature queries
=====================


**Feature queries** are created using the CSS at-rule [@supports](../@supports), and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide CSS that will only run based on the result of that test. In this guide you will learn how to implement progressive enhancement using feature queries.


Syntax
------



CSS feature queries are part of the [CSS Conditional Rules module](https://drafts.csswg.org/css-conditional-3/), which also contains the media query [@media](../@media) rule; when you use feature queries, you will find they behave in a similar way to media queries. The difference is that with a media query you are testing something about the environment in which the web page is running, whereas with feature queries you are testing browser support for CSS features.

 A feature query consists of the `@supports` rule, followed by the property name and value you would like to test for. You may not test for a bare property name such as `display`; the rule requires a property name and a value:

 
```
@supports (property: value) {
  CSS rules to apply
}

```
 If you want to check if a browser supports the `row-gap` property, for example, you would write the following feature query. It doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do.


 The value part of the property value pair matters more if you are testing for new values of a particular property. A good example would be the `display` property. All browsers support `display`, as `display: block` dates back to CSS1. However the values `display: flex` and `display: grid` are newer. There are often additional values added to properties in CSS, and so the fact that you have to test for property and value means that you can detect support for these values.


Testing for lack of support
---------------------------



In addition to asking the browser if it supports a feature, you can test for the opposite by adding in the `not` keyword:

 
```
@supports not (property: value) {
  CSS rules to apply
}

```
 The CSS inside the following example feature query will run if the browser does not support `row-gap`.



Testing for more than one feature
---------------------------------



You may need to test support for more than one property in your feature query. To do so, you can include a list of features to test for, separated by `and` keywords:

 
```
@supports (property1: value) and (property2: value) {
  CSS rules to apply
}

```
 For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS Grid, you could create a rule which checks for both of these things. The following rule will only return true if both `shape-outside: circle()` and `display: grid` are supported by the browser.


 You can also use `or`, if one property out of a selection could match to enable the CSS you want to use:

 
```
@supports (property1: value) or (property2: value) {
  CSS rules to apply
}

```
 This can be particularly useful if a feature is vendor prefixed, as you can test for the standard property plus any vendor prefixes.



Limitations of feature queries
------------------------------



The `@supports` rule tests to see if the browser can parse one or more property/value pairs, and therefore if it claims to support the feature(s). If the property and value pair is understood by the browser it returns a positive response. Therefore feature queries cannot be used to check if a browser supports a thing properly, and without bugs!

 In addition, feature queries cannot test for *partial implementations*. A good example of this is the `gap` property. All browsers that support CSS Grid support `gap` in CSS Grid, however only Firefox supports `gap` in Flexbox. If you test for the `gap` property, because you want to use it in Flexbox, you will get a positive response even though it is not implemented.


How to use feature queries for progressive enhancement
------------------------------------------------------



Feature queries are an incredibly useful tool when progressively enhancing a site. They enable you to provide a good solution for all browsers, and an enhanced solution for those browsers that support newer features.

 However, there are browsers that don't support feature queries but also have no support for a feature we want to use. For example, we might want to use CSS Grid, which is not supported in IE11. We can't create a fallback by checking for browsers which do not have support, as IE11 doesn't support feature queries either! In practice however, when using feature queries for progressive enhancement, this doesn't matter. You do however need to structure your CSS in a certain way, writing CSS for non-supporting browsers and overwriting it with the CSS inside the feature query.

 Let's walk through a very simple example where feature queries come in handy, which uses them in the way described above.

 Let's say we want to create a layout of three boxes in a row, and ideally we would like to use [CSS Grid Layout](../css_grid_layout). However, we would like to have a layout for older browsers using floats. We can start by creating that floated layout with the following code, which gives us three columns.


 When browsers don't understand a CSS property or value, they ignore it. So we could start enhancing our layout by using CSS Grid. Browsers that do not support grid will ignore the `grid` value of the `display` property. Once a floated item becomes a grid item, the float is removed — something you can read more about in [Supporting Older Browsers](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers). Therefore the grid version should just overwrite the floated one.

 We have a problem however, caused by the `width` property we used on our floated items to make them display as three columns. This is now interpreted by grid as being the width of the column track, not the width of the container as it is for the float.


 What we need is a way to remove the width if `display: grid` is supported. This is exactly the situation feature queries solve. We can set the `width` back to `auto` if grid is supported.


 In the above scenario, it doesn't matter that IE11 doesn't support feature queries or CSS Grid — it would get the floated version anyway, which is then overwritten by browsers that do support grid.

 An alternate way to write the above code is to wrap all of the grid code in a feature query as follows.


 This may mean you have a little more code but comes with the benefit of being able to test the fallback by misspelling the property or value name. You can try this in the live example above by changing `display: grid` in the `@supports` rule to `display: grip` or similar.


Summary
-------


Feature Queries can help you start to use newer features by enhancing a simpler display of the site used for older browsers. As you can wrap up the CSS for supporting browsers, you do not run the risk of styles used for the fallback display leaking through, as shown in our grid example above.

### See also


* The [@supports](../@supports) rule
* Learn Layout: [Supporting Older Browsers](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
* [CSS Grid Layout and Progressive Enhancement](../css_grid_layout/css_grid_and_progressive_enhancement)
* [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries>

Using the :target pseudo-class in selectors
===========================================


When a URL points at a specific piece of a document, it can be difficult for the user to notice. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.


Picking a Target
----------------



The [pseudo-class](../pseudo-classes) [`:target`](../:target) is used to style the target element of a URL containing a fragment identifier. For example, the URL `https://developer.mozilla.org/en-US/docs/Web/CSS#reference` contains the fragment identifier `#reference`. In HTML, identifiers are found as the values of either `id` or `name` attributes, since the two share the same namespace. Thus, the example URL would point to the heading "reference" in that document.

 Suppose you wish to style any `h2` element that is the target of a URL, but do not want any other kind of element to get a target style. This is simple enough:

 
```
h2:target {
  outline: 2px solid;
}

```
 It's also possible to create styles that are specific to a particular fragment of the document. This is done using the same identifying value that is found in the URI. Thus, to add a background color to the `#reference` fragment, we would write:

 
```
#reference:target {
  background-color: yellow;
}

```

Targeting all elements
----------------------



If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:

 
```
:target {
  color: red;
}

```

Example
-------



In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause `<h1 id="one">` to become the target element. Note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.

 
```
<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

```

Conclusion
----------


In cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading. By styling the target of a URI, reader confusion can be reduced or eliminated.

See also
--------


* [`:target`](../:target)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors>

CSS Text Decoration
===================


**CSS Text Decoration** is a module of CSS that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.


Reference
---------


### Properties


* [`text-decoration`](text-decoration)
* [`text-decoration-color`](text-decoration-color)
* [`text-decoration-line`](text-decoration-line)
* [`text-decoration-skip-ink`](text-decoration-skip-ink)
* [`text-decoration-style`](text-decoration-style)
* [`text-decoration-thickness`](text-decoration-thickness)
* [`text-emphasis`](text-emphasis)
* [`text-emphasis-color`](text-emphasis-color)
* [`text-emphasis-position`](text-emphasis-position)
* [`text-emphasis-style`](text-emphasis-style)
* [`text-shadow`](text-shadow)
* [`text-underline-offset`](text-underline-offset)
* [`text-underline-position`](text-underline-position)
Examples
--------




```
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}

```
 
```
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>
  This <a class="plain" href="#">link will not be underlined</a>, as links
  generally are by default. Be careful when removing the text decoration on
  anchors since users often depend on the underline to denote hyperlinks.
</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">
  This text has a really thick purple underline in supporting browsers.
</p>
<p class="blink">
  This text might blink for you, depending on the browser you use.
</p>

```


Specifications
--------------




| Specification |
| --- |
| [CSS Text Decoration Module Level 3](https://drafts.csswg.org/css-text-decor/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text_Decoration>

Privacy and the :visited selector
=================================



Before about 2010, the [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [`:visited`](:visited) selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through [`window.getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.

 To mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.



Little white lies
-----------------



To preserve users' privacy, Firefox and other browsers will lie to web applications under certain circumstances:

 * The `window.getComputedStyle` method, and similar functions such as [`element.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector), will always return values indicating that a user has never visited any of the links on a page.
* If you use a sibling selector such as `:visited + span`, the adjacent element (`span` in this example) will be styled as if the link were unvisited.
* In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.


Limits to visited link styles
-----------------------------



You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

 * [`color`](color)
* [`background-color`](background-color)
* [`border-color`](border-color) (and its sub-properties)
* [`column-rule-color`](column-rule-color)
* [`outline-color`](outline-color)
* [`text-decoration-color`](text-decoration-color)
* [`text-emphasis-color`](text-emphasis-color)
* The color parts of the `[fill](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)` and `[stroke](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)` attributes

 In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using the `alpha` parameter to [`rgb()`](color_value/rgb) or [`hsl()`](color_value/hsl), or the [`transparent`](named-color#transparent) keyword.

 Here is an example of how to use styles with the aforementioned restrictions:

 
```
:link {
  outline: 1px dotted blue;
  background-color: white;
  /\* The default value of background-color is `transparent`. You need to
 specify a different value, otherwise changes on :visited won't apply. \*/
}

:visited {
  outline-color: orange; /\* Visited links have an orange outline \*/
  background-color: green; /\* Visited links have a green background \*/
  color: yellow; /\* Visited links have yellow colored text \*/
}

```

Impact on web developers
------------------------



Overall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:

 * Using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.
* Colors that are otherwise transparent will fail to appear if styled in a `:visited` selector.


See also
--------


* [privacy-related changes coming to CSS :visited](https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/) on Mozilla Hacks
* [Plugging the CSS History Leak](https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/) on the Mozilla Security Blog
* [Preventing attacks on a user's history through CSS :visited selectors](https://dbaron.org/mozilla/visited-privacy)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector>

Understanding CSS z-index
=========================



In the most basic cases, [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The [`z-index`](../z-index) attribute lets you adjust the order of the layering of objects when rendering content.

 
>  *In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.*
> 
>  

 (from [CSS 2.1 Section 9.9.1 - Layered presentation](https://www.w3.org/TR/CSS21/visuren.html#z-index))

 This means that CSS style rules allow you to position boxes on layers in addition to the default rendering layer (layer 0). The position on an imaginary z-axis of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Control the position on this z-axis with the CSS `z-index` property.

 Using `z-index` appears extremely easy: a single property assigned a single integer number with an easy-to-understand behavior. When `z-index` is applied to complex hierarchies of HTML elements, its behavior can be hard to understand or predict. This is due to complex stacking rules. In fact, a dedicated section has been reserved in the CSS specification [CSS-2.1 Appendix E](https://www.w3.org/TR/CSS21/zindex.html) to explain these rules better.

 This guide will try to explain those rules, with some simplification and several examples.



Articles
--------


1. [Stacking without the z-index property](understanding_z_index/stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
2. [Stacking with floated blocks](understanding_z_index/stacking_and_float): How floating elements are handled with stacking.
3. [Using z-index](understanding_z_index/adding_z-index): How to use `z-index` to change default stacking.
4. [The stacking context](understanding_z_index/the_stacking_context): Notes on the stacking context.
Examples
--------


1. [Stacking context example 1](understanding_z_index/stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level
2. [Stacking context example 2](understanding_z_index/stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels
3. [Stacking context example 3](understanding_z_index/stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index>

Stacking without the z-index property
=====================================



When the [`z-index`](../../z-index) property is not specified on any element, elements are stacked in the following order (from bottom to top):

 1. The background and borders of the root element.
2. Descendant non-positioned elements, in order of appearance in the HTML.
3. Descendant positioned elements, in order of appearance in the HTML.

 See [types of positioning](../../position#types_of_positioning) for an explanation of positioned and non-positioned elements.

 Keep in mind, when the [`order`](../../order) property alters rendering from the *order of appearance in the HTML* within [`flex`](../../flex) containers, it similarly affects the order for stacking context.



Example
-------


In this example, DIV #1 through DIV #4 are positioned elements. DIV #5 is static, and so is drawn below the other four elements, even though it comes later in the HTML markup.

### HTML



```
<div id="abs1" class="absolute">
  <strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
  <strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
  <strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
  <strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
  <strong>DIV #5</strong><br />position: static;
</div>

```
### CSS



```
strong {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}

```
Result
------


See also
--------


* [Stacking with floated blocks](stacking_and_float): How floating elements are handled with stacking.
* [Using z-index](adding_z-index): How to use `z-index` to change default stacking.
* [The stacking context](the_stacking_context): Notes on the stacking context.
* [Stacking context example 1](stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level
* [Stacking context example 2](stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels
* [Stacking context example 3](stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index>

Stacking with floated blocks
============================



For floated elements, the stacking order is a bit different. Floating elements are placed between non-positioned elements and positioned elements:

 1. The background and borders of the root element.
2. Descendant non-positioned elements, in order of appearance in the HTML.
3. *Floating elements*.
4. Descendant positioned elements, in order of appearance in the HTML.

 See [types of positioning](../../position#types_of_positioning) for an explanation of positioned and non-positioned elements.

  **Note:** If an `opacity` value is applied to a non-positioned element (i.e., DIV #4 in the example below), something strange happens: the background and border of that block pop up above the floating blocks and the positioned blocks. This is due to a peculiar part of the specification: applying an `opacity` value creates a new stacking context (see [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)).

 

Example
-------



You can see in this example that the background and border of the non-positioned element (DIV #4) is completely unaffected by floating elements, but the content is affected. This happens according to standard float behavior which can be shown with a rule added to the above list:

 1. The background and borders of the root element.
2. Descendant non-positioned elements, in order of appearance in the HTML.
3. Floating elements.
4. *Descendant non-positioned inline elements*.
5. Descendant positioned elements, in order of appearance in the HTML.


### HTML



```
<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>

<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>

<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>

<br />

<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>

<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>

<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>

```
### CSS



```
div {
  padding: 10px;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  height: 100px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

#flo1 {
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#flo2 {
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#abs2 {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 80px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

#rel1 {
  position: relative;
  border: 1px dashed #996;
  background-color: #cff;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

```
Result
------


See also
--------


* [Stacking without the z-index property](stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
* [Using z-index](adding_z-index): How to use `z-index` to change default stacking.
* [The stacking context](the_stacking_context): Notes on the stacking context.
* [Stacking context example 1](stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level
* [Stacking context example 2](stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels
* [Stacking context example 3](stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float>

Stacking context example 3
==========================


Description
-----------



This last example shows problems that arise when mixing several positioned elements in a multi-level HTML hierarchy and when `z-index` values are assigned using class selectors.

 Let's take as an example a three-level hierarchical menu made from several positioned `div` elements. Second-level and third-level `div` elements appear when a user hovers or clicks on their parents. Usually this kind of menu is script-generated either client-side or server-side, so style rules are assigned with a class selector instead of the id selector.

 If the three menu levels partially overlap, then managing stacking could become a problem.

 The first-level menu is only relatively positioned, so no stacking context is created.

 The second-level menu is absolutely positioned inside the parent element. In order to put it above all first-level menus, the `z-index` property is used. The problem is that for each second-level menu, a stacking context is created and each third-level menu belongs to the context of its parent.

 So a third-level menu will be stacked under the following second-level menus, because all second-level menus share the same z-index value and the default stacking rules apply.

 To better understand the situation, here is the stacking context hierarchy (the three dots "..." represent multiple repetition of the previous line):

 * Root stacking context
	+ LEVEL #1
		- LEVEL #2 (`z-index`: 1)
			* LEVEL #3
			* …
			* LEVEL #3
		- LEVEL #2 (`z-index`: 1)
		- …
		- LEVEL #2 (`z-index`: 1)
	+ LEVEL #1
	+ …
	+ LEVEL #1

 This problem can be avoided by removing overlapping between different level menus, or by using individual (and different) z-index values assigned through the id selector instead of class selector, or by flattening the HTML hierarchy.

  **Note:** In the source code you will see that second-level and third level menus are made of several `div` elements contained in an absolutely positioned container. This is useful to group and position all of them at once.

 
Example
-------


### HTML



```
<div class="lev1">
  <span class="bold">LEVEL #1</span>

  <div id="container1">
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;

      <div id="container2">
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
      </div>
    </div>

    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
  </div>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

```
### CSS



```
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

div.lev1 {
  width: 250px;
  height: 70px;
  position: relative;
  border: 2px outset #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#container1 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 75px;
}

div.lev2 {
  opacity: 0.9;
  width: 200px;
  height: 60px;
  position: relative;
  border: 2px outset #990000;
  background-color: #ffdddd;
  padding-left: 5px;
}

#container2 {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 110px;
}

div.lev3 {
  z-index: 10;
  width: 100px;
  position: relative;
  border: 2px outset #000099;
  background-color: #ddddff;
  padding-left: 5px;
}

```
Result
------


See also
--------



* [Stacking without the z-index property](stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
* [Stacking with floated blocks](stacking_and_float): How floating elements are handled with stacking.
* [Using z-index](adding_z-index): How to use `z-index` to change default stacking.
* [The stacking context](the_stacking_context): Notes on the stacking context.
* [Stacking context example 1](stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level
* [Stacking context example 2](stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels

   **Note:** the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. Basically, this whole sample page is incorrect and misleading. 

 


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3>

Using z-index
=============



The first article of this guide, [Stacking without the z-index property](stacking_without_z-index), explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the [`z-index`](../../z-index) property on a [positioned](../../position#types_of_positioning) element.

 The `z-index` property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along an imaginary z-axis. If you are not familiar with the term 'z-axis', imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers (*X* represents an arbitrary positive integer):

 

| Layer | Description |
| --- | --- |
| Bottom layer | Farthest from the observer |
| Layer -X | Layers with negative `z-index` values |
| Layer 0 | Default rendering layer |
| Layer X | Layers with positive `z-index` values |
| Top layer | Closest to the observer |

  **Note:**

 * When no `z-index` property is specified, elements are rendered on the default rendering layer (Layer 0).
* If several elements share the same `z-index` value (i.e., they are placed on the same layer), stacking rules explained in the section [Stacking without the z-index property](stacking_without_z-index) apply.

 

Example
-------


In this example, the layers' stacking order is rearranged using `z-index`. The `z-index` of DIV #5 has no effect since it is not a positioned element.

### HTML



```
<div id="abs1">
  <strong>DIV #1</strong>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <strong>DIV #2</strong>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <strong>DIV #3</strong>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <strong>DIV #4</strong>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <strong>DIV #5</strong>
  <br />no positioning <br />z-index: 8;
</div>

```
### CSS



```
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}

```
Result
------


See also
--------


* [Stacking without the z-index property](stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
* [Stacking with floated blocks](stacking_and_float): How floating elements are handled with stacking.
* [The stacking context](the_stacking_context): Notes on the stacking context.
* [Stacking context example 1](stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level
* [Stacking context example 2](stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels
* [Stacking context example 3](stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index>

Stacking context example 1
==========================


Description
-----------



Let's start with a basic example. In the root stacking context, there are two relatively positioned `<div>` elements (DIV #1 and DIV #3) without `z-index` properties. Inside DIV #1, there is an absolutely positioned DIV #2, while in DIV #3, there is an absolutely positioned DIV #4, both without `z-index` properties.

 The only stacking context is the root context. Without `z-index` values, elements are stacked in order of occurrence.

  ![Stacking context example 1] 

 If DIV #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other DIVs.

  ![Stacking context example 1] 

 Then if DIV #4 is also assigned a positive z-index greater than DIV #2's z-index, it is rendered above all the other DIVs including DIV #2.

  ![Stacking context example 1] 

 In this last example you can see that DIV #2 and DIV #4 are not siblings, because they belong to different parents in the HTML elements' hierarchy. Even so, stacking of DIV #4 with respect of DIV #2 can be controlled through `z-index`. It happens that, since DIV #1 and DIV #3 are not assigned any z-index value, they do not create a stacking context. This means that all their content, including DIV #2 and DIV #4, belongs to the same root stacking context.

 In terms of stacking contexts, DIV #1 and DIV #3 are assimilated into the root element, and the resulting hierarchy is the following:

 * Root stacking context
	+ DIV #2 (`z-index`: 1)
	+ DIV #4 (`z-index`: 2)

  **Note:** DIV #1 and DIV #3 are not translucent. It is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a `z-index` value. And this example shows what happens when a parent element does not create a stacking context.

 
Example
-------


### HTML



```
<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>

```
### CSS



```
.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}

```
Result
------


See also
--------


* [Stacking without the z-index property](stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
* [Stacking with floated blocks](stacking_and_float): How floating elements are handled with stacking.
* [Using z-index](adding_z-index): How to use `z-index` to change default stacking.
* [The stacking context](the_stacking_context): Notes on the stacking context.
* [Stacking context example 2](stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels
* [Stacking context example 3](stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1>

CSS Table
=========


**CSS Table** is a CSS module that defines how to lay out table data.


Reference
---------


### Properties


* [`border-collapse`](border-collapse)
* [`border-spacing`](border-spacing)
* [`caption-side`](caption-side)
* [`empty-cells`](empty-cells)
* [`table-layout`](table-layout)
* [`vertical-align`](vertical-align)
Specifications
--------------




| Specification |
| --- |
| [Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification](https://www.w3.org/TR/CSS22/tables.html)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table>

CSS Positioned Layout
=====================


**CSS Positioned Layout** is a module of CSS that defines how to position elements on the page.


Reference
---------


### Properties


* [`top`](top)
* [`right`](right)
* [`bottom`](bottom)
* [`left`](left)
* [`inset`](inset)
* [`inset-inline`](inset-inline)
* [`inset-inline-start`](inset-inline-start)
* [`inset-inline-end`](inset-inline-end)
* [`inset-block`](inset-block)
* [`inset-block-start`](inset-block-start)
* [`inset-block-end`](inset-block-end)
* [`float`](float)
* [`clear`](clear)
* [`position`](position)
* [`z-index`](z-index)
* [`transform`](transform)
Guides
------


 [Understanding CSS z-index](css_positioning/understanding_z_index)  Presents the notion of stacking context and explains how z-ordering works, with several examples.

  Specifications
--------------




| Specification |
| --- |
| [CSS Positioned Layout Module Level 3](https://drafts.csswg.org/css-position/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning>

Stacking context example 2
==========================


Description
-----------



This is a very simple example, but it is the key for understanding the concept of *stacking context*. There are the same four DIVs of the previous example, but now `z-index` properties are assigned on both levels of the hierarchy.

 You can see that DIV #2 (`z-index`: 2) is above DIV #3 (`z-index`: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked.

 What can be considered strange is that DIV #2 (`z-index`: 2) is above DIV #4 (`z-index`: 10), despite their z-index values. The reason is that they do not belong to the same stacking context. DIV #4 belongs to the stacking context created by DIV #3, and as explained previously DIV #3 (and all its content) is under DIV #2.

 To better understand the situation, this is the stacking context hierarchy:

 * Root stacking context
	+ DIV #2 (`z-index`: 2)
	+ DIV #3 (`z-index`: 1)
		- DIV #4 (`z-index`: 10)

  **Note:** It is worth remembering that in general the HTML hierarchy is different from the stacking context hierarchy. In the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent.

 
Example
-------


### HTML



```
<div id="div1">
  <br />
  <span class="bold">DIV #1</span><br />
  position: relative;
  <div id="div2">
    <br />
    <span class="bold">DIV #2</span><br />
    position: absolute;<br />
    z-index: 2;
  </div>
</div>

<br />

<div id="div3">
  <br />
  <span class="bold">DIV #3</span><br />
  position: relative;<br />
  z-index: 1;
  <div id="div4">
    <br />
    <span class="bold">DIV #4</span><br />
    position: absolute;<br />
    z-index: 10;
  </div>
</div>

```
### CSS



```
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}

```
Result
------


See also
--------


* [Stacking without the z-index property](stacking_without_z-index): The stacking rules that apply when `z-index` is not used.
* [Stacking with floated blocks](stacking_and_float): How floating elements are handled with stacking.
* [Using z-index](adding_z-index): How to use `z-index` to change default stacking.
* [The stacking context](the_stacking_context): Notes on the stacking context.
* [Stacking context example 1](stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level
* [Stacking context example 3](stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2>

CSS Lists
=========


**CSS Lists** is a module of CSS that defines how lists can be laid out and styled.


Reference
---------


### Properties


* [`list-style-image`](list-style-image)
* [`list-style-type`](list-style-type)
* [`list-style-position`](list-style-position)
* [`list-style`](list-style)
Guides
------


 [Consistent list indentation](css_lists_and_counters/consistent_list_indentation)  Explains how to achieve consistent list indentation across different browsers.

  [Using CSS Counters](css_counter_styles/using_css_counters)  Explains how to use the CSS counter properties to control list counters.

  Specifications
--------------




| Specification |
| --- |
| [CSS Lists and Counters Module Level 3](https://drafts.csswg.org/css-lists/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters>

Color picker tool
=================



This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various [color formats](../color_value) supported by [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported.

 As you adjust the parameters that define the color, it gets displayed in all three standard Web CSS formats. In addition, based on the currently-selected color, a palette for HSL and HSV, as well as alpha, is generated. The "eyedropper" style color picker box can be toggled between HSL or HSV format. You can also test colors and how they overlap one another by dragging them into the box at the bottom of the tool and moving them over one another. Adjust their relative Z index values to move them forward and behind one another.

 This tool will help you identify the perfect CSS colors to apply to your [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML).


 The generated colors you create above can be used anywhere color is used in CSS and HTML, unless otherwise noted.



See also
--------



For more on using color, see:

 * [Applying color to HTML elements using CSS](applying_color)
* [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
* [Styling borders using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
* [Changing background styles using CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
* [Color and color contrast](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#color_and_color_contrast)

 For additional tools, see:

  [Border-image generator](../css_backgrounds_and_borders/border-image_generator)  This interactive tool lets you visually create border images (the [`border-image`](../border-image) property).

  [Border-radius generator](../css_backgrounds_and_borders/border-radius_generator)  This interactive tool lets you visually create rounded corners (the [`border-radius`](../border-radius) property).

  [Box-shadow generator](../css_backgrounds_and_borders/box-shadow_generator)  This interactive tool lets you visually create shadows behind elements (the [`box-shadow`](../box-shadow) property).

  


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool>

Box alignment in Multi-column Layout
====================================



The [Box Alignment](../css_box_alignment) Specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of [Multi-column Layout](../css_columns). As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main [Box Alignment](../css_box_alignment) page which details the common features of Box Alignment across layout methods.

 In multi-column layout the alignment container is the content box of the multicol container. The alignment subject is the column box. The properties which apply to multi-column layouts are detailed below.

  **Note:** Multi-column Layout predates the Box Alignment specification. And the properties listed here, while specified for Multicol, may not be supported in browsers.

 

align-content and justify-content
---------------------------------



The [`align-content`](../align-content) property applies to the block axis and [`justify-content`](../justify-content) to the inline axis. Any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the [`column-gap`](../column-gap) property.

 Using a value of `justify-content` other than `normal` or `stretch` will cause column boxes to display at the [`column-width`](../column-width) specified on the multicol container, and the remaining space distributed according to the value of justify-content.


column-gap
----------


The [`column-gap`](../column-gap) property was specified in earlier versions of the multiple-column layout specification, and has now been unified with the gap properties for other layout methods in box alignment. While other layout methods treat the initial value of column-gap as 0 multicol treats it as 1em, as in general you would not want to have no gap between columns.

Reference
---------


### CSS Properties


* [`justify-content`](../justify-content)
* [`align-content`](../align-content)
* [`column-gap`](../column-gap)
### Glossary Entries


* [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Subject)
* [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_Container)
* [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_Alignment)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout>

font-palette
============


The `font-palette` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property allows specifying one of the many palettes contained in a font that a user agent should use for the font. Users can also override the values in a palette or create a new palette by using the <@font-palette-values> at-rule.


Syntax
------



```
/\* Using a font-defined palette \*/
font-palette: normal;

/\* Using a user-defined palette \*/
font-palette: --one;

```
### Values


 `normal`  Specifies the default color palette or the default glyph colorization (set by the font maker) to be used for the font. With this setting, the palette in the font at index 0 is rendered.

  `light`  Specifies the first palette in the font that matches 'light' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a light (close to white) background. If a font does not have this metadata, the `light` value behaves as `normal`.

  `dark`  Specifies the first palette in the font that matches 'dark' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a dark (close to black) background. If a font does not have this metadata, the value behaves as `normal`.

  `<palette-identifier>`  Allows you to specify your own values for the font palette by using the <@font-palette-values> at-rule. This value is specified using the [<dashed-ident>](dashed-ident) format.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
font-palette =   
  normal                [|](value_definition_syntax#single_bar)  
  light                 [|](value_definition_syntax#single_bar)  
  dark                  [|](value_definition_syntax#single_bar)  
  [<palette-identifier>](palette-identifier)    
  

```
Examples
--------


### Specifying a dark palette



This example allows you to use the first palette marked as *dark* (works best on a near black background) by the font-maker.

 
```
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-palette-prop](https://w3c.github.io/csswg-drafts/css-fonts/#font-palette-prop) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-palette` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |


See also
--------


* [`@font-palette-values`](@font-palette-values)
* [`base-palette`](@font-palette-values/base-palette) descriptor
* [`font-family`](@font-palette-values/font-family) descriptor
* [`override-colors`](@font-palette-values/override-colors) descriptor


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-palette>

-moz-outline-radius-bottomleft
==============================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 In Mozilla applications, the `-moz-outline-radius-bottomleft` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property can be used to round the bottom-left corner of an element's [`outline`](outline).



Syntax
------


The value of `-moz-outline-radius-bottomleft` is either a CSS [`<length>`](length) or a <percentage> of the corresponding dimensions of the border box. The [`calc()`](calc) function may be used as well.

### Values


 `<length>`  The radius of the circle defining the curvature of the bottom and left edges of the element, specified as a CSS [`<length>`](length).

  `<percentage>`  The radius of the circle defining the rounding of the bottom-left corner of the element, specified as the [percentages](percentage) of the bottom and left sides of the border box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | as specified |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
 -moz-outline-radius-bottomleft =
  <outline-radius>

```
Examples
--------


### Rounding an outline



Since this is a Firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than Firefox.

 #### HTML

 
```
<p>Look at this paragraph's bottom-left corner.</p>

```
 #### CSS

 
```
p {
  margin: 10px;
  border: solid cyan;
  outline: dotted green;
  -moz-outline-radius-bottomleft: 2em;
}

```
 #### Result



Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-outline-radius-bottomleft` | No | No | 1–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No | No | No | 4–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No |


See also
--------


* See the [`-moz-outline-radius`](-moz-outline-radius) property for more information.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft>

base-palette
============


The `base-palette` CSS [descriptor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Descriptor) is used to specify the name or index of a pre-defined palette to be used for creating a new palette. If the specified `base-palette` does not exist, then the palette defined at index 0 will be used.


Syntax
------




```
@font-palette-values --one {
  base-palette: 1;
}

```
 The `base-palette` [descriptor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Descriptor) is specified using a zero-based index of the font-maker created palettes.


### Values


 `<index>`  Specifies the index of the pre-defined palette to use.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
base-palette =   
  light            [|](../value_definition_syntax#single_bar)  
  dark             [|](../value_definition_syntax#single_bar)  
  [<integer [0,∞]>](../integer)    
  

```
Examples
--------


### Changing the default palette in a font



Using the [Rocher Color Font](https://www.harbortype.com/fonts/rocher-color/), this example shows two instances of switching the default palette in the font to an alternate palette created by the font-maker.

 #### HTML

 
```
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>

```
 #### CSS

 
```
@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}

h2 {
  font-family: "Rocher";
}

@font-palette-values --two {
  font-family: "Rocher";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Rocher";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

```
 #### Result

  ![Example showing 3 different base-palettes of Rocher color font] 


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # base-palette-desc](https://w3c.github.io/csswg-drafts/css-fonts/#base-palette-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `base-palette` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |


See also
--------


* [`@font-palette-values`](../@font-palette-values)
* [`font-family`](font-family) descriptor
* [`override-colors`](override-colors) descriptor
* [`font-palette`](../font-palette) property
* [`CSSFontPaletteValuesRule.basePalette`](https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule/basePalette)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values/base-palette>

-moz-outline-radius-bottomright
===============================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 In Mozilla applications, the `-moz-outline-radius-bottomright` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property can be used to round the bottom-right corner of an element's [`outline`](outline).



Syntax
------


The value of `-moz-outline-radius-bottomright` is either a CSS [`<length>`](length) or a <percentage> of the corresponding dimensions of the border box. The [`calc()`](calc) function may be used as well.

### Values


 `<length>`  The radius of the circle defining the curvature of the bottom and right edges of the element, specified as a CSS [`<length>`](length).

  `<percentage>`  The radius of the circle defining the rounding of the bottom-right corner of the element, specified as the [percentages](percentage) of the bottom and right sides of the border box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | as specified |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
-moz-outline-radius-bottomright =
  <outline-radius>

```
Examples
--------


### HTML



```
<p>Look at this paragraph's bottom-right corner.</p>

```
### CSS



```
p {
  margin: 5px;
  border: solid cyan;
  outline: dotted red;
  -moz-outline-radius-bottomright: 2em;
}

```
### Result



  **Note:** The example above will not display the desired effect if you are viewing this in a browser other than Firefox.

 
Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-outline-radius-bottomright` | No | No | 1–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No | No | No | 4–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No |


See also
--------


* See the [`-moz-outline-radius`](-moz-outline-radius) property for more information.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-bottomright>

-moz-outline-radius-topright
============================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 In Mozilla applications, the `-moz-outline-radius-topright` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property can be used to round the top-right corner of an element's [`outline`](outline).



Syntax
------


The value of `-moz-outline-radius-topright` is either a CSS [`<length>`](length) or a <percentage> of the corresponding dimensions of the border box. The [`calc()`](calc) function may be used as well.

### Values


 `<length>`  The radius of the circle defining the curvature of the top and right edges of the element, specified as a CSS [`<length>`](length).

  `<percentage>`  The radius of the circle defining the rounding of the top-right corner of the element, specified as the [percentages](percentage) of the top and right sides of the border box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | as specified |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
-moz-outline-radius-topright =
  <outline-radius>

```
Examples
--------


### HTML



```
<p>Look at this paragraph's top-right corner.</p>

```
### CSS



```
p {
  margin: 5px;
  border: solid cyan;
  outline: dotted red;
  -moz-outline-radius-topright: 2em;
}

```
### Result



  **Note:** The example above will not display the desired effect if you are viewing this in a browser other than Firefox.

 
Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-outline-radius-topright` | No | No | 1–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No | No | No | 4–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No |


See also
--------


* See the [`-moz-outline-radius`](-moz-outline-radius) property for more information.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-topright>

font-family
===========


The [@font-palette-values](../@font-palette-values) [descriptor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Descriptor) `font-family` is used to specify which font-family palette values are to be applied to. This need to match exactly the values used when setting the CSS [font-family](../font-family).


Syntax
------




```
@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /\* other palette settings follow \*/
}

```
 Other palette values that follow apply only to the specified font family. You can create [@font-palette-values](../@font-palette-values) for other font families by using the same [<dashed-ident>s](../dashed-ident). This means that if you have multiple Color Fonts and can use the same identifier for each.


### Values


 `<family-name>`  Specifies the name of the [font-family](../font-family).

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
font-family =   
  [<family-name>](../family-name)[#](../value_definition_syntax#hash_mark)    
  

```
Examples
--------


### Using matching family names



In this example, when the `font-family` descriptor is used in the [@font-palette-values](../@font-palette-values) at-rule, the same value is used for the `font-family`, as when it is declared.

 #### HTML

 
```
<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>

```
 #### CSS

 
```
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --bungee-extra-spicy {
  font-family: "Bungee Spice";
  override-colors: 0 DarkRed, 1 Red;
}

h2 {
  font-family: "Bungee Spice";
}

h2.extra-spicy {
  font-palette: --bungee-extra-spicy;
}

```
 #### Result



### Using the same palette identifier for multiple font-families



In this example, two [@font-palette-values](../@font-palette-values) at-rules are set for two font families, but both the at-rules use the same dashed-ident identifier, `--Dark Mode`. This helps to set the [font-palette](../font-palette) property for multiple elements, `h1` and `h2` in this case, at the same time. This can be useful when you want to update font colors to match your site's branding.

 
```
@font-palette-values --Dark-Mode {
  font-family: "Bungee Spice";
  /\* palette settings for Bungee Spice \*/
}

@font-palette-values --Dark-Mode {
  font-family: Bixa;
  /\* palette settings for Bixa \*/
}

h1,
h2 {
  font-palette: --Dark-Mode;
}

h1 {
  font-family: "Bungee Spice";
}

h2 {
  font-family: Bixa;
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # font-family-2-desc](https://w3c.github.io/csswg-drafts/css-fonts/#font-family-2-desc) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `font-family` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |


See also
--------


* [`font-family`](../@font-face/font-family)
* [`@font-palette-values`](../@font-palette-values)
* [`font-family`](font-family) descriptor
* [`override-colors`](override-colors) descriptor
* [`font-palette`](../font-palette) property
* [`CSSFontPaletteValuesRule.fontFamily`](https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule/fontFamily)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values/font-family>

override-colors
===============


The `override-colors` CSS [descriptor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Descriptor) is used to override colors in the chosen <base-palette> for a color font.


Syntax
------




```
/\* basic syntax \*/
override-colors: <index of color> <color>;

/\* using color names \*/
override-colors: 0 red;

/\* using hex-color \*/
override-colors: 0 #f00;

/\* using rgb \*/
override-colors: 0 rgb(255, 0, 0);

/\* overriding multiple colors \*/
override-colors: 0 #f00, 1 #0f0, 2 #00f;

/\* overriding multiple colors with readability \*/
override-colors: 0 #f00, 1 #0f0, 2 #00f;

```
 The `override-colors` [descriptor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Descriptor) takes a comma-separated list of the color index and new color value.

 The color index is zero-based and any [color value](../color_value) can be used.

 For each key-value pair of index and color, the color with the index in the specified <base-palette> will be overwritten. If the color font does not have a color at the specified index, it will be ignored.


### Values


 `[ <integer [0,∞]> <absolute-color-base> ]`  Specifies the index of a color in a <base-palette> and the color to overwrite it with.

  Formal definition
-----------------


Value not found in DB!Formal syntax
-------------



```
override-colors =   
  [[](../value_definition_syntax#brackets) [<integer [0,∞]>](../integer) <absolute-color-base> []](../value_definition_syntax#brackets)[#](../value_definition_syntax#hash_mark)    
  
<absolute-color-base> =   
  [<hex-color>](../hex-color)                [|](../value_definition_syntax#single_bar)  
  <absolute-color-function>  [|](../value_definition_syntax#single_bar)  
  [<named-color>](../named-color)              [|](../value_definition_syntax#single_bar)  
  transparent                  
  
<absolute-color-function> =   
  <rgb()>    [|](../value_definition_syntax#single_bar)  
  [<rgba()>](../rgba())   [|](../value_definition_syntax#single_bar)  
  <hsl()>    [|](../value_definition_syntax#single_bar)  
  [<hsla()>](../hsla())   [|](../value_definition_syntax#single_bar)  
  <hwb()>    [|](../value_definition_syntax#single_bar)  
  <lab()>    [|](../value_definition_syntax#single_bar)  
  <lch()>    [|](../value_definition_syntax#single_bar)  
  <oklab()>  [|](../value_definition_syntax#single_bar)  
  <oklch()>  [|](../value_definition_syntax#single_bar)  
  <color()>    
  
<rgb()> =   
  rgb( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )  [|](../value_definition_syntax#single_bar)  
  rgb( [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<hsl()> =   
  hsl( [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<hwb()> =   
  hwb( [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<lab()> =   
  lab( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<lch()> =   
  lch( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<oklab()> =   
  oklab( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<oklch()> =   
  oklch( [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) [<number>](../number) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) <hue> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<color()> =   
  color( <colorspace-params> [[](../value_definition_syntax#brackets) / [[](../value_definition_syntax#brackets) <alpha-value> [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets) []](../value_definition_syntax#brackets)[?](../value_definition_syntax#question_mark) )    
  
<alpha-value> =   
  [<number>](../number)      [|](../value_definition_syntax#single_bar)  
  [<percentage>](../percentage)    
  
<hue> =   
  [<number>](../number)  [|](../value_definition_syntax#single_bar)  
  [<angle>](../angle)     
  
<colorspace-params> =   
  <predefined-rgb-params>  [|](../value_definition_syntax#single_bar)  
  <xyz-params>               
  
<predefined-rgb-params> =   
  <predefined-rgb> [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces)    
  
<xyz-params> =   
  <xyz-space> [[](../value_definition_syntax#brackets) [<number>](../number) [|](../value_definition_syntax#single_bar) [<percentage>](../percentage) [|](../value_definition_syntax#single_bar) none []](../value_definition_syntax#brackets)[{3}](../value_definition_syntax#curly_braces)    
  
<predefined-rgb> =   
  srgb          [|](../value_definition_syntax#single_bar)  
  srgb-linear   [|](../value_definition_syntax#single_bar)  
  display-p3    [|](../value_definition_syntax#single_bar)  
  a98-rgb       [|](../value_definition_syntax#single_bar)  
  prophoto-rgb  [|](../value_definition_syntax#single_bar)  
  rec2020         
  
<xyz-space> =   
  xyz      [|](../value_definition_syntax#single_bar)  
  xyz-d50  [|](../value_definition_syntax#single_bar)  
  xyz-d65    
  

```
Examples
--------


### Changing colors of emojis



This example shows how to override colors in the [Noto Color Emoji](https://fonts.google.com/noto/specimen/Noto+Color+Emoji/) color font to match your site's brand.

 #### HTML

 
```
<section class="hats">
  <div class="hat">
    <h2>Original Hat</h2>
    <div class="emoji">🎩</div>
  </div>
  <div class="hat">
    <h2>Red Hat</h2>
    <div class="emoji red-hat">🎩</div>
  </div>
</section>

```
 #### CSS

 
```
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}
@font-palette-values --red {
  font-family: "Noto Color Emoji";
  override-colors:
    0 rgb(74, 11, 0),
    1 rgb(149, 22, 1),
    2 rgb(183, 27, 1),
    3 rgb(193, 28, 1),
    4 rgb(230, 34, 1);
}
.red-hat {
  font-palette: --red;
}

```
 #### Result



### Changing a color in an alternate base-palette



Using [Rocher Color Font](https://www.harbortype.com/fonts/rocher-color/), this example shows how to override one color in the font.

 #### HTML

 
```
<h2 class="normal-palette">Normal Palette</h2>
<h2 class="override-palette">Override Palette</h2>

```
 #### CSS

 
```
@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
  font-family: "Rocher";
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
  override-colors: 0 rebeccapurple;
}
.normal-palette {
  font-palette: --normal-palette;
}
.override-palette {
  font-palette: --override-palette;
}

```
 #### Result

 This example shows the that in `base-palette` `3`, the color at index 0 is overridden with `rebeccapurple`.

  ![Example showing base-palette and base-palette with 1 color overridden] 


Specifications
--------------




| Specification |
| --- |
| [CSS Fonts Module Level 4 # override-color](https://w3c.github.io/csswg-drafts/css-fonts/#override-color) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `override-colors` | 101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |


See also
--------


* [`@font-palette-values`](../@font-palette-values)
* [`base-palette`](base-palette)
* [`font-family`](font-family)
* [`font-palette`](../font-palette)
* [`CSSFontPaletteValuesRule.overrideColors`](https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule/overrideColors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/@font-palette-values/override-colors>

-moz-outline-radius
===================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 In Mozilla applications like Firefox, the `-moz-outline-radius` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) [shorthand property](shorthand_properties) can be used to give an element's [`outline`](outline) rounded corners.

 
```
/\* One value \*/
-moz-outline-radius: 25px;

/\* Two values \*/
-moz-outline-radius: 25px 1em;

/\* Three values \*/
-moz-outline-radius: 25px 1em 12%;

/\* Four values \*/
-moz-outline-radius: 25px 1em 12% 4mm;

/\* Global values \*/
-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

```


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`-moz-outline-radius-bottomleft`](-moz-outline-radius-bottomleft)
* [`-moz-outline-radius-bottomright`](-moz-outline-radius-bottomright)
* [`-moz-outline-radius-topleft`](-moz-outline-radius-topleft)
* [`-moz-outline-radius-topright`](-moz-outline-radius-topright)


Syntax
------


### Values



 **Note:** Elliptical outlines and `<percentage>` values follow the syntax described in [`border-radius`](border-radius).

  One, two, three or four `<outline-radius>` values, represents one of:

  [`<length>`](length)  See [`<length>`](length) for possible values.

  [`<percentage>`](percentage)  A [`<percentage>`](percentage); see [`border-radius`](border-radius) for details.

   * If a single value is set, it applies to all 4 corners.
* If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.
* If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.
* If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.


Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`-moz-outline-radius-topleft`](-moz-outline-radius-topleft): `0`
* [`-moz-outline-radius-topright`](-moz-outline-radius-topright): `0`
* [`-moz-outline-radius-bottomright`](-moz-outline-radius-bottomright): `0`
* [`-moz-outline-radius-bottomleft`](-moz-outline-radius-bottomleft): `0`
 |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | as each of the properties of the shorthand:* [`-moz-outline-radius-topleft`](-moz-outline-radius-topleft): refer to the corresponding dimension of the border box
* [`-moz-outline-radius-topright`](-moz-outline-radius-topright): refer to the corresponding dimension of the border box
* [`-moz-outline-radius-bottomright`](-moz-outline-radius-bottomright): refer to the corresponding dimension of the border box
* [`-moz-outline-radius-bottomleft`](-moz-outline-radius-bottomleft): refer to the corresponding dimension of the border box
 |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`-moz-outline-radius-topleft`](-moz-outline-radius-topleft): as specified
* [`-moz-outline-radius-topright`](-moz-outline-radius-topright): as specified
* [`-moz-outline-radius-bottomright`](-moz-outline-radius-bottomright): as specified
* [`-moz-outline-radius-bottomleft`](-moz-outline-radius-bottomleft): as specified
 |
| Animation type | as each of the properties of the shorthand:* [`-moz-outline-radius-topleft`](-moz-outline-radius-topleft): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`-moz-outline-radius-topright`](-moz-outline-radius-topright): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`-moz-outline-radius-bottomright`](-moz-outline-radius-bottomright): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
* [`-moz-outline-radius-bottomleft`](-moz-outline-radius-bottomleft): a [length](length#interpolation), [percentage](percentage#interpolation) or calc();
 |

Formal syntax
-------------



```
 -moz-outline-radius =
  <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?

```
Examples
--------


### Rounding an outline



Note: This example will not display the desired effect if you are viewing this in a browser other than Firefox.

 #### HTML

 
```
<p>This element has a rounded outline!</p>

```
 #### CSS

 
```
p {
  margin: 5px;
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

```
 #### Result



Notes
-----


* `dotted` or `dashed` radiused corners were rendered as solid until Firefox 50, [Firefox bug 382721](https://bugzil.la/382721)
* Future versions of Gecko/Firefox may drop this property completely. See [Firefox bug 593717](https://bugzil.la/593717).
Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-outline-radius` | No | No | 1–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No | No | No | 4–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No |


See also
--------


* [Mozilla CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions)
* Related CSS properties:
	+ [`outline`](outline)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius>

-moz-outline-radius-topleft
===========================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 In Mozilla applications, the `-moz-outline-radius-topleft` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property can be used to round the top-left corner of an element's [`outline`](outline).



Syntax
------


The value of `-moz-outline-radius-topleft` is either a CSS [`<length>`](length) or a <percentage> of the corresponding dimensions of the border box. The [`calc()`](calc) function may be used as well.

### Values


 `<length>`  The radius of the circle defining the curvature of the top and left edges of the element, specified as a CSS [`<length>`](length).

  `<percentage>`  The radius of the circle defining the rounding of the top-left corner of the element, specified as the [percentages](percentage) of the top and left sides of the border box.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the corresponding dimension of the border box |
| [Computed value](computed_value) | as specified |
| Animation type | a [length](length#interpolation), [percentage](percentage#interpolation) or calc(); |

Formal syntax
-------------



```
-moz-outline-radius-topleft =
  <outline-radius>

```
Examples
--------


The example below will not display the desired effect if you are viewing this in a browser other than Firefox.

### HTML



```
<p>Look at this paragraph's top-left corner.</p>

```
### CSS



```
p {
  margin: 5px;
  border: solid cyan;
  outline: dotted red;
  -moz-outline-radius-topleft: 2em;
}

```
### Result


Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-outline-radius-topleft` | No | No | 1–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No | No | No | 4–88From Firefox 88, [outline](https://developer.mozilla.org/docs/Web/CSS/outline) now follows the shape created by [border-radius](https://developer.mozilla.org/docs/Web/CSS/border-radius) automatically, so this property is no longer needed (see [bug 1694146](https://bugzil.la/1694146)). | No | No | No |


See also
--------


* See the [`-moz-outline-radius`](-moz-outline-radius) property for more information.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius-topleft>

-webkit-text-stroke
===================



The `-webkit-text-stroke` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the [width](length) and [color](color_value) of strokes for text characters. This is a shorthand property for the longhand properties [`-webkit-text-stroke-width`](-webkit-text-stroke-width) and [`-webkit-text-stroke-color`](-webkit-text-stroke-color).

 
```
/\* Width and color values \*/
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

/\* Global values \*/
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;

```


Constituent properties
----------------------



This property is a shorthand for the following CSS properties:

 * [`-webkit-text-stroke-color`](-webkit-text-stroke-color)
* [`-webkit-text-stroke-width`](-webkit-text-stroke-width)


Syntax
------


### Values


 [`<length>`](length)  The width of the stroke.

  [`<color>`](color_value)  The color of the stroke.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | as each of the properties of the shorthand:* [`-webkit-text-stroke-width`](-webkit-text-stroke-width): `0`
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color): `currentcolor`
 |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as each of the properties of the shorthand:* [`-webkit-text-stroke-width`](-webkit-text-stroke-width): absolute [`<length>`](length)
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color): computed color
 |
| Animation type | as each of the properties of the shorthand:* [`-webkit-text-stroke-width`](-webkit-text-stroke-width): discrete
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color): a [color](color_value#interpolation)
 |

Formal syntax
-------------



```
-webkit-text-stroke =   
  <line-width>  [||](value_definition_syntax#double_bar)  
  [<color>](color_value)         
  
<line-width> =   
  [<length [0,∞]>](length)  [|](value_definition_syntax#single_bar)  
  thin            [|](value_definition_syntax#single_bar)  
  medium          [|](value_definition_syntax#single_bar)  
  thick             
  

```
Examples
--------


### Adding a red text stroke



#### HTML

 
```
<p id="example">The stroke of this text is red.</p>

```
 #### CSS

 
```
#example {
  font-size: 3em;
  margin: 0;
  -webkit-text-stroke: 2px red;
}

```
 #### Result



Specifications
--------------




| Specification |
| --- |
| [Compatibility Standard # the-webkit-text-stroke](https://compat.spec.whatwg.org/#the-webkit-text-stroke) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-webkit-text-stroke` | 4 | 15 | 49 | No | 15 | 3 | 4 | 18 | 49 | 14 | 2 | 1.0 |


See also
--------


* [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)
* [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
* [`-webkit-text-stroke-width`](-webkit-text-stroke-width)
* [`-webkit-text-stroke-color`](-webkit-text-stroke-color)
* [`-webkit-text-fill-color`](-webkit-text-fill-color)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke>

scroll-snap-coordinate
======================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `scroll-snap-coordinate` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's [`scroll-snap-destination`](scroll-snap-destination) for each respective axis.

 
```
/\* Keyword value \*/
scroll-snap-coordinate: none;

/\* <position> values \*/
scroll-snap-coordinate: 50px 50px; /\* Single coordinate \*/
scroll-snap-coordinate: 100px 100px, 100px bottom; /\* Multiple coordinates \*/

/\* Global values \*/
scroll-snap-coordinate: inherit;
scroll-snap-coordinate: initial;
scroll-snap-coordinate: unset;

```
 If the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed.



Syntax
------


### Values


 `none`  Specifies that the element does not contribute to a snap point.

  [`<position>`](position_value)  Specifies the offset of the snap coordinates from the start edge of the element's border box. For each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `none` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| Percentages | refer to the element’s border box |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a [position](position_value#interpolation) |

Formal syntax
-------------



```
scroll-snap-coordinate =
  none | <position>#

```
Examples
--------


### Setting scroll snap coordinates



#### HTML

 
```
<div id="container">
  <div>
    <p>At coordinate (0, 0)</p>
    <div class="scrollContainer coordinate0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (25, 0)</p>
    <div class="scrollContainer coordinate25">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (50, 0)</p>
    <div class="scrollContainer coordinate50">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
</div>

```
 #### CSS

 
```
#container {
  display: flex;
}

#container > div:nth-child(-n + 2) {
  margin-right: 20px;
}

.scrollContainer {
  width: 100px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-type: mandatory;
  font-size: 0;
}

.scrollContainer > div {
  width: 100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.coordinate0 > div {
  scroll-snap-coordinate: 0 0;
}

.coordinate25 > div {
  scroll-snap-coordinate: 25px 0;
}

.coordinate50 > div {
  scroll-snap-coordinate: 50px 0;
}

.scrollContainer > div:nth-child(even) {
  background-color: #87ea87;
}

.scrollContainer > div:nth-child(odd) {
  background-color: #87ccea;
}

```
 #### Result



Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-snap-coordinate` | No | No | 39–68 | No | No | No | No | No | 39–68 | No | No | No |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-coordinate>

scroll-snap-destination
=======================



**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the [compatibility table](#browser_compatibility) at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.


**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The `scroll-snap-destination` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines the position in x and y coordinates within the scroll container's visual [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport) which element snap points align with.

 
```
/\* <position> value \*/
scroll-snap-destination: 400px 600px;

/\* Global values \*/
scroll-snap-destination: inherit;
scroll-snap-destination: initial;
scroll-snap-destination: unset;

```


Syntax
------


### Values


 `<position>`  Specifies the offset of the snap destination from the start edge of the scroll container's visual viewport. The first value gives the x coordinate of the snap destination, the second value its y coordinate.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `0px 0px` |
| Applies to | scroll containers |
| [Inherited](inheritance) | no |
| Percentages | relative to same axis of the padding-box of the scroll container |
| [Computed value](computed_value) | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a [position](position_value#interpolation) |

Formal syntax
-------------



```
scroll-snap-destination =
  <position>

```
Examples
--------


### Setting scroll snap destination



#### HTML

 
```
<div id="container">
  <div>
    <p>At coordinate (0, 0)</p>
    <div class="scrollContainer destination0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (25, 0)</p>
    <div class="scrollContainer destination25">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>

  <div>
    <p>At coordinate (50, 0)</p>
    <div class="scrollContainer destination50">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
</div>

```
 #### CSS

 
```
#container {
  display: flex;
}

#container > div:nth-child(-n + 2) {
  margin-right: 20px;
}

.scrollContainer {
  width: 100px;
  overflow: auto;
  white-space: nowrap;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-type: mandatory;
  scroll-snap-destination: 20px 0;
  font-size: 0;
}

.destination0 {
  scroll-snap-destination: 0 0;
}

.destination25 {
  scroll-snap-destination: 25px 0;
}

.destination50 {
  scroll-snap-destination: 50px 0;
}

.scrollContainer > div {
  width: 100px;
  height: 100px;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  font-size: 50px;
}

.scrollContainer > div:nth-child(even) {
  background-color: #87ea87;
}

.scrollContainer > div:nth-child(odd) {
  background-color: #87ccea;
}

```
 #### Result



Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `scroll-snap-destination` | No | No | 39–68 | No | No | No | No | No | 39–68 | No | No | No |


See also
--------


* [CSS Scroll Snap](css_scroll_snap)
* [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination>

zoom
====



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The non-standard `zoom` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property can be used to control the magnification level of an element. [`transform: scale()`](transform-function/scale) should be used instead of this property, if possible. However, unlike CSS Transforms, `zoom` affects the layout size of the element.



Syntax
------



```
/\* Keyword values \*/
zoom: normal;
zoom: reset;

/\* <percentage> values \*/
zoom: 50%;
zoom: 200%;

/\* <number> values \*/
zoom: 1.1;
zoom: 0.7;

/\* Global values \*/
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;

```
### Values


 `normal`  Render this element at its normal size.

  
`reset`  Non-standard 
  Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing `Ctrl` - `-` or `Ctrl` + `+` keyboard shortcuts) to the document. **Do not use** this value, *use the standard `unset` value instead*.

  [`<percentage>`](percentage)  Zoom factor. `100%` is equivalent to `normal`. Values larger than `100%` zoom in. Values smaller than `100%` zoom out.

  [`<number>`](number)  Zoom factor. Equivalent to the corresponding percentage (`1.0` = `100%` = `normal`). Values larger than `1.0` zoom in. Values smaller than `1.0` zoom out.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `normal` |
| Applies to | all elements |
| [Inherited](inheritance) | no |
| [Computed value](computed_value) | as specified |
| Animation type | an [integer](integer#interpolation) |

Formal syntax
-------------



```
zoom =
  normal | reset | <number> | <percentage>

```
Examples
--------


### First example



#### HTML

 
```
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

```
 #### CSS

 
```
.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

```
 #### Result



### Second example



#### HTML

 
```
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

```
 #### CSS

 
```
div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}

```
 #### Result



Specifications
--------------


Not part of any standard. Apple has [a description in the Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15). Rossen Atanassov of Microsoft has [an unofficial draft specification proposal on GitHub](https://github.com/atanassov/css-zoom).

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `zoom` | 1 | 12 | NoSee [bug 390936](https://bugzil.la/390936). | 5.5 | 15 | 3.1 | ≤37 | 18 | NoSee [bug 390936](https://bugzil.la/390936). | 14 | 3 | 1.0 |
| `reset` | 1–59 | No | No | No | 15–46 | 3.1 | ≤37–59 | 18–59 | No | 14–43 | 3 | 1.0–7.0 |


See also
--------


* [`zoom` entry in CSS-Tricks' CSS Almanac](https://css-tricks.com/almanac/properties/z/zoom/)
* [Bug 390936: Implement Internet Explorer `zoom` property for CSS](https://bugzil.la/390936) on the Firefox issue tracker Bugzilla


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/zoom>

container-name
==============


 The **container-name** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies a list of query container names used by the <@container> at-rule in a [container query](css_container_queries). A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the [`@container`](@container) at-rule instead of the nearest ancestor with containment. 


Syntax
------



```
container-name: <container-name>;

```
### Values


 `<container-name>`  A case-sensitive string that is used to identify the container.

 The following conditions apply:

 * The name can be any valid [`<custom-ident>`](custom-ident), but must not equal `default`.
* The name value must not be in quotes.
* The dashed ident intended to denote author-defined identifiers (e.g., `--container-name`) is permitted.
* A list of multiple names separated by a space is allowed.

  Examples
--------


### Using a container name



Given the following HTML example which is a card component with a title and some text:

 
```
<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

```
  To create a containment context, add the `container-type` property to an element in CSS. The following example creates two containment contexts, one for the card meta information and one for the post excerpt: 

  **Note:** A shorthand syntax for these declarations are described in the [`container`](container) page.

  
```
.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

```
  Writing a container query via the [`@container`](@container) at-rule will apply styles to the elements of the container when the query evaluates to true. The following example has two container queries, one that will apply only to the contents of the `.post-excerpt` element and one that will apply to both the `.post-meta` and `.post-excerpt` contents: 

 
```
@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}

```
 For more information on writing container queries, see the [CSS Container Queries](css_container_queries) page.


### Using multiple container names



You can also provide multiple names to a container context separated by a space:

 
```
.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

```
  This will allow you to target the container using either name in the [`@container`](@container) at-rule. This is useful if you want to target the same container with multiple container queries where either condition could be true: 

 
```
@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

```

Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 3 # container-name](https://w3c.github.io/csswg-drafts/css-contain-3/#container-name) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `container-name` | 105 | 105 | 110 | No | 91 | 16 | 105 | 105 | 110 | 72 | 16 | 20.0 |


See also
--------


* [CSS container queries](css_container_queries)
* [`@container`](@container) at-rule
* CSS [`container`](container) shorthand property
* CSS [`container-type`](container-type) property
* CSS [`content-visibility`](content-visibility) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/container-name>

container
=========


The **container** [shorthand](shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property establishes the element as a query container and specifies the name or name for the [containment context](css_container_queries#naming_containment_contexts) used in a [container query](css_container_queries).


Syntax
------



```
container: <container-name> / <container-type>;

```
### Values


 `<container-name>`   A case-sensitive name for the containment context. More details on the syntax are covered in the [`container-name`](container-name) property page. 

  `<container-type>`   The type of containment context. More details on the syntax are covered in the [`container-type`](container-type) property page. 

  Example
-------



Given the following HTML example which is a card component with an image, a title, and some text:

 
```
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

```
 The explicit way to create a container context is to declare a `container-type` with an optional `container-name`:

 
```
.post {
  container-type: inline-size;
  container-name: sidebar;
}

```
 The `container` shorthand is intended to make this simpler to define in a single declaration:

 
```
.post {
  container: sidebar / inline-size;
}

```
 You can then target that container by name using the [`@container`](@container) at-rule:

 
```
@container sidebar (min-width: 400px) {
  /\* <stylesheet> \*/
}

```
 For more information on container queries, see the [CSS Container Queries](css_container_queries) page.


Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 3 # container-shorthand](https://w3c.github.io/csswg-drafts/css-contain-3/#container-shorthand) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `container` | 105 | 105 | 110 | No | 91 | 16 | 105 | 105 | 110 | 72 | 16 | 20.0 |


See also
--------


* [CSS container queries](css_container_queries)
* [`@container`](@container) at-rule
* CSS [`contain`](contain) property
* CSS [`container-type`](container-type) property
* CSS [`container-name`](container-name) property
* CSS [`content-visibility`](content-visibility) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/container>

CSS colors
==========



The **CSS color** module defines colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content.

 While this module has only two CSS properties, [`color`](color) and [`opacity`](opacity), over 20 CSS and SVG properties, CSS images, at-rules, and @media rules depend on these two properties.



### Colors in action



The color syntax converter below shows the values of the currently selected color in [red-green-blue](color_value/rgb) (RGB), [hexadecimal](hex-color) (HEX), [hue, saturation, and lightness](color_value/hsl) (HSL), and [hue, whiteness, and blackness](color_value/hwb) (HWB) CSS color formats. All the RGB, HEX, HSL, and HWB color values here, while written differently, represent the same color value.


 Selecting a color via the [color picker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) and an opacity via the [slider](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) updates the RGB, HEX, HSL, and HWB values. When you choose a new color or opacity value, the color of the background and the slider update via the CSS properties [`background-color`](background-color) and [`accent-color`](accent-color), respectively.

 To see the code for this color syntax converter, [view the source on Github](https://github.com/mdn/css-examples/blob/main/modules/colors.html).


Reference
---------


### Properties


* [`color`](color)
* [`opacity`](opacity)
### At-rules and descriptors


* [`@color-profile`](@color-profile)
	+ [`components`](@color-profile#descriptors) descriptor
	+ [`rendering-intent`](@color-profile#descriptors) descriptor
	+ [`src`](@color-profile#descriptors) descriptor
### Functions


* Absolute color functions, including:
	+ [`rgb()`](color_value/rgb) and its `rgba()` alias
	+ [`hsl()`](color_value/hsl) and its `hsla()` alias
	+ [`hwb()`](color_value/hwb)
	+ [`lab()`](color_value/lab)
	+ [`lch()`](color_value/lch)
	+ [`oklab()`](color_value/oklab)
	+ [`oklch()`](color_value/oklch)
	+ [`color()`](color_value/color)
* [`color-contrast()`](color_value/color-contrast)  Experimental
* [`color-mix()`](color_value/color-contrast)
* [`device-cmyk()`](color_value/device-cmyk)  Experimental
### Data types


* [`<color>`](color_value)
* [`<absolute-color-function>`](#functions)
* [`<hex-color>`](hex-color)
* [`<named-color>`](named-color)
* [`<alpha-value>`](alpha-value)
* [`<hue>`](hue)
* [`<system-color>`](system-color)
* [`<colorspace-params>`](color_value/color#using_predefined_colorspaces_with_color)
### Keywords


* [`currentcolor`](color_value#currentcolor_keyword)
* [`transparent`](named-color#transparent)
### Interfaces


* `CSSColorProfileRule`  Experimental
Guides
------


 [Applying color to HTML elements using CSS](css_colors/applying_color)  A guide to using CSS to apply color to a variety of types of content. All color-related CSS properties are touched upon.

  [Understanding color and luminance](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance)  Color perception and using colors with color insensitive (color blind) users, reduced vision users and users with vestibular disorders or other neurological disorders in mind.

  [WCAG 1.4.1: Color contrast](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast)  Explanation of contrast requirements between background and foreground content to ensure legibility.

  [Color picker tool](css_colors/color_picker_tool)  This tool makes it easy to create, adjust, and experiment with custom colors.

  Related concepts
----------------


* CSS properties that are part of other specifications:
	+ [`accent-color`](accent-color)
	+ [`background-color`](background-color)
	+ [`background-image`](background-image)
	+ [`border-color`](border-color)
	+ [`box-shadow`](box-shadow)
	+ [`caret-color`](caret-color)
	+ [`color`](color)
	+ [`color-scheme`](color-scheme)
	+ [`column-rule-color`](column-rule-color)
	+ [`outline-color`](outline-color)
	+ [`scrollbar-color`](scrollbar-color)
	+ [`text-decoration-color`](text-decoration-color)
	+ [`text-emphasis-color`](text-emphasis-color)
	+ [`text-shadow`](text-shadow)
	+ [`-webkit-tap-highlight-color`](-webkit-tap-highlight-color)
* SVG color properties that are part of other specifications:
	+ [`fill`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)
	+ [`flood-color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/flood-color)
	+ [`lighting-color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lighting-color)
	+ [`stop-color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-color)
	+ [`stroke`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)
* SVG [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color) attribute
* [Color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel) glossary term
* [Interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation) glossary term
* The [`@font-palette-values`](@font-palette-values) at-rule [`override-colors`](@font-palette-values/override-colors) descriptor
* The [`@color-profile`](@color-profile) at-rule
* The [`color-gamut`](@media/color-gamut) @media feature
* The [`forced-colors`](@media/forced-colors) @media feature
Specifications
--------------




| Specification |
| --- |
| [CSS Color Module Level 4](https://drafts.csswg.org/css-color/)  |
| [CSS Color Module Level 5](https://drafts.csswg.org/css-color-5/)  |


See also
--------


* [CSS color adjustment](css_color_adjustment) module and the [`print-color-adjust`](print-color-adjust) property.
* [CSS images](css_images) module, which is where CSS [`<gradient>`](gradient) images are defined.
* The [`VideoColorSpace`](https://developer.mozilla.org/en-US/docs/Web/API/VideoColorSpace) interface
* The SVG [`<feColorMatrix>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix) element
* [Canvas API: applying styles and colors](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#colors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors>

container-type
==============


The **container-type** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property is used to define the [type of containment](css_container_queries#naming_containment_contexts) used in a [container query](css_container_queries).


Syntax
------



```
container-type: <type>;

```
### Values



 `size`   Establishes a query container for container size queries on both the inline and block axis in both the [inline and block](css_logical_properties/basic_concepts#block_and_inline_dimensions) dimensions. Applies layout containment, style containment, and size containment to the container. 

  `inline-size`   Establishes a query container for dimensional queries on the [inline axis](css_logical_properties/basic_concepts#block_and_inline_dimensions) of the container. Applies layout, style, and inline-size containment to the element. 

  `normal`  The element is not a query container for any container size queries, but remains a query container for container style queries.

    **Note:** to understand what happens when you apply layout, style, and size containment to a box, see the [`contain`](contain) property.

 
Example
-------



Given the following HTML example which is a card component with an image, a title, and some text:

 
```
<div class="container">
  <div class="card">
    <img src="image.png" alt="Cat with two different color eyes" />
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

```
  To create a container context, add the `container-type` property to an element. The following uses the `inline-size` value to create a containment context for the [inline axis](css_logical_properties/basic_concepts#block_and_inline_dimensions) of the container: 

 
```
.container {
  container-type: inline-size;
}

```
 Writing a container query via the [`@container`](@container) at-rule will apply styles to the elements of the container when it is wider than 400px:

 
```
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

```
 For more information on container queries, see the [CSS Container Queries](css_container_queries) page.


Specifications
--------------




| Specification |
| --- |
| [CSS Containment Module Level 3 # container-type](https://w3c.github.io/csswg-drafts/css-contain-3/#container-type) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `container-type` | 105 | 105 | 110 | No | 91 | 16 | 105 | 105 | 110 | 72 | 16 | 20.0 |


See also
--------


* [CSS container queries](css_container_queries)
* [`@container`](@container) at-rule
* CSS [`container`](container) shorthand property
* CSS [`container-name`](container-name) property
* CSS [`content-visibility`](content-visibility) property


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/container-type>

Basic concepts of Logical Properties and Values
===============================================


The Logical Properties and Values Specification introduces flow-relative mappings for many of the properties and values in CSS. This article introduces the specification, and explains flow relative properties and values.


Why do we need logical properties?
----------------------------------



CSS traditionally has sized things according to the physical dimensions of the screen. Therefore we describe boxes as having a [`width`](../width) and [`height`](../height), position items from the `top` and `left`, float things left, assign borders, margin, and padding to the `top`, `right`, `bottom`, `left`, etc. The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) defines mappings for these physical values to their logical, or flow relative, counterparts — e.g. `start` and `end` as opposed to `left` and `right`/`top` and `bottom`.

 An example of why these mappings might be needed is as follows. I have a Layout using CSS Grid, the grid container has a width applied and I am using the [`align-self`](../align-self) and [`justify-self`](../justify-self) properties to align the items. These properties are flow relative — `justify-self: start` aligns the item to the start on the inline dimension, `align-self: start` does the same on the block dimension.

  ![A grid in a horizontal writing mode] 

 If I now change the writing mode of this component to `vertical-rl` using the [`writing-mode`](../writing-mode) property, the alignment continues to work in the same way. The inline dimension is now running vertically and the block dimension horizontally. The grid doesn't look the same, however, as the width assigned to the container is a horizontal measure, a measure tied to the physical and not the logical or flow relative running of the text.

  ![A grid in vertical writing mode.] 

 If instead of the `width` property we use the logical property [`inline-size`](../inline-size), the component now works the same way no matter which writing mode it is displayed using.

  ![A grid layout in vertical writing mode] 

 You can try this out in the live example below. Change `writing-mode` from `vertical-rl` to `horizontal-tb` on `.grid` to see how the different properties change the layout.


 When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.


Block and inline dimensions
---------------------------



A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of `block` and `inline` rather than `right` and `left`/`top` and `bottom` when aligning items.

 The `inline` dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is *horizontal*. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now *vertical*, as lines in that writing mode run vertically.

 The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic, these run vertically, whereas in any vertical writing mode these run horizontally.

 The below diagram shows the inline and block directions in a horizontal writing mode:

  ![diagram showing the inline axis running horizontally, block axis vertically.] 

 This diagram shows block and inline in a vertical writing mode:

  ![Diagram showing the block axis running horizontally the inline axis vertically.] 


See also
--------


* [Box Alignment in Grid Layout](../css_grid_layout/box_alignment_in_css_grid_layout)
* [Box Alignment in Flex Layout](../css_box_alignment/box_alignment_in_flexbox)
* [Understanding Logical Properties and Values](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)
* [Writing Modes](../css_flow_layout/flow_layout_and_writing_modes)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts>

Logical properties for floating and positioning
===============================================


The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) contains logical mappings for the physical values of [`float`](../float) and [`clear`](../clear), and also for the positioning properties used with [positioned layout](../css_positioning). This guide takes a look at how to use these.


Mapped properties and values
----------------------------



The table below details the properties and values discussed in this guide along with their physical mappings. They assume a horizontal [`writing-mode`](../writing-mode), with a left-to-right direction.

 

| Logical property or value | Physical property or value |
| --- | --- |
| [`float`](../float): inline-start | [`float`](../float): left |
| [`float`](../float): inline-end | [`float`](../float): right |
| [`clear`](../clear): inline-start | [`clear`](../clear): left |
| [`clear`](../clear): inline-end | [`clear`](../clear): right |
| [`inset-inline-start`](../inset-inline-start) | [`left`](../left) |
| [`inset-inline-end`](../inset-inline-end) | [`right`](../right) |
| [`inset-block-start`](../inset-block-start) | [`top`](../top) |
| [`inset-block-end`](../inset-block-end) | [`bottom`](../bottom) |
| [`text-align`](../text-align): start | [`text-align`](../text-align): left |
| [`text-align`](../text-align): end | [`text-align`](../text-align): right |

 In addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the [`inset`](../inset) property.

 

| Logical property | Purpose |
| --- | --- |
| [`inset-inline`](../inset-inline) | Sets both of the above inset values for the inline dimension simultaneously. |
| [`inset-block`](../inset-block) | Sets both of the above inset values for the block dimension simultaneously. |
| [`inset`](../inset) | Sets all four inset values simultaneously with physical mapping of multi-value. |


Float and clear example
-----------------------



The physical values used with the [`float`](../float) and [`clear`](../clear) properties are `left`, `right` and `both`. The Logical Properties specification defines the values `inline-start` and `inline-end` as mappings for `left` and `right`.

 In the example below I have two boxes — the first has the box floated with `float: left`, the second with `float: inline-start`. If you change the `writing-mode` to `vertical-rl` or the `direction` to `rtl` you will see that the left-floated box always sticks to the left, whereas the `inline-start`-floated item follows the `direction` and `writing-mode`.



Example: Inset properties for positioned layout
-----------------------------------------------



Positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To do this we have historically used the physical properties [`top`](../top), [`right`](../right), [`bottom`](../bottom) and [`left`](../left).

 These properties take a length or a percentage as a value, and relate to the user's screen dimensions.

 New properties have been created in the Logical Properties specification for when you want the positioning to relate to the flow of text in your writing mode. These are as follows: [`inset-block-start`](../inset-block-start), [`inset-block-end`](../inset-block-end), [`inset-inline-start`](../inset-inline-start) and [`inset-inline-end`](../inset-inline-end).

 In the below example I have used the `inset-block-start` and `inset-inline-end` properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has `position: relative`. Change the `writing-mode` property to `vertical-rl`, or add `direction: rtl`, and see how the flow relative box stays with the text direction.



New two- and four-value shorthands
----------------------------------



As with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once.

 * [`inset`](../inset) — sets all four sides together with physical mapping.
* [`inset-inline`](../inset-inline) — sets both logical inline insets.
* [`inset-block`](../inset-block) — sets both logical block insets.


Example: Logical values for text-align
--------------------------------------



The [`text-align`](../text-align) property has logical values that relate to text direction — rather than using `left` and `right` we can use `start` and `end`. In the below example I have set `text-align: right` in the first block and `text-align: end` in the second.

 If you change the value of `direction` to `rtl` you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.


 This works more consistently when using box alignment that uses start and end rather than physical directions for alignment.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning>

Using filter effects
====================


Have you ever hovered over a black-and-white or sepia image and the full-color image came into view instantly? Have you ever encountered a background image with a small blurred-out section that makes the text on top more legible? In the past, these manipulations required image editing software, time, and additional HTTP requests.


Advantages of using CSS filter effects
--------------------------------------



The [Filter effects](../filter_effects) module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable.

 The CSS filter effects module provides the [`filter`](../filter) and [`backdrop-filter`](../backdrop-filter) properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the [`<filter-function>`](../filter-function) data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create.


Filter effect properties
------------------------



The following two filter properties of the CSS filter effects module enable you to apply zero, one, or more graphical effects to an element:

 * Using the [`filter`](../filter) property, you can apply filter effects such as blur, drop-shadow, and sepia to an element before the element is rendered. The filters effects are applied directly on the element, including the element's contents, borders, and padding.
* Using the the [`backdrop-filter`](../backdrop-filter) property, you can apply graphical effects to the area behind an element (the element's "backdrop"). The `backdrop-filter` property is often used to make the foreground content more legible, especially when the larger area on which the content is placed otherwise does not provide enough contrast for the content. The filter effects are applied only to the background of the element and not to the element's content.

 The `filter` and `backdrop-filter` properties accept a space-separated list of filters, which are applied in the order declared.


Filter functions
----------------



The CSS filter effects module provides 10 [`<filter-function>`](../filter#functions) functions, as well as the ability to define an almost endless array of effects using SVG filters applied via a `url()` reference.

 The following table lists the 10 filter functions, along with their value types, the minimum valid value if applicable, the largest value that creates an effect, and the initial value used for [interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation).

 

| Filter function | Parameter type | Min value | Max effect | Interpolation value | Default value (no effect) |
| --- | --- | --- | --- | --- | --- |
| [`blur()`](../filter-function/blur) | [`<length>`](../length) | `0` |  | `0` | `blur(0)` |
| [`brightness()`](../filter-function/brightness) | [`<number>`](../number) or [`<percentage>`](../percentage) | `0` |  | `1` | `brightness(1)` or `brightness(100%)` |
| [`contrast()`](../filter-function/contrast) | [`<length>`](../length) | `0` |  | `1` | `contrast(1)` or `contrast(100%)` |
| [`drop-shadow()`](../filter-function/drop-shadow) | `<shadow>` |  |  | `0 0 0 currentcolor` | `drop-shadow(0 0 0 currentcolor)` |
| [`grayscale()`](../filter-function/grayscale) | [`<number>`](../number) or [`<percentage>`](../percentage) | `0` | `100%` | `0` | `grayscale(0)` or `grayscale(0%)` |
| [`hue-rotate()`](../filter-function/hue-rotate) | [`<angle>`](../angle) |  |  | `0` | `hue-rotate(0deg)` |
| [`invert()`](../filter-function/invert) | [`<number>`](../number) or [`<percentage>`](../percentage) | `0` | `100%` | `0` | `invert(0)` or `invert(0%)` |
| [`opacity()`](../filter-function/opacity) | [`<number>`](../number) or [`<percentage>`](../percentage) | `0` | `100%` | `1` | `opacity(1)` or `opacity(100%)` |
| [`saturate()`](../filter-function/saturate) | [`<number>`](../number) or [`<percentage>`](../percentage) | `0` | `100%` | `1` | `saturate(100%)` |
| [`sepia()`](../filter-function/sepia) | [`<number>`](../number) or [`<percentage>`](../percentage) | `0` | `100%` | `0` | `sepia(0%)` |

 The minimum value allowed is included for filter functions that have a minimum value. Including a value less than the minimum value for any filter function invalidates the entire property declaration, not just the offending filter function in the comma-separated list.

 The maximum effect value can be exceeded. Including a value greater than the listed maximum value is valid, but it does not increase the effect over the listed maximum value. In other words, the effect on the element will look the same as when the maximum effect value is set. For example, setting `sepia(400%)` in the [sepia example](#applying_sepia_filter_effect) will produce the same effect as `sepia(100%)`, the maximum value.

 The default value is a value that creates no effect. While these values create no effect, they provide the initial interpolation values and offer an example of how the value can be set. These default values provide a gauge between the minimum value allowed and the maximum effect value.


Applying filter effects
-----------------------


The `filter` and `backdrop-filter` properties accept a filter function list, which may contain one or more `<filter-function>`s, the default keyword `none`, or an [SVG filter](#using_svg_filters) as a `url()` value.

### Applying sepia filter effect



If you hover over the sepia image below, you'll see the full-color image come into view instantly.

 The image is set to be sepia by specifying the value of the `filter` property as the [`sepia()`](../filter-function/sepia) filter function. The filter is removed on [`:hover`](../:hover) and [`:focus`](../:focus) by setting `filter: none`.

 
```
<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />

```
 
```
img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}

```
 In the [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element, [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) is set to `0` to enable focus without altering the tabbing order for keyboard users because `<img>` is not an interactive element.



### Applying filter effects to other elements



While generally applied to images, the `filter` and `backdrop-filter` properties can be applied to any element or pseudo-element.

 In this example, a glow effect is added using a [`drop-shadow()`](../filter-function/drop-shadow) filter with a `3px` blur and `0` offset.

 
```
h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}

```


### Applying multiple filters



While the sepia `filter` example included only a single filter function, you can set multiple filters. The `filter` and `backdrop-filter` properties accept a space-separated list of filters, which are applied in the order declared.

 This example applies two filters — [`hue-rotate()`](../filter-function/hue-rotate) and [`blur()`](../filter-function/blur) — via the `backdrop-filter` property. The backdrop, the area behind the [`<p>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) element, has a color shift and a blur applied.

 
```
.container {
  background: url(image.jpg) no-repeat left / contain goldenrod;
}
p {
  backdrop-filter: hue-rotate(240deg) blur(5px);
  background-color: rgb(255 255 255 / 0.1);
  text-shadow: 2px 2px black;
}

```


### Applying repeated filters



As filters are applied in sequential order, you can use filter functions more than once. In this example, the [`drop-shadow()`](../filter-function/drop-shadow) filter has been used four times, each time with a different `<shadow>` value.

 
```
<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />

```
 
```
img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(210deg 100% 50%)
    )
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
      -2px -2px 0 hsl(30deg 100% 50%)
    );
}
img + img {
  filter: none;
}

```
 In the first Mandala example, four drop shadows are applied to a line-drawn SVG. The same SVG, with the filter removed with `filter: none`, is included for comparison.



### Specifying filter function order



When creating filter effects, the `filter` or `backdrop-filter` property is provided a space-separated list of filters. These filter effects are applied in the order in which they appear.

 In this example, both `magenta` drop shadow and `180deg` hue rotation are applied on the level-one heading. The example shows the effect when these filters are applied in different orders.

 
```
h1 {
  color: midnightblue;
}
#hueFirst {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
}
#shadowFirst {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
}

```

 The same filters are applied to both the lines of text but in a different order. In the first line, the hue of the text is altered before the shadow is applied, so the shadow is `magenta`. In the second line, the drop shadow is added to the dark blue text, and then the hue of both the text and the shadow are altered.

 No filter effect is applied to the third line to show the original effect as a comparison. So the third line stays as `midnightblue` or `#191970`. The `hue-rotate(180deg)` filter changes the text in the first two lines to `#252500`.

  **Note:** The hexadecimal rgb color `#191970` is equal to `hsl(240deg 63.5% 26.9%)`, while `#252500` is `hsl(60deg 100% 7.3%)`. The [color rotation takes place in the sRGB color space](../color_value#interpolation), which is why the hue has been changed as expected while not maintaining the same values for saturation and lightness.

 
Using SVG filters
-----------------



In addition to the 10 defined [`<filter-function>`](../filter-function)s, the CSS filter effects support `url()`, with the parameter being an [SVG filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter), which may be embedded in an internal or external SVG file.

 A single SVG can be used to define several filters, each with an `id`:

 
```
<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

```
 The filter's `id` is referenced in the `url()` for both inline and external SVGs:

 
```
filter: url(#blur3);
filter: url("https://example.com/svg/filters.svg#blur3");

```

### Blurring an image



Just like the [`blur()`](../filter-function/blur) filter function applies a Gaussian blur to the elements on which it is applied, the SVG [`<feGaussianBlur>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur) filter element can also be used to blur content.

 In both the cases, the blur radius value, specified as a [`<length>`](../length) in CSS and as a pixel equivalent [`<number>`](../number) in SVG, defines the value of the standard deviation to the Gaussian function. In other words, it defines the number of pixels on the screen that blend into each other; a larger value creates more blur.

 The [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter)'s `[stdDeviation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stdDeviation)` attribute accepts up to two values enabling creating more complex blur values. To create an equivalent blur, we include one value for `stdDeviation`:

 
```
<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image xlink:href="asset/flag.jpg" filter="url(#blur)" />
</svg>

```
 The SVG `url()` filter value can be included as the value of the SVG [`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) element's [`filter`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter) attribute or as part of the value of the CSS `filter` and `backdrop-filter` properties.

 
```
.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url(#blur);
}

```


See also
--------


* [`mask`](../mask)
* [`background-blend-mode`](../background-blend-mode), [`mix-blend-mode`](../mix-blend-mode)
* [CSS filter effects](../filter_effects)
* SVG [`<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) element, SVG `[filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter)` attribute in [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [Applying SVG effects to HTML content](https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Filter_Effects/Using_filter_effects>

Border-image generator
======================



This tool can be used to generate CSS [`border-image`](../border-image) values.




See also
--------


 [Border-radius generator](border-radius_generator)  This interactive tool lets you visually create rounded corners (the [`border-radius`](../border-radius) property).

  [Box-shadow generator](box-shadow_generator)  This interactive tool lets you visually create shadows behind elements (the [`box-shadow`](../box-shadow) property).

  

 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator>

Border-radius generator
=======================



This tool can be used to generate CSS [`border-radius`](../border-radius) effects.




See also
--------


 [Border-image generator](border-image_generator)  This interactive tool lets you visually create border images (the [`border-image`](../border-image) property).

  [Box-shadow generator](box-shadow_generator)  This interactive tool lets you visually create shadows behind elements (the [`box-shadow`](../box-shadow) property).

  

 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator>

Logical properties for margins, borders, and padding
====================================================



The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) defines flow-relative mappings for the various margin, border, and padding properties and their shorthands. In this guide, we take a look at these.

 If you have looked at the main page for [CSS Logical Properties and Values](../css_logical_properties) you will see there are a huge number of properties listed. This is mostly because there are four longhand values each for margin, border, and padding side, plus all the shorthand values.



Mappings for margins, borders, and padding
------------------------------------------



The specification details mappings for each logical value to a physical counterpart. In the table below I have given these mapped values assuming that the [`writing-mode`](../writing-mode) in use is `horizontal-tb` — with a left to right direction. The inline direction therefore runs horizontally — left to right — and [`margin-inline-start`](../margin-inline-start) would be equivalent to [`margin-left`](../margin-left).

 If you were using a `horizontal-tb` writing mode with a right-to-left text direction then [`margin-inline-start`](../margin-inline-start) would be the same as [`margin-right`](../margin-right), and in a vertical writing mode it would be the same as using [`margin-top`](../margin-top).

 

| Logical property | Physical Property |
| --- | --- |
| [`border-block-end`](../border-block-end) | [`border-bottom`](../border-bottom) |
| [`border-block-end-color`](../border-block-end-color) | [`border-bottom-color`](../border-bottom-color) |
| [`border-block-end-style`](../border-block-end-style) | [`border-bottom-style`](../border-bottom-style) |
| [`border-block-end-width`](../border-block-end-width) | [`border-bottom-width`](../border-bottom-width) |
| [`border-block-start`](../border-block-start) | [`border-top`](../border-top) |
| [`border-block-start-color`](../border-block-start-color) | [`border-top-color`](../border-top-color) |
| [`border-block-start-style`](../border-block-start-style) | [`border-top-style`](../border-top-style) |
| [`border-block-start-width`](../border-block-start-width) | [`border-top-width`](../border-top-width) |
| [`border-inline-end`](../border-inline-end) | [`border-right`](../border-right) |
| [`border-inline-end-color`](../border-inline-end-color) | [`border-right-color`](../border-right-color) |
| [`border-inline-end-style`](../border-inline-end-style) | [`border-right-style`](../border-right-style) |
| [`border-inline-end-width`](../border-inline-end-width) | [`border-right-width`](../border-right-width) |
| [`border-inline-start`](../border-inline-start) | [`border-left`](../border-left) |
| [`border-inline-start-color`](../border-inline-start-color) | [`border-left-color`](../border-left-color) |
| [`border-inline-start-style`](../border-inline-start-style) | [`border-left-style`](../border-left-style) |
| [`border-inline-start-width`](../border-inline-start-width) | [`border-left-width`](../border-left-width) |
| [`border-start-start-radius`](../border-start-start-radius) | [`border-top-left-radius`](../border-top-left-radius) |
| [`border-end-start-radius`](../border-end-start-radius) | [`border-bottom-left-radius`](../border-bottom-left-radius) |
| [`border-start-end-radius`](../border-start-end-radius) | [`border-top-right-radius`](../border-top-right-radius) |
| [`border-end-end-radius`](../border-end-end-radius) | [`border-bottom-right-radius`](../border-bottom-right-radius) |
| [`margin-block-end`](../margin-block-end) | [`margin-bottom`](../margin-bottom) |
| [`margin-block-start`](../margin-block-start) | [`margin-top`](../margin-top) |
| [`margin-inline-end`](../margin-inline-end) | [`margin-right`](../margin-right) |
| [`margin-inline-start`](../margin-inline-start) | [`margin-left`](../margin-left) |
| [`padding-block-end`](../padding-block-end) | [`padding-bottom`](../padding-bottom) |
| [`padding-block-start`](../padding-block-start) | [`padding-top`](../padding-top) |
| [`padding-inline-end`](../padding-inline-end) | [`padding-right`](../padding-right) |
| [`padding-inline-start`](../padding-inline-start) | [`padding-left`](../padding-left) |

 There are also some additional shorthands, made possible because we can target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.

 

| Property | Purpose |
| --- | --- |
| [`border-block`](../border-block) | Sets [`border-color`](../border-color), [`border-style`](../border-style), and [`border-width`](../border-width) for both block borders. |
| [`border-block-color`](../border-block-color) | Sets `border-color` for both block borders. |
| [`border-block-style`](../border-block-style) | Sets `border-style` for both block borders. |
| [`border-block-width`](../border-block-width) | Sets `border-width` for both block borders. |
| [`border-inline`](../border-inline) | Sets `border-color`, `-style`, and `-width` for both inline borders. |
| [`border-inline-color`](../border-inline-color) | Sets `border-color` for both inline borders. |
| [`border-inline-style`](../border-inline-style) | Sets `border-style` for both inline borders. |
| [`border-inline-width`](../border-inline-width) | Sets `border-width` for both inline borders. |
| [`margin-block`](../margin-block) | Sets all the block [`margin`](../margin)s. |
| [`margin-inline`](../margin-inline) | Sets all the inline `margin`s. |
| [`padding-block`](../padding-block) | Sets the block [`padding`](../padding). |
| [`padding-inline`](../padding-inline) | Sets the inline `padding`. |


Margin examples
---------------



The mapped margin properties of [`margin-inline-start`](../margin-inline-start), [`margin-inline-end`](../margin-inline-end), [`margin-block-start`](../margin-block-start), and [`margin-inline-end`](../margin-inline-end) can be used instead of their physical counterparts.

 In the example below I have created two boxes and added different sized margins to each edge. I have added an extra container with a border to make the margin more obvious to see.

 One box uses physical properties and the other logical properties. Try changing the [`direction`](../direction) property to `rtl` to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.

 You can also try changing the `writing-mode` from `horizontal-tb` to `vertical-rl`. Again, notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.



### Margin shorthands



As we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, [`margin-inline`](../margin-inline) and [`margin-block`](../margin-block), which accept two values. The first value will apply to the start of that dimension, the second to the end. If you only use one value it is applied to both.

 In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.

 
```
.box {
  margin-block: 5px 10px;
}

```

Padding examples
----------------



The mapped padding properties of [`padding-inline-start`](../padding-inline-start), [`padding-inline-end`](../padding-inline-end), [`padding-block-start`](../padding-block-start), and [`padding-inline-end`](../padding-inline-end) can be used instead of their physical counterparts.

 In the example below I have two boxes, one of which is using physical padding properties and the other logical padding properties. With a `writing-mode` of `horizontal-tb`, both boxes should appear the same.

 Try changing the `direction` property to `rtl` to cause the boxes to display in a right-to-left direction. The padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch.

 You can also try changing the `writing-mode` from `horizontal-tb` to `vertical-rl`. Again, notice how the padding stays in the same place for the first box, but switches around to follow the text direction in the second.



### Padding shorthands



As with margin, there are two-value shorthands for padding — [`padding-inline`](../padding-inline) and [`padding-block`](../padding-block) — which allow you to set the padding of the two inline, and two block dimensions, respectively.

 In a horizontal `writing-mode` this CSS would apply `5px` of padding to the top of the box and 10px of padding to the bottom:

 
```
.box {
  padding-block: 5px 10px;
}

```

Border examples
---------------



The border properties are the main reason that Logical Properties and Values seems to have so many properties, as we have the longhands for the color, width, and style of the border on each side of a box, along with the shorthand to set all three at once for each side. As with margin and padding we have a mapped version of each physical property.

 The demo below uses some longhands and three shorthand values. As with the other demos try changing the `direction` property to `rtl` to cause the boxes to display in a right-to-left direction, or changing the `writing-mode` from `horizontal-tb` to `vertical-rl`.



### New border shorthands



There are two-value shorthands to set the width, style, and color of the block or inline dimension, and shorthands to set all three values in the block or inline dimension. The below code, in a horizontal writing mode, would give you a 2px green solid border on the top and bottom of the box, and a 4px dotted purple border on the left and right.

 
```
.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

```

### Flow relative border-radius properties



The specification has flow-relative equivalents for the [`border-radius`](../border-radius) longhands. The below example, in a horizontal `writing-mode`, would set the top-right border radius to 1em, the bottom-right to 0, the bottom-left to 20px and the top-left to 40px.

 
```
.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}

```

Indicating logical values for the 4-value shorthand syntax
----------------------------------------------------------



The specification makes a suggestion for the four-value shorthands such as the `margin` property, however the final decision on how this should be indicated is as yet unresolved, and is discussed in [this issue](https://github.com/w3c/csswg-drafts/issues/1282).

 Using any four-value shorthand such as `margin`, `padding`, or `border` will currently use the physical versions, so if following the flow of the document is important, use the longhand properties for the time being.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding>

Logical properties for sizing
=============================



In this guide we will explain the flow-relative mappings between physical dimension properties and logical properties used for sizing elements on our pages.

 When specifying the size of an item, the [Logical Properties and Values](https://drafts.csswg.org/css-logical/) specification gives you the ability to indicate sizing as it relates to the flow of text (inline and block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g. left and right). While these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. You might want some features to always relate to the physical dimensions whatever the writing mode.



Mappings for dimensions
-----------------------



The table below provides mappings between logical and physical properties. These mappings assume that you are in a `horizontal-tb` writing mode, such as English or Arabic, in which case [`width`](../width) would be mapped to [`inline-size`](../inline-size).

 If you were in a vertical writing mode then [`inline-size`](../inline-size) would be mapped to [`height`](../height).

 

| Logical Property | Physical Property |
| --- | --- |
| [`inline-size`](../inline-size) | [`width`](../width) |
| [`block-size`](../block-size) | [`height`](../height) |
| [`min-inline-size`](../min-inline-size) | [`min-width`](../min-width) |
| [`min-block-size`](../min-block-size) | [`min-height`](../min-height) |
| [`max-inline-size`](../max-inline-size) | [`max-width`](../max-width) |
| [`max-block-size`](../max-block-size) | [`max-height`](../max-height) |


Width and height example
------------------------



The logical mappings for [`width`](../width) and [`height`](../height) are [`inline-size`](../inline-size), which sets the length in the inline dimension and [`block-size`](../block-size), which sets the length in the block dimension. When working in English, replacing `width` with `inline-size` and `height` with `block-size` will give the same layout.

 In the live example below I have set the Writing Mode to `horizontal-tb`. Change it to `vertical-rl` and you will see that the first example — which uses `width` and `height` — remains the same size in each dimension, despite the text becoming vertical. The second example — which uses `inline-size` and `block-size` — will follow the text direction as if the entire block has rotated.



Min-width and min-height example
--------------------------------



There are also mappings for [`min-width`](../min-width) and [`min-height`](../min-height) — these are [`min-inline-size`](../min-inline-size) and [`min-block-size`](../min-block-size). These work in the same way as the `inline-size` and `block-size` properties, but setting a minimum rather than a fixed size.

 Try changing the example below to `vertical-rl`, as with the first example, to see the effect it has. I am using `min-height` in the first example and `min-block-size` in the second.



Max-width and max-height example
--------------------------------



Finally you can use [`max-inline-size`](../max-inline-size) and [`max-block-size`](../max-block-size) as logical replacements for [`max-width`](../max-width) and [`max-height`](../max-height). Try playing with the below example in the same way as before.



Logical keywords for resize
---------------------------



The [`resize`](../resize) property sets whether or not an item can be resized and has physical values of `horizontal` and `vertical`. The `resize` property also has logical keyword values. Using `resize: inline` allows resizing in the inline dimension and `resize: block` allow resizing in the block dimension.

 The keyword value of `both` for the resize property works whether you are thinking physically or logically. It sets both dimensions at once. Try playing with the below example.





 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing>

Handling overflow in multi-column layout
========================================


In this guide, we look at how to deal with overflow in a multi-column (*multicol*) layout, both inside the column boxes and in situations where there is more content than will fit into the container.


Overflow inside column boxes
----------------------------



An overflow situation happens when an item's size is larger than the column box. For example, the situation could happen when an image in a column is wider than the `column-width` value or the width of the column based on the number of columns declared with `column-count`.

 In this situation, the content should visibly overflow into the next column, rather than be clipped by the column box. You can see an example of this below, with an image of the expected rendering as, at the time of writing, browsers deal with this differently.


  ![There are two columns of text. In the left column there is a photo that is wider than the column. The image expands into that second column, appearing behind the text of the right column. The flow of text in the right column isn't effected by the protruding photo, but the appearance is.] 

 If you want an image to size down to fit the column box, the standard responsive images solution of setting `max-width: 100%` will achieve that for you.



More columns than will fit
--------------------------



How overflowing columns are handled depends on whether the media context is fragmented, such as print, or is continuous, such as a web page.

 In fragmented media, after a fragment (for example, a page) is filled with columns, the columns will move to a new page and fill that up with columns. In continuous media, columns will overflow in the inline direction. On the web this means that you will get a horizontal scrollbar.

 The example below shows this overflow behavior. The multicol container has a height and there is more text than space to create columns; therefore, we get columns created outside of the container.


 In a future version of the specification, it would be useful to be able to have overflow columns in continuous media display in the block direction, therefore allowing the reader to scroll down to view the next set of columns.


Using vertical media queries
----------------------------



One issue with multicol on the web is that, if your columns are taller than the viewport, the reader will need to scroll up and down to read, which is not good user experience. One way to avoid this is to only apply the column properties if you know you have enough height.

 In the example below, we have used a `min-height` query to check the height before applying the column properties.



Next steps
----------


In the final guide in this series, we will see [how multicol works with the Fragmentation spec](handling_content_breaks_in_multicol) to give us control over how content breaks between columns.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol>

-webkit-tap-highlight-color
===========================



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 `-webkit-tap-highlight-color` is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

 
```
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /\* for removing the highlight \*/

/\* Global values \*/
-webkit-tap-highlight-color: inherit;
-webkit-tap-highlight-color: initial;
-webkit-tap-highlight-color: revert;
-webkit-tap-highlight-color: revert-layer;
-webkit-tap-highlight-color: unset;

```


Syntax
------


### Values


A [`<color>`](color_value).

Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `black` |
| Applies to | all elements |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
-webkit-tap-highlight-color =
  <color>

```
Specifications
--------------


Not part of any standard. Apple has [a description in the Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5).

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-webkit-tap-highlight-color` | 16 | 12 | No | No | 15 | No | ≤37 | 18 | No | 14 | 4 | 1.0 |


See also
--------


* [WebKit CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions)
* Related CSS pseudo-classes:
	+ [`:hover`](:hover)
	+ [`:active`](:active)
	+ [`:visited`](:visited)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color>

Spanning and balancing columns
==============================



In this guide, we look at how to make elements span across columns inside the multi-column (*multicol*) container and how to control how the columns are filled.

  **Note:** The spanning and balancing functionality covered in this guide is not as well supported across browsers as the functionality covered in the previous two sections in this guide.

 

Spanning the columns
--------------------



To cause an item to span across columns use the property [`column-span`](../column-span) with a value of `all`. This will cause the element to span all of the columns.

 Any descendant element of the multicol container may become a *spanner* including both direct and indirect children. For example, a heading nested directly inside the container could become a spanner, as could a heading nested inside a section nested inside the multicol container.

 In the example below, the h2 element is set to `column-span: all` and spans all of the columns.


 In this second example, the heading is inside an [`<article>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) element, yet still spans the content as expected.


 When a spanner is introduced, it breaks the flow of columns and columns restart after the spanner, effectively creating a new set of column boxes. The content does not jump over a spanning element.


### Limitations of column-span


In the current level 1 specification, there are only two allowable values for `column-span`. The value `none` is the initial value and means that the item does not span and remains within a column. The value `all` means that the item spans all of the columns. This means that, for example, you cannot cause an item to span two out of three columns.

### Things to watch out for



If the spanning element is inside another element which has margins, padding and a border or a background color, it is possible to end up with the top of the box appearing above the spanner and the rest displaying below, as shown in the next example. For this reason, some care should be taken when deciding to make an element a spanner and ensure this scenario is accounted for.


 Additionally, if a spanning element appears later in the content it can cause unexpected or unwanted behavior when there is not enough content to create columns after the spanner. Use spanning carefully and test at various breakpoints to make sure you get the intended effect.


Filling and balancing columns
-----------------------------



A balanced set of columns is where all columns have approximately the same amount of content. Filling and balancing comes into play when the amount of content does not match the amount of space provided, such as when a height is declared on the container.

 The initial value of multicol for [`column-fill`](../column-fill) is `balance`. The value of balance means all columns are as balanced as is possible. In fragmented contexts such as [Paged Media](../css_pages), only the last fragment is balanced. This means that on the last page the final set of column boxes will be balanced.

 There is a second value for balancing, `balance-all`, which attempts to balance all columns in fragmented contexts and not just the columns on the final fragment.

 In this example, we have columns containing an image and some text which are balanced. The image cannot break and so goes into the first column and the other columns fill with equal amounts of text.


 The other value for `column-fill` is `auto`. In this case, rather than filling all the columns equally so their heights are balanced, the columns are filled sequentially. In the example below we have changed `column-fill` to `auto` and the columns are now filled, in order, to the height of the multicol container, leaving some columns empty at the end.


 Note that column balancing is not supported by all browsers. Check that you are getting the sort of effect that you expect in the browsers you support.


Next steps
----------


In the next guide, you will learn [how multicol handles overflow](handling_overflow_in_multicol), both within columns and where there are more columns than will fit the container.



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns>

Handling content breaks in multi-column layout
==============================================


Content is broken between column boxes in multi-column layout in the same way that it is broken between pages in paged media. In both contexts, we control where and how things break by using properties of the CSS Fragmentation specification. In this guide, we see how fragmentation works in a *multi-column container* or *multicol container* for short.


Fragmentation basics
--------------------



The [CSS Fragmentation specification](https://www.w3.org/TR/css-break-3/) details how content breaks between the fragmentation containers or *fragmentainers*. In multicol, the fragmentainer is the column box.

 A column box can contain other markup and there are many places where a break would not be ideal. For example, we would generally prefer that the figcaption of an image not be separated into a new column away from the image it refers to and ending a column with a heading looks strange. The fragmentation properties give us ways to exercise some control over this.

 There are various places we might want to control our breaks:

 * Breaks inside boxes, for example inside a figure element.
* Breaks before and after boxes, which would include our heading example above.
* Breaks between lines.


Breaks inside boxes
-------------------



To control breaks inside boxes use the [`break-inside`](../break-inside) property. This property takes values of:

 * `auto`
* `avoid`
* `avoid-page`
* `avoid-column`
* `avoid-region`

 In the example below, we have applied break-inside to the figure element to prevent the caption from becoming separated from the image.



Breaks before and after boxes
-----------------------------



The [`break-before`](../break-before) and [`break-after`](../break-after) properties are used to control breaks before and after elements. They take the following values when in a multicol context:

 * auto
* avoid
* avoid-column
* column

 In this next example, we are forcing a column break before an `h2` element.



Breaks between lines
--------------------



The [`orphans`](../orphans) and [`widows`](../widows) properties are also useful. The orphans property controls the number of lines left on their own at the end of a fragment. The widows property controls the number left on their own at the start of a fragment.

 The `orphans` and `widows` properties take an integer as a value, which represents the number of lines to keep together at the end and start of a fragment, respectively. Note that these properties only work inside a block container, such as a paragraph. If the block has fewer lines in it than the number that you specify as a value, all lines will be kept together.

 In the example below, we are using the `orphans` property to control the number of lines left at the bottom of a column. You can change that value to see the effect on the breaking of the content.



When things don't work as expected
----------------------------------



If you have small amounts of content and are trying to control breaks in a number of ways or on several elements, your content needs to break somewhere, so you may not always get the result you intended. To some extent your use of fragmentation is always a suggestion to the browser, to control breaks in this way if it is possible.

 In addition to the above, browser support for these properties is a little patchy. The compatibility data charts on the individual property pages here on MDN can help you see which browsers support which features. In most cases, the fallback to breaks not being controlled is something you can live with, with suboptimal breaking being untidy rather than a disaster to your layout.




 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol>

CSS Paged Media
===============


**CSS Paged Media** is a module of CSS that defines how page switches are handled.


Reference
---------


### Properties


* [`page-break-after`](page-break-after)
* [`page-break-before`](page-break-before)
* [`page-break-inside`](page-break-inside)
### At-rules


* [`@page`](@page)
### Pseudo-classes


* [`:blank`](:blank)
* [`:first`](:first)
* [`:left`](:left)
* [`:right`](:right)
Specifications
--------------




| Specification |
| --- |
| [CSS Paged Media Module Level 3](https://drafts.csswg.org/css-page/)  |
| [CSS Fragmentation Module Level 3](https://drafts.csswg.org/css-break/)  |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Pages>

CSS Animations tips and tricks
==============================


CSS Animations make it possible to do incredible things with the elements that make up your documents and apps. However, there are things you might want to do that aren't obvious, or clever ways to do things that you might not come up with right away. This article is a collection of tips and tricks we've found that may make your work easier, including how to run a stopped animation again.


Run an animation again
----------------------



The [CSS Animations](../css_animations) specification doesn't offer a way to run an animation again. There's no magic `resetAnimation()` method on elements, and you can't even just set the element's [`animation-play-state`](../animation-play-state) to `"running"` again. Instead, you have to use clever tricks to get a stopped animation to replay.

 Here's one way to do it that we feel is stable and reliable enough to suggest to you.


### HTML content



First, let's define the HTML for a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) we wish to animate and a button that will play (or replay) the animation.

 
```
<div class="box"></div>

<div class="runButton">Click me to run the animation</div>

```

### CSS content



Now we'll define the animation itself using CSS. Some CSS that's not important (the style of the "Run" button itself) isn't shown here, for brevity.

 
```
@keyframes colorchange {
  0% {
    background: yellow;
  }
  100% {
    background: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}

```
 There are two classes here. The `"box"` class is the basic description of the box's appearance, without any animation information included. The animation details are included in the `"changing"` class, which says that the [`@keyframes`](../@keyframes) named `"colorchange"` should be used over the course of two seconds to animate the box.

 Note that because of this, the box doesn't start with any animation effects in place, so it won't be animating.


### JavaScript content



Next we'll look at the JavaScript that does the work. The meat of this technique is in the `play()` function, which is called when the user clicks on the "Run" button.

 
```
function play() {
  document.querySelector(".box").className = "box";
  requestAnimationFrame((time) => {
    requestAnimationFrame((time) => {
      document.querySelector(".box").className = "box changing";
    });
  });
}

```
 This looks weird, doesn't it? That's because the only way to play an animation again is to remove the animation effect, let the document recompute styles so that it knows you've done that, then add the animation effect back to the element. To make that happen, we have to be creative.

 Here's what happens when the `play()` function gets called:

 1. The box's list of CSS classes is reset to `"box"`. This has the effect of removing any other classes currently applied to the box, including the `"changing"` class that handles animation. In other words, we're removing the animation effect from the box. However, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change.
2. To be sure that the styles are recalculated, we use [`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), specifying a callback. Our callback gets executed just before the next repaint of the document. The problem for us is that because it's before the repaint, the style recomputation hasn't actually happened yet!
3. Our callback cleverly calls `requestAnimationFrame()` a second time! This time, the callback is run before the next repaint, which is after the style recomputation has occurred. This callback adds the `"changing"` class back onto the box, so that the repaint will start the animation once again.

 Of course, we also need to add an event handler to our "Run" button so it'll actually do something:

 
```
document.querySelector(".runButton").addEventListener("click", play, false);

```

### Result


Stopping an animation
---------------------



Removing the [`animation-name`](../animation-name) applied to an element will make it jump or cut to its next state. If instead you'd like the animation to complete and then come to a stop you have to try a different approach. The main tricks are:

 1. Make your animation as self-contained as possible. This means you should not rely on `animation-direction: alternate`. Instead you should explicitly write a keyframe animation that goes through the full animation in one forward repetition.
2. Use JavaScript and clear the animation being used when the `animationiteration` event fires.

 The following demo shows how you'd achieve the aforementioned JavaScript technique:

 
```
.slidein {
  animation-duration: 5s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

.stopped {
  animation-name: none;
}

@keyframes slidein {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 50%;
  }
  100% {
    margin-left: 0%;
  }
}

```
 
```
<h1 id="watchme">Click me to stop</h1>

```
 
```
const watchme = document.getElementById("watchme");

watchme.className = "slidein";
const listener = (e) => {
  watchme.className = "slidein stopped";
};
watchme.addEventListener("click", () =>
  watchme.addEventListener("animationiteration", listener, false)
);

```
 Demo <https://jsfiddle.net/morenoh149/5ty5a4oy/>


See also
--------


* [Using CSS transitions](../css_transitions/using_css_transitions)
* [`Window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips>

Using media queries for accessibility
=====================================


[**Media Queries**](../@media) can be used to help users with disabilities better experience your website.


Reduced Motion
--------------



Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity. The [`prefers-reduced-motion`](../@media/prefers-reduced-motion) media query enables providing an experience with fewer animations and transitions to users who have set their operating system's accessibility preferences to reduce motion.

 Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.


### Syntax


 `no-preference`  Indicates that the user has made no preference known to the system.

  `reduce`  Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.

  ### Example



This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.

 #### HTML

 
```
<div class="animation">animated box</div>

```
 #### CSS

 
```
.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

```
 The value of `prefers-reduced-motion` is `reduce`, not "none". Users are not expecting no animation, such as could be set with `* {animation: none !important;}`. Rather, they expect motion animation triggered by interaction to be disabled, unless the animation is essential to the functionality or the information being conveyed (see [WCAG: Animation from Interactions](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)).


See also
--------


* [Designing With Reduced Motion For Motion Sensitivities](https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility>

Testing media queries programmatically
======================================


The [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM) provides features that can test the results of a [media query](../media_queries) programmatically, via the [`MediaQueryList`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) interface and its methods and properties. Once you've created a `MediaQueryList` object, you can check the result of the query or receive notifications when the result changes.


Creating a media query list
---------------------------



Before you can evaluate the results of a media query, you need to create the `MediaQueryList` object representing the query. To do this, use the [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) method.

 For example, to set up a query list that determines if the device is in landscape or portrait orientation:

 
```
const mediaQueryList = window.matchMedia("(orientation: portrait)");

```

Checking the result of a query
------------------------------



Once you've created your media query list, you can check the result of the query by looking at the value of its `matches` property:

 
```
if (mediaQueryList.matches) {
  /\* The viewport is currently in portrait orientation \*/
} else {
  /\* The viewport is not currently in portrait orientation, therefore landscape \*/
}

```

Receiving query notifications
-----------------------------



If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a [listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) than to poll the query's result. To do this, call the `addEventListener()` method on the [`MediaQueryList`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from `true` to `false`):

 
```
// Create the query list.
const mediaQueryList = window.matchMedia("(orientation: portrait)");

// Define a callback function for the event listener.
function handleOrientationChange(mql) {
  // …
}

// Run the orientation change handler once.
handleOrientationChange(mediaQueryList);

// Add the callback function as a listener to the query list.
mediaQueryList.addEventListener("change", handleOrientationChange);

```
 This code creates the orientation-testing media query list, then adds an event listener to it. After defining the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.

 The `handleOrientationChange()` function would look at the result of the query and handle whatever we need to do on an orientation change:

 
```
function handleOrientationChange(evt) {
  if (evt.matches) {
    /\* The viewport is currently in portrait orientation \*/
  } else {
    /\* The viewport is currently in landscape orientation \*/
  }
}

```
 Above, we define the parameter as `evt` — an event object of type [`MediaQueryListEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent) that also includes the [`media`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent/media) and [`matches`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent/matches) properties, so you can query these features of the `MediaQueryList` by directly accessing it, or accessing the event object.


Ending query notifications
--------------------------



To stop receiving notifications about changes to the value of your media query, call [`removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) on the `MediaQueryList`, passing it the name of the previously-defined callback function:

 
```
mediaQueryList.removeEventListener("change", handleOrientationChange);

```

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `EventTarget_inheritance` | 39 | 16 | 55 | No | 26 | 14 | 39 | 39 | 55 | 26 | 14 | 4.0 |
| `Testing_media_queries` | 9 | 12 | 6 | 10 | 12.1 | 5.1 | ≤37 | 18 | 6 | 12.1 | 5 | 1.0 |
| `addListener` | 9 | 12 | 6 | 10 | 12.1 | 5.1 | ≤37 | 18 | 6 | 12.1 | 5 | 1.0 |
| `change_event` | 39 | 79 | 55 | No | 26 | 14 | 39 | 39 | 55 | 26 | 14 | 4.0 |
| `matches` | 9 | 12 | 6 | 10 | 12.1 | 5.1 | ≤37 | 18 | 6 | 12.1 | 5 | 1.0 |
| `media` | 9 | 12 | 6 | 10 | 12.1 | 5.1 | ≤37 | 18 | 6 | 12.1 | 5 | 1.0 |
| `removeListener` | 9 | 12 | 6 | 10 | 12.1 | 5.1Before Safari 14, `MediaQueryList` is based on `EventTarget`, so you must use `addListener()` and `removeListener()` to observe media query lists. | ≤37 | 18 | 6 | 12.1 | 5Before Safari 14, `MediaQueryList` is based on `EventTarget`, so you must use `addListener()` and `removeListener()` to observe media query lists. | 1.0 |


See also
--------


* [Media queries](using_media_queries)
* [`window.matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
* [`MediaQueryList`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList)
* [`MediaQueryListEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries>

OpenType font features guide
============================



Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and several others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and low-level control properties — [`font-feature-settings`](../font-feature-settings). This article provides you with all you need to know about using OpenType font features in CSS.

 Some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios.

 In addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for East Asian languages. In the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other OpenType features.

  **Warning:** There are many CSS attributes defined to leverage font features, but unfortunately many are not fully implemented. They are all defined and shown here, but many will only work using the lower-level [`font-feature-settings`](../font-feature-settings) property. It's possible to write CSS to work both ways but this can become cumbersome. The issue with using `font-feature-settings` for everything is that every time you want to change one of the individual features, you have to redefine the entire string (similar to manipulating variable fonts with [`font-variation-settings`](../font-variation-settings)).

 

Discovering availability of features in fonts
---------------------------------------------


This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit [wakamaifondue.com](https://wakamaifondue.com), drop your font file on the circle where instructed, and in a few moments you'll have a full report on all the capabilities and features of your font. [Axis-praxis.org](https://www.axis-praxis.org/) also offers a similar capability, with the ability to click on the features to turn them on or off in a given text block.

Why you would use them?
-----------------------



Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished:

 * **Ligatures** like 'ff' or 'fi' make letter spacing and reading more even and smooth.
* **Fractions** can make home improvement and recipe sites much easier to read and understand.
* **Numerals** within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a table say. 'lining' figures on the other hand sit more uniformly on their own or in front of capitalized words.

 While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.

 
>  OpenType features are like secret compartments in fonts. Unlock them and you'll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography. *-- Tim Brown, Head of Typography at Adobe*.
> 
>  


### Sometimes it's substance, not just style


There are some cases — like with [`font-variant-east-asian`](../font-variant-east-asian) — that OpenType features are directly tied to using different forms of certain glyphs, which can impact meaning and readability. In cases such as these, it's more than just a nicety, but rather an integral part of the content itself.

The font features
-----------------



There are a number of different features to consider. They are grouped and explained here according to the main attributes and options covered in the W3C specifications.

  **Note:** The examples below show the properties and some example combinations, along with the lower-level syntax equivalents. They may not match exactly due to browser implementation inconsistencies, but in many cases, the first example will match the second. The typefaces shown are Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script, and Kokoro (all available and free to use, most are on Google Fonts and other services).

 
### Kerning



Associated CSS property: [`font-kerning`](../font-kerning)

 This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if [`letter-spacing`](../letter-spacing) is also set on your text, that is applied after kerning.



### Alternates



Associated CSS property: [`font-variant-alternates`](../font-variant-alternates)

 Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied. The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the [`@font-feature-values`](../@font-feature-values) at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally


 In this case, `@stylistic(alternates)` will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying `@styleset(alt-a)` only changes the lower case 'a'.

 Try changing the line

 
```
font-variant-alternates: styleset(alt-a);

```
 to

 
```
font-variant-alternates: styleset(alt-g);

```
 and notice that the lower case 'a' reverts to its regular form and the lower case 'g's changes instead.

 #### More about alternates

 * <https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates>
* [https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates](../font-variant-alternates)


### Ligatures



Associated CSS property: [`font-variant-ligatures`](../font-variant-ligatures)

 Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together.

 While more common in script typefaces, in the below example they are used to create arrows:



### Position



Associated CSS property: [`font-variant-position`](../font-variant-position)

 Position variants are used to enable typographic superscript and subscript glyphs. These are designed to work with the surrounding text without altering the baseline or line spacing. This is especially useful with the [`<sub>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub) or [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) elements.



### Capitals



Associated CSS property: [`font-variant-caps`](../font-variant-caps)

 One of the more common use cases for OpenType features is proper small caps. These are capital letters sized to fit better amongst lower case letters and are generally used for acronyms and abbreviations.



### Numerals



Associated CSS property: [`font-variant-numeric`](../font-variant-numeric)

 There are several different styles of numerals commonly included in fonts:

 * 'Lining' figures are all the same height and on the same baseline.
* 'Oldstyle' figures are mixed height and designed to have the appearance of ascenders and descenders like other lower case letters. These are designed to be used inline with a copy so the numerals visually blend with the surrounding glyphs in a similar fashion to small caps.

 There is also the notion of spacing. Proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up tables of numbers in financial tables.

 There are two types of fractions supported through this property:

 * Diagonal slashed fractions.
* Vertically stacked fractions.

 Ordinals are also supported (such as '1st' or '3rd'), as is a slashed zero if present in the font.

 #### Lining and old-style figures


 #### Fractions, ordinals, and slashed zero



### East Asian



Associated CSS property: [`font-variant-east-asian`](../font-variant-east-asian)

 This allows access to various alternate forms of glyphs within a font. The example below shows a string of glyphs with only the OpenType set 'jis78' enabled. Uncheck the box below and you'll see more characters displayed.


  **Note:** these glyphs were copied out of a font sample and are not intended as prose.

 
### Font variant shorthand



The [`font-variant`](../font-variant) property is the shorthand syntax for defining all of the above. Setting a value of `normal` resets all properties to their initial value. Setting a value of `none` sets `font-variant-ligatures` to none and all other properties to their initial value. (Meaning that if kerning is on by default, it will still be on even with a value of `none` being supplied here.)



Font feature settings
---------------------



[`font-feature-settings`](../font-feature-settings) is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using [CSS custom properties](../using_css_custom_properties) to set the values). Because of this, it's best to use the standard properties shown above wherever possible.

 There are a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.

 The general syntax looks like this:

 
```
.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

```
 According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off like so:

 
```
.no-ligatures {
  font-feature-settings: "liga" 0, "dlig" 0;
}

```

### More on font-feature-settings codes


* ['The Complete CSS Demo for OpenType Features'](https://sparanoid.com/lab/opentype-features/) (can't vouch for the truth of the name, but it's pretty big)
* [A list of OpenType features on Wikipedia](https://en.wikipedia.org/wiki/List_of_typographic_features)
Using CSS feature detection for implementation
----------------------------------------------



Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with [`font-feature-settings`](../font-feature-settings) as the fallback.

 For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with `font-feature-settings` versus a single property value using [`font-variant-caps`](../font-variant-caps).

 
```
.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

@supports (font-variant-caps: all-small-caps) {
  .small-caps {
    font-feature-settings: normal;
    font-variant-caps: all-small-caps;
  }
}

```

See also
--------


### Demos of CSS OpenType features in CSS


* [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features/)
### Web font analysis tools


* [Wakamai Fondue](https://wakamaifondue.com)
* [Axis Praxis](https://www.axis-praxis.org/)
### W3C Specifications


* [Font Feature Properties in CSS Fonts Module Level 3](https://drafts.csswg.org/css-fonts-3/#font-rend-props)
* [font-variant-alternatives in CSS Fonts Module Level 4](https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates)
### Other resources


* [Using OpenType features](https://helpx.adobe.com/fonts/using/use-open-type-features.html) by Tim Brown, Head of Typography, Adobe
* [Adobe's Syntax for OpenType features in CSS](https://helpx.adobe.com/fonts/using/open-type-syntax.html)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide>

-moz-image-region
=================



**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 For certain XUL elements and pseudo-elements that use an image from the [`list-style-image`](list-style-image) property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.

 
```
/\* Keyword value \*/
-moz-image-region: auto;

/\* <shape> value \*/
-moz-image-region: rect(0, 8px, 4px, 4px);

/\* Global values \*/
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;

```
 The syntax is similar to the [`clip`](clip) property. All four values are relative to the upper left corner of the image.

  **Note:** For a system that works on any background, see [`-moz-image-rect()`](-moz-image-rect).

 

Syntax
------


### Values


 `auto`  Automatically defines the region of the image to use.

  [`<shape>`](shape)  A shape defining the part of the image to use. The `rect()` function defines a rectangle to use as shape. Its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order.

  Formal definition
-----------------




|  |  |
| --- | --- |
| [Initial value](initial_value) | `auto` |
| Applies to | XUL [`<image>`](image) elements and [`:-moz-tree-image`](:-moz-tree-image), [`:-moz-tree-twisty`](:-moz-tree-twisty), and [`:-moz-tree-checkbox`](:-moz-tree-checkbox) pseudo-elements. **Note:** `-moz-image-region` only works with [`<image>`](image) elements where the icon is specified using [`list-style-image`](list-style-image). It will not work with XUL `<image src="url" />`. |
| [Inherited](inheritance) | yes |
| [Computed value](computed_value) | as specified |
| Animation type | discrete |

Formal syntax
-------------



```
 -moz-image-region =
   <shape> | auto

```
Examples
--------


### Clipping an image



```
#example-button {
  /\* display only the 4x4 area from the top left of this image \*/
  list-style-image: url("chrome://example/skin/example.png");
  -moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
  /\* use the 4x4 area to the right of the first for the hovered button \*/
  -moz-image-region: rect(0px, 8px, 4px, 4px);
}

```
Specifications
--------------


Not part of any standard.

Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `-moz-image-region` | No | No | 1 | No | No | No | No | No | 4 | No | No | No |


See also
--------


* [`-moz-image-rect()`](-moz-image-rect)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-region>

CSS Motion Path
===============



**Motion Path** is a CSS module that allows authors to animate any graphical object along a custom path.

 The idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. With [`offset-path`](offset-path) you can define a specific path of any shape you want. You then animate it along that path by animating [`offset-distance`](offset-distance), and can choose to rotate it at any point using [`offset-rotate`](offset-rotate).



Basic example
-------------




```
<div id="motion-demo"></div>

```
 
```
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

```


Reference
---------


### Properties


* [`offset`](offset)
* [`offset-anchor`](offset-anchor)
* [`offset-distance`](offset-distance)
* [`offset-path`](offset-path)
* [`offset-position`](offset-position)
* [`offset-rotate`](offset-rotate)
Specifications
--------------




| Specification |
| --- |
| [Motion Path Module Level 1 # offset-path-property](https://drafts.fxtf.org/motion/#offset-path-property) |


Browser compatibility
---------------------




|  | Desktop | Mobile |
| --- | --- | --- |
|  | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet |
| `CSS_Motion_Path` | 5546 | 7979 | 72 | No | 4532 | 15.4 | 5546 | 5546 | 79 | 4332 | 15.4 | 6.0`path()` is the only value type supported.5.0 |
| `path-support` | 64 | 79 | 72 | No | 51 | preview | 64 | 64 | 79 | 47 | No | 9.0 |
| `ray-support` | 64 | 79 | 112`<ray-size>` is optional with the default value `closest-side`.72 | No | 51 | preview | No | 64 | No | No | No | No |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path>

Basic concepts of CSS Scroll Snap
=================================


The [CSS Scroll Snap](../css_scroll_snap) feature provides a way to snap the scrolling to certain points as the user scrolls through a document. This can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications.


Key properties for CSS Scroll Snap
----------------------------------



The key properties for the scroll snap feature are:

 * [`scroll-snap-type`](../scroll-snap-type): This property is used on the [scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container) to specify the type, direction, and optionality of scrolling.
* [`scroll-snap-align`](../scroll-snap-align): This property is used on child elements to specify the scroll snap position.

 The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` is used on all the `<section>` element children dictating the point where the scrolling of each child should stop.



Using scroll-snap-type
----------------------



The [`scroll-snap-type`](../scroll-snap-type) property needs to know the direction in which scroll snapping happens. This could be `x`, `y`, or the logical mappings `block` or `inline`. You can also use the keyword `both` to have scroll snapping work along both axes.

 You can also pass in the keywords `mandatory` or `proximity`. The `mandatory` keyword tells the browser whether the content *has* to snap to a certain point, no matter where the scroll is. The `proximity` keyword means that the content may snap to the point, but does not have to.

 Using `mandatory` creates a very consistent scrolling experience — you know that the browser will always snap to each defined point. This means that you can be confident that something you expect to be at the top of the screen will be when scrolling finishes. However, it can cause problems if the content is larger than you expect — users may find themselves in the frustrating position of never being able to scroll and view a certain point in the content. Therefore, use of `mandatory` should be carefully considered and only used in situations where you know how much content is on the screen at any time.

  **Note:** Never use `mandatory` if the content inside one of your child elements will overflow the parent container because the overflowing content will not be visible.

  The `proximity` value will only snap to a position when it is close by, the exact distance being left to the browser to decide.

 In the example below, you can change the value between `mandatory` and `proximity` to see the effect this has on the scroll experience.


 In the above example, both [`height: 300px;`](../height) and [`overflow-y: scroll;`](../overflow-y) are set on the scroll container. If the contents don't overflow their container, there is nothing to scroll.


Using scroll-snap-align
-----------------------



The valid values for the [`scroll-snap-align`](../scroll-snap-align) property include `start`, `end`, `center`, and `none`. These values are used to indicate the point in the scroll container to which the content should snap. In the example below, you can change the value of `scroll-snap-align` to see how this changes the scroll behavior.


 If `scroll-snap-type` is `mandatory` and `scroll-snap-align` on a child is either set to `none` or not set (in which case, it defaults to `none`), the user will be unable to scroll that element into view.


Using scroll-padding
--------------------



If you do not want the content to snap right to the edge of the scroll container, you can use the [`scroll-padding`](../scroll-padding) property or its equivalent longhand values to add some padding.

 In the example below, `scroll-padding` is set to `40px`. When the content snaps to the start of the second and third sections, scrolling stops 40 pixels away from the start of the section. Try changing the `scroll-padding` value to see how this changes the distance.


 This is potentially useful if you have a [fixed](../position#fixed_positioning) element, for example a navigation bar, which could end up overlapping scrolled content. By using `scroll-padding`, you can reserve a space for the fixed element, as shown in the example below, where the `<h1>` element remains on screen as the content scrolls beneath it. Without padding, the heading would overlap some of the content when snapping happens.



Using scroll-margin
-------------------



The [`scroll-margin`](../scroll-margin) property or the longhand scroll margin values can be set on child elements, essentially defining an outset from the defined box. This allows for different amounts of space for different child elements and can be used in conjunction with `scroll-padding` on the parent. Try this in the example below.



Using scroll-snap-stop
----------------------



The [`scroll-snap-stop`](../scroll-snap-stop) property tells the browser whether it should snap to each defined snap point — meaning that in our examples above we would stop at the start of each section — or be able to skip past sections.

 It could be helpful in ensuring users see each section of the scroller and don't accidentally zip past them. However, it could be problematic in making the scrolling experience slower if the user is looking for a particular section.


See also
--------


* [Well-controlled scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)
* [Practical CSS scroll snapping/](https://css-tricks.com/practical-css-scroll-snapping/)
* [CSS Scroll Snap](https://12daysofweb.dev/2022/css-scroll-snap/)
* [Scroll snap examples on Codepen](https://codepen.io/collection/KpqBGW)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts>

Consistent list indentation
===========================



One of the most common style changes made to lists is a change in the indentation distance—that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they sit stubbornly in place in Gecko-based browsers. This article will help you understand the problems that can occur and how to avoid them.

 To understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.



Making a List
-------------



First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet") and is not yet part of a list itself. It hangs alone in the void, simple and unadorned, as shown in Figure 1.

  ![Figure 1] 

 That dotted red border represents the outer edges of the content area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2.

  ![Figure 2] 

 Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., `<ul>`). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3.

  ![Figure 3] 

 Here, the dotted blue border shows us the edges of the `<ul>` element's content area. Since we have no padding for the `<ul>` element, its content wraps snugly around the three list items.

 Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4.

  ![Figure 4] 

 Visually, the markers are *outside* the content area of the `<ul>`, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the `<li>` elements, not the `<ul>`. They're sort of like appendages to the list items, hanging outside the content-area of the `<li>` but still attached to the `<li>`.

 This is why, in every modern browser, markers are placed outside any border set for an `<li>` element, assuming the value of `list-style-position` is `outside`. If it's changed to `inside`, then the markers are brought inside the `<li>`'s content, as though they're an inline box placed at the very beginning of the `<li>`.


Indenting It Twice
------------------



So how will all this appear in a document? At the moment, we have a situation analogous to these styles:

 
```
ul,
li {
  margin-left: 0;
  padding-left: 0;
}

```
 If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.

 To avoid this and get some indentation, there are only three options available to browser implementors.

 1. Give each `<li>` element a left margin.
2. Give the `<ul>` element a left margin.
3. Give the `<ul>` element some left padding.

 As it turns out, nobody seems to have used the first option. The second option was taken by Opera. The third was adopted by Firefox.

 Let's look at the two approaches for a moment. In Opera, the lists are indented by setting a left margin of 40 pixels on the `<ul>` element. If we apply a background color to the `<ul>` element and leave the list item and `<ul>` borders in place, we get the result shown in Figure 5.

  ![Figure 5] 

 Gecko, on the other hand, sets a left *padding* of 40 pixels for the `<ul>` element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.

  ![Figure 6] 

 As we can see, the markers remain attached to the `<li>` elements, no matter where they are. The difference is entirely in how the `<ul>` is styled. We can only see the difference if we try to set a background or border on the `<ul>` element.


Finding Consistency
-------------------



Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko and Opera, you need to set **both** the left margin and left padding of the `<ul>` element. We can ignore `<li>` altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:

 
```
ul {
  margin-left: 0;
  padding-left: 40px;
}

```
 If you're more interested in following the Opera model, then:

 
```
ul {
  margin-left: 40px;
  padding-left: 0;
}

```
 Of course, you can fill in your preferred values. Set both to `1.25em`, if you like — there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:

 
```
ul {
  margin-left: 0;
  padding-left: 0;
}

```
 Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the `body`, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.


Conclusion
----------


In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.

Recommendations
---------------


* When altering the indentation of lists, make sure to set both the padding and margin.
Original Document Information
-----------------------------


* Author(s): Eric A. Meyer, Netscape Communications
* Last Updated Date: Published 30 Aug 2002
* Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
* Note: This reprinted article was originally part of the DevEdge site.


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation>

CSS Images
==========


**CSS Images** is a module of CSS that defines what types of images can be used (the [`<image>`](image) type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.


Reference
---------


### Properties


* [`image-orientation`](image-orientation)
* [`image-rendering`](image-rendering)
* [`image-resolution`](image-resolution)
* [`object-fit`](object-fit)
* [`object-position`](object-position)
### Functions


* [`linear-gradient()`](gradient/linear-gradient)
* [`radial-gradient()`](gradient/radial-gradient)
* [`repeating-linear-gradient()`](gradient/repeating-linear-gradient)
* [`repeating-radial-gradient()`](gradient/repeating-radial-gradient)
* [`conic-gradient()`](gradient/conic-gradient)
* [`repeating-conic-gradient()`](gradient/repeating-conic-gradient)
* [`url()`](url)
* [`element()`](element())
* [`image()`](image/image)
* [`cross-fade()`](cross-fade)
### Data types


* [`<gradient>`](gradient)
* [`<image>`](image)
Guides
------


 [Using CSS gradients](css_images/using_css_gradients)  Presents a specific type of CSS images, *gradients*, and how to create and use these.

  [Implementing image sprites in CSS](css_images/implementing_image_sprites_in_css)  Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.

  Specifications
--------------




| Specification |
| --- |
| [CSS Images Module Level 3](https://drafts.csswg.org/css-images/)  |
| [Compatibility Standard # css-%3Cimage%3E-type](https://compat.spec.whatwg.org/#css-%3Cimage%3E-type) |
| [CSS Values and Units Module Level 4 # urls](https://drafts.csswg.org/css-values/#urls) |



 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images>

CSS color adjustment
====================



The **CSS color adjustment** module provides a model and controls automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, and other color scheme preferences.

 Together with the [`@media`](@media) features [`prefers-color-scheme`](@media/prefers-color-scheme), [`prefers-contrast`](@media/prefers-contrast) and [`forced-colors`](@media/forced-colors), this module defines how and when colors are automatically adjusted by the browser.



Reference
---------


### Properties


* [`color-scheme`](color-scheme)
* [`color-adjust`](print-color-adjust) shorthand
* [`forced-color-adjust`](forced-color-adjust)
* [`print-color-adjust`](print-color-adjust)
Related concepts
----------------


* [`<color>`](color_value) CSS data type
* Related [`@media`](@media) features:
	+ [`prefers-color-scheme`](@media/prefers-color-scheme)
	+ [`prefers-contrast`](@media/prefers-contrast)
	+ [`forced-colors`](@media/forced-colors)
* Properties affected by forced colors mode
	+ [`accent-color`](accent-color)
	+ [`background-color`](background-color)
	+ [`background-image`](background-image)
	+ [`border-color`](border-color)
	+ [`box-shadow`](box-shadow)
	+ [`caret-color`](caret-color)
	+ [`color`](color)
	+ [`color-scheme`](color-scheme)
	+ [`column-rule-color`](column-rule-color)
	+ [`fill`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)
	+ [`flood-color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/flood-color)
	+ [`lighting-color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lighting-color)
	+ [`outline-color`](outline-color)
	+ [`scrollbar-color`](scrollbar-color)
	+ [`stop-color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-color)
	+ [`stroke`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)
	+ [`text-decoration-color`](text-decoration-color)
	+ [`text-emphasis-color`](text-emphasis-color)
	+ [`text-shadow`](text-shadow)
	+ [`-webkit-tap-highlight-color`](-webkit-tap-highlight-color)
Specifications
--------------




| Specification |
| --- |
| [CSS Color Adjustment Module Level 1](https://drafts.csswg.org/css-color-adjust-1/)  |


See also
--------


* [CSS colors module](css_colors)


 © 2005–2023 MDN contributors.  
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.  

<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_color_adjustment>

css