border-inline-start-width - CSS: Cascading Style Sheets

border-inline-start-width
=========================

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

Try it
------

Syntax
------

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

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

Related properties are `border-block-start-width`, `border-block-end-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-inline-start-width =
  <line-width>

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

```

Examples
--------

### 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-inline-start-width: 5px;
}
```

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`


scroll-margin-inline-end - CSS: Cascading Style Sheets

scroll-margin-inline-end
========================

The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.

Try it
------

Syntax
------

```css
/\* <length> values \*/
scroll-margin-inline-end: 10px;
scroll-margin-inline-end: 1em;

/\* Global values \*/
scroll-margin-inline-end: inherit;
scroll-margin-inline-end: initial;
scroll-margin-inline-end: revert;
scroll-margin-inline-end: revert-layer;
scroll-margin-inline-end: unset;
```

### Values

`<length>`

An outset from the inline end edge of the scroll container.

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

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

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

scroll-margin-inline-end =
  <length>

```

Examples
--------

### Simple demonstration

This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.

The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.

#### HTML

The HTML that represents the blocks is very simple:

```html
<div class="scroller">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
```

#### CSS

Let's walk through the CSS. The outer container is styled like this:

```css
.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid #000;
  scroll-snap-type: x mandatory;
}
```

The main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.

The child elements are styled as follows:

```css
.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: #663399;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: end;
}

.scroller > div:nth-child(2n) {
  background-color: #fff;
  color: #663399;
}
```

The most relevant part here is `scroll-snap-align: end`, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.

Last of all we specify the scroll margin values, a different one for the second and third child elements:

```css
.scroller > div:nth-child(2) {
  scroll-margin-inline-end: 1rem;
}

.scroller > div:nth-child(3) {
  scroll-margin-inline-end: 2rem;
}
```

This means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline end edge of the second `<div>`, and `2rems` outside the inline end edge of the third `<div>`.

#### Result

Try it for yourself:

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

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

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

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

See also
--------

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


symbols() - CSS: Cascading Style Sheets

symbols()
=========

The **`symbols()`** CSS function enables defining counter styles inline, directly as a value of properties such as `list-style`, providing a less powerful but simpler alternative to the `@counter-style` method of defining a counter style.

Unlike `@counter-style`, which defines a reusable counter style, `symbols()` is *anonymous* (i.e., it can only be used once). This function accepts strings and images as values. In comparison, the `@counter-style`'s `symbols` descriptor also accepts identifiers.

Syntax
------

```css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
```

`<symbols-type>` can be one of the following:

* `cyclic`: The system cycles through the given values in the order of their definition, and returns to the start when it reaches the end.
* `numeric`: The system interprets the given values as the successive units of a place-value numbering system.
* `alphabetic`: The system interprets the given values as the digits of an alphabetic numbering system, like a place-value numbering system but without `0`.
* `symbolic`: The system cycles through the values, printing them an additional time at each cycle (one time for the first cycle, two times for the second, etc.).
* `fixed`: The system cycles through the given values once, then falls back to Arabic numerals.
Examples
--------

### HTML

```html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
```

### CSS

```css
ol {
  list-style: symbols(cyclic "\*" "†" "‡");
}
```

### Result

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # symbols-function |

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

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

See also
--------

* `@counter-style` descriptors: `system`, `symbols`, `additive-symbols`, `prefix`, `suffix`, `range`, `pad`, `speak-as`, `fallback`
* List style properties: `list-style`, `list-style-type`
* CSS counter styles module
* CSS lists and counters module


inset-inline - CSS: Cascading Style Sheets

inset-inline
============

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

Try it
------

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

This property is a shorthand for the following CSS properties:

* `inset-inline-end`
* `inset-inline-start`
Syntax
------

```css
/\* <length> values \*/
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /\* value applied to start and end \*/

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

/\* Keyword value \*/
inset-inline: auto;

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

### Values

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

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

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

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

inset-inline =
  <'top'>{1,2}

```

Examples
--------

### Setting inline start and end offsets

#### 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;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset-inline |

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

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

See also
--------

* The mapped physical properties: `top`, `right`, `bottom`, and `left`
* The mapped physical shortcut: `inset`
* The mapped block shortcut: `inset-block`
* `writing-mode`, `direction`, `text-orientation`


border-right-style - CSS: Cascading Style Sheets

border-right-style
==================

The **`border-right-style`** CSS property sets the line style of an element's right `border`.

Try it
------

**Note:** The specification doesn't define how borders of different styles connect in the corners.

Syntax
------

```css
/\* Keyword values \*/
border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

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

The `border-right-style` property is specified as a single `<line-style>` keyword value.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

border-right-style =
  <line-style>

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

```

Examples
--------

### Border styles

#### HTML

```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```

#### CSS

```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-right-style example classes \*/
.b1 {
  border-right-style: none;
}
.b2 {
  border-right-style: hidden;
}
.b3 {
  border-right-style: dotted;
}
.b4 {
  border-right-style: dashed;
}
.b5 {
  border-right-style: solid;
}
.b6 {
  border-right-style: double;
}
.b7 {
  border-right-style: groove;
}
.b8 {
  border-right-style: ridge;
}
.b9 {
  border-right-style: inset;
}
.b10 {
  border-right-style: outset;
}
```

#### Result

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

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

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

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

See also
--------

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


border-left-width - CSS: Cascading Style Sheets

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

The **`border-left-width`** CSS property sets the width of the left border of an element.

Try it
------

Syntax
------

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

/\* <length> values \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

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

### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` 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 | `medium` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | the absolute length or `0` if `border-left-style` is `none` or `hidden` |
| Animation type | a length |

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

border-left-width =
  <line-width>

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

```

Examples
--------

### Comparing border widths

#### HTML

```html
<div>Element 1</div>
<div>Element 2</div>
```

#### CSS

```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```

#### Result

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

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

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

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

See also
--------

* The other border-width-related CSS properties: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* The other border-left-related CSS properties: `border`, `border-left`, `border-left-style`, and `border-left-color`.


column-count - CSS: Cascading Style Sheets

column-count
============

The **`column-count`** CSS property breaks an element's content into the specified number of columns.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
column-count: auto;

/\* <integer> value \*/
column-count: 3;

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

### Values

`auto`

The number of columns is determined by other CSS properties, such as `column-width`.

`<integer>`

Is a strictly positive `<integer>` describing the ideal number of columns into which the content of the element will be flowed. If the `column-width` is also set to a non-`auto` value, it merely indicates the maximum allowed number of columns.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | Block containers except table wrapper boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |

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

column-count =
  auto             |
  <integer [1,∞]>

```

