border-inline-end - CSS: Cascading Style Sheets

border-inline-end
=================

The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
Syntax
------

```css
border-inline-end: 1px;
border-inline-end: 2px dashed;
border-inline-end: medium dashed blue;

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

The physical border to which `border-inline-end` maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top`, `border-right`, `border-bottom`, or `border-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

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

### Values

The `border-inline-end` is specified with one or more of the following, in any order:

`<'border-width'>`

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

`<'border-style'>`

The line style of the border. See `border-style`.

`<color>`

The color of the border.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| Applies to | all elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `border-inline-end-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-end-color`: by computed value type
* `border-inline-end-style`: discrete
* `border-inline-end-width`: by computed value type
 |

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

border-inline-end =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

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-rl;
  border-inline-end: 5px dashed blue;
}
```

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

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

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`, `border-right`, `border-bottom`, or `border-left`.
* `writing-mode`, `direction`, `text-orientation`


CSS value functions - CSS: Cascading Style Sheets

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

**CSS value functions** are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.

Syntax
------

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

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

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

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

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

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

### Translate functions

`translateX()`

Translates an element horizontally.

`translateY()`

Translates an element vertically.

`translateZ()`

Translates an element along the z-axis.

`translate()`

Translates an element on the 2D plane.

`translate3d()`

Translates an element in 3D space.

### Rotation functions

`rotateX()`

Rotates an element around the horizontal axis.

`rotateY()`

Rotates an element around the vertical axis.

`rotateZ()`

Rotates an element around the z-axis.

`rotate()`

Rotates an element around a fixed point on the 2D plane.

`rotate3d()`

Rotates an element around a fixed axis in 3D space.

### Scaling functions

`scaleX()`

Scales an element up or down horizontally.

`scaleY()`

Scales an element up or down vertically.

`scaleZ()`

Scales an element up or down along the z-axis.

`scale()`

Scales an element up or down on the 2D plane.

`scale3d()`

Scales an element up or down in 3D space.

### Skew functions

`skewX()`

Skews an element in the horizontal direction.

`skewY()`

Skews an element in the vertical direction.

`skew()`

Skews an element on the 2D plane.

### Matrix functions

`matrix()`

Describes a homogeneous 2D transformation matrix.

`matrix3d()`

Describes a 3D transformation as a 4×4 homogeneous matrix.

### Perspective functions

`perspective()`

Sets the distance between the user and the z=0 plane.

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

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

Each of the pages below contains detailed information about a math function's syntax, browser compatibility data, examples, and more. For a holistic introduction to CSS math functions, see Using CSS math functions.

### Basic arithmetic

`calc()`

Performs basic arithmetic calculations on numerical values.

### Comparison functions

`min()`

Calculates the smallest of a list of values.

`max()`

Calculates the largest of a list of values.

`clamp()`

Calculates the central of a minimum, central, and maximum values.

### Stepped value functions

`round()`

Calculates a rounded number based on a rounding strategy.

`mod()`

Calculates a modulus (with the same sign as the divisor) when dividing one number by another.

`rem()`

Calculates a remainder (with the same sign as the dividend) when dividing one number by another.

### Trigonometric functions

`sin()`

Calculates the trigonometric sine of a number.

`cos()`

Calculates the trigonometric cosine of a number.

`tan()`

Calculates the trigonometric tangent of a number.

`asin()`

Calculates the trigonometric inverse sine of a number.

`acos()`

Calculates the trigonometric inverse cosine of a number.

`atan()`

Calculates the trigonometric inverse tangent of a number.

`atan2()`

Calculates the trigonometric inverse tangent of two-numbers in a plane.

### Exponential functions

`pow()`

Calculates the base raised to the power of a number.

`sqrt()`

Calculates the square root of a number.

`hypot()`

Calculates the square root of the sum of the squares of its arguments.

`log()`

Calculates the logarithm of a number.

`exp()`

Calculates `e` raised to the power of a number.

### Sign-related functions

`abs()`

Calculates the absolute value of a number.

`sign()`

Calculates the sign (positive or negative) of the number.

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

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

`blur()`

Increases the image gaussian blur.

`brightness()`

Brightens or darkens an image.

`contrast()`

Increases or decreases the image contrast.

`drop-shadow()`

Applies a drop shadow behind an image.

`grayscale()`

Converts an image to grayscale.

`hue-rotate()`

Changes the overall hue of an image.

`invert()`

Inverts the colors of an image.

`opacity()`

Adds transparency to an image.

`saturate()`

Changes the overall saturation of an image.

`sepia()`

Increases the sepia of an image.

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

The `<color>` CSS data type specifies different color representations.

`rgb()`

Defines a given color according to its red, green, blue and alpha (transparency) components.

`hsl()`

Defines a given color according to its hue, saturation, lightness and alpha (transparency) components.

`hwb()`

Defines a given color according to its hue, whiteness and blackness components.

`lch()`

Defines a given color according to its lightness, chroma and hue components.

`oklch()`

Defines a given color according to its lightness, chroma, hue and alpha (transparency) components.

`lab()`

Defines a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace.

`oklab()`

Defines a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency).

`color()`

Specifies a particular, specified colorspace rather than the implicit sRGB colorspace.

`color-mix()`

Mixes two color values in a given colorspace by a given amount.

`color-contrast()`
Experimental

Selects the highest color contrast from a list of colors, compare to a base color value.

`device-cmyk()`
Experimental

Defines CMYK colors in a device-independent way.

`light-dark()`
Experimental

Returns one of two provided colors based on the current color scheme.

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

The `<image>` CSS data type provides graphical representation of images or gradients.

### Gradient functions

`linear-gradient()`

Linear gradients transition colors progressively along an imaginary line.

`radial-gradient()`

Radial gradients transition colors progressively from a center point (origin).

`conic-gradient()`

Conic gradients transition colors progressively around a circle.

`repeating-linear-gradient()`

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

`repeating-radial-gradient()`

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

`repeating-conic-gradient()`

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

### Image functions

`image()`
Experimental

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

`image-set()`

Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.

`cross-fade()`

Blends two or more images at a defined transparency.

`element()`
Experimental

Defines an `<image>` value generated from an arbitrary HTML element.

`paint()`

Defines an `<image>` value generated with a PaintWorklet.

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

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

`counter()`

Returns a string representing the current value of the named counter if there is one.

`counters()`

Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

`symbols()`

Defines the counter styles inline, directly as the value of a property.

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

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

`circle()`

Defines a circle shape.

`ellipse()`

Defines an ellipse shape.

`inset()`

Defines an inset rectangle shape.

`rect()`
Experimental

Defines a rectangle shape using the distances from the top and left edges of the reference box.

`xywh()`
Experimental

Defines a rectangle shape using the specified distances from the top and left edges of the reference box and the rectangle width and height.

`polygon()`

Defines a polygon shape.

`path()`

Accepts an SVG path string to enable a shape to be drawn.

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

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

`attr()`

Uses the attributes defined on HTML element.

`env()`

Uses the user-agent defined as environment variable.

`url()`

Uses a file from the specified URL.

`var()`

Uses the custom property value instead of any part of a value of another property.

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

The following functions are used to define a CSS Grid.

`fit-content()`

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

`minmax()`

Defines a size range greater-than or equal-to *min* and less-than or equal-to *max*.

`repeat()`

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern.

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

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

`stylistic()`

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

`styleset()`

Enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ssXY`, such as `ss02`.

