text-orientation - CSS: Cascading Style Sheets

text-orientation
================

The **`text-orientation`** CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when `writing-mode` is not `horizontal-tb`). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/\* Global values \*/
text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;
```

The `text-orientation` property is specified as a single keyword from the list below.

### Values

`mixed`

Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.

`upright`

Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of `direction` is forced to be `ltr`.

`sideways`

Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.

`sideways-right`

An alias to `sideways` that is kept for compatibility purposes.

`use-glyph-orientation`

On SVG elements, this keyword leads to use the value of the deprecated SVG properties `glyph-orientation-vertical` and `glyph-orientation-horizontal`.

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

|  |  |
| --- | --- |
| Initial value | `mixed` |
| Applies to | all elements, except table row groups, rows, column groups, and columns |
| Inherited | yes |
| Computed value | as specified |
| Animation type | Not animatable |

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

text-orientation =
  mixed     |
  upright   |
  sideways

```

Examples
--------

### HTML

```html
<p>Lorem ipsum dolet semper quisquam.</p>
```

### CSS

```css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```

### Result

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # text-orientation |

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

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

See also
--------

* The other vertical-script related CSS properties: `writing-mode`, `text-combine-upright`, and `unicode-bidi`.
* CSS Logical properties
* Styling vertical text (Chinese, Japanese, Korean and Mongolian)
* Extensive browsers support test results: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text\_orientation


transition-delay - CSS: Cascading Style Sheets

transition-delay
================

The **`transition-delay`** CSS property specifies the duration to wait before starting a property's transition effect when its value changes.

Try it
------

The delay may be zero, positive, or negative:

* A value of `0s` (or `0ms`) will begin the transition effect immediately.
* A positive value will delay the start of the transition effect for the given length of time.
* A negative value will begin the transition effect immediately, and partway through the effect. In other words, the effect will be animated as if it had already been running for the given length of time.

You may specify multiple delays, which is useful when transitioning multiple properties. Each delay will be applied to the corresponding property as specified by the `transition-property` property, which acts as a master list. If there are fewer delays specified than in the master list, the list of delay values will be repeated until there are enough. If there are more delays, the list of delay values will be truncated to match the number of properties. In both cases, the CSS declaration remains valid.

Syntax
------

```css
/\* <time> values \*/
transition-delay: 3s;
transition-delay: 2s, 4ms;

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

### Values

`<time>`

Denotes the amount of time to wait between a property's value changing and the start of the transition effect.

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

|  |  |
| --- | --- |
| Initial value | `0s` |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

transition-delay =
  <time>#

```

Examples
--------

### Example showing different delays

#### HTML

```html
<div class="box delay-1">0.5 seconds</div>

<div class="box delay-2">2 seconds</div>

<div class="box delay-3">4 seconds</div>

<button id="change">Change</button>
```

#### CSS

```css
.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}
```

#### JavaScript

```js
function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);
```

#### Result

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

| Specification |
| --- |
| CSS Transitions # transition-delay-property |

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

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

See also
--------

* Using CSS transitions
* `TransitionEvent` API


flex-wrap - CSS: Cascading Style Sheets

flex-wrap
=========

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-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Try it
------

See Using CSS flexible boxes for more properties and information.

Syntax
------

```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/\* Global values \*/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;
```

The `flex-wrap` property is specified as a single keyword chosen from the list of values below.

### Values

The following values are accepted:

`nowrap`

The flex items are laid out in a single line which may cause the flex container to overflow. The **cross-start** is either equivalent to **start** or **before** depending on the `flex-direction` value. This is the default value.

`wrap`

The flex items break into multiple lines. The **cross-start** is either equivalent to **start** or **before** depending `flex-direction` value and the **cross-end** is the opposite of the specified **cross-start**.

`wrap-reverse`

Behaves the same as `wrap` but **cross-start** and **cross-end** are permuted.

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

|  |  |
| --- | --- |
| Initial value | `nowrap` |
| Applies to | flex containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

flex-wrap =
  nowrap        |
  wrap          |
  wrap-reverse

```

Examples
--------

### Setting flex container wrap values

#### HTML

```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

#### CSS

```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

#### Results

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

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

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

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

See also
--------

* CSS `flex-flow` shorthand property for the CSS `flex-wrap` and `flex-direction` properties.
* Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Mastering wrapping of flex items*


forced-color-adjust - CSS: Cascading Style Sheets

forced-color-adjust
===================

The **`forced-color-adjust`** CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.

Syntax
------

```css
forced-color-adjust: auto;
forced-color-adjust: none;

/\* Global values \*/
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;
```

The `forced-color-adjust` property's value must be one of the following keywords.

### Values

`auto`

The element's colors are adjusted by the user agent in forced colors mode. This is the default.

`none`

The element's colors are not automatically adjusted by the user agent in forced colors mode.

Usage notes
-----------

This property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the user agent result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. **It should not be used to prevent user choices being respected**.

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

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

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

forced-color-adjust =
  auto                   |
  none                   |
  preserve-parent-color

```

Examples
--------

### Preserving colors

In the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the `.box` class.

By using the `forced-colors` media feature you could add any other optimizations for forced color mode alongside the `forced-color-adjust` property.

#### CSS

```css
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}
```

#### HTML

```html
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>
```

#### Result

The following screenshot shows the image above in Windows High Contrast Mode:

![The example above in high contrast mode shows the first box with a black background the second with the grey background of the CSS.](/en-US/docs/Web/CSS/forced-color-adjust/windows-high-contrast.jpg)

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # forced-color-adjust-prop |

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

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

See also
--------

* Applying color to HTML elements using CSS
* Styling for Windows high contrast with standards for forced colors.
* `print-color-adjust`


border-width - CSS: Cascading Style Sheets

border-width
============

The **`border-width`** shorthand CSS property sets the width of an element's border.

Try it
------

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

This property is a shorthand for the following CSS properties:

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

```css
/\* Keyword values \*/
border-width: thin;
border-width: medium;
border-width: thick;

/\* <length> values \*/
border-width: 4px;
border-width: 1.2rem;

/\* top and bottom | left and right \*/
border-width: 2px 1.5em;

/\* top | left and right | bottom \*/
border-width: 1px 2em 1.5cm;

/\* top | right | bottom | left \*/
border-width: 1px 2em 0 4rem;

/\* Global values \*/
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;
```

The `border-width` property may be specified using one, two, three, or four values.

