display - CSS: Cascading Style Sheets

display
=======

The **`display`** CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

Formally, the **`display`** property sets an element's inner and outer *display types*. The outer type sets an element's participation in 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
------

```css
/\* 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 flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/\* 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;
```

The CSS `display` property is specified using keyword values.

Grouped values
--------------

The keyword values can be grouped into six value categories.

### 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 box, generating line breaks both before and after the element when in the normal flow.

`inline`

The element generates one or more inline 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:** When browsers that support multi-keyword syntax encounter a display property that only has an **outer** value (e.g., `display: block` or `display: inline`), the inner value is set to `flow` (e.g., `display: block flow` and `display: inline flow`).

**Note:** To be sure layouts work on older browsers, you may use single-value syntax, for example `display: inline flex` could have the following fallback

```css
.container {
  display: inline-flex;
  display: inline flex;
}
```

See Using the multi-keyword syntax with CSS display for more information.

### 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`, `float`, or `overflow`) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (BFC) for its contents or integrates its contents into its parent formatting context.

`flow-root`

The element generates a block box that establishes a new block formatting context, defining where the formatting root lies.

`table`

These elements behave like HTML `<table>` elements. It defines a block-level box.

`flex`

The element behaves like a block-level element and lays out its content according to the flexbox model.

`grid`

The element behaves like a block-level element and lays out its content according to the grid model.

`ruby`
Experimental

The element behaves like an inline-level element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML `<ruby>` elements.

**Note:** When browsers that support multi-keyword syntax encounter a display property that only has an **inner** value (e.g., `display: flex` or `display: grid`), the outer value is set to `block` (e.g., `display: block flex` and `display: block grid`).

### List Item

`<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` and `list-style-position`.

`list-item` can also be combined with any `<display-outside>` keyword and the `flow` or `flow-root` `<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>`

 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>` HTML elements.

`table-header-group`

These elements behave like `<thead>` HTML elements.

`table-footer-group`

These elements behave like `<tfoot>` HTML elements.

`table-row`

These elements behave like `<tr>` HTML elements.

`table-cell`

These elements behave like `<td>` HTML elements.

`table-column-group`

These elements behave like `<colgroup>` HTML elements.

`table-column`

These elements behave like `<col>` HTML elements.

`table-caption`

These elements behave like `<caption>` HTML elements.

`ruby-base`
Experimental

These elements behave like `<rb>` HTML elements.

`ruby-text`
Experimental

These elements behave like `<rt>` HTML elements.

`ruby-base-container`
Experimental

These elements are generated as anonymous boxes.

`ruby-text-container`
Experimental

These elements behave like `<rtc>` HTML elements.

### 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 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` property instead.

### Precomposed

`<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 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>` 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-level 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-level element and lays out its content according to the grid model.

It is equivalent to `inline grid`.

### Which syntax should you use?

 The CSS display module describes a multi-keyword syntax for values you can use with the `display` property to explicitly define **outer** and **inner** display.
 The single keyword values (precomposed `<display-legacy>` values) are supported for backward-compatibility.

For example, using two values you can specify an inline flex container as follows:

```css
.container {
  display: inline flex;
}
```

This can also be specified using the legacy single value:

```css
.container {
  display: inline-flex;
}
```

For more information on these changes, see the Using the multi-keyword syntax with CSS display guide.

### Global