Examples
--------

### Splitting a paragraph across three columns

#### HTML

```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `column-count`
  property. The text is equally distributed over the columns.
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
}
```

#### Result

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

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

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

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

See also
--------

* `column-width`, `columns` shorthand
* `column-rule-color`, `column-rule-style`, `column-rule-width`, `column-rule` shorthand
* Multiple-column Layout (Learn Layout)
* Basic Concepts of Multicol


mask-border - CSS: Cascading Style Sheets

mask-border
===========

The **`mask-border`** CSS shorthand property lets you create a mask along the edge of an element's border.

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

This property is a shorthand for the following CSS properties:

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
Syntax
------

```css
/\* source | slice \*/
mask-border: url("border-mask.png") 25;

/\* source | slice | repeat \*/
mask-border: url("border-mask.png") 25 space;

/\* source | slice | width \*/
mask-border: url("border-mask.png") 25 / 35px;

/\* source | slice | width | outset | repeat | mode \*/
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

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

### Values

`<'mask-border-source'>`

The source image. See `mask-border-source`.

`<'mask-border-slice'>`

The dimensions for slicing the source image into regions. Up to four values may be specified. See `mask-border-slice`.

`<'mask-border-width'>`

The width of the border mask. Up to four values may be specified. See `mask-border-width`.

`<'mask-border-outset'>`

The distance of the border mask from the element's outside edge. Up to four values may be specified. See `mask-border-outset`.

`<'mask-border-repeat'>`

Defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask. Up to two values may be specified. See `mask-border-repeat`.

`<'mask-border-mode'>`

Defines whether the source image is treated as a luminance mask or alpha mask. See `mask-border-mode`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `mask-border-mode`: `alpha`
* `mask-border-outset`: `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source`: `none`
* `mask-border-width`: `auto`
 |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Percentages | as each of the properties of the shorthand:* `mask-border-slice`: refer to size of the mask border image
* `mask-border-width`: relative to width/height of the mask border image area
 |
| Computed value | as each of the properties of the shorthand:* `mask-border-mode`: as specified
* `mask-border-outset`: as specified, but with relative lengths converted into absolute lengths
* `mask-border-repeat`: as specified
* `mask-border-slice`: as specified
* `mask-border-source`: as specified, but with `url()` values made absolute
* `mask-border-width`: as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `mask-border-mode`: discrete
* `mask-border-outset`: discrete
* `mask-border-repeat`: discrete
* `mask-border-slice`: discrete
* `mask-border-source`: discrete
* `mask-border-width`: discrete
 |
| Creates stacking context | yes |

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

mask-border =
  <'mask-border-source'>                              ||
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||
  <'mask-border-repeat'>                              ||
  <'mask-border-mode'>

```

Examples
--------

### Setting a bitmap-based mask border

In this example, we will mask an element's border with a diamond pattern. The source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:

![The image used for the mask examples on this page. The mask is a transparent square with three rows of three diamonds each. The diamonds are a very light, almost white, shade of grey. The middle part between the diamonds is also solid grey. The parts between the outside of the diamonds and the edge of the image are transparent.](/en-US/docs/Web/CSS/mask-border/mask-border-diamonds.png)

To match the size of a single diamond, we will use a value of 90 divided by 3, or `30`, for slicing the image into corner and edge regions. A repeat value of `round` will make the mask slices fit evenly, i.e., without clipping or gaps.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border |

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

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

See also
--------

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`


writing-mode - CSS: Cascading Style Sheets

writing-mode
============

The **`writing-mode`** CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (`html` element for HTML documents).

Try it
------

This property specifies the *block flow direction*, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content.

Syntax
------

```css
/\* Keyword values \*/
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

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

The `writing-mode` property is specified as one of the values listed below. The flow direction in horizontal scripts is also affected by the directionality of that script, either left-to-right (`ltr`, like English and most other languages) or right-to-left (`rtl`, like Hebrew or Arabic).

### Values

`horizontal-tb`

For `ltr` scripts, content flows horizontally from left to right. For `rtl` scripts, content flows horizontally from right to left. The next horizontal line is positioned below the previous line.

`vertical-rl`

For `ltr` scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the left of the previous line. For `rtl` scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the right of the previous line.

`vertical-lr`

For `ltr` scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the right of the previous line. For `rtl` scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the left of the previous line.

`sideways-rl`
Experimental

For `ltr` scripts, content flows vertically from top to bottom. For `rtl` scripts, content flows vertically from bottom to top. All the glyphs, even those in vertical scripts, are set sideways toward the right.

`sideways-lr`
Experimental

For `ltr` scripts, content flows vertically from bottom to top. For `rtl` scripts, content flows vertically from top to bottom. All the glyphs, even those in vertical scripts, are set sideways toward the left.

`lr`
Deprecated

Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.

`lr-tb`
Deprecated

Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.

`rl`
Deprecated

Deprecated except for SVG1 documents. For CSS, use `horizontal-tb` instead.

`tb`
Deprecated

Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead.

`tb-lr`
Deprecated

Deprecated except for SVG1 documents. For CSS, use `vertical-lr` instead.

`tb-rl`
Deprecated

Deprecated except for SVG1 documents. For CSS, use `vertical-rl` instead.

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

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

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

writing-mode =
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

```

Examples
--------

### Using multiple writing modes

This example demonstrates all of the writing modes, showing each with text in various languages.

#### HTML

The HTML is a `<table>` with each writing mode in a row with a column showing text in various scripts using that writing mode.

```html
<table>
  <caption>
    Using multiple writing modes
  </caption>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr class="text1">
    <th>horizontal-tb</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text2">
    <th>vertical-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text3">
    <th>vertical-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text4">
    <th>sideways-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text5">
    <th>sideways-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
</table>
<p class="notice">
  Your browser does not support the <code>sideways-lr</code> or
  <code>sideways-rl</code> values.