* When **one** value is specified, it applies the same width to **all four sides**.
* When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` or a keyword. If it's a keyword, it must be one of the following values:

* `thin`
* `medium`
* `thick`

**Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-width`: `medium`
* `border-right-width`: `medium`
* `border-bottom-width`: `medium`
* `border-left-width`: `medium`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
* `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-width`: a length
* `border-left-width`: a length
* `border-right-width`: a length
* `border-top-width`: a length
 |

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

border-width =
  <line-width>{1,4}

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

Examples
--------

### A mix of values and lengths

#### HTML

```html
<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="three-values">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>
```

#### CSS

```css
#one-value {
  border: ridge #ccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```

#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

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

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

See also
--------

* The border-related shorthand properties: `border`, `border-style`, `border-color`
* The border-width-related properties: `border-bottom-width`, `border-left-width`, `border-right-width`, `border-top-width`


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

:-moz-handler-blocked
=====================

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

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

Syntax
------

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

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

Not part of any standard.

See also
--------

* `:-moz-handler-crashed`
* `:-moz-handler-disabled`


<line-style> - CSS: Cascading Style Sheets

<line-style>
============

The **`<line-style>`** enumerated value type represents keyword values that define the style of a line, or the lack of a line. The `<line-style>` keyword values are used in the following longhand and shorthand border and column properties:

* `border`, `border-style`
* `border-block`, `border-block-style`
* `border-block-end`, `border-block-end-style`
* `border-block-start`, `border-block-start-style`
* `border-bottom`, `border-bottom-style`
* `border-inline`, `border-inline-style`
* `border-inline-end`, `border-inline-end-style`
* `border-inline-start`, `border-inline-start-style`
* `border-left`, `border-left-style`
* `border-right`, `border-right-style`
* `border-top`, `border-top-style`
* `column-rule`, `column-rule-style`
Syntax
------

```css
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
```

### Values

The `<line-style>` enumerated type is specified using one of the values listed below:

`none`

Displays no line. The computed value of the line width is `0` even if a width value is specified. In the case of table cell and border collapsing, the `none` value has the *lowest* priority. If any other conflicting border is set, it will be displayed. The `none` value is similar to `hidden`.

`hidden`

Displays no line. The computed width of the line is `0` even if a width value is specified. In the case of table cell and border collapsing, the `hidden` value has the *highest* priority. If any other conflicting border is set, it won't be displayed. The `hidden` value is similar to `none`, but `hidden` is not a valid value for outline styles.

`dotted`

Displays a series of round dots. The radius of the dots is half the computed value of the line's width. The spacing of the dots is not defined by the specification and is implementation-specific.

`dashed`

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

`solid`

Displays a single, straight solid line.

`double`

Displays two straight lines with some space between them. The length of the lines adds up to the pixel size defined by the line's width.

`groove`

Displays a border with a carved appearance. This value is the opposite of `ridge`.

`ridge`

Displays a border with an extruded appearance. This value is the opposite of `groove`.

`inset`

Displays a border that makes the element appear embedded. This value is the opposite of `outset`. When applied to a table cell border and `border-collapse` is set to `collapsed`, this value behaves like `groove`.

`outset`

Displays a border that makes the element appear embossed. This value is the opposite of `inset`. When applied to a table cell with `border-collapse` set to `collapsed`, this value behaves like `ridge`.

**Note:** When `<outline-style>` is used as the value type for `outline` and `outline-style` properties, it is similar to `<line-style>`, but does not support `hidden` and includes the `auto` value. When `auto` is set, the user-agent defined `<line-style>` value is used.

Examples
--------

The first example demonstrates all the `<line-style>` keyword values. The second example demonstrates how some line style colors may display in unexpected ways.

### Defining line styles

This example shows all the `<line-style>` values as values for the CSS `border-style` and `column-rule-style` properties.

#### HTML

This example uses multiple `<div>` elements, each with a class representing the `<line-style>` value that is being demonstrated.

```html
<div class="<line-style>">
  <p><line-style></p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
```

```
<div class="none">
  <p>none</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="hidden">
  <p>hidden</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dotted">
  <p>dotted</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="dashed">
  <p>dashed</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="solid">
  <p>solid</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="double">
  <p>double</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="groove">
  <p>groove</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="ridge">
  <p>ridge</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="inset">
  <p>inset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
<div class="outset">
  <p>outset</p>
  <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>
```

#### CSS

In the CSS for this example, the border and the column-rule for all the `<p>` elements is defined to have a width of `7px` and the style value of `double`. For each paragraph, the `double` value is then overridden by specifying a different `<line-style>` value for the `border-style` and `column-rule-style` properties.
```

div {
  display: flex;
  gap: 1em;
  list-style: none;
  align-items: center;
}
div:first-of-type {
  display: none;
}

p:first-of-type {
  text-align: center;
  line-height: 5em;
}
p {
  width: 10em;
  height: 5em;
  background-color: palegoldenrod;
}
```

```css
p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: #000000;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}
```

#### Result

Notice that the black border is not always black.

### Defining line styles and colors

This example demonstrates line-style and color choice. With some `<line-style>` keyword values, the color of the line may not be what you expect. To create the required "3D" effect of `groove,` `ridge`, `inset`, and `outset` styles when displaying these values in black or white, user agents use different color calculations than any other color-line combinations.

#### HTML

This example uses multiple `<div>` elements, each with a different `border-color` set as an inline `style`.
```

<section>
```

```html
<div style="border-color: #000000"></div>
```

```
<div style="border-color: #000001"></div>
<div style="border-color: #ffffff"></div>

<div style="border-color: #ff00ff"></div>
<div style="border-color: #ffff00"></div>
<div style="border-color: #00ffff"></div>

<div style="border-color: #cc33cc"></div>
<div style="border-color: #cccc33"></div>
<div style="border-color: #33cccc"></div>

<div style="border-color: #ff0000"></div>
<div style="border-color: #00ff00"></div>
<div style="border-color: #0000ff"></div>

<div style="border-color: #cc3333"></div>
<div style="border-color: #33cc33"></div>
<div style="border-color: #3333cc"></div>

<div style="border-color: #993333"></div>
<div style="border-color: #339933"></div>
<div style="border-color: #333399"></div>
</section>
```

#### CSS

The four sides of each `<div>` have a different `<line-style>` value, and each list item has a different `<color>` value. We use generated content to display the CSS declared inline.
```

section {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  text-transform: uppercase;
  font-family: monospace;
}
```

```css
div {
  border-width: 10px;
  border-style: inset groove ridge outset;
  padding: 5px;
}
div::before {
  content: attr(style);
}
```