```css
/\* 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 section. In addition, see the following material, which covers the various values of display in depth.

### Multi-keyword values

* Using the multi-keyword syntax with CSS display
### CSS Flow Layout (display: block, display: inline)

* Block and Inline Layout in Normal Flow
* Flow Layout and Overflow
* Flow Layout and Writing Modes
* Formatting Contexts Explained
* In Flow and Out of Flow
### display: flex

* Basic concepts of flexbox
* Aligning Items in a Flex Container
* Controlling Ratios of Flex Items Along the Main Axis
* Mastering Wrapping of Flex Items
* Ordering Flex Items
* Relationship of flexbox to other layout methods
* Typical use cases of Flexbox
### display: grid

* Basic Concepts of Grid Layout
* Relationship to other layout methods
* Line-based placement
* Grid template areas
* Layout using named grid lines
* Auto-placement in grid layout
* Box alignment in grid layout
* Grids, logical values and writing modes
* CSS Grid Layout and Accessibility
* CSS Grid Layout and Progressive Enhancement
* Realizing common layouts using grids
### Animating display

Supporting browsers animate `display` with a discrete animation type. This generally means that the property will flip between two values 50% through animating between the two.

There is one exception, which is when animating to or from `display: none`. In this case, the browser will flip between the two values so that the animated content is shown for the entire animation duration. So for example:

* When animating `display` from `none` to `block` (or another visible `display` value), the value will flip to `block` at `0%` of the animation duration so it is visible throughout.
* When animating `display` from `block` (or another visible `display` value) to `none`, the value will flip to `none` at `100%` of the animation duration so it is visible throughout.

This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out with `opacity` rather than disappearing immediately.

When animating `display` with CSS animations, you need to provide the starting `display` value in an explicit keyframe (for example using `0%` or `from`). See Using CSS animations for an example.

When animating `display` with CSS transitions, two additional features are needed:

* `@starting-style` provides starting values for properties you want to transition from when the animated element is first shown. This is needed to avoid unexpected behavior. By default, CSS transitions are not triggered on an element's first style update or when the `display` type changes from `none` to another type.
* `transition-behavior: allow-discrete` needs to be set on the `transition-property` declaration (or the `transition` shorthand) to enable `display` transitions.

For examples of transitioning the `display` property, see the `@starting-style` and `transition-behavior` pages.

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

### display: none

Using a `display` value of `none` on an element will remove it from the accessibility tree. 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 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 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.

* More accessible markup with display: contents | Hidde de Vries
* Display: Contents Is Not a CSS Reset | Adrian Roselli
### Tables

In some browsers, changing the `display` value of a `<table>` element to `block`, `grid`, or `flex` will alter its representation in the accessibility tree. 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
* Hidden content for better a11y | Go Make Things
* MDN Understanding WCAG, Guideline 1.3 explanations
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `inline` |
| Applies to | all elements |
| Inherited | no |
| 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 | Discrete behavior except when animating to or from `none` is visible for the entire duration |

Formal syntax
-------------
```

display =
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  <display-outside> || [ <display-inside> | math ]

<display-outside> =
  block   |
  inline  |
  run-in

<display-inside> =
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

<display-listitem> =
  <display-outside>?     &&
  [ flow | flow-root ]?  &&
  list-item

<display-internal> =
  table-row-group      |
  table-header-group   |
  table-footer-group   |
  table-row            |
  table-cell           |
  table-column-group   |
  table-column         |
  table-caption        |
  ruby-base            |
  ruby-text            |
  ruby-base-container  |
  ruby-text-container

<display-box> =
  contents  |
  none

<display-legacy> =
  inline-block  |
  inline-table  |
  inline-flex   |
  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` and `background-color` on the containers and their children, so that it is easier to see the effect the display values are having.

#### HTML

```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>inline flow-root</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>inline flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>inline grid</option>
    <option>table</option>
    <option>block table</option>
    <option>list-item</option>
  </select>
</div>
```

#### CSS

```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

```js
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 that some multi-keyword values are added for illustration which have the following equivalents:

* `inline-block` = `inline flow-root`
* `inline-flex` = `inline flex`
* `inline-grid` = `inline grid`
* `table` = `block table`

You can find more examples in the pages for each separate display data type under Grouped values

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

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Block and inline layout in normal flow
* Introduction to formatting contexts
* `visibility`, `float`, `position`
* `grid`, `flex`


flex-shrink - CSS: Cascading Style Sheets

flex-shrink
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
The **`flex-shrink`** 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` and `flex-basis`, and normally defined using the `flex` shorthand.

Try it
------

Syntax
------

```css
/\* <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>`. Negative values are invalid. Defaults to 1.

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