</p>
```

#### CSS
```

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}

.experimental {
  display: none;
}

.notice {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

@supports (writing-mode: sideways-lr) {
  .experimental {
    display: table-row;
  }
  .notice {
    display: none;
  }
}
```

The CSS that adjusts the directionality of the content looks like this:

```css
.text1 td {
  writing-mode: horizontal-tb;
}

.text2 td {
  writing-mode: vertical-lr;
}

.text3 td {
  writing-mode: vertical-rl;
}

.text4 td {
  writing-mode: sideways-lr;
}

.text5 td {
  writing-mode: sideways-rl;
}
```

#### Result

### Using writing-mode with transforms

 If your browser doesn't support `sideways-lr`, a workaround is to use `transform` to achieve a similar effect depending on the script direction.
 The effect of `vertical-rl` is the same as with `sideways-lr`, so no transformation is required for left-to-right scripts.
 In some cases, rotating the text 180 degrees is sufficient to achieve the effect of `sideways-lr`, but font glyphs may not be designed to be rotated, so this may produce unexpected positioning or rendering.

#### HTML

```html
<table>
  <caption>
    Using writing-mode with transforms
  </caption>
  <thead>
    <tr>
      <th>Vertical LR</th>
      <th>Vertical LR with transform</th>
      <th>Sideways LR</th>
      <th>Only rotate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="vertical-lr">我家没有电脑。</span>
        <span class="vertical-lr">Example text</span>
      </td>
      <td>
        <span class="vertical-lr rotated">我家没有电脑。</span>
        <span class="vertical-lr rotated">Example text</span>
      </td>
      <td>
        <span class="sideways-lr">我家没有电脑。</span>
        <span class="sideways-lr">Example text</span>
      </td>
      <td>
        <span class="only-rotate">我家没有电脑。</span>
        <span class="only-rotate">Example text</span>
      </td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
.vertical-lr {
  writing-mode: vertical-lr;
}

.rotated {
  transform: rotate(180deg);
}

.sideways-lr {
  writing-mode: sideways-lr;
}

.only-rotate {
  inline-size: fit-content;
  transform: rotate(-90deg);
}
```

```
table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}
span {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}
```

#### Result

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |

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

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

See also
--------

* SVG `writing-mode` attribute
* `direction`
* `unicode-bidi`
* `text-orientation`
* `text-combine-upright`
* CSS logical properties
* Styling vertical text (Chinese, Japanese, Korean and Mongolian) on W3.org (2022)
* CSS writing modes module


word-spacing - CSS: Cascading Style Sheets

word-spacing
============

The **`word-spacing`** CSS property sets the length of space between words and between tags.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
word-spacing: normal;

/\* <length> values \*/
word-spacing: 3px;
word-spacing: 0.3em;

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

### Values

`normal`

The normal inter-word spacing, as defined by the current font and/or the browser.

`<length>`

Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.

Examples
--------

### HTML

```html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>
```

### CSS

```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

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

A large positive or negative `word-spacing` value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the beginning and end of each word is unrecognizable.

Legible `word-spacing` must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the width of the affected glyph |
| Computed value | absolute `<length>` |
| Animation type | a length |

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

word-spacing =
  normal    |
  <length>

```

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

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

See also
--------

* `letter-spacing`


padding-top - CSS: Cascading Style Sheets

padding-top
===========

The **`padding-top`** CSS property sets the height of the padding area on the top of an element.

Try it
------

An element's padding area is the space between its content and its border.

![The effect of the CSS padding-top property on the element box](/en-US/docs/Web/CSS/padding-top/padding-top.svg)

**Note:** The `padding` property can be used to set paddings on all four sides of an element with a single declaration.

Syntax
------

```css
/\* <length> values \*/
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/\* <percentage> value \*/
padding-top: 10%;

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

The `padding-top` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

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

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

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

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

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

```

Examples
--------

### Setting top padding using pixels and percentages

```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

See also
--------