#### Result

Notice that the almost-black color of `#000001` may be different from the actual black, and the contrast between the dark and light edges is more noticeable when using lighter colors.

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # typedef-line-style |

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

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

See also
--------

* CSS backgrounds and borders module
* CSS basic user interface module
* CSS multi-column layout module


sqrt() - CSS: Cascading Style Sheets

sqrt()
======

The **`sqrt()`** CSS function is an exponential function that returns the square root of a number.

The function `pow(x, 0.5)` is equivalent to `sqrt(x)`.

Syntax
------

```css
/\* A <number> value \*/
width: calc(100px * sqrt(9)); /\* 300px \*/
width: calc(100px * sqrt(25)); /\* 500px \*/
width: calc(100px * sqrt(100)); /\* 1000px \*/
```

### Parameters

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

`x`

A calculation which resolves to a `<number>` greater than or equal to 0.

### Return value

Returns a `<number>` which is the square root of `x`.

* if `x` is `+∞`, the result is `+∞`.
* If `x` is `0⁻`, the result is `0⁻`.
* If `x` is less than `0`, the result is `NaN`.
### Formal syntax
```

<sqrt()> =
  sqrt( <calc-sum> )

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

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

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

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

```

Examples
--------

### Scale sizes based on square root

This example shows how you can use the `sqrt()` function to calculate sizes.

#### HTML

```html
<div class="boxes">
  <div class="box">50px</div>
  <div class="box one">100px</div>
  <div class="box two">150px</div>
  <div class="box three">200px</div>
</div>
```

#### CSS

Here we are using CSS custom properties to define the sizes to be used. First, we declare the first size (`--size-0`), which is then used to calculate the other sizes.

* `--size-1` is calculated by multiplying the value of `--size-0` (50px) by the square root of 4 (2), which results in 100px.
* `--size-2` is calculated by multiplying the value of `--size-0` (50px) by the square root of 9 (3), which results in 150px.
* `--size-3` is calculated by multiplying the value of `--size-0` (50px) by the square root of 16 (4), which results in 200px.

```css
:root {
  --size-0: 50px;
  --size-1: calc(var(--size-0) * sqrt(4)); /\* 100px \*/
  --size-2: calc(var(--size-0) * sqrt(9)); /\* 150px \*/
  --size-3: calc(var(--size-0) * sqrt(16)); /\* 200px \*/
}
```

```
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

The sizes are then applied as the `width` and `height` values of the selectors.

```css
.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}
```

#### Result

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # exponent-funcs |

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

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

See also
--------

* `pow()`
* `hypot()`
* `log()`
* `exp()`


inset-block-end - CSS: Cascading Style Sheets

inset-block-end
===============

The **`inset-block-end`** CSS property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the `top`, `right`, `bottom`, or `left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Syntax
------

```css
/\* <length> values \*/
inset-block-end: 3px;
inset-block-end: 2.4em;

/\* <percentage>s of the width or height of the containing block \*/
inset-block-end: 10%;

/\* Keyword value \*/
inset-block-end: auto;

/\* Global values \*/
inset-block-end: inherit;
inset-block-end: initial;
inset-block-end: revert;
inset-block-end: revert-layer;
inset-block-end: unset;
```

### Values

The `inset-block-end` property takes the same values as the `left` property.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-height of containing block |
| Computed value | same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical |
| Animation type | a length, percentage or calc(); |

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

inset-block-end =
  auto                 |
  <length-percentage>

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

```

Examples
--------

### Setting block end offset

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-block-end: 20px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-properties |

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

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

See also
--------

* The properties which defines other insets: `inset-block-start`, `inset-inline-start`, and `inset-inline-end`
* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* `writing-mode`, `direction`, `text-orientation`


text-decoration-color - CSS: Cascading Style Sheets

text-decoration-color
=====================

The **`text-decoration-color`** CSS property sets the color of decorations added to text by `text-decoration-line`.

The color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value.

Try it
------

CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the `text-decoration-line` property), and specifying the line color (with `text-decoration-color`) on a per-element basis.

Syntax
------

```css
/\* <color> values \*/
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgb(255 128 128 / 50%);
text-decoration-color: transparent;

/\* Global values \*/
text-decoration-color: inherit;
text-decoration-color: initial;
text-decoration-color: revert;
text-decoration-color: revert-layer;
text-decoration-color: unset;
```

### Values

`<color>`

The color of the line decoration.

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

It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.

Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enough to indicate a link has focus.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |

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

text-decoration-color =
  <color>

```

Examples
--------

### Basic example

```html
<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>
```

```css
p {
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-color-property |

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

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

See also
--------

* When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead.
* The `<color>` data type
* Other color-related properties: `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* Applying color to HTML elements using CSS


:picture-in-picture - CSS: Cascading Style Sheets

:picture-in-picture
===================

The **`:picture-in-picture`** CSS pseudo-class matches the element which is currently in picture-in-picture mode.

Syntax
------

```css
:picture-in-picture {
  /\* ... \*/
}
```

Usage notes
-----------

The `:picture-in-picture` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

Examples
--------

In this example, a video has a box shadow when it is displayed in the floating window.

### HTML

The page's HTML looks like this:

```html
<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>
```

The `<video>` with the ID `"pip-video"` will change between having a red box shadow or not, depending on whether or not it is displayed in the picture-in-picture floating window.

### CSS

The magic happens in the CSS.

```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

See also
--------

* Picture-in-picture API
* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`


CSS scoping - CSS: Cascading Style Sheets

CSS scoping
===========

The **CSS scoping** module defines the CSS scoping and encapsulation mechanisms, focusing on the Shadow DOM scoping mechanism.

CSS styles are either global in scope or scoped to a shadow tree. Globally scoped styles apply to all the elements in the node tree that match the selector, including custom elements in that tree, but not to the shadow trees composing each custom element. Selectors and their associated style definitions don't bleed between scopes.

Within the CSS of a shadow tree, selectors don't select elements outside the tree, either in the global scope or in other shadow trees. Each custom element has its own shadow tree, which contains all the components that make up the custom element (but not the custom element, or "host", itself).

Sometimes it's useful to be able to style a host from inside the shadow tree context. The CSS scoping module makes this possible by defining selectors that:

* Enable a shadow tree to style its host.
* Enable external CSS to style elements within a shadow DOM (but only if the associated custom element is set up to accept external styles).
Reference
---------

### Selectors

* `:host`
* `:host()`
* `:host-context()`
* `::slotted`
Guides
------

Web components