|  |  |
| --- | --- |
| Initial value | `1` |
| Applies to | flex items, including in-flow pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a number |

Formal syntax
-------------
```

flex-shrink =
  <number [0,∞]>

```

Examples
--------

### Setting flex item shrink factor

#### HTML

```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

```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgb(0 0 0 / 20%);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

#### Result

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis*


scroll-padding-bottom - CSS: Cascading Style Sheets

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
------

```css
/\* 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 | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

scroll-padding-bottom =
  auto                       |
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap


inset - CSS: Cascading Style Sheets

inset
=====

The **`inset`** CSS property is a shorthand that corresponds to the `top`, `right`, `bottom`, and/or `left` properties. It has the same multi-value syntax of the `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.

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

This property is a shorthand for the following CSS properties:

* `top`
* `right`
* `bottom`
* `left`
Syntax
------

```css
/\* <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` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| Applies to | positioned elements |
| Inherited | 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 | as each of the properties of the shorthand:* `top`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `bottom`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `left`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `right`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

inset =
  <'top'>{1,4}

```

Examples
--------

### Setting offsets for an element

#### HTML

```html
<div>
  <span class="exampleText">Example text</span>
</div>
```

#### CSS

```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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The longhand box offset properties: `top`, `right`, `bottom`, and `left`.
* The mapped logical shorthands: `inset-block` and `inset-inline`
* The `margin` shorthand multi-value syntax.


<time> - CSS: Cascading Style Sheets

<time>
======

The **`<time>`** CSS data type represents a time value expressed in seconds or milliseconds. It is used in `animation`, `transition`, and related properties.

Syntax
------

The `<time>` data type consists of a `<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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<time-percentage>`
* CSS Values and Units


scroll-margin-bottom - CSS: Cascading Style Sheets

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
------

```css
/\* <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 | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

scroll-margin-bottom =
  <length>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap


<calc-sum> - CSS: Cascading Style Sheets

<calc-sum>
==========

The **`<calc-sum>`** CSS data type represents an expression which performs a calculation in any CSS math function. 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 between them.

`+`

Adds two numbers together.

`-`

Subtracts the right number from the left.

### Formal syntax
```

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*

<calc-value> =
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )

<calc-keyword> =
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*

```

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

The operands in the expression may be any `<length>` syntax value. You can use `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<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 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**. 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 or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<calc-product>`
* `<calc-value>`
* `<calc-constant>`


:-moz-handler-disabled - CSS: Cascading Style Sheets

:-moz-handler-disabled
======================

**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-handler-disabled`** CSS pseudo-class is a Mozilla extension that matches elements that can't be displayed because their handlers have been disabled by the user.

**Note:** This selector is mainly intended to be used by theme developers.

Syntax
------

```css
:-moz-handler-disabled {
  /\* ... \*/
}
```

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

Not part of any standard.

See also
--------

* `:-moz-handler-blocked`
* `:-moz-handler-crashed`


math-shift - CSS: Cascading Style Sheets

math-shift
==========

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table 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
------

```css
/\* 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 parameter from the OpenType MATH table.

`compact`

Indicates compact rendering. Superscripts in MathML formulas use the superscriptShiftUpCramped parameter from the OpenType MATH table, which is generally smaller.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |

Formal syntax
-------------
```

math-shift =
  normal   |
  compact

```

Examples
--------

### CSS

```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.

```html
<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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `math-depth`
* `font-size`


@charset - CSS: Cascading Style Sheets

@charset
========

The **`@charset`** CSS rule specifies the character encoding used in the style sheet. Although the first character in `@charset` is the `@` symbol, it is not an at-rule. The CSS syntax module deprecates this rule, defining it as an unrecognized legacy rule to be dropped when a stylesheet is grammar-checked, but it is fully supported in all browsers.

The following assertions apply to valid `@charset` usage:

* The `@charset` rule must be the first element in the style sheet and not be preceded by any character.
* `@charset` is not a nested statement and therefore cannot be used inside conditional group at-rules.
* If several `@charset` at-rules are defined, only the first one is used.
* `@charset` cannot be used inside a `style` attribute on an HTML element or inside the `<style>` element where the character set of the HTML page is relevant.

```css
@charset "utf-8";
```

This at-rule is useful when using non-ASCII characters in some CSS properties, like `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 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>` element. This method is obsolete and should not be used.
5. Assume that the document is UTF-8.
Syntax
------

```css
@charset "UTF-8";
@charset "iso-8859-15";
```

### Formal syntax
```