* Introduction to the CSS basic box model
* `padding-right`, `padding-bottom`, `padding-left` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`


CSS overflow - CSS: Cascading Style Sheets

CSS overflow
============

The **CSS overflow** module properties enable you to handle scrollable overflow in visual media.

Overflow happens when the content in an element box extends past one or more of the box's edges. **Scrollable overflow** is the content that appears outside the element box for which you might want to add a scrolling mechanism. CSS overflow properties enable you to control what happens when content overflows an element box.

Painting effects that overflow the content but do not participate in the CSS box model do not affect layout. This type of overflow is also known as ink overflow. Examples of ink overflows include box shadows, border images, text decoration, overhanging glyphs, and outlines. Ink overflows do not extend the scrollable overflow region.

Overflow in action
------------------

Use the following interactive example to see the effects of various `overflow` property values on the content overflow and scrollbars in the adjacent fixed-size box.

The example also includes options to change the values for the `overflow-clip-margin` and `width` properties, as well as to programmatically scroll the content if the overflow property creates a scroll container. Select `overflow: clip` and see the effect of different `overflow-clip-margin` values. Select `overflow: hidden` or `overflow: scroll` to check out different `ScrollLeft` and `ScrollTop` slider settings.

A link is included in content box above to demonstrate the effects of keyboard focus on overflow and scroll behaviors. Try tabbing to the link or programmatically scrolling the content: the content will scroll only if the enumerated `<overflow>` value created a scroll container.

Reference
---------

### CSS properties

* `overflow` shorthand
* `overflow-block`
* `overflow-clip-margin`
* `overflow-inline`
* `overflow-x`
* `overflow-y`
* `scroll-behavior`
* `scrollbar-gutter`
* `text-overflow`
* `block-ellipsis`
* `continue`
Experimental
* `line-clamp`
Experimental
* `max-lines`
Experimental
* `-webkit-line-clamp`
Non-standard
### Data types

* `<overflow>` enumerated values
Guides
------

Overflowing content

CSS building block: learn what overflow is and how to manage it.

Experimental Creating a named scroll timeline

The CSS scroll timeline `scroll-timeline-name` and `scroll-timeline-axis` properties, along with the `scroll-timeline` shorthand, create animations tied to the scroll offset of a scroll container.

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

* `scrollbar-width` CSS property
* `scrollbar-color` CSS property
* `scrollbar-gutter` CSS property
* `scroll-behavior` CSS property
* `scroll-margin` CSS shorthand property
* `scroll-padding` CSS shorthand property
* `scroll-snap-align` CSS property
* `scroll-snap-stop` CSS property
* `scroll-snap-type` CSS property
* `text-overflow` CSS property
* `::-webkit-scrollbar` pseudo-element
* `scrollbar` ARIA role
* Element `scroll()` method
* Element `scrollBy()` method
* Element `scrollIntoView()` method
* Element `scrollTo()` method
* Element `scrollTop` property
* Element `scrollLeft` property
* Element `scrollWidth` property
* Element `scrollHeight` property
* Document `scroll` event
* Scroll container glossary term
* Ink overflow glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

See also
--------

* CSS scrollbars styling module
* CSS scroll snap module
* CSSOM view module
* How to debug scrollable overflow


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

:-moz-user-disabled
===================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`:-moz-user-disabled`** CSS pseudo-class is a Mozilla extension that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.

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

Syntax
------

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

Examples
--------

### Styling user-disabled elements

```css
:-moz-user-disabled {
  background-color: lightgray;
  padding: 8px;
}
```

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

Not part of any standard.

See also
--------

* `:-moz-broken`, `:-moz-loading`, `:-moz-suppressed`


:autofill - CSS: Cascading Style Sheets

:autofill
=========

The **`:autofill`** CSS pseudo-class matches when an `<input>` element has its value autofilled by the browser. The class stops matching if the user edits the field.

Try it
------

**Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:

```css
background-color: rgb(232 240 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
```

This means that you cannot set the `background-color`, `background-image`, or `color` in your own rules.

Syntax
------

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

Examples
--------

The following example demonstrates the use of the `:autofill` pseudo-class to change the border of a text field that has been autocompleted by the browser. For the best browser compatibility use both `:-webkit-autofill` and `:autofill`.

```css
input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}
```

```html
<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>
```

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

| Specification |
| --- |
| HTML Standard # selector-autofill |

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

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

See also
--------

* Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off
* WebKit bug 66032: Allow site authors to override autofilled fields' colors.
* Mozilla bug 740979: implement `:-moz-autofill` pseudo-class on input elements with an autofilled value
* User Interface Module Level 4: more selectors


:first - CSS: Cascading Style Sheets

:first
======

The **`:first`** CSS pseudo-class, used with the `@page` at-rule, represents the first page of a printed document. (See `:first-child` for general first element of a node.)

```css
/\* Selects the first page when printing \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```

**Note:** You can't change all CSS properties with this pseudo-class. You can only change the margins, `orphans`, `widows`, and page breaks of the document. Furthermore, you may only use absolute-length units when defining the margins. All other properties will be ignored.

Syntax
------

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

Examples
--------

### HTML

```html
<p>First Page.</p>
<p>Second Page.</p>
<button>Print!</button>
```

### CSS

```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```

### Result

Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

See also
--------

* `@page`
* Other page-related pseudo-classes: `:left`, `:right`


:active - CSS: Cascading Style Sheets

:active
=======

The **`:active`** CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

Try it
------

The `:active` pseudo-class is commonly used on `<a>` and `<button>` elements. Other common targets of this pseudo-class include elements that are *contained in* an activated element, and form elements that are being activated through their associated `<label>`.

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

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

Syntax
------

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

Examples
--------

### Active links

#### HTML

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

#### CSS

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

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

#### Result

### Active form elements

#### HTML

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

#### CSS

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

form button {
  background: white;
}
```

#### Result

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

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

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

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

See also
--------

* Link-related pseudo-classes: `:link`, `:visited`, and `:hover`


border-radius - CSS: Cascading Style Sheets

border-radius
=============

The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it
------

The radius applies to the whole `background`, even if the element has no border; the exact position of the clipping is defined by the `background-clip` property.

The `border-radius` property does not apply to table elements when `border-collapse` is `collapse`.

**Note:** As with any shorthand property, individual sub-properties cannot inherit, such as in `border-radius:0 0 inherit inherit`, which would partially override existing definitions. Instead, the individual longhand properties have to be used.

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

This property is a shorthand for the following CSS properties:

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

```css
/\* The syntax of the first radius allows one to four values \*/
/\* Radius is set for all 4 sides \*/
border-radius: 10px;

/\* top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5%;

/\* top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 2px 4px 2px;

/\* top-left | top-right | bottom-right | bottom-left \*/
border-radius: 1px 0 3px 4px;

/\* The syntax of the second radius allows one to four values \*/
/\* (first radius values) / radius \*/
border-radius: 10px / 20px;

/\* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5% / 20px 30px;

/\* (first radius values) / top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 10px 5px 2em / 20px 25px 30%;

/\* (first radius values) / top-left | top-right | bottom-right | bottom-left \*/
border-radius: 10px 5% / 20px 25em 30px 35em;

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

The `border-radius` property is specified as:

* one, two, three, or four `<length>` or `<percentage>` values. This is used to set a single radius for the corners.
* followed optionally by "/" and one, two, three, or four `<length>` or `<percentage>` values. This is used to set an additional radius, so you can have elliptical corners.
### Values

|  |  |  |
| --- | --- | --- |
| *radius* | A light blue rectangle with a light gray border. All 4 corners are rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in each corner of the border. It is used only in the
 one-value syntax.
  |
| *top-left-and-bottom-right* | A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in the top-left and bottom-right corners of the element's
 box. It is used only in the two-value syntax.
  |
| *top-right-and-bottom-left* | A light blue rectangle with a light gray border. The 2 corners on the top right and the bottom left are rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in the top-right and bottom-left corners of the element's
 box. It is used only in the two- and three-value syntaxes.
  |
| *top-left* | A light blue rectangle with a light gray border. The corner on the top left is rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in the top-left corner of the element's box. It is used
 only in the three- and four-value syntaxes.
  |
| *top-right* | A light blue rectangle with a light gray border. The corner on the top right is rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in the top-right corner of the element's box. It is used
 only in the four-value syntax.
  |
| *bottom-right* | A light blue rectangle with a light gray border. The bottom right corner is rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in the bottom-right corner of the element's box. It is
 used only in the three- and four-value syntaxes.
  |
| *bottom-left* | A light blue rectangle with a light gray border. The bottom left corner is rounded. |
 Is a `<length>` or a
 `<percentage>` denoting a radius to use
 for the border in the bottom-left corner of the element's box. It is
 used only in the four-value syntax.
  |

`<length>`

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

`<percentage>`

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

For example:

```css
border-radius: 1em/5em;