An introduction to the different technologies used to create reusable web components — custom elements whose functionality is encapsulated away from the rest of your code.

Using shadow DOM

Shadow DOM fundamentals, including attaching a shadow DOM to an element, adding to the shadow DOM tree, and styling.

Using templates and slots

Defining reusable HTML structure using `<template>` and `<slot>` elements, and using that structure inside web components.

Using custom elements

Introduction to the Custom Elements API, the JavaScript API used to create custom elements that encapsulate functionality.

Related concepts
----------------

* CSS `:defined` pseudo-class
* CSS `::part` pseudo-element
* HTML `<template>` element
* HTML `<slot>` element
* HTML `slot` attribute
* Shadow tree glossary term
* DOM glossary term
* Compound selector term
* Selector list term
* Web components interfaces, properties, and methods
    + `CustomElementRegistry` interface
    + `Element` API
        - `Element.slot` property
        - `Element.assignedSlot` property
        - `Element.attachShadow()` method
    + `HTMLSlotElement` interface
    + `HTMLTemplateElement` interface
    + `ShadowRoot` interface

**Note:** Despite the name, the `:scope` pseudo-class, which represents elements that are a reference point (or scope) for selectors to match against, is defined in the Selectors module. It is otherwise unrelated to the CSS scoping module, which is focused on scoping as it pertains to the Shadow DOM scoping mechanism.

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

| Specification |
| --- |
| CSS Scoping Module Level 1  |

See also
--------

* CSS selectors module
* CSS pseudo elements module
* CSS namespaces module
* CSS shadow-parts module
* Template, slot, and shadow on web.dev (2023)
* Custom element best practices on web.dev (2019)


initial-letter - CSS: Cascading Style Sheets

initial-letter
==============

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The `initial-letter` CSS property sets styling for dropped, raised, and sunken initial letters.

Syntax
------

```css
/\* Keyword values \*/
initial-letter: normal;

/\* Numeric values \*/
initial-letter: 1.5; /\* Initial letter occupies 1.5 lines \*/
initial-letter: 3; /\* Initial letter occupies 3 lines \*/
initial-letter: 3 2; /\* Initial letter occupies 3 lines and
 sinks 2 lines \*/

/\* Global values \*/
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;
```

The keyword value `normal`, or a `<number>` optionally followed by an `<integer>`.

### Values

`normal`

No special initial-letter effect. Text behaves as normal.

`<number>`

Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.

`<integer>`

Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | `::first-letter` pseudo-elements and inline-level first child of a block container |
| Inherited | no |
| Computed value | as specified |
| Animation type | by computed value type |

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

initial-letter =
  normal                               |
  <number [1,∞]> <integer [1,∞]>       |
  <number [1,∞]> && [ drop | raise ]?

```

Examples
--------

### Setting initial letter size

#### HTML

```html
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>
```

#### CSS

```css
.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
```

#### Result

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # sizing-drop-initials |

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

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

See also
--------

* `initial-letter-align`
* Drop caps in CSS


font-palette - CSS: Cascading Style Sheets

font-palette
============

The **`font-palette`** CSS property allows specifying one of the many palettes contained in a font that a user agent should use for the font. Users can also override the values in a palette or create a new palette by using the @font-palette-values at-rule.

Syntax
------

```css
/\* Using a font-defined palette \*/
font-palette: normal;

/\* Using a user-defined palette \*/
font-palette: --one;
```

### Values

`normal`

Specifies the default color palette or the default glyph colorization (set by the font maker) to be used for the font. With this setting, the palette in the font at index 0 is rendered.

`light`

Specifies the first palette in the font that matches 'light' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a light (close to white) background. If a font does not have this metadata, the `light` value behaves as `normal`.

`dark`

Specifies the first palette in the font that matches 'dark' to be used for the font. Some fonts contain metadata that identify a palette as applicable for a dark (close to black) background. If a font does not have this metadata, the value behaves as `normal`.

`<palette-identifier>`

Allows you to specify your own values for the font palette by using the @font-palette-values at-rule. This value is specified using the <dashed-ident> format.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

font-palette =
  normal                |
  light                 |
  dark                  |
  <palette-identifier>  |
  <palette-mix()>

<palette-mix()> =
  palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65

<polar-color-space> =
  hsl    |
  hwb    |
  lch    |
  oklch

<hue-interpolation-method> =
  [ shorter | longer | increasing | decreasing ] hue

```

Examples
--------

### Specifying a dark palette

This example allows you to use the first palette marked as *dark* (works best on a near black background) by the font-maker.

```css
@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-palette-prop |

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

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

See also
--------

* `@font-palette-values`
* `base-palette` descriptor
* `font-family` descriptor
* `override-colors` descriptor


Inline formatting context - CSS: Cascading Style Sheets

Inline formatting context
=========================

This article explains the inline formatting context.

Core concepts
-------------

The inline formatting context is part of the visual rendering of a web page. Inline boxes are laid out one after the other, in the direction sentences run in the writing mode in use:

* In a horizontal writing mode, boxes are laid out horizontally, starting on the left.
* In a vertical writing mode they would be laid out vertically starting at the top.

In the example below, the two (`<div>`) elements with the black borders form a block formatting context, inside which each word participates in an inline formatting context. The boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically.

Boxes forming a line are contained by a rectangular area called a line box. This box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another line will be created. Therefore, a paragraph is a set of inline line boxes, stacked in the block direction.

When an inline box is split, margins, borders, and padding have no visual effect where the split occurs. In the next example there is a (`<span>`) element wrapping a set of words wrapping onto two lines. The border on the `<span>` breaks at the wrapping point.

Margins, borders, and padding in the inline direction are respected. In the example below you can see how the margin, border, and padding on the inline `<span>` element are added.

**Note:** I am using the logical, flow-relative properties — `padding-inline-start` rather than `padding-left` — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in Logical Properties and Values.

Alignment in the block direction
--------------------------------

Inline boxes may be aligned in the block direction in different ways, using the `vertical-align` property, which will align on the block axis in vertical writing modes (therefore not vertically at all!). In the example below the large text is making the line box of the first sentence larger, therefore the `vertical-align` property can be used to align the inline boxes either side of it. I have used the value `top`, try changing it to `middle`, `bottom`, or `baseline`.

Alignment in the inline direction
---------------------------------

If there is additional space in the inline direction, the `text-align` property can be used to align the inline boxes within their line box. Try changing the value of `text-align` below to `end`.

Effect of floats
----------------

Line boxes usually have the same size in the inline direction, therefore the same width if working in a horizontal writing mode, or height if working in a vertical writing mode. If there is a `float` within the same block formatting context however, the float will cause the line boxes that wrap the float to become shorter.

See also
--------

* Block formatting context
* Visual Formatting Model


CSS motion path - CSS: Cascading Style Sheets

CSS motion path
===============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **CSS motion path** module allows authors to animate any graphical object along a custom path.

The idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. With `offset-path` you can define a specific path of any shape you want. You then animate it along that path by animating `offset-distance`, and can choose to rotate it at any point using `offset-rotate`.

Basic example
-------------

```html
<div id="motion-demo"></div>
```

```css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
```

Reference
---------

### Properties

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
### Functions

* `ray()`
Specifications
--------------

| Specification |
| --- |
| Motion Path Module Level 1 # offset-path-property |

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

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


bottom - CSS: Cascading Style Sheets

bottom
======

The **`bottom`** CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

Try it
------

The effect of `bottom` depends on how the element is positioned (i.e., the value of the `position` property):

* When `position` is set to `absolute` or `fixed`, the `bottom` property specifies the distance between the outer edge of the element's bottom margin and the outer edge of the containing block's bottom padding.
* When `position` is set to `relative`, the `bottom` property specifies the distance the element's bottom edge is moved above its normal position.
* When `position` is set to `sticky`, the `bottom` property is used to compute the sticky-constraint rectangle.
* When `position` is set to `static`, the `bottom` property has *no effect*.

When both `top` and `bottom` are specified, `position` is set to `absolute` or `fixed`, *and* `height` is unspecified (either `auto` or `100%`) both the `top` and `bottom` distances are respected. In all other situations, if `height` is constrained in any way or `position` is set to `relative`, the `top` property takes precedence and the `bottom` property is ignored.

Syntax
------

```css
/\* <length> values \*/
bottom: 3px;
bottom: 2.4em;