`character-variant()`

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

`swash()`

Enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values `swsh` and `cswh`, such as `swsh 2` and `cswh 2`.

`ornaments()`

Enables ornaments such as fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ornm`, such as `ornm 2`.

`annotation()`

Enables annotations such as circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `nalt`, such as `nalt 2`.

Easing functions
----------------

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

`linear()`

Easing function that interpolates linearly between its points.

`cubic-bezier()`

Easing function that defines a cubic Bézier curve.

`steps()`

Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time.

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

The following functions are used as a value of different `animation-timeline` properties. See `animation-timeline` for more details about these.

`scroll()`

Sets the `animation-timeline` of an element to an *anonymous scroll progress timeline*.

`view()`

Sets the `animation-timeline` of an element to an *anonymous view progress timeline*.

See also
--------

* CSS Values and Units
* Introduction to CSS: Values and Units


::-moz-focus-inner - CSS: Cascading Style Sheets

::-moz-focus-inner
==================

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

The **`::-moz-focus-inner`** CSS pseudo-element is a Mozilla extension that represents an inner focus ring of the `<button>` element as well as the button, submit, reset, and color types of the `<input>` element.

**Note:** Using `::-moz-focus-inner` with anything than the buttons that support it doesn't match anything and has no effect.

Syntax
------

```css
::-moz-focus-inner {
  /\* ... \*/
}
```

Example
-------

### HTML

```html
<input type="submit" value="Input" /> <button type="submit">Button</button>
```

### CSS

```css
button::-moz-focus-inner,
input[type="color"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  padding-block-start: 0px;
  padding-inline-end: 2px;
  padding-block-end: 0px;
  padding-inline-start: 2px;
  border: 2px dotted red;
}
```

### Result

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

Not part of any standard.

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

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

See also
--------

* Mozilla CSS extensions
* Related CSS properties:
    + `-moz-user-focus`
* Related CSS selectors:
    + `:focus`
    + `:focus-visible`
    + `:focus-within`


text-emphasis-color - CSS: Cascading Style Sheets

text-emphasis-color
===================

The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand.

Try it
------

Syntax
------

```css
/\* Initial value \*/
text-emphasis-color: currentcolor;

/\* <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgb(90 200 160 / 80%);
text-emphasis-color: transparent;

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