/\* It is equivalent to: \*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
```

```css
border-radius: 4px 3px 6px / 2px 4px;

/\* It is equivalent to: \*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
```

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-top-left-radius`: `0`
* `border-top-right-radius`: `0`
* `border-bottom-right-radius`: `0`
* `border-bottom-left-radius`: `0`
 |
| Applies to | all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`. |
| Inherited | no |
| Percentages | refer to the corresponding dimension of the border box |
| Computed value | as each of the properties of the shorthand:* `border-bottom-left-radius`: two absolute `<length>`s or `<percentage>`s
* `border-bottom-right-radius`: two absolute `<length>`s or `<percentage>`s
* `border-top-left-radius`: two absolute `<length>`s or `<percentage>`s
* `border-top-right-radius`: two absolute `<length>`s or `<percentage>`s
 |
| Animation type | as each of the properties of the shorthand:* `border-top-left-radius`: a length, percentage or calc();
* `border-top-right-radius`: a length, percentage or calc();
* `border-bottom-right-radius`: a length, percentage or calc();
* `border-bottom-left-radius`: a length, percentage or calc();
 |

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

border-radius =
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

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

```

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

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>
```

```
pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}
```

### Live Samples

* Sample 1 : https://jsfiddle.net/Tripad/qnGKj/2/
* Sample 2 : https://jsfiddle.net/Tripad/qnGKj/3/
* Sample 3 : https://jsfiddle.net/Tripad/qnGKj/4/
* Sample 4 : https://jsfiddle.net/Tripad/qnGKj/5/
* Sample 5 : https://jsfiddle.net/Tripad/qnGKj/6/
Specifications
--------------

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

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

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

See also
--------

* Border-radius-related CSS properties: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`, `border-start-start-radius`, `border-start-end-radius`, `border-end-start-radius`, `border-end-end-radius`


font-variant-east-asian - CSS: Cascading Style Sheets

font-variant-east-asian
=======================

The **`font-variant-east-asian`** CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.

Try it
------

Syntax
------

```css
font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis83; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis90; /\* <east-asian-variant-values> \*/
font-variant-east-asian: jis04; /\* <east-asian-variant-values> \*/
font-variant-east-asian: simplified; /\* <east-asian-variant-values> \*/
font-variant-east-asian: traditional; /\* <east-asian-variant-values> \*/
font-variant-east-asian: full-width; /\* <east-asian-width-values> \*/
font-variant-east-asian: proportional-width; /\* <east-asian-width-values> \*/
font-variant-east-asian: ruby full-width jis83;

/\* Global values \*/
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: revert;
font-variant-east-asian: revert-layer;
font-variant-east-asian: unset;
```

### Values

`normal`

This keyword leads to the deactivation of the use of such alternate glyphs.

`ruby`

This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values `ruby`.

`<east-asian-variant-values>`

These values specify a set of logographic glyph variants which should be used for display. Possible values are:

| Keyword | Standard defining the glyphs | OpenType equivalent |
| --- | --- | --- |
| `jis78` | JIS X 0208:1978 | `jp78` |
| `jis83` | JIS X 0208:1983 | `jp83` |
| `jis90` | JIS X 0208:1990 | `jp90` |
| `jis04` | JIS X 0213:2004 | `jp04` |
| `simplified` | None, use the simplified Chinese glyphs | `smpl` |
| `traditional` | None, use the traditional Chinese glyphs | `trad` |

`<east-asian-width-values>`

These values control the sizing of figures used for East Asian characters. Two values are possible:

* `proportional-width` activating the set of East Asian characters which vary in width. It corresponds to the OpenType values `pwid`.
* `full-width` activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values `fwid`.

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

|  |  |
| --- | --- |
| Initial value | `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-variant-east-asian =
  normal                                              |
  [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

<east-asian-variant-values> =
  jis78        |
  jis83        |
  jis90        |
  jis04        |
  simplified   |
  traditional

<east-asian-width-values> =
  full-width          |
  proportional-width

```

Examples
--------

### Setting East Asian glyph variants

This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.

#### HTML

```html
<table>
  <thead></thead>
  <tbody style="border:0;">
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
td {
  font-family: "Yu Gothic";
  font-size: 20px;
}
th {
  color: grey;
  padding-right: 10px;
}

.ruby {
  font-variant-east-asian: ruby;
}

.jis78 {
  font-variant-east-asian: jis78;
}

.traditional {
  font-variant-east-asian: traditional;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-east-asian-prop |

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

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

See also
--------

* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`


::-webkit-scrollbar - CSS: Cascading Style Sheets

::-webkit-scrollbar
===================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `::-webkit-scrollbar` CSS pseudo-element affects the style of an element's scrollbar when it has scrollable overflow.

**Note:** The `::-webkit-scrollbar` vendor-prefixed pseudo-element is not supported on all browsers (see Browser compatibility).
 The `scrollbar-color` and `scrollbar-width` standard properties may be used as an alternative for browsers that do not support this pseudo-element.

CSS Scrollbar Selectors
-----------------------

You can use the following pseudo-elements to customize various parts of the scrollbar for WebKit browsers:

* `::-webkit-scrollbar` — the entire scrollbar.
* `::-webkit-scrollbar-button` — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
* `::-webkit-scrollbar:horizontal{}` — the horizontal scrollbar.
* `::-webkit-scrollbar-thumb` — the draggable scrolling handle.
* `::-webkit-scrollbar-track` — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
* `::-webkit-scrollbar-track-piece` — the part of the track (progress bar) not covered by the handle.
* `::-webkit-scrollbar:vertical{}` — the vertical scrollbar.
* `::-webkit-scrollbar-corner` — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
* `::-webkit-resizer` — the draggable resizing handle that appears at the bottom corner of some elements.
Examples
--------

### CSS