@charset "<charset>";
```

*charset*

A `<string>` denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the IANA-registry, 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

```css
@charset "UTF-8"; /\* Set the encoding of the style sheet to Unicode UTF-8 \*/
```

```css
@charset 'iso-8859-15'; /\* Invalid, wrong quotes 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, the charset is a CSS <string> and requires double-quotes \*/
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Character set glossary entry
* Unicode glossary entry


Initial value - CSS: Cascading Style Sheets

Initial value
=============

The **initial value** of a 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, the initial value is used on the *root element only*, as long as no specified value is supplied.
* For non-inherited properties, the initial value is used on *all elements*, as long as no specified value is supplied.

You can explicitly specify the initial value by using the `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 |

See also
--------

* `initial`
* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements


CSS positioned layout - CSS: Cascading Style Sheets

CSS positioned layout
=====================

The **CSS positioned layout** module defines how to position elements on a web page.

Reference
---------

### Properties

* `top`
* `right`
* `bottom`
* `left`
* `inset`
* `inset-inline`
* `inset-inline-start`
* `inset-inline-end`
* `inset-block`
* `inset-block-start`
* `inset-block-end`
* `float`
* `clear`
* `position`
* `z-index`
* `transform`
Guides
------

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  |


<frequency> - CSS: Cascading Style Sheets

<frequency>
===========

The **`<frequency>`** CSS data type 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>` 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.

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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<frequency-percentage>`
* CSS Values and Units


:visited - CSS: Cascading Style Sheets

:visited
========

The **`:visited`** CSS pseudo-class 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 to `<a>` and `<area>` elements that have an `href` attribute.

Try it
------

Styles defined by the `:visited` and unvisited `:link` pseudo-classes can be overridden by any subsequent user-action pseudo-classes (`:hover` or `: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`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color`, `border-top-color`, `column-rule-color`, `outline-color`, `text-decoration-color`, and `text-emphasis-color`.
* Allowable SVG attributes are `fill` and `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` method will lie and always return the value of the non-`:visited` color.
* The `<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.

Syntax
------

```css
: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

```html
<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>
```

### CSS

```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 |
| Selectors Level 4 # link |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Privacy and the :visited selector
* Link-related pseudo-classes: `:link`, `:active`, `:hover`


letter-spacing - CSS: Cascading Style Sheets

letter-spacing
==============

The **`letter-spacing`** 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
------

```css
/\* 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 to alter the space between characters in order to justify text.

`<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
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
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 | `normal` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a length |

Formal syntax
-------------
```

letter-spacing =
  normal    |
  <length>

```

Examples
--------

### Setting letter spacing

#### HTML

```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

```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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-kerning`
* `word-spacing`


CSS color adjustment - CSS: Cascading Style Sheets

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` features `prefers-color-scheme`, `prefers-contrast` and `forced-colors`, this module defines how and when colors are automatically adjusted by the browser.

Reference
---------

### Properties

* `color-scheme`
* `forced-color-adjust`
* `print-color-adjust`
Related concepts
----------------

* `<color>` CSS data type
* Related `@media` features:
    + `prefers-color-scheme`
    + `prefers-contrast`
    + `forced-colors`
* Properties affected by forced colors mode
    + `accent-color`
    + `background-color`
    + `background-image`
    + `border-color`
    + `box-shadow`
    + `caret-color`
    + `color`
    + `color-scheme`
    + `column-rule-color`
    + `fill`
    + `flood-color`
    + `lighting-color`
    + `outline-color`
    + `scrollbar-color`
    + `stop-color`
    + `stroke`
    + `text-decoration-color`
    + `text-emphasis-color`
    + `text-shadow`
    + `-webkit-tap-highlight-color`
Specifications
--------------

| Specification |
| --- |
| CSS Color Adjustment Module Level 1  |

See also
--------

* CSS colors module


::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets

::-webkit-meter-suboptimum-value
================================

**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-meter-suboptimum-value`** pseudo-element styles the `<meter>` element when the value attribute falls outside of the low-high range and is not equivalent to the optimum value.