### Values

`<color>`

Defines the color of the emphasis marks. If no color is present, it defaults to `currentcolor`.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements |
| Inherited | yes |
| Computed value | computed color |
| Animation type | a color |

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

text-emphasis-color =
  <color>

```

Examples
--------

### Emphasis with a color and custom character

#### CSS

```css
em {
  text-emphasis-color: green;
  text-emphasis-style: "\*";
}
```

#### HTML

```html
<p>Here's an example:</p>

<em>This has emphasis marks!</em>
```

#### Result

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

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

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

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

See also
--------

* The `<color>` data type
* The other emphasis mark related properties: `text-emphasis-style`, `text-emphasis`, and `text-emphasis-position`.
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* Applying color to HTML elements using CSS


:modal - CSS: Cascading Style Sheets

:modal
======

The **`:modal`** CSS pseudo-class matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the `:modal` pseudo-class at the same time, but only one of them will be active and able to receive input.

Try it
------

Syntax
------

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

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

Examples of elements that will prevent user interaction with the rest of the page and will be selected by the `:modal` pseudo-class include:

* The `dialog` element opened with the `showModal()` API.
* The element selected by the `:fullscreen` pseudo-class when opened with the `requestFullscreen()` API.
Examples
--------

### Styling a modal dialog

This example styles a modal dialog that opens when the "Update details" button is activated. This example has been built on top of the `<dialog>` element example.
```

<!-- Simple modal dialog containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label
 >Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="updateDetails">Update details</button>