```css
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/\* Demonstrate a "mostly customized" scrollbar
 \* (won't be visible otherwise if width/height is specified) \*/
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /\* or add it to the track \*/
}

/\* Add a thumb \*/
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}
```

### HTML

```html
<div class="visible-scrollbar">
  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor. Proin at nulla
  elementum, consectetur ex eget, commodo ante. Sed eros mi, bibendum ut
  dignissim et, maximus eget nibh. Phasellus blandit quam turpis, at mollis
  velit pretium ut. Nunc consequat efficitur ultrices. Nullam hendrerit posuere
  est. Nulla libero sapien, egestas ac felis porta, cursus ultricies quam.
  Vestibulum tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit amet faucibus.
  Curabitur nibh justo, faucibus sed velit cursus, mattis cursus dolor.
  Pellentesque id pretium est. Quisque convallis nisi a diam malesuada mollis.
  Aliquam at enim ligula.
</div>

<div class="invisible-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword
</div>

<div class="mostly-customized-scrollbar">
  Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br />
  And pretty tall<br />
  thing with weird scrollbars.<br />
  Who thought scrollbars could be made weird?
</div>
```

### Result

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

Not part of any standard.

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

### css.selectors.-webkit-scrollbar

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

### css.selectors.-webkit-scrollbar-button

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

### css.selectors.-webkit-scrollbar-thumb

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

### css.selectors.-webkit-scrollbar-track

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

### css.selectors.-webkit-scrollbar-track-piece

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

### css.selectors.-webkit-scrollbar-corner

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

### css.selectors.-webkit-resizer

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

See also
--------

* WebKit blog on Styling Scrollbars
* `scrollbar-width`
* `scrollbar-color`


overflow-x - CSS: Cascading Style Sheets

overflow-x
==========

Baseline 2022
-------------

Newly availableSince September 2022, 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 **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the `overflow` shorthand property.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

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

The `overflow-x` property is specified as a single `<overflow>` keyword value.

If `overflow-y` is `hidden`, `scroll`, or `auto`, and the `overflow-x` property is `visible` (default), the value will be implicitly computed as `auto`.

### Values

`visible`

Overflow content is not clipped and may be visible outside the element's padding box on left and right edges. The element box is not a scroll container.

`hidden`

Overflow content is clipped if necessary to fit horizontally in the elements' padding box. No scroll bars are provided.

`clip`

Overflow content is clipped at the element's *overflow clip edge* that is defined using the `overflow-clip-margin` property. As a result, content overflows the element's padding box by the `<length>` value of `overflow-clip-margin` or by `0px` if not set. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. No new formatting context is created. To establish a formatting context, use `overflow: clip` along with `display: flow-root`. The element box is not a scroll container.

`scroll`

Overflow content is clipped if necessary to fit horizontally inside the element's padding box. Browsers display scroll bars in the horizontal direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content.

`auto`

Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars *only if* the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible`, but still establishes a new block-formatting context. Desktop browsers provide scroll bars if content overflows.

**Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space.

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

|  |  |
| --- | --- |
| Initial value | `visible` |
| Applies to | Block-containers, flex containers, and grid containers |
| Inherited | no |
| Computed value | as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip |
| Animation type | discrete |

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

overflow-x =
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

```

Examples
--------

### HTML

```html
<ul>
  <li>
    <code>overflow-x:hidden</code> — hides the text outside the box
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:scroll</code> — always adds a scrollbar
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:visible</code> — displays the text outside the box if
    needed
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-x:auto</code> — on most browsers, equivalent to
    <code>scroll</code>
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
```

### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-x: hidden;
}
#div2 {
  overflow-x: scroll;
}
#div3 {
  overflow-x: visible;
}
#div4 {
  overflow-x: auto;
}
```

### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # overflow-properties |

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

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

See also
--------

* `clip`, `display`, `text-overflow`, `white-space`
* CSS overflow module
* CSS building blocks: Overflowing content


mask-border-source - CSS: Cascading Style Sheets

mask-border-source
==================

The **`mask-border-source`** CSS property sets the source image used to create an element's mask border.

The `mask-border-slice` property is used to divide the source image into regions, which are then dynamically applied to the final mask border.

Syntax
------

```css
/\* Keyword value \*/
mask-border-source: none;

/\* <image> values \*/
mask-border-source: url(image.jpg);
mask-border-source: linear-gradient(to top, red, yellow);

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

### Values

`none`

No mask border is used.

`<image>`

Image reference to use for the mask border.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified, but with `url()` values made absolute |
| Animation type | discrete |

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

mask-border-source =
  none     |
  <image>

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask.

```css
mask-border-source: url(image.jpg);
```

Chromium-based browsers support an outdated version of this property — `mask-box-image-source` — with a prefix:

```css
-webkit-mask-box-image-source: url(image.jpg);
```

**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-source |

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

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

See also
--------

* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-width`


::-moz-page-sequence - CSS: Cascading Style Sheets

::-moz-page-sequence
====================

**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-page-sequence`** CSS pseudo-element is a Mozilla extension that represents the background of a print preview.

Syntax
------

```css
::-moz-page-sequence {
  /\* ... \*/
}
```

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

Not part of any standard.

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

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

See also
--------

* `::-moz-page`
* `::-moz-scrolled-page-sequence`


cross-fade() - CSS: Cascading Style Sheets

cross-fade()
============

 The **`cross-fade()`** CSS function can be used to blend two or more images at a defined transparency.
 It can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

Syntax
------

**Warning:** The specification and current implementations have different syntaxes.
 The specification syntax is explained first.

### Specification syntax

The `cross-fade()` function takes a list of images with a percentage defining how much of each image is retained in terms of opacity when it is blended with the other images. The percent value must be coded without quotes, must contain the `'%'` symbol, and its value must be between 0% and 100%.

The function can be used in CSS anywhere an ordinary image reference can be used.

#### Cross-fade percentages

Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.