Yellow is the default color.

Syntax
------

```css
::-webkit-meter-suboptimum-value {
  /\* ... \*/
}
```

Examples
--------

This example will only work in browsers based on WebKit or Blink.

### HTML

```html
Normal:
<meter min="0" max="10" low="3" high="7" optimum="6" value="2">
  Score 2/10
</meter>
<br />
Styled:
<meter id="styled" min="0" max="10" low="3" high="7" optimum="6" value="2">
  Score 2/10
</meter>
```

### CSS

```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-suboptimum-value {
  background: linear-gradient(to bottom, #ff7, #990 45%, #990 55%, #ff7);
  height: 100%;
  box-sizing: border-box;
}
```

### JavaScript

```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

### Result

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

Not part of any standard.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`


<time-percentage> - CSS: Cascading Style Sheets

<time-percentage>
=================

The **`<time-percentage>`** CSS data type represents a value that can be either a `<time>` or a `<percentage>`.

Syntax
------

Refer to the documentation for `<time>` and `<percentage>` for details of the individual syntaxes allowed by this type.

Formal syntax
-------------
```

<time-percentage> =
  <time>        |
  <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()` 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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<percentage>`
* `<time>`
* CSS Values and Units


max-width - CSS: Cascading Style Sheets

max-width
=========

The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.

Try it
------

`max-width` overrides `width`, but `min-width` overrides `max-width`.

Syntax
------

```css
/\* <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;
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>`

Defines the `max-width` as an absolute value.

`<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`

Use the available space, but not more than max-content, i.e `min(max-content, max(min-content, stretch))`.

`fit-content(`<length-percentage>`)`
Experimental

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
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length or `none` |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

max-width =
  none                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length>      |
  <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

```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```

#### CSS

```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 |
| CSS Box Sizing Module Level 4 # sizing-values |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The box model, `box-sizing`
* `width`, `min-width`
* The mapped logical properties: `max-inline-size`, `max-block-size`


image-orientation - CSS: Cascading Style Sheets

image-orientation
=================

The **`image-orientation`** CSS property specifies a layout-independent correction to the orientation of an image.

Try it
------

Syntax
------

```css
/\* 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 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 information, due to security concerns. Find out more from the CSS working group draft issue.

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` 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>`, any `image-orientation` rotation is applied before any other transformations.

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

|  |  |
| --- | --- |
| Initial value | `from-image` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | an `<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           |
  none                 |
  [ <angle> || flip ]

```

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

```css
#image {
  image-orientation: from-image; /\* Can be changed in the live sample \*/
}
```

```
img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}
```

```
<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
 type="radio"
 id="from-image"
 name="orientation"
 value="from-image"
 checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>
```

```
document.addEventListener("change", (evt) => {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});
```

#### Result

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-orientation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Other image-related CSS properties: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`.
* `transform` and `rotate`


margin-bottom - CSS: Cascading Style Sheets

margin-bottom
=============

The **`margin-bottom`** CSS property sets the 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](/en-US/docs/Web/CSS/margin-bottom/margin-bottom.svg)

This property has no effect on *non-replaced* inline elements, such as `<span>` or `<code>`.

Syntax
------

```css
/\* <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>`

The size of the margin as a fixed value.

`<percentage>`

The size of the margin as a percentage, relative to the inline size (*width* in a horizontal language, defined by `writing-mode`) of the containing block.

`auto`

The browser selects a suitable value to use. See `margin`.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

Formal syntax
-------------
```

margin-bottom =
  <length-percentage>  |
  auto

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Setting positive and negative bottom margins

#### HTML

```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