</p>
<output></output>
```

#### CSS

```css
:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}
```

```
const updateButton = document.getElementById("updateDetails");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// If a browser doesn't support the dialog, then hide the
// dialog contents by default.
if (typeof favDialog.showModal !== "function") {
  favDialog.hidden = true;
  // Your fallback script
}
// "Update details" button opens the <dialog> modally
updateButton.addEventListener("click", () => {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    outputBox.value = "Sorry, the dialog API is not supported by this browser.";
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener("close", () => {
  outputBox.value = `${
 favDialog.returnValue
 } button clicked - ${new Date().toString()}`;
});
```

### Result

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

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

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

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

See also
--------

* `dialog` element
* Other element display state pseudo-classes: `:fullscreen` and `:picture-in-picture`
* Complete list of pseudo-classes


:-moz-submit-invalid - CSS: Cascading Style Sheets

:-moz-submit-invalid
====================

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

The **`:-moz-submit-invalid`** CSS pseudo-class is a Mozilla extension that represents any submit `<button>` on forms whose contents aren't valid based on their validation constraints.

By default, no style is applied. You can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields.

Syntax
------

```css
:-moz-submit-invalid {
  /\* ... \*/
}
```

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

* `:valid`
* `:invalid`
* `:required`
* `:optional`


hypot() - CSS: Cascading Style Sheets

hypot()
=======

The **`hypot()`** CSS function is an exponential function that returns the square root of the sum of squares of its parameters.

While `pow()` and `sqrt()` only work on unitless numbers, `hypot()` accepts values with units, but they all must have the same type.

Syntax
------

```css
/\* A <number> value \*/
width: hypot(2em); /\* 2em \*/
width: hypot(3em, 4em); /\* 5em \*/
width: hypot(30px, 40px); /\* 50px \*/
width: hypot(48px, 64px); /\* 80px \*/
width: hypot(3px, 4px, 5px); /\* 7.0710678118654755px \*/
```

### Parameters

The `hypot(x [, ...]#)` function accepts one or more comma-separated calculations as its parameters.

`x`, `x2`, ..., `xN`

A calculation that resolves to a `<number>`, `<dimension>`, or `<percentage>`.

### Return value

Returns a `<number>`, `<dimension>`, or `<percentage>` (based on the inputs), which is the square root of the sum of squares of its parameters.

* If any of the inputs is `infinite`, the result is `+∞`.
* If a single parameter is provided, the result is the absolute value of its input. `hypot(2em)` and `hypot(-2em)` both resolve to `2em`.
### Formal syntax
```

<hypot()> =
  hypot( <calc-sum># )

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

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

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

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

```

Examples
--------

### Sizes based on hypot function

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

#### HTML

```html
<div class="boxes">
  <div class="box">100px</div>
  <div class="box one">100px</div>
  <div class="box two">141.42px</div>
  <div class="box three">250px</div>
</div>
```

#### CSS

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

* `--size-1` is calculated with the hypotenuse of `--size-0` (100px). This takes the square value and, as there is no other value, returns the square root of the value, which results in 100px.
* `--size-2` is calculated with the hypotenuse of `--size-0` (100px), twice. This takes the square of the value (100px \* 100px = 10000px2) and adds it to the square of `--size-0` again (10000px2 + 10000px2 = 20000px2) and returns the square root of the sum (√(20000px2)), which results in 141.42px.
* `--size-3` is calculated with the hypotenuse `--size-0` \* 1.5 (150px) and `--size-0` \* 2 (200px). The result is the square root of the sum of their squares: The values are squared (22500px2 and 40000px2) and added together (62500px2), with the sum square-rooted (√(62500px2)) being 250px.

```css
:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /\* 100px \*/
  --size-2: hypot(var(--size-0), var(--size-0)); /\* 141.42px \*/
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /\* 250px \*/
}
```

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

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

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

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

#### Result

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

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

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

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

See also
--------

* `pow()`
* `sqrt()`
* `log()`
* `exp()`


grid-template-rows - CSS: Cascading Style Sheets

grid-template-rows
==================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.

Try it
------

Syntax
------

```css
/\* Keyword value \*/
grid-template-rows: none;

/\* <track-list> values \*/
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/\* <auto-track-list> values \*/
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/\* Global values \*/
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: revert;
grid-template-rows: revert-layer;
grid-template-rows: unset;
```

This property may be specified as:

* either the keyword value `none`
* or a `<track-list>` value
* or an `<auto-track-list>` value.
### Values

`none`

Is a keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the `grid-auto-rows` property.

`[linename]`

A `<custom-ident>` specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.

`<length>`

Is a non-negative length.

`<percentage>`

Is a non-negative `<percentage>` value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto` for the purpose of calculating the intrinsic size of the grid container. It must then be resolved against the resulting grid container size for the purpose of laying out the grid and its items. The intrinsic size contributions of the track may be adjusted to the size of the grid container and may increase the final size of the track by the minimum amount that would result in honoring the percentage.

`<flex>`

Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, <flex>)`).

`max-content`

Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.

`min-content`

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

`minmax(min, max)`

Is a functional notation that defines a size range, greater than or equal to *min*, and less than or equal to *max*. If *max* is smaller than *min*, then *max* is ignored and the function is treated as *min*. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.

`auto`

As a maximum represents the largest `max-content` size of the items in that track.

As a minimum represents the largest minimum size of items in that track (specified by the `min-width`/`min-height` of the items). This is often, though not always, the `min-content` size.

If used outside of `minmax()` notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.

**Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the `align-content` and `justify-content` properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.

`fit-content( [ <length> | <percentage> ] )`

Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at *argument* if it is greater than the `auto` minimum.

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )`

Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.

`masonry`
Experimental

The masonry value indicates that this axis should be laid out according to the masonry algorithm.

`subgrid`

The `subgrid` value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | grid containers |
| Inherited | no |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

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

grid-template-rows =
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?

<track-list> =
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

<auto-track-list> =
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]\* <line-names>?

<line-name-list> =
  [ <line-names> | <name-repeat> ]+

<line-names> =
  '[' <custom-ident>\* ']'

<track-size> =
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )

<fixed-size> =
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<auto-repeat> =
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

<name-repeat> =
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )

<track-breadth> =
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto

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

<fixed-breadth> =
  <length-percentage [0,∞]>

```

Examples
--------

### Specifying grid row sizes

#### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

#### Result

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

See also
--------

* Related CSS properties: `grid-template-columns`, `grid-template-areas`, `grid-template`
* Grid Layout Guide: *Basic concepts of grid layout - Grid Tracks*
* Video tutorial: *Defining a Grid*
* Subgrid


backface-visibility - CSS: Cascading Style Sheets

backface-visibility
===================

The **`backface-visibility`** CSS property sets whether the back face of an element is visible when turned towards the user.

Try it
------

An element's back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space. (This property has no effect on 2D transforms, which have no perspective.)

Syntax
------

```css
/\* Keyword values \*/
backface-visibility: visible;
backface-visibility: hidden;

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

The `backface-visibility` property is specified as one of the keywords listed below.

### Values

`visible`

The back face is visible when turned towards the user.

`hidden`

The back face is hidden, effectively making the element invisible when turned away from the user.

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

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

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

backface-visibility =
  visible  |
  hidden

```

Examples
--------

### Cube with transparent and opaque faces

This example shows a cube with transparent faces, and one with opaque faces.

#### HTML

```html
<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        Since all faces are partially transparent, the back faces (2, 4, 5) are
        visible through the front faces (1, 3, 6).
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>The three back faces (2, 4, 5) are hidden.</p>
    </td>
  </tr>
</table>
```

#### CSS

```css
/\* Classes that will show or hide the
 three back faces of the "cube" \*/
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/\* Define the container div, the cube div, and a generic face \*/
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Define each face based on direction \*/
.front {
  background: rgb(0 0 0 / 30%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 255 0 / 100%);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(196 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 196 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(196 196 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(196 0 196 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Make the table a little nicer \*/
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}
```

#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # backface-visibility-property |

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

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

See also
--------

* Using CSS transforms


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

border-inline-end-width
=======================

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

Try it
------

Syntax
------

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

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

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

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

```

Examples
--------

### Applying a border with vertical text

#### HTML

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

#### CSS

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

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

#### Results

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

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

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

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

See also
--------

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


border-collapse - CSS: Cascading Style Sheets

border-collapse
===============

The **`border-collapse`** CSS property sets whether cells inside a `<table>` have shared or separate borders.

Try it
------

When cells are collapsed, the `border-style` value of `inset` behaves like `ridge`, and `outset` behaves like `groove`.

When cells are separated, the distance between cells is defined by the `border-spacing` property.

Syntax
------

```css
/\* Keyword values \*/
border-collapse: collapse;
border-collapse: separate;

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

The `border-collapse` property is specified as a single keyword, which may be chosen from the list below.

### Values

`collapse`

Adjacent cells have shared borders (the collapsed-border table rendering model).

`separate`

Adjacent cells have distinct borders (the separated-border table rendering model).

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

|  |  |
| --- | --- |
| Initial value | `separate` |
| Applies to | `table` and `inline-table` elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

border-collapse =
  separate  |
  collapse

```

Examples
--------

### A colorful table of browser engines

#### HTML

```html
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
```

#### CSS

```css
.collapse {
  border-collapse: collapse;
}

.separate {
  border-collapse: separate;
}

table {
  display: inline-table;
  margin: 1em;
  border: dashed 5px;
}

table th,
table td {
  border: solid 3px;
}

.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ed {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}
```

#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

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

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

See also
--------

* `border-spacing`, `border-style`
* The `border-collapse` property alters the appearance of the `<table>` HTML element.


:-moz-drag-over - CSS: Cascading Style Sheets

:-moz-drag-over
===============

**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-drag-over`** CSS pseudo-class is a Mozilla extension that matches an element when a `dragover` event is called on it.

Syntax
------

```css
:-moz-drag-over {
  /\* ... \*/
}
```

Examples
--------

### HTML

```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Drag Over</td>
  </tr>
</table>
```

### CSS

```css
td:-moz-drag-over {
  color: red;
}
```

### Result

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

Not part of any standard.

See also
--------

* Mozilla CSS extensions
* HTML drag and drop


font-family - CSS: Cascading Style Sheets

font-family
===========

The **`font-family`** CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

Try it
------

Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a `@font-face` at-rule.

It is often convenient to use the shorthand property `font` to set `font-size` and other font related properties all at once.

You should always include at least one generic family name in a `font-family` list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

The `font-family` property specifies a list of fonts, from highest priority to lowest. Font selection *does not* stop at the first font in the list that is on the user's system. Rather, font selection is done *one character at a time*, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

Syntax
------

```css
/\* A font family name and a generic family name \*/
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/\* A generic family name only \*/
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

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

The `font-family` property lists one or more font families, separated by commas. Each font family is specified as either a `<family-name>` or a `<generic-name>` value.

The example below lists two font families, the first with a `<family-name>` and the second with a `<generic-name>`:

```css
font-family: "Gill Sans Extrabold", sans-serif;
```

### Values

`<family-name>`

The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted. For example: "Comic Sans MS".

`<generic-name>`

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

`serif`

Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.

For example: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

`sans-serif`

Glyphs have stroke endings that are plain.

For example: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

`monospace`

All glyphs have the same fixed width.

For example: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

`cursive`

Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letter work.

For example: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.

`fantasy`

Fantasy fonts are primarily decorative fonts that contain playful representations of characters.

For example: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

`system-ui`

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

`ui-serif`

The default user interface serif font.

`ui-sans-serif`

The default user interface sans-serif font.

`ui-monospace`

The default user interface monospace font.

`ui-rounded`

The default user interface font that has rounded features.

`math`

This is for the particular stylistic concerns of representing mathematics: superscript and subscript, brackets that cross several lines, nesting expressions, and double struck glyphs with distinct meanings.

`emoji`

Fonts that are specifically designed to render emoji.

`fangsong`

A particular style of Chinese characters that are between serif-style Song and cursive-style Kai forms. This style is often used for government documents.

### Valid family names

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

It is a **good practice** to quote font family names that contain white space, digits, or punctuation characters other than hyphens.

For example, the following declarations are valid:

```css
font-family: "Goudy Bookletter 1911", sans-serif;
```

The following declarations are **invalid**:

```css
font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;
```

The following example is technically **valid** but is not recommended:

```css
font-family:
  Gill Sans Extrabold,
  sans-serif;
```

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

|  |  |
| --- | --- |
| Initial value | depends on user agent |
| 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-family =
  [ <family-name> | <generic-family> ]#

<family-name> =
  <string>         |
  <custom-ident>+

<generic-family> =
  generic( <custom-ident>+ )  |
  <string>                    |
  <custom-ident>+

```

Examples
--------

### Some common font families

```css
.serif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family: "Lucida Console", Courier, monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}
```

```
<div class="serif">This is an example of a serif font.</div>

<div class="sansserif">This is an example of a sans-serif font.</div>

<div class="monospace">This is an example of a monospace font.</div>

<div class="cursive">This is an example of a cursive font.</div>

<div class="fantasy">This is an example of a fantasy font.</div>

<div class="math">This is an example of a math font.</div>

<div class="emoji">This is an example of an emoji font.</div>

<div class="fangsong">This is an example of a fangsong font.</div>
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

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

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

See also
--------

* `font-style`
* `font-weight`
* Fundamental text and font styling


padding-right - CSS: Cascading Style Sheets

padding-right
=============

The **`padding-right`** CSS property sets the width of the padding area on the right of an element.

Try it
------

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

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

Syntax
------

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

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

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

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

### Values

`<length>`

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-right =
  <length-percentage [0,∞]>

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

```

Examples
--------

### Setting right padding using pixels and percentages

```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 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-top`, `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`


border-inline-width - CSS: Cascading Style Sheets

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

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

Try it
------

The border width in the other dimension can be set with `border-block-width`, which sets `border-block-start-width`, and `border-block-end-width`.

Syntax
------

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

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

### Values

`<'border-width'>`

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

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-width =
  <'border-top-width'>{1,2}

```

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-width: 5px 10px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-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`


column-width - CSS: Cascading Style Sheets

column-width
============

The **`column-width`** CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the `column-width` value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.

Try it
------

This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the `column-count` property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are `width`, `column-width`, `column-gap`, and `column-rule-width`.

Syntax
------

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

/\* <length> values \*/
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

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

The `column-width` property is specified as one of the values listed below.

### Values

`<length>`

Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.

`auto`

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

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | Block containers except table wrapper boxes |
| Inherited | no |
| Computed value | the absolute length, zero or larger |
| Animation type | a length |

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

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

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

```

Examples
--------

### Setting column width in pixels

#### HTML

```html
<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>
```

#### CSS

```css
.content-box {
  column-width: 100px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # column-sizing |
| CSS Multi-column Layout Module Level 1 # cw |

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

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

See also
--------

* Multiple-column Layout (Learn Layout)
* Basic Concepts of Multicol


pow() - CSS: Cascading Style Sheets

pow()
=====

The **`pow()`** CSS function is an exponential function that returns the value of a base raised to the power of a number.

The `exp()` function is a special case of `pow()` where the value of the base is the mathematical constant e.

Syntax
------

```css
/\* A <number> value \*/
width: calc(10px * pow(5, 2)); /\* 10px \* 25 = 250px \*/
width: calc(10px * pow(5, 3)); /\* 10px \* 125 = 1250px \*/
width: calc(10px * pow(2, 10)); /\* 10px \* 1024 = 10240px \*/
```

### Parameters

The `pow(base, number)` function accepts two comma-separated values as its parameters.

`base`

A calculation that resolves to a `<number>`, representing the base.

`number`

A calculation that resolves to a `<number>`, representing the exponent.

### Return value

Returns a `<number>` representing basenumber, that is, `base` raised to the power of `number`.

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

<pow()> =
  pow( <calc-sum> , <calc-sum> )

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

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

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

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

```

Examples
--------

### Scale headings by fixed ratio

The `pow()` function can be useful for strategies like CSS Modular Scale, which relates all the font-sizes on a page to each other by a fixed ratio.

#### HTML

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

#### CSS

```css
h1 {
  font-size: calc(1rem * pow(1.5, 4));
}
h2 {
  font-size: calc(1rem * pow(1.5, 3));
}
h3 {
  font-size: calc(1rem * pow(1.5, 2));
}
h4 {
  font-size: calc(1rem * pow(1.5, 1));
}
h5 {
  font-size: calc(1rem * pow(1.5, 0));
}
h6 {
  font-size: calc(1rem * pow(1.5, -1));
}
```

#### Result

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

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

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

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

See also
--------

* `sqrt()`
* `hypot()`
* `exp()`
* `log()`


clip-path - CSS: Cascading Style Sheets

clip-path
=========

The **`clip-path`** CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
clip-path: none;

/\* <clip-source> values \*/
clip-path: url(resources.svg#c1);

/\* <geometry-box> values \*/
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/\* <basic-shape> values \*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: xywh(0 5px 100% 75% round 15% 0);

/\* Box and shape values combined \*/
clip-path: padding-box circle(50px at 0 100px);

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

The `clip-path` property is specified as one or a combination of the values listed below.

### Values

`<clip-source>`

A `url()` referencing an SVG `<clipPath>` element.

`<basic-shape>`

A shape whose size and position is defined by the `<geometry-box>` value. If no geometry box is specified, the `border-box` will be used as the reference box. One of:

`inset()`

Defines an inset rectangle.

`circle()`

Defines a circle using a radius and a position.

`ellipse()`

Defines an ellipse using two radii and a position.

`polygon()`

Defines a polygon using an SVG filling rule and a set of vertices.

`path()`

Defines a shape using an optional SVG filling rule and an SVG path definition.

`rect()`

Defines a rectangle using the specified distances from the edges of the reference box.

`xywh()`

Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle.

`<geometry-box>`

If specified in combination with a `<basic-shape>`, this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a `border-radius`), to be the clipping path. The geometry box can be one of the following values:

`margin-box`

Uses the margin box as the reference box.

`border-box`

Uses the border box as the reference box.

`padding-box`

Uses the padding box as the reference box.

`content-box`

Uses the content box as the reference box.

`fill-box`

Uses the object bounding box as the reference box.

`stroke-box`

Uses the stroke bounding box as the reference box.

`view-box`

Uses the nearest SVG viewport as the reference box. If a `viewBox` attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the size of the reference box is set to the width and height values of the `viewBox` attribute.

`none`

No clipping path is created.

**Note:** A computed value other than **`none`** results in the creation of a new stacking context the same way that CSS `opacity` does for values other than `1`.

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 |
| Percentages | refer to reference box when specified, otherwise border-box |
| Computed value | as specified, but with `url()` values made absolute |
| Animation type | yes, as specified for `<basic-shape>`, otherwise no |

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

clip-path =
  <clip-source>                        |
  [ <basic-shape> || <geometry-box> ]  |
  none

<clip-source> =
  <url>

<geometry-box> =
  <shape-box>  |
  fill-box     |
  stroke-box   |
  view-box

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

<shape-box> =
  <visual-box>  |
  margin-box

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

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

<visual-box> =
  content-box  |
  padding-box  |
  border-box

```

Examples
--------

### Comparison of HTML and SVG
```

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path
 d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="none">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: url(#myPath)<br /><br />
      Assuming the following clipPath definition:
      <pre>
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg></pre
 >
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45
      Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape1">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape2">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape3">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape4">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape5">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape6">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape7">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape8">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape9">I LOVE<br /><em>clipping</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">I LOVE</text>
              <text x="96" y="109" class="em">clipping</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
```

```css
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container::before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.view-box {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.view-box::after {
  content: "view-box";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}
```

### Complete example

#### HTML

```html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="rect(10px 10px 180px 220px round 20px)">rect</option>
  <option value="xywh(0 20% 90% 67% round 0 0 5% 5px)">xywh</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>
```

#### CSS

```css
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
```

```
const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", (evt) => {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});
```

#### Result

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |
| CSS Shapes Module Level 1 # supported-basic-shapes |

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

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

See also
--------

* Shapes in clipping and masking – and how to use them
* CSS properties: `mask`, `filter`
* Applying SVG effects to HTML content
* SVG attributes:
    + `clip-path`
    + `clip-rule`


rotate - CSS: Cascading Style Sheets

rotate
======

The **`rotate`** CSS property allows you to specify rotation transforms individually and independently of the `transform` property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
rotate: none;

/\* Angle value \*/
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;

/\* x, y, or z axis name plus angle \*/
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;

/\* Vector plus angle value \*/
rotate: 1 1 1 90deg;

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

### Values

angle value

An `<angle>` specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function.

x, y, or z axis name plus angle value

The name of the axis you want to rotate the affected element around (`"x"`, "`y`", or "`z"`), plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function.

vector plus angle value

Three `<number>`s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an `<angle>` specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function.

`none`

Specifies that no rotation should be applied.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | a transform |
| Creates stacking context | yes |

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

rotate =
  none                                    |
  <angle>                                 |
  [ x | y | z | <number>{3} ] && <angle>

```

Examples
--------

### Rotating an element on hover

 The following example shows how to use the `rotate` property to rotate an element along various axes on hover.
 The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates.

#### HTML

```html
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
```

#### CSS

```css
.box {
  display: inline-block;
  margin: 1em;
  min-width: 6.5em;
  line-height: 6.5em;
  text-align: center;
  transition: 1s ease-in-out;
  border: 0.25em dotted;
}

#box1:hover {
  rotate: 90deg;
}

#box2:hover {
  rotate: y 180deg;
}

#box3:hover {
  rotate: 1 2 1 360deg;
}
```

#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # individual-transforms |

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

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

See also
--------

* `translate`
* `scale`
* `transform`

Note: `skew` is not an independent `transform` value


list-style-position - CSS: Cascading Style Sheets

list-style-position
===================

The **`list-style-position`** CSS property sets the position of the `::marker` relative to a list item.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
list-style-position: inside;
list-style-position: outside;

/\* Global values \*/
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
```

The `list-style-position` property is specified as one of the keyword values listed below.

### Values

`inside`

The `::marker` is the first element among the list item's contents.

`outside`

The `::marker` is outside the principal block box. This is the default value for `list-style`.

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

This property is applied to list items, i.e., elements with ``display`: list-item;`. By default this includes `<li>` elements. Because this property is inherited, it can be set on the parent element (normally `<ol>` or `<ul>`) to let it apply to all list items.

If a block element is the first child of a list element declared as `list-style-position: inside`, then the block element is placed on the line after the marker-box.

It is often more convenient to use the shorthand `list-style`.

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

|  |  |
| --- | --- |
| Initial value | `outside` |
| Applies to | list items |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

list-style-position =
  inside   |
  outside

```

Examples
--------

### Setting list item position

#### HTML

```html
<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>
```

#### CSS

```css
.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}
```

#### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-position-property |

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

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

See also
--------

* `list-style` shorthand
* `list-style-type` property
* `list-style-image` property
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module


background-image - CSS: Cascading Style Sheets

background-image
================

The **`background-image`** CSS property sets one or more background images on an element.

Try it
------

The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.

The borders of the element are then drawn on top of them, and the `background-color` is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the `background-clip` and `background-origin` CSS properties.

If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a `none` value.

**Note:** Even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a `background-color`. If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.

Syntax
------

```css
background-image: linear-gradient(
    to bottom,
    rgb(255 255 0 / 50%),
    rgb(0 0 255 / 50%)
  ), url("catfront.png");

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

Each background image is specified either as the keyword `none` or as an `<image>` value.

To specify multiple background images, supply multiple values, separated by a comma.

### Values

`none`

Is a keyword denoting the absence of images.

`<image>`

Is an `<image>` denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.

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

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Computed value | as specified, but with `url()` values made absolute |
| Animation type | discrete |

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

background-image =
  <bg-image>#

<bg-image> =
  <image>  |
  none

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

### Layering background images

Note that the star image is partially transparent and is layered over the cat image.

#### HTML

```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```

#### CSS

```css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```

#### Result

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-image |

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

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

See also
--------

* Implementing image sprites in CSS
* `<img>`
* Image-related data types: `<image>`, `<gradient>`
* Image-related functions:
    + `cross-fade()`
    + `element()`
    + `image()`
    + `image-set()`
    + `linear-gradient()`
    + `radial-gradient()`
    + `conic-gradient()`
    + `repeating-linear-gradient()`
    + `repeating-radial-gradient()`
    + `repeating-conic-gradient()`
    + `paint()`
    + `url()`


font-synthesis-weight - CSS: Cascading Style Sheets

font-synthesis-weight
=====================

The **`font-synthesis-weight`** CSS property lets you specify whether or not the browser may synthesize the bold typeface when it is missing in a font family.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------

```css
/\* Keyword values \*/
font-synthesis-weight: auto;
font-synthesis-weight: none;

/\* Global values \*/
font-synthesis-weight: inherit;
font-synthesis-weight: initial;
font-synthesis-weight: revert;
font-synthesis-weight: revert-layer;
font-synthesis-weight: unset;
```

### Values

`auto`

Indicates that the missing bold typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of the missing bold typeface by the browser is not allowed.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| 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-synthesis-weight =
  auto  |
  none

```

Examples
--------

### Disabling synthesis of bold typeface

This example shows turning off synthesis of the bold typeface by the browser in the `Montserrat` font.

#### HTML

```html
<p class="english">
  This is the default <strong>bold typeface</strong> and
  <em>oblique typeface</em>.
</p>

<p class="english no-syn">
  The <strong>bold typeface</strong> is turned off here but not the
  <em>oblique typeface</em>.
</p>
```

#### CSS

```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-weight: none;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-weight |

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

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

See also
--------

* font-synthesis shorthand, font-synthesis-small-caps, font-synthesis-style
* `font-style`, `font-variant`, `font-weight`


text-decoration-skip - CSS: Cascading Style Sheets

text-decoration-skip
====================

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

The **`text-decoration-skip`** CSS property sets what parts of an element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

**Note:** Most other browsers are converging on supporting the simpler `text-decoration-skip-ink` property.

Syntax
------

```css
/\* Keyword values \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* Multiple keywords \*/
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

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

### Values

`none`

Nothing is skipped. Thus, text decoration is drawn for all text content and across atomic inline-level boxes.

`objects`

The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.

`spaces`

All spacing is skipped: all Unicode white space characters and all word separators, plus any adjacent `letter-spacing` or `word-spacing`.

`leading-spaces`

The same as `spaces`, except that only leading spaces are skipped.

`trailing-spaces`

The same as `spaces`, except that only trailing spaces are skipped.

`edges`

The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)

![An example of "text-decoration-skip: edges;".](/en-US/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a *decorating box* never draws over its own box decoration.

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

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

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

text-decoration-skip =
  none  |
  auto

```

Examples
--------

### Skipping edges

#### HTML

```html
<p>Hey, grab a cup of <em>coffee!</em></p>
```

#### CSS

```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

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

See also
--------

* `text-decoration-skip-ink`