```css
cross-fade(url(white.png) 0%, url(black.png) 100%); /\* fully black \*/
cross-fade(url(white.png) 25%, url(black.png) 75%); /\* 25% white, 75% black \*/
cross-fade(url(white.png) 50%, url(black.png) 50%); /\* 50% white, 50% black \*/
cross-fade(url(white.png) 75%, url(black.png) 25%); /\* 75% white, 25% black \*/
cross-fade(url(white.png) 100%, url(black.png) 0%); /\* fully white \*/
cross-fade(url(green.png) 75%, url(red.png) 75%); /\* both green and red at 75% \*/
```

 If any percentages are omitted, all the specified percentages are summed together and subtracted from `100%`.
 If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.

 In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly.
 For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first.
 A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.

The above could also have been written as:

```css
cross-fade(url(white.png) 0%, url(black.png)); /\* fully black \*/
cross-fade(url(white.png) 25%, url(black.png)); /\* 25% white, 75% black \*/
cross-fade(url(white.png), url(black.png)); /\* 50% white, 50% black \*/
cross-fade(url(white.png) 75%, url(black.png)); /\* 75% white, 25% black \*/
cross-fade(url(white.png) 100%, url(black.png)); /\* fully white \*/
cross-fade(url(green.png) 75%, url(red.png) 75%); /\* both green and red at 75% \*/
```

 If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images.
 The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%.
 The result, if greater than 0, is then divided equally between all images with omitted percentages.

In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.

If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:

```css
cross-fade(url(red.png), url(yellow.png), url(blue.png)); /\* all three will be 33.3333% opaque \*/
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
```

### Older, implemented syntax

```css
cross-fade( <image>, <image>, <percentage> )
```

 The specification for the `cross-fade()` function allows for multiple images and for each image to have transparency values independent of the other values.
 This was not always the case.
 The original syntax, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%.
 The original syntax is supported in Safari and supported with the `-webkit-` prefix in Chrome, Opera, and other blink-based browsers.

```css
cross-fade(url(white.png), url(black.png), 0%);   /\* fully black \*/
cross-fade(url(white.png), url(black.png), 25%);  /\* 25% white, 75% black \*/
cross-fade(url(white.png), url(black.png), 50%);  /\* 50% white, 50% black \*/
cross-fade(url(white.png), url(black.png), 75%);  /\* 75% white, 25% black \*/
cross-fade(url(white.png), url(black.png), 100%); /\* fully white \*/
```

 In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value.
 The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.