```css
.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

```css
.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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `margin-top`, `margin-right`, and `margin-left` and the `margin` shorthand
* The mapped logical properties: `margin-block-start`, `margin-block-end`, `margin-inline-start`, and `margin-inline-end` and the shorthands `margin-block` and `margin-inline`


shape-image-threshold - CSS: Cascading Style Sheets

shape-image-threshold
=====================

The **`shape-image-threshold`** CSS property sets the alpha channel threshold used to extract the shape using an image as the value for `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
------

```css
/\* <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>`

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 | `0.0` |
| Applies to | floats |
| Inherited | no |
| Computed value | The same as the specified value after clipping the `<number>` to the range [0.0, 1.0]. |
| Animation type | a number |

Formal syntax
-------------
```

shape-image-threshold =
  <alpha-value>

<alpha-value> =
  <number>      |
  <percentage>

```

Examples
--------

### Aligning text to a gradient

This example creates a `<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

```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

```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` 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` 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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Shapes
* Overview of CSS Shapes
* `<basic-shape>`
* `shape-outside`
* `shape-margin`


box-sizing - CSS: Cascading Style Sheets

box-sizing
==========

The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.

Try it
------

By default in 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>`, `<select>`, and `<button>` elements, and for `<input>` elements whose type is `radio`, `checkbox`, `reset`, `button`, `submit`, `color`, or `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
------

```css
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` and `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` and `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 | `content-box` |
| Applies to | all elements that accept width or height |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

box-sizing =
  content-box  |
  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

```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

#### CSS

```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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS box model


scroll-padding-top - CSS: Cascading Style Sheets

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
------

```css
/\* 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>``

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 | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

scroll-padding-top =
  auto                       |
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap


left - CSS: Cascading Style Sheets

left
====

The **`left`** CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.

Try it
------

Syntax
------

```css
/\* <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>`

A negative, null, or positive `<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>`

A `<percentage>` of the containing block's width.

`auto`

Specifies that:

* for *absolutely positioned elements*, the position of the element is based on the `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` 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>`, `<percentage>`, or the `auto` keyword.

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

The effect of `left` depends on how the element is positioned (i.e., the value of the `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` 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 | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| 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, percentage or calc(); |

Formal syntax
-------------
```

left =
  auto                 |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Positioning elements

#### HTML

```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

```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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `inset`, the shorthand for all related properties: `top`, `bottom`, `left`, and `right`
* The mapped logical properties: `inset-block-start`, `inset-block-end`, `inset-inline-start`, and `inset-inline-end` and the shorthands `inset-block` and `inset-inline`
* `position`


counter-increment - CSS: Cascading Style Sheets

counter-increment
=================

The **`counter-increment`** CSS property can be used to increase or decrease the value of the named CSS counters by the specified values, or to prevent all counters or an individual counter's value from being changed.

If a named counter in the list of space-separated counters and values doesn't exist, it will be created. If no value is provided for a counter in the list of counters, the counter will be increased by `1`.

The counter's value can be reset to any integer value with the `counter-reset` CSS property.

Try it
------

Syntax
------

```css
/\* Increases "my-counter" by 1 \*/
counter-increment: my-counter;

/\* Decreases "my-counter" by 1 \*/
counter-increment: my-counter -1;

/\* Increases "counter1" by 1 and decreases "counter2" by 4 \*/
counter-increment: counter1 counter2 -4;

/\* Increases "page" by 1, "section" by 2, while "chapter" doesn't change \*/
counter-increment: chapter 0 section 2 page;

/\* 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;
```

### Values

The `counter-increment` property takes as its value either a list of space-separated counter names specified as `<custom-ident>` with an optional `<integer>` value or the keyword `none`. You may specify as many counters to increment as you want, with each name or name-number pair separated by a space.

`<custom-ident>`

Specifies the name of the counter to increase or decrease.

`<integer>`

Specifies the value to add to the counter. If the integer is preceded by a `-` sign, the value will be subtracted from the counter. Defaults to `1` if no value is specified.

`none`