/\* <percentage>s of the height of the containing block \*/
bottom: 10%;

/\* Keyword value \*/
bottom: auto;

/\* Global values \*/
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;
```

### Values

`<length>`

A negative, null, or positive `<length>` that represents:

* for *absolutely positioned elements*, the distance to the bottom edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved above its normal position.

`<percentage>`

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

`auto`

Specifies that:

* for *absolutely positioned elements*, the position of the element is based on the `top` property, while `height: auto` is treated as a height based on the content; or if `top` is also `auto`, the element is positioned where it should vertically be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the `top` property; or if `top` is also `auto`, the element is not moved vertically at all.

`inherit`

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a `<length>`, `<percentage>`, or the `auto` keyword.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | positioned elements |
| Inherited | no |
| Percentages | refer to the height 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
-------------
```

bottom =
  auto                 |
  <length-percentage>

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

```

Examples
--------

### Absolute and fixed positioning

This example demonstrates the difference in behavior of the `bottom` property, when `position` is `absolute` versus `fixed`.

#### HTML

```html
<p>
  This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>
```

#### CSS

```css
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgb(55 55 55 / 20%);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
```

#### Result

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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`


scrollbar-color - CSS: Cascading Style Sheets

scrollbar-color
===============

The **`scrollbar-color`** CSS property sets the color of the scrollbar track and thumb.

The **track** refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.

The **thumb** refers to the moving part of the scrollbar, which usually floats on top of the track.

When `scrollbar-color` value is set on the document's root element, the values are applied to the viewport scrollbars.

Syntax
------

```css
/\* Keyword values \*/
scrollbar-color: auto;

/\* <color> values \*/
scrollbar-color: rebeccapurple green; /\* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. \*/

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

### Values

`<scrollbar-color>`

Defines the color of the scrollbar.

|  |  |
| --- | --- |
| `auto` |
 Default platform rendering for the track portion of the scrollbar, in
 the absence of any other related scrollbar color properties.
  |
| `<color> <color>` |
 Applies the first color to the scrollbar thumb, the second to the
 scrollbar track.
  |

**Note:** `@media (forced-colors: active)` sets `scrollbar-color` to `auto`.

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

When using `scrollbar-color` property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

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

scrollbar-color =
  auto        |
  <color>{2}

```

Examples
--------

### Coloring overflow scrollbars

#### CSS

```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}
```

#### HTML

```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

#### Result

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

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |

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

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

See also
--------

* CSS overflow module
* CSS scrollbars styling module
* `overflow`
* `scrollbar-gutter`
* `scrollbar-width`


<ratio> - CSS: Cascading Style Sheets

<ratio>
=======

The **`<ratio>`** CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.

Syntax
------

In Media Queries Level 3, the `<ratio>` data type consisted of a strictly positive `<integer>` followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive `<integer>`. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.

In Media Queries Level 4, the `<ratio>` date type is updated to consist of a strictly positive `<number>` followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive `<number>`. In addition a single `<number>` as a value is allowable.

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

<ratio> =
  <number [0,∞]> [ / <number [0,∞]> ]?

```

Examples
--------

### Use in a media query

```css
@media screen and (min-aspect-ratio: 16/9) {
  /\* … \*/
}
```

### Common aspect ratios

|  | Ratio | Usage |
| --- | --- | --- |
| A rectangle that is three units tall and four units wide | `4/3` | Traditional TV format in the twentieth century. |
| A rectangle that is nine units tall and sixteen units wide | `16/9` | Modern "widescreen" TV format. |
| A rectangle that is 1 unit tall and 1.85 units wide | `185/100` = `91/50` | The most common movie format since the 1960s. |
| A rectangle that is 1 unit tall and 2.39 units wide | `239/100` | "Widescreen," anamorphic movie format. |

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

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

See also
--------

* `aspect-ratio` media feature


<display-listitem> - CSS: Cascading Style Sheets

<display-listitem>
==================

The `list-item` keyword causes the element to generate a `::marker` pseudo-element with the content specified by its `list-style` properties (for example a bullet point) together with a principal box of the specified type for its own contents.

Syntax
------

A single value of `list-item` will cause the element to behave like a list item. This can be used together with `list-style-type` 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 two-value syntax, if no inner value is specified it will default to `flow`. If no outer value is specified, the principal box will have an outer display type of `block`.

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

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

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

```

Examples
--------

### HTML

```html
<div class="fake-list">I will display as a list item</div>
```

### CSS

```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

### Result

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

| Specification |
| --- |
| CSS Display Module Level 3 # typedef-display-listitem |

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

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

See also
--------

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-internal>`
    + `<display-box>`
    + `<display-legacy>`


border-block-end-width - CSS: Cascading Style Sheets

border-block-end-width
======================

The **`border-block-end-width`** CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width`, `border-right-width`, `border-bottom-width`, or `border-left-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

Syntax
------

```css
/\* <'border-width'> values \*/
border-block-end-width: 5px;
border-block-end-width: thick;

/\* Global values \*/
border-block-end-width: inherit;
border-block-end-width: initial;
border-block-end-width: revert;
border-block-end-width: revert-layer;
border-block-end-width: unset;
```

Related properties are `border-block-start-width`, `border-inline-start-width`, and `border-inline-end-width`, which define the other border widths of the element.

### Values

`<'border-width'>`

The width of the border. See `border-width`.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

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

border-block-end-width =
  <line-width>

<line-width> =
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

```

Examples
--------

### Border width with vertical text

#### HTML

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

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-end-width: 5px;
}
```

#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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

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

See also
--------

* CSS Logical Properties and Values
* This property maps to one of the physical border properties: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-left-width`
* `writing-mode`, `direction`, `text-orientation`


CSS logical properties and values - CSS: Cascading Style Sheets

CSS logical properties and values
=================================

The **CSS logical properties and values** module introduces logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.

### Block vs. inline

Logical properties and values use the abstract terms *block* and *inline* to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.

Block dimension

The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.

Inline dimension

The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.

### New properties and values

CSS was initially designed with only physical coordinates in its controls. The module defines new flow–relative equivalents for many values and properties.

Some physical properties now have logical equivalents. Properties that accept physical values (`top`, `bottom`, `left`, `right`) now also accept flow-relative logical values (`block-start`, `block-end`, `inline-start`, `inline-end`).

The transition to logical axes is ongoing and not fully defined by the module; some properties don't yet have logical equivalents.

Reference
---------

### Properties for sizing

* `block-size`
* `inline-size`
* `max-block-size`
* `max-inline-size`
* `min-block-size`
* `min-inline-size`
### Properties for margins

* `margin` (`logical`
Experimental
 keyword)
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
### Properties for paddings

* `padding` (`logical`
Experimental
 keyword)
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
### Properties for borders

* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-color`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-style`
* `border-width`
### Properties for border radius

* `border-radius`
* `border-start-start-radius`
* `border-start-end-radius`
* `border-end-start-radius`
* `border-end-end-radius`
### Properties for positioning

* `inset`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
### Properties for size containment

* `contain-intrinsic-block-size`
* `contain-intrinsic-inline-size`
### Properties for scrolling

* `overflow-block`
* `overflow-inline`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
### Properties for floating

* `clear` (`inline-end` and `inline-start` keywords)
* `float` (`inline-end` and `inline-start` keywords)
### Other properties

* `caption-side` (`inline-end` and `inline-start` keywords)
* `resize` (`block` and `inline` keywords)
* `text-align` (`end` and `start` keywords)
### Deprecated properties

* `offset-block-end`
Non-standard

Deprecated
 (now `inset-block-end`)
* `offset-block-start`
Non-standard

Deprecated
 (now `inset-block-start`)
* `offset-inline-end`
Non-standard

Deprecated
 (now `inset-inline-end`)
* `offset-inline-start`
Non-standard

Deprecated
 (now `inset-inline-start`)
### Unsupported properties

The following properties don't have logical equivalents:

* `background-position-x`
* `background-position-y`
### Unsupported values

The following properties accept only physical values:

* `text-underline-position`
* `box-shadow`
* `text-shadow`
* `clip-path`
* `<position>`
    + `background-position`
    + `object-position`
    + `mask-position`
    + `offset-position`
    + `offset-anchor`
    + `transform-origin`
    + `perspective-origin`
Guides
------

* Basic concepts of logical properties and values
* Logical properties for sizing
* Logical properties for margins, borders, and padding
* Logical properties for floating and positioning
Specifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |

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

See the individual property pages for full compatibility information.


column-rule - CSS: Cascading Style Sheets

column-rule
===========

The **`column-rule`** shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
Syntax
------

```css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

/\* Global values \*/
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;
```

### Values

The `column-rule` property is specified as one, two, or three of the values listed below, in any order.

`<'column-rule-width'>`

Is a `<length>` or one of the three keywords, `thin`, `medium`, or `thick`. See `border-width` for details.

`<'column-rule-style'>`

See `border-style` for possible values and details.

`<'column-rule-color'>`

Is a `<color>` value.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `column-rule-width`: `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| Applies to | multicol elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `column-rule-color`: computed color
* `column-rule-style`: as specified
* `column-rule-width`: the absolute length; `0` if the `column-rule-style` is `none` or `hidden`
 |
| Animation type | as each of the properties of the shorthand:* `column-rule-color`: a color
* `column-rule-style`: discrete
* `column-rule-width`: a length
 |

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

column-rule =
  <'column-rule-width'>  ||
  <'column-rule-style'>  ||
  <'column-rule-color'>

```

Examples
--------

### Example 1

```css
/\* Same as "medium dotted currentcolor" \*/
p.foo {
  column-rule: dotted;
}

/\* Same as "medium solid blue" \*/
p.bar {
  column-rule: solid blue;
}

/\* Same as "8px solid currentcolor" \*/
p.baz {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}
```

### Example 2

#### HTML

```html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>
```

#### CSS

```css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}
```

#### Result

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-rule |

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

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

See also
--------

* Multiple-column Layout
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`


CSS box model - CSS: Cascading Style Sheets

CSS box model
=============

The **CSS box model** module defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.

Box model overview
------------------

A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS. To learn more about it read Introduction to the CSS box model.

### Box-edge keywords

The Box Model specification defines a set of keywords that refer to the edges of each part of the box, these are used as keyword values in CSS including as a value for the `box-sizing` property, to control how the box model calculates its size.

`content-box`

The edge of the content area of the box.

`padding-box`

The edge of the padding of the box, if there is no padding on a side then this is the same as `content-box`.

`border-box`

The edge of the border of the box, if there is no border on a side then this is the same as `padding-box`.

`margin-box`

The edge of the margin of the box, if there is no margin on a side then this is the same as `border-box`.

`stroke-box`

In SVG refers to the stroke bounding box, in CSS treated as `content-box`.

`view-box`

In SVG refers to the nearest SVG viewport element's origin box, which is a rectangle with the width and height of the initial SVG user coordinate system established by the `viewBox` attribute for that element. In CSS treated as `border-box`.

Reference
---------

**Note:** This specification defines the physical padding and margin properties. Flow-relative properties, which relate to text direction, are defined in Logical Properties and Values.

### Properties for controlling the margin of a box

Margins surround the border edge of a box, and provide spacing between boxes.

* `margin`
* `margin-bottom`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
Experimental
### Properties for controlling the padding for a box

Padding is inserted between the content edge and border edge of a box.

* `padding`
* `padding-bottom`
* `padding-left`
* `padding-right`
* `padding-top`
### Other properties

There are other properties that relate to the box model, that are defined elsewhere.

Borders

The border properties specify the thickness of the border, drawing style and color.

Overflow

Controls what happens when there is too much content to fit into a box.

Guides
------

Introduction to the CSS box model

Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.

Mastering margin collapsing

Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.

Visual formatting model

Explains the visual formatting model.

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

| Specification |
| --- |
| CSS Box Model Module Level 3  |


contain-intrinsic-block-size - CSS: Cascading Style Sheets

contain-intrinsic-block-size
============================

The **`contain-intrinsic-block-size`** CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.

Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal writing mode like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension.

Syntax
------

```css
/\* Keyword values \*/
contain-intrinsic-block-size: none;

/\* <length> values \*/
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;

/\* auto <length> \*/
contain-intrinsic-block-size: auto 300px;

/\* Global values \*/
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;
```

### Values

The following values can be specified for the intrinsic block size of an element:

`none`

The element has no intrinsic block size.

`<length>`

The element has the specified block size, expressed using the (`<length>`) data type.

`auto <length>`

 When the element is in size containment and skipping its contents (for example, when it is offscreen and `content-visibility: auto` is set) the block size is remembered from the actual size of the element when it was last able to render its child elements.
 If the element has never rendered its child elements and hence has no remembered value for the normally rendered element size, or if it is not skipping its contents, the block size is the specified `<length>`.

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

The property is commonly applied alongside elements that can trigger size containment, such as `contain: size` and `content-visibility`.

 Size containment allows a user agent to lay out an element as though it had a fixed size.
 This prevents unnecessary reflows by avoiding the re-rendering of child elements to determine the actual size (thereby improving user experience).
 By default, size containment treats elements as though they had no contents and may collapse the layout in the same way as if the contents had no width or height.
 The `contain-intrinsic-block-size` property allows authors to specify an appropriate value to be used as the block-size for layout.

 The `auto <length>` value allows the block-size of an element to be stored if the element is ever "normally rendered" (with its child elements) and then used instead of the specified value when the element does not have any content.
 This allows offscreen elements with `content-visibility: auto` to benefit from size containment without developers having to be precise in their estimates of element size.
 The remembered value is not used if the child elements are being rendered; if size containment is enabled, the `<length>` value will be used.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | elements for which size containment can apply |
| Inherited | no |
| Computed value | as specified, with <length>s values computed |
| Animation type | by computed value type |

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

contain-intrinsic-block-size =
  auto? [ none | <length> ]

```

Examples
--------

### Setting the intrinsic block size

The HTML below defines an element "contained\_element" that will be subject to size constraint, and which contains a child element.

```html
<div id="contained\_element">
  <div class="child\_element"></div>
</div>
```

 The CSS below sets the `content-visibility` of `contained_element` to `auto`, so if the element is hidden it will be size constrained.
 The intrinsic block size and inline size that are used when it is size constrained are set at the same time using `contain-intrinsic-block-size` and `contain-intrinsic-inline-size`, respectively.

```css
#contained\_element {
  border: 2px solid green;
  inline-size: 151px;
  content-visibility: auto;
  contain-intrinsic-inline-size: 152px;
  contain-intrinsic-block-size: 52px;
}
.child\_element {
  border: 1px solid red;
  background: blue;
  block-size: 50px;
  inline-size: 150px;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-block-size |

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

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

See also
--------

* content-visibility: the new CSS property that boosts your rendering performance (web.dev)
* `contain-intrinsic-inline-size`
* `contain-intrinsic-size`
* `contain-intrinsic-width`
* `contain-intrinsic-height`


border-color - CSS: Cascading Style Sheets

border-color
============

The **`border-color`** shorthand CSS property sets the color of an element's border.

Try it
------

Each side can be set individually using `border-top-color`, `border-right-color`, `border-bottom-color`, and `border-left-color`; or using the writing mode-aware `border-block-start-color`, `border-block-end-color`, `border-inline-start-color`, and `border-inline-end-color`.

You can find more information about border colors in CSS colors.

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

This property is a shorthand for the following CSS properties:

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

```css
/\* <color> values \*/
border-color: red;

/\* top and bottom | left and right \*/
border-color: red #f015ca;

/\* top | left and right | bottom \*/
border-color: red rgb(240 30 50 / 70%) green;

/\* top | right | bottom | left \*/
border-color: red yellow green blue;

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

The `border-color` property may be specified using one, two, three, or four values.

* When **one** value is specified, it applies the same color to **all four sides**.
* When **two** values are specified, the first color applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first color applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the colors apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<color>`

Defines the color of the border.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-color`: `currentcolor`
* `border-right-color`: `currentcolor`
* `border-bottom-color`: `currentcolor`
* `border-left-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-bottom-color`: computed color
* `border-left-color`: computed color
* `border-right-color`: computed color
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-left-color`: a color
* `border-right-color`: a color
* `border-top-color`: a color
 |

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

border-color =
  [ <color> | <image-1D> ]{1,4}

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

<color-stripe> =
  <color>                            &&
  [ <length-percentage> | <flex> ]?

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

```

Examples
--------

### Complete border-color usage

#### HTML

```html
<div id="justone">
  <p><code>border-color: red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="topvertbott">
  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="trbl">
  <p><code>border-color: red cyan black gold;</code> is equivalent to</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>
```

#### CSS

```css
#justone {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#topvertbott {
  border-color: red cyan gold;
}

#trbl {
  border-color: red cyan black gold;
}

/\* Set width and style for all divs \*/
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

See also
--------

* Border-color related CSS properties: `border`, `border-top-color`, `border-right-color`, `border-bottom-color`, `border-left-color`,
* Other border-related CSS properties: `border-width`, `border-style`
* The `<color>` data type
* Other color-related properties: `color`, `background-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* Applying color to HTML elements using CSS


:last-of-type - CSS: Cascading Style Sheets

:last-of-type
=============

The **`:last-of-type`** CSS pseudo-class represents the last element of its type among a group of sibling elements.

Try it
------

Syntax
------

```css
:last-of-type {
  /\* ... \*/
}
```

Examples
--------

### Styling the last paragraph

#### HTML

```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
```

#### CSS

```css
p:last-of-type {
  color: red;
  font-style: italic;
}
```

#### Result

### Nested elements

This example shows how nested elements can also be targeted. Note that the universal selector (`*`) is implied when no simple selector is written.

#### HTML

```html
<article>
  <div>This `div` is first.</div>
  <div>This <span>nested `span` is last</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <p>This `p` qualifies!</p>
  <div>This is the final `div`!</div>
</article>
```

#### CSS

```css
article :last-of-type {
  background-color: pink;
}
```

#### Result

### Multiple selectors elements

This HTML example contains nested elements of different types. The CSS contains both type selectors and class selectors.

#### HTML

```html
<p>This `p` is not selected.</p>
<p>This `p` is not selected either.</p>
<p>
  This `p` is last `p` element of its parent e.g. `body` selected by `p` type
  selector.
</p>
<div class="container">
  <div class="item">This `div` is not selected.</div>
  <div class="item">This `div` is not selected either.</div>
  <div class="item">
    This `div` is last `div` element of its parent `div` selected by `.container
    .item` class selector.
  </div>
  <p class="item">
    This `p` is last `p` element of its parent `div` selected by `.container
    .item` class selector.
  </p>
</div>
```

#### CSS

```css
p:last-of-type {
  background: skyblue;
}

.container .item:last-of-type {
  color: red;
  font-weight: bold;
}
```

#### Result

The last `<div>` and the last `<p>` are both red and bold as the `.item:last-of-type` selects the last of every type if that last element also has the `item` class.

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

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

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

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

See also
--------

* `:last-child`, `:nth-last-of-type`


Used value - CSS: Cascading Style Sheets

Used value
==========

The **used value** of a CSS property is its value after all calculations have been performed on the computed value.

After the user agent has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., `width`, `line-height`) are in pixels. The used values of shorthand properties (e.g., `background`) are consistent with those of their component properties (e.g., `background-color` or `background-size`) and with `position` and `float`.

**Note:** The `getComputedStyle()` DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.

Example
-------

This example computes and displays the used `width` value of three elements (updates on resize):

### HTML

```html
<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>
```

### CSS

```css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/\* Make results easier to see \*/
div {
  border: 1px solid red;
  padding: 8px;
}
```

### JavaScript

```js
function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);
```

### Result

Difference from computed value
------------------------------

CSS 2.0 defined only *computed value* as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., `display`, `font-size`, or `line-height`), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

* `background-position`
* `bottom`, `left`, `right`, `top`
* `height`, `width`
* `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
* `min-height`, `min-width`
* `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
* `text-indent`
Specifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # used-value |

See also
--------

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


text-shadow - CSS: Cascading Style Sheets

text-shadow
===========

The **`text-shadow`** CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its `decorations`. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Try it
------

Syntax
------

```css
/\* offset-x | offset-y | blur-radius | color \*/
text-shadow: 1px 1px 2px black;

/\* color | offset-x | offset-y | blur-radius \*/
text-shadow: #fc0 1px 0 10px;

/\* offset-x | offset-y | color \*/
text-shadow: 5px 5px #558abb;

/\* color | offset-x | offset-y \*/
text-shadow: white 2px 5px;

/\* offset-x | offset-y
/\* Use defaults for color and blur-radius \*/
text-shadow: 5px 10px;

/\* Global values \*/
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;
```

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three `<length>` values, followed optionally by a `<color>` value. The first two `<length>` values are the `<offset-x>` and `<offset-y>` values. The third, optional, `<length>` value is the `<blur-radius>`. The `<color>` value is the shadow's color.

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

This property applies to both `::first-line` and `::first-letter` pseudo-elements.

### Values

`<color>`

Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

`<offset-x> <offset-y>`

Required. These `<length>` values specify the shadow's distance from the text. `<offset-x>` specifies the horizontal distance; a negative value places the shadow to the left of the text. `<offset-y>` specifies the vertical distance; a negative value places the shadow above the text. If both values are `0`, the shadow is placed directly behind the text, although it may be partly visible due to the effect of `<blur-radius>`.

`<blur-radius>`

Optional. This is a `<length>` value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to `0`.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Computed value | a color plus three absolute lengths |
| Animation type | a shadow list |

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

text-shadow =
  none                            |
  [ <color>? && <length>{2,3} ]#

```

Examples
--------

### Simple shadow

```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```

```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

### Multiple shadows

```css
.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}
```

```html
<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

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

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

See also
--------

* The `<color>` data type (for specifying the shadow color)
* `box-shadow`
* `drop-shadow()`
* Applying color to HTML elements using CSS


math-depth - CSS: Cascading Style Sheets

math-depth
==========

The **`math-depth`** property describes a notion of *depth* for each element of a mathematical formula, with respect to the top-level container of that formula. This is used to scale the computed value of the font-size of elements when `font-size: math` is applied.

**Note:** `font-size: math` is the default for `<math>` elements in the MathML Core User Agent stylesheet, so it's not necessary to specify it explicitly.

Syntax
------

```css
/\* Keyword values \*/
math-depth: auto-add;

/\* Relative values \*/
math-depth: add(2);
math-depth: add(-2);

/\* Absolute value \*/
math-depth: 4;

/\* Global values \*/
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;
```

### Values

`auto-add`

Set to the inherited `math-depth` plus 1 when inherited math-style is `compact`.

`add(`<integer>`)`

Set to the inherited `math-depth` plus the specified integer.

`<integer>`

Set to the specified integer.

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

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

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

math-depth =
  auto-add          |
  add( <integer> )  |
  <integer>

```

Examples
--------

### Specifying a math depth

 The following example shows the effect of changing the `math-depth` property on the font size of subformulas.
 The numbers in each subformula indicate the `math-depth` and scale factor applied.

 The first `<mtext>` element is used as a reference to other subformulas and has no specific styles applied.
 The second and third subformulas have `math-depth` set to `auto-add` and show the effect of scaling depending on the `math-style`.

The last two subformulas show the effect of setting `math-depth` to a specific value.

#### HTML

```html
<p style="font-size: 3rem; margin: 1rem 0">
  <math>
    <mtext>0</mtext>

    <!-- auto-add value has no effect when math-style is normal -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- the inherited math-style is compact, so math-depth is set to 1 -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>
```

#### Result

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

| Specification |
| --- |
| MathML Core # the-math-script-level-property |

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

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

See also
--------

* `font-size`
* `math-style`