The green/red example (with the percentages totaling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.

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

 Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users.
 If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
 When using background images, make sure the contrast in color is great enough that any text is legible over the image as well as if the images are missing.

* MDN Understanding WCAG, Guideline 1.1 explanations
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
Formal syntax
-------------
```

<cross-fade()> =
  cross-fade( <cf-image># )

<cf-image> =
  <percentage [0,100]>?  &&
  [ <image> | <color> ]

<image> =
  <url>       |
  <gradient>

<url> =
  <url()>  |
  <src()>

<url()> =
  url( <string> <url-modifier>\* )  |
  <url-token>

<src()> =
  src( <string> <url-modifier>\* )

```

Examples
--------

### Older syntax for cross-fade

#### HTML

```html
<div class="crossfade"></div>
```

#### CSS

```css
.crossfade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}
```

#### Result

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

| Specification |
| --- |
| CSS Images Module Level 4 # cross-fade-function |

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

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

See also
--------

* `<image>`
* `url()`
* `image()`
* `image-set()`
* `element()`
* Using CSS gradients
* Gradient functions: `linear-gradient()`, `radial-gradient()`, `repeating-linear-gradient()`, `repeating-radial-gradient()`, `conic-gradient()`, `repeating-conic-gradient()`


-webkit-mask-repeat-x - CSS: Cascading Style Sheets

-webkit-mask-repeat-x
=====================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The `-webkit-mask-repeat-x` property specifies whether and how a mask image is repeated (tiled) horizontally.

Syntax
------

```css
/\* Keyword values \*/
-webkit-mask-repeat-x: repeat;
-webkit-mask-repeat-x: no-repeat;
-webkit-mask-repeat-x: space;
-webkit-mask-repeat-x: round;

/\* Multiple values \*/
-webkit-mask-repeat-x: repeat, no-repeat, space;

/\* Global values \*/
-webkit-mask-repeat-x: inherit;
-webkit-mask-repeat-x: initial;
-webkit-mask-repeat-x: revert;
-webkit-mask-repeat-x: revert-layer;
-webkit-mask-repeat-x: unset;
```

### Values

repeat

The mask image is repeated both horizontally and vertically.

no-repeat

The mask image is not repeated; only one copy of the mask image is drawn. The remainder of the masked element's content is not displayed.

repeat

The mask image is repeated both horizontally and vertically.

space

The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The `mask-position` property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image.

round

As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.

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

|  |  |
| --- | --- |
| Initial value | `repeat` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

-webkit-mask-repeat-x =
  repeat | no-repeat | space | round
```

Examples
--------

### Using a repeating or non-repeating mask image

```css
.exampleone {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: repeat;
}

.exampletwo {
  -webkit-mask-image: url("mask.png");
  -webkit-mask-repeat-x: no-repeat;
}
```

### Using multiple mask images

You can specify a different `<repeat-style>` for each mask image, separated by commas:

```css
.examplethree {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-repeat-x: repeat, space;
}
```

Each image is matched with the corresponding repeat style, from first specified to last.

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

Not part of any standard.

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

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

See also
--------

`-webkit-mask-repeat`, `-webkit-mask-repeat-y`


order - CSS: Cascading Style Sheets

order
=====

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 **`order`** CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order. Items not given an explicit `order` value are assigned the default value of `0`.

Try it
------

In the above demo, select the options on the left-hand side to change the value of the purple box's `order` property. The blue boxes have been given fixed `order` values.

Bear in mind the effect of source order. When `order: 2;` is selected for example, the purple box is placed before the two blue boxes with `order: 2;`. This is because the purple box appears before the blue boxes in the source code.

Syntax
------

```css
/\* <integer> values \*/
order: 5;
order: -5;

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

Since `order` is only meant to affect the *visual order* of elements and not their logical or tab order. `order` must not be used on non-visual media such as speech.

### Values

`<integer>`

Represents the ordinal group to be used by the item.

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

Using the `order` property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | Flex items, grid items, and absolutely-positioned flex and grid container children |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |

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

order =
  [ <'layout-order'> <'reading-order'>? ]  |
  [ [ reading || layout ] && <integer> ]

```

Examples
--------

### Ordering items in a flex container

This example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.

#### HTML

```html
<header>…</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>…</footer>
```

#### CSS

```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```

#### Result

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

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Ordering flex items*
* CSS Grid Guide: *CSS Grid Layout and accessibility*


Animatable CSS properties - CSS: Cascading Style Sheets

Animatable CSS properties
=========================

CSS Animations and Transitions rely on the concept of **animatable** properties, and all CSS properties are animatable unless otherwise specified. Each property's *animation type* determines how values combine - interpolate, add, or accumulate - for this property. Transitions only involve interpolation, whereas animations may use all three combination methods.

**Note:** The animation type for each CSS property is listed in its "Formal definition" table (E.g., `color`).

**Note:** The interpolation method for each CSS data type is described in its "Interpolation" section (E.g., `<length>`).

Animation types
---------------

There are mainly four animation types as defined in the Web Animations specification:

Not animatable

The property is not animatable. It is not processed when listed in an animation keyframe and is unaffected by transitions.

**Note:** An animation effect targeting only properties that are not animatable will still exhibit the usual behavior for an animation effect (E.g., firing the `animationstart` event).

Discrete

The property's values are not additive, and interpolation swaps from the start value to the end value at `50%`. Specifically, denoting by `p` the progress value:

* If `p < 0.5`, then `V_result = V_start`;
* If `p ≥ 0.5`, then `V_result = V_end`.

By computed value

Corresponding individual components of the computed values are combined using the indicated procedure for that value type. If the number of components or the types of corresponding components do not match, or if any component value uses discrete animation and the two corresponding values do not match, then the property values combine as discrete.

Repeatable list

Same as by computed value except that if the two lists have differing numbers of items, they are first repeated to the least common multiple numbers of items. Each item is then combined by computed value. If a pair of values cannot be combined or any component value uses discrete animation, then the property values combine as discrete.

Some properties have specific interpolation behavior not covered by these four types. In this case, refer to the property's "Interpolation" section (E.g., `visibility`).

Animating custom properties
---------------------------

For custom properties registered using the `registerProperty()` method, the animation type is by computed value, with the computed value type determined by the property's syntax definition.

For unregistered custom properties, the animation type is discrete.

See also
--------

* Using CSS Animations
* Using CSS Transitions


-webkit-box-reflect - CSS: Cascading Style Sheets

-webkit-box-reflect
===================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`-webkit-box-reflect`** CSS property lets you reflect the content of an element in one specific direction.

Syntax
------

```css
/\* Direction values \*/
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/\* Offset value \*/
-webkit-box-reflect: below 10px;

/\* Mask value \*/
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/\* Global values \*/
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: revert;
-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;
```

### Values

`above`*,* `below`*,* `right`*,* `left`

Are keywords indicating in which direction the reflection is to happen.

`<length>`

Indicates the size of the reflection.

`<image>`

Describes the mask to be applied to the reflection.

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

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

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

-webkit-box-reflect =
  [ above | below | right | left ]? <length>? <image>?
```

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

Not part of any standard. The standard way to do reflection in CSS is to use the CSS `element()` function.

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

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

See also
--------

* The Apple documentation.
* The Webkit specification.
* Lea Verou's article on reflection using CSS features on the standard track.


word-break - CSS: Cascading Style Sheets

word-break
==========

The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /\* experimental \*/
word-break: break-word; /\* deprecated \*/

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

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

### Values

`normal`

Use the default line break rule.

`break-all`

To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

`keep-all`

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for `normal`.

`auto-phrase`
Experimental

Has the same effect as `word-break: normal` except that language-specific analysis is performed to improve word breaks by not placing them in the middle of natural phrases.

`break-word`
Deprecated

Has the same effect as `overflow-wrap: anywhere` combined with `word-break: normal`, regardless of the actual value of the `overflow-wrap` property.

**Note:** In contrast to `word-break: break-word` and `overflow-wrap: break-word` (see `overflow-wrap`), `word-break: break-all` will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

The specification also lists an additional value, `manual`, which is not currently supported in any browsers. When implemented, `manual` will have the same effect as `word-break: normal` except that breaks won't be automatically inserted in Southeast Asian languages. This is needed because, in such languages, user agents frequently place breaks in suboptimal positions. `manual` will allow you to insert line breaks in optimal positions manually.

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

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

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

word-break =
  normal      |
  keep-all    |
  break-all   |
  break-word

```

Examples
--------

### HTML

```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: manual</code></p>
<p class="manual narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>6. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS

```css
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.manual {
  word-break: manual;
}

.autoPhrase {
  word-break: auto-phrase;
}

.breakWord {
  word-break: break-word;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # word-break-property |

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

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

See also
--------

* `overflow-wrap`
* `hyphens`
* `line-break`
* Guide to wrapping and breaking text


Replaced elements - CSS: Cascading Style Sheets

Replaced elements
=================

In CSS, a **replaced element** is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.

Put in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as `<iframe>` elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.

The only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box. See Controlling object position within the content box for further information.

Replaced elements
-----------------

Typical replaced elements are:

* `<iframe>`
* `<video>`
* `<embed>`
* `<img>`

Some elements are treated as replaced elements only in specific cases:

* `<option>`
* `<audio>`
* `<canvas>`
* `<object>`

HTML spec also says that an `<input>` element can be replaced, because `<input>` elements of the `"image"` type are replaced elements similar to `<img>`. However, other form controls, including other types of `<input>` elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "Widgets").

Objects inserted using the CSS `content` property are *anonymous replaced elements*. They are "anonymous" because they don't exist in the HTML markup.

Using CSS with replaced elements
--------------------------------

CSS handles replaced elements specifically in some cases, like when calculating margins and some `auto` values.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties, such as `vertical-align`. Only replaced elements can ever have intrinsic dimensions.

### Controlling object position within the content box

Certain CSS properties can be used to specify how the object contained within the replaced element should be positioned within the element's box area. These are defined by the CSS Images specification:

`object-fit`

Specifies how the replaced element's content object should be fitted to the containing element's box.

`object-position`

Specifies the alignment of the replaced element's content object within the element's box.

See also
--------

* HTML Spec
* Void elements
* CSS key concepts:
    + CSS syntax
    + At-rules
    + 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