Indicates that no counter must be increased or decreased. This value can also be used to cancel all counters from being increased or decreased in more specific rules. This is the default value of the property.

**Note:** Using the `none` value prevents all counters from being increased or decreased for the selected elements where this rule applies. To prevent only specific counters from being increased or decreased, set the `integer` value as `0` on the relevant counter(s).

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

counter-increment =
  [ <counter-name> <integer>? ]+  |
  none

```

Examples
--------

### Decreasing the counter value

In this example, we display a sequence of numbers counting backward. To do this, we use a counter to display numbers starting from 100 and decreasing by 7 each time.

#### HTML

```html
<div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
 ><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
```

#### CSS

We set the initial value of the counter named `sevens` to `100` by using `counter-reset`. Then, for each `<i>`, we decrease the counter by `7`.

To set the first count at `100`, we target the first `<i>` element by using the `:first-of-type` pseudo-class and setting `counter-increment: none;`. Additionally, the `content` property is used in the `::before` pseudo-element to display the value of the counter using the `counter()` function.

```css
div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}
```

```
div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}
```

#### Result

Had we not used `counter-reset` (or `counter-set`) to create the counter and set the value to `100`, the `sevens` counter would still have been created, but with an initial value `0`.

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # increment-set |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Counter properties: `counter-set`, `counter-reset`
* Counter at-rule: `@counter-style`
* Counter functions: `counter()`, `counters()`
* Using CSS counters guide
* CSS lists and counters module
* CSS counter styles module


border-bottom-left-radius - CSS: Cascading Style Sheets

border-bottom-left-radius
=========================

The **`border-bottom-left-radius`** 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](/en-US/docs/Web/CSS/border-bottom-left-radius/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` property.

**Note:** If the value of this property is not set in a `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.

Syntax
------

```css
/\* 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>` or a `<percentage>` denoting the radius of the circle to use for the border in that corner.

With two values:

* the first value is a `<length>` or a `<percentage>` denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a `<length>` or a `<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>` 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 | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

border-bottom-left-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Arc of a circle

A single `<length>` value produces an arc of a circle.
```

<div></div>
```

```css
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></div>
```

```css
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></div>
```

```css
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></div>
```

```css
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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `border-radius` shorthand property
* `border-top-right-radius`, `border-bottom-right-radius`, and `border-top-left-radius`


:buffering - CSS: Cascading Style Sheets

:buffering
==========

The **`:buffering`** CSS pseudo-class selector represents an element that is playable, such as `<audio>` or `<video>`, when the playable element is buffering a media resource.

 An element is considered as buffering when that element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback.
 For more information, see the Media buffering, seeking, and time ranges guide.

**Note:** An element is still considered to be `:playing` when it is "buffering".
 If `:buffering` matches an element, `:playing` will also match that element.

Syntax
------

```css
:buffering {
  /\* ... \*/
}
```

Examples
--------

### CSS

```css
:buffering {
  outline: 5px solid red;
}

video:buffering {
  outline: 5px solid blue;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # selectordef-buffering |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:muted`
* `:paused`
* `:playing`
* `:seeking`
* `:stalled`
* `:volume-locked`
* CSS selectors


border-start-end-radius - CSS: Cascading Style Sheets

border-start-end-radius
=======================

The **`border-start-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

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` property.

Syntax
------

```css
/\* <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>` 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 | `0` |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | two absolute `<length>`s or `<percentage>`s |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

border-start-end-radius =
  <length-percentage [0,∞]>{1,2}

<length-percentage> =
  <length>      |
  <percentage>

```

Examples
--------

### Border radius with vertical text

#### HTML

```html
<div>
  <p class="exampleText">Example</p>
</div>
```

#### CSS

```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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS Logical Properties and Values
* The mapped physical property: `border-bottom-left-radius`
* `writing-mode`, `direction`, `text-orientation`


scroll-padding-left - CSS: Cascading Style Sheets

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
------

```css
/\* 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 | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

Formal syntax
-------------
```

scroll-padding-left =
  auto                       |
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      |
  <percentage>

```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap