Using CSS custom properties (variables) - CSS: Cascading Style Sheets

Using CSS custom properties (variables)
=======================================

**Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the `@property` at-rule or by custom property syntax (e.g., **`--primary-color: blue;`**). Custom properties are accessed using the CSS `var()` function (e.g., **`color: var(--primary-color);`**).

Complex websites have very large amounts of CSS, and this often results in a lot of repeated CSS values. For example, it's common to see the same color used in hundreds of different places in stylesheets. Changing a color that's been duplicated in many places requires a search and replace across all rules and CSS files. Custom properties allow a value to be defined in one place, then referenced in multiple other places so that it's easier to work with. Another benefit is readability and semantics. For example, `--main-text-color` is easier to understand than the hexadecimal color `#00ff00`, especially if the color is used in different contexts.

 Custom properties defined using two dashes (`--`) are subject to the cascade and inherit their value from their parent.
 The `@property` at-rule allows more control over the custom property and lets you specify whether it inherits its value from a parent, what the initial value is, and the type constraints that should apply.

**Note:** Variables do not work inside media queries and container queries.
 You can use the `var()` function in any part of a value in any property on an element.
 You cannot use `var()` for property names, selectors, or anything aside from property values, which means you can't use it in a media query or container query.

Declaring custom properties
---------------------------

 In CSS, you can declare a custom property using two dashes as a prefix for the property name, or by using the `@property` at-rule.
 The following sections describe how to use these two methods.

### Using a prefix of two dashes (`--`)

 A custom property prefixed with two dashes begins with `--`, followed by the property name (e.g.,`--my-property`), and a property value that can be any valid CSS value.
 Like any other property, this is written inside a ruleset.
 The following example shows how to create a custom property `--main-bg-color` and uses a `<named-color>` value of `brown`:

```css
section {
  --main-bg-color: brown;
}
```

 The selector given to the ruleset (`<section>` elements in the example above) defines the scope in which the custom property can be used.
 For this reason, a common practice is to define custom properties on the `:root` pseudo-class, so that it can be referenced globally:

```css
:root {
  --main-bg-color: brown;
}
```

This doesn't always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.

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

### Using the `@property` at-rule

 The `@property` at-rule allows you to be more expressive with the definition of a custom property with the ability to associate a type with the property, set default values, and control inheritance.
 The following example creates a custom property called `--logo-color` which expects a `<color>`:

```css
@property --logo-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

 If you want to define or work with custom properties in JavaScript instead of directly in CSS, there is a corresponding API for this purpose.
 You can read about how this work in the CSS Properties and Values API page.

### Referencing custom properties with `var()`

Regardless of which method you choose to define a custom property, you use them by referencing the property in a `var()` function in place of a standard property value:

```css
details {
  background-color: var(--main-bg-color);
}
```

First steps with custom properties
----------------------------------

 Let's start with some HTML that we would like to apply some styles to.
 There is a `<div>` that acts as a container that includes some child elements, some with nested elements:

```html
<div class="container">
  <div class="one">
    <p>One</p>
  </div>
  <div class="two">
    <p>Two</p>
    <div class="three">
      <p>Three</p>
    </div>
  </div>
  <input class="four" placeholder="Four" />
  <textarea class="five">Five</textarea>
</div>
```

 We will use the following CSS to style a few different elements based on their classes (some layout rules are not shown below so we can focus on colors).
 Depending on their classes, we're giving elements `cornflowerblue` or `aquamarine` background colors:
```

/\* Set fonts, borders and padding \*/
body {
  font-family: sans-serif;
  color: white;
}

div,
input,
textarea {
  border: 2px black solid;
  padding: 4px;
  margin: 4px;
}

.container {
  display: grid;
  gap: 10px;
}
```

```css
/\* For each class, set some colors \*/
.one {
  background-color: cornflowerblue;
}
.two {
  color: black;
  background-color: aquamarine;
}
.three {
  background-color: cornflowerblue;
}
.four {
  background-color: cornflowerblue;
}
.five {
  background-color: cornflowerblue;
}
```

This produces the following result:

 There's an opportunity to use custom properties to replace repetitive values across these rules.
 After defining `--main-bg-color` in the `.container` scope and referencing its value in multiple places, the updated styles look like this:

```css
/\* Define --main-bg-color here \*/
.container {
  --main-bg-color: cornflowerblue;
}

/\* For each class, set some colors \*/
.one {
  background-color: var(--main-bg-color);
}
.two {
  color: black;
  background-color: aquamarine;
}
.three {
  background-color: var(--main-bg-color);
}
.four {
  background-color: var(--main-bg-color);
}
.five {
  background-color: var(--main-bg-color);
}
```

Using the :root pseudo-class
----------------------------

For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem. For non-trivial projects, this is not always possible. By declaring a custom property on the `:root` pseudo-class and using it where needed throughout the document, a CSS author can reduce the need for repetition:

```css
/\* Define --main-bg-color here \*/
:root {
  --main-bg-color: cornflowerblue;
}

/\* For each class, set some colors \*/
.one {
  background-color: var(--main-bg-color);
}
.two {
  color: black;
  background-color: aquamarine;
}
.three {
  background-color: var(--main-bg-color);
}
.four {
  background-color: var(--main-bg-color);
}
.five {
  background-color: var(--main-bg-color);
}
```

This leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value (`--main-bg-color: cornflowerblue;`), which is very useful if you want to change the value across the entire project later.

Inheritance of custom properties
--------------------------------

 A custom property defined using two dashes `--` instead of `@property` always inherit the value of its parent.
 This is demonstrated in the following example:

```html
<div class="one">
  <p>One</p>
  <div class="two">
    <p>Two</p>
    <div class="three"><p>Three</p></div>
    <div class="four"><p>Four</p></div>
  </div>
</div>
```

```
div {
  color: black;
  font-family: sans-serif;
  width: 75%;
  height: 80%;
  margin: 4px;
  border: 2px black solid;
  display: inline-block;
}

p {
  margin: 0;
}

.one {
  height: 250px;
}

.two {
  height: 80%;
}

.three {
  height: 40%;
}

.four {
  height: 40%;
}
```

```css
div {
  background-color: var(--box-color);
}

.two {
  --box-color: cornflowerblue;
}

.three {
  --box-color: aquamarine;
}
```

The results of `var(--box-color)` depending on inheritance are as follows:

* `class="one"`: *invalid value*, which is the default value of a custom property defined in this way
* `class="two"`: `cornflowerblue`
* `class="three"`: `aquamarine`
* `class="four"`: `cornflowerblue` (inherited from its parent)

 One aspect of custom properties that the examples above demonstrate is that they don't behave exactly like variables in other programming languages.
 The value is computed where it is needed, not stored and reused in other places of a stylesheet.
 For instance, you cannot set a property's value and expect to retrieve the value in a sibling's descendant's rule.
 The property is only set for the matching selector and its descendants.

### Using `@property` to control inheritance

 The `@property` at-rule lets you explicity state whether the property inherits or not.
 The following example creates a custom property using the `@property` at-rule.
 Inheritance is disabled, there's a `<color>` data type defined, and an intital value of `cornflowerblue`.

 The parent element sets `--box-color` to a value of `green` and uses `--box-color` as a value for its background color.
 The child element also uses `background-color: var(--box-color)`, and we would expect it to have the color `green` if inheritance was enabled (or if it was defined using the double dash syntax).

```html
<div class="parent">
  <p>Parent element</p>
  <div class="child">
    <p>Child element with inheritance disabled for --box-color.</p>
  </div>
</div>
```

```
div {
  color: white;
  font-family: sans-serif;
  width: 200px;
  height: 200px;
  margin: 4px;
  padding: 8px;
  border: 2px black solid;
  display: inline-block;
}
```

```css
@property --box-color {
  syntax: "<color>";
  inherits: false;
  initial-value: cornflowerblue;
}

.parent {
  --box-color: green;
  background-color: var(--box-color);
}

.child {
  width: 80%;
  height: 40%;
  background-color: var(--box-color);
}
```

Because `inherits: false;` is set in the at-rule, and a value for the `--box-color` property is not declared within the `.child` scope, the initial value of `cornflowerblue` is used instead of `green` that would have been inherited from the parent:

Custom property fallback values
-------------------------------

You can define fallback values for custom properties using the `var()` function, and the `initial-value` of the `@property` at-rule.

**Note:** Fallback values aren't used to fix compatibility issues for when CSS custom properties are not supported, as the fallback value won't help in this case.
 Fallbacks cover the case where the browser supports CSS custom properties and is able to use a different value if the desired variable isn't defined yet or has an invalid value.

### Defining fallbacks in the `var()` function

Using the `var()` function, you can define multiple **fallback values** when the given variable is not yet defined; this can be useful when working with Custom Elements and Shadow DOM.

 The first argument to the function is the name of the custom property. The second argument to the function is an optional fallback value, which is used as the substitution value when the referenced custom property is invalid.
 The function accepts two parameters, assigning everything following the first comma as the second parameter. If the second parameter is invalid, the fallback will fail. For example:

```css
.one {
  /\* Red if --my-var is not defined \*/
  color: var(--my-var, red);
}

.two {
  /\* pink if --my-var and --my-background are not defined \*/
  color: var(--my-var, var(--my-background, pink));
}

.three {
  /\* Invalid: "--my-background, pink" \*/
  color: var(--my-var, --my-background, pink);
}
```

 Including a custom property as a fallback, as seen in the second example above (`var(--my-var, var(--my-background, pink))`), is the correct way to provide more than one fallback with `var()`.
 You should be aware of the performance impact of this method, however, as it takes more time to parse through the nested variables.

**Note:** The syntax of the fallback, like that of custom properties, allows commas. For example, `var(--foo, red, blue)` defines a fallback of `red, blue` — anything between the first comma and the end of the function is considered a fallback value.

### Fallbacks using the `@property` initial value

 Aside from using `var()`, the `initial-value` defined in the `@property` at-rule can be used as a fallback mechanism.
 In fact, we've already seen this in the `@property` inheritance section.

 The following example sets an initial value of `--box-color` to `cornflowerblue` using the `@property` at-rule.
 In the ruleset following the at-rule, we want to set `--box-color` to `aquamarine`, but there's a typo in the value name.
 The same is true for the third `<div>` where we've used `2rem` for the custom property that's expecting a valid `<color>` value.
 Both `2rem` and `aqumarine` are invalid color values, so the initial value of `cornflowerblue` is applied:

```css
@property --box-color {
  syntax: "<color>";
  initial-value: cornflowerblue;
  inherits: false;
}

.one {
  --box-color: aquamarine;
  background-color: var(--box-color);
}

.two {
  --box-color: aqumarine;
  background-color: var(--box-color);
}

.three {
  --box-color: 2rem;
  background-color: var(--box-color);
}
```

```
div {
  color: white;
  font-family: sans-serif;
  width: 100px;
  height: 100px;
  margin: 4px;
  padding: 8px;
  border: 2px black solid;
  display: inline-block;
}
.one {
  color: black;
}
```

```
<div class="one">
  <p>One</p>
</div>
<div class="two">
  <p>Two.</p>
</div>
<div class="three">
  <p>Three.</p>
</div>
```

Invalid custom properties
-------------------------

 Each CSS property can be assigned a defined set of values.
 If you try to assign a value to a property that is outside its set of valid values, it's considered *invalid*.

 When the browser encounters an invalid value for a regular CSS property (for example, a value of `16px` for the `color` property), it discards the declaration, and elements are assigned the values that they would have had if the declaration did not exist.
 In the following example, we see what happens when a regular CSS declaration is invalid; `color: 16px;` is discarded and the previous `color: blue` rule is applied instead:

```html
<p>This paragraph is initially black.</p>
```

```css
p {
  color: blue;
}

p {
  /\* oops, not a valid color \*/
  color: 16px;
}
```

 However, when the values of custom properties are parsed, the browser doesn't yet know where they will be used, so it must consider nearly all values as *valid*.
 Unfortunately, these valid values can be used, via the `var()` functional notation, in a context where they might not make sense.
 Properties and custom variables can lead to invalid CSS statements, leading to the concept of *valid at computed time*.

 When the browser encounters an invalid `var()` substitution, then the initial or inherited value of the property is used.
 This example is just like the last one, except we use a custom property.

 The browser substitutes the value of `--text-color` in place of `var(--text-color)`, but `16px` is not a valid property value for `color`.
 After substitution, the property doesn't make sense., so the browser handles this situation in two steps:

1. Check if the property `color` is inheritable. It is, but this `<p>` doesn't have any parent with the `color` property set. So we move on to the next step.
2. Set the value to its **default initial value**, which is black.

```html
<p>This paragraph is initially black.</p>
```

```css
:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: var(--text-color);
}
```

For such cases, the `@property` at-rule can prevent unexpected results by allowing to define the initial value of the property:

```html
<p>This paragraph is initially black.</p>
```

```css
@property --text-color {
  syntax: "<color>";
  inherits: false;
  initial-value: cornflowerblue;
}

:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: var(--text-color);
}
```

Values in JavaScript
--------------------

To use the values of custom properties in JavaScript, it is just like standard properties.

```js
// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);
```

See also
--------

* Custom property syntax
* `@property` at-rule
* `var()`
* CSS Properties and Values API
* CSS custom properties for cascading variables module


<integer> - CSS: Cascading Style Sheets

<integer>
=========

The **`<integer>`** CSS data type is a special type of `<number>` that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the `column-count`, `counter-increment`, `grid-column`, `grid-row`, and `z-index` properties and the `range` descriptor.

Syntax
------

The `<integer>` data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single `+` or `-` sign. There is no unit associated with integers.

**Note:** There is no official range of valid `<integer>` values, and the specifications do not specify a range.

Interpolation
-------------

When animated, values of the `<integer>` data type are interpolated using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. The speed of the interpolation is determined by the easing function associated with the animation.

Examples
--------

### Valid integers
```

12          Positive integer (without a leading + sign)
+123        Positive integer (with a leading + sign)
-456        Negative integer
0           Zero
+0          Zero, with a leading +
-0          Zero, with a leading -
```

### Invalid integers
```

12.0        This is a <number>, not an <integer>, though it represents an integer.
12.         Decimal points are not allowed.
+---12      Only one leading +/- is allowed.
ten         Letters are not allowed.
_5          Special characters are not allowed.
\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
3e4         Scientific notation is not allowed.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # integers |

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

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

See also
--------

* `<number>`


CSS containment - CSS: Cascading Style Sheets

CSS containment
===============

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

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

* Learn more
* See full compatibility
* Report feedback

 The aim of the **CSS containment** module is to improve performance of web pages by allowing the browser to isolate a subtree of the page from the rest of the page.
 If the browser knows that a part of the page is independent, rendering can be optimized and performance improved.

 In addition, it lets developers indicate whether or not an element should render its contents at all, and whether it should render its contents when it is offscreen.
 This allows the user agent to apply containment on elements when appropriate, and potentially defer layout and rendering until it is actually needed.

 The specification defines the CSS properties `contain` and `content-visibility`.
 This document describes the basic aims of the specification.
 For details on CSS container queries, see CSS Container Queries.

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

Many webpages contain several sections which are independent of each other. For example a listing of article headlines and content, as in the markup below.

```html
<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <p>More content here.</p>
</article>
```

Each article has the `contain` property with a value of `content` applied in the CSS.

```css
article {
  contain: content;
}
```

Each article is independent of the other articles on the page, and so they have been given `contain: content` to indicate to the browser that this is the case. The browser can then use this information to make decisions about how to render the content. For example, it might not render articles that are outside the viewable area.

 If we give each `<article>` the `contain` property with a value of `content`, when new elements are inserted the browser does not need to recalculate layout or repaint any area outside of the containing element's subtree.
 If the `<article>` is styled such that its size depends on its contents (e.g. with `height: auto`), then the browser may need to account for its size changing.

We have told it by way of the `contain` property that each article is independent.

 The `content` value is shorthand for `contain: layout paint style`.
 It tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds. Nothing can visibly overflow.

 This information is something that is usually known, and in fact quite obvious, to the web developer creating the page.
 However browsers cannot guess at your intent and cannot assume that an article will be entirely self-contained.
 Therefore this property gives you a nice way to explain to the browser this fact, and allow it to make performance optimizations based on that knowledge.

Key concepts and terminology
----------------------------

### `contain` values

The values for the `contain` property indicate the type of containment that you want to apply to that element.

#### Layout containment

```css
article {
  contain: layout;
}
```

Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using `contain: layout` you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.

In addition:

* `float` layout will be performed independently.
* Margins won't collapse across a layout containment boundary
* The layout container will be a containing block for `absolute`/`fixed` position descendants.
* The containing box creates a stacking context, therefore `z-index` can be used.

#### Paint containment

```css
article {
  contain: paint;
}
```

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for `paint` containment as `layout` containment (see above).

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

#### Size containment

```css
article {
  contain: size;
}
```

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

 If you turn on `contain: size` you need to also specify the size of the element you have applied this to using `contain-intrinsic-size` (or the equivalent longhand properties).
 It will end up being zero-sized in most cases, if you don't manually give it a size.

#### Style containment

```css
article {
  contain: style;
}
```

 Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM.
 The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree.

Using `contain: style` would ensure that the `counter-increment` and `counter-set` properties created new counters scoped to that subtree only.

#### Special values

There are two special values of contain:

* `content`
* `strict`

We encountered the first in the example above. Using `contain: content` turns on `layout`, `paint`, and `style` containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply `size` containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

To gain as much containment as possible use `contain: strict`, which behaves the same as `contain: size layout paint style`:

```css
contain: strict;
```

### `content-visibility`

`content-visibility` controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. Basically it enables the user agent to skip an element's rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

Its possible values are:

* `visible`: The default behavior — an element's contents are laid out and rendered as normal.
* `hidden`: The element skips its contents. The skipped contents must not be accessible to user agent features such as find-in-page, tab-order navigation, etc., nor be selectable or focusable.
* `auto`: The element turns on layout containment, style containment, and paint containment. If the element is not relevant to the user, it also skips its contents. Unlike `hidden`, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.
### Relevant to the user

The specification refers to the concept of relevant to the user. An element that is relevant to the user should be rendered, as it is visible, and/or being interacted with by the user.

To be precise, an element is relevant to the user if any of the following are true:

* The element appears in the viewport, or a user-agent-defined margin around the viewport (50% of the viewport dimensions, to give the app time to prepare for when the element visibility changes).
* The element or its contents receive focus.
* The element or its contents are selected, for example by dragging over the text with the mouse cursor or by some other highlight operation.
* The element or its contents are placed in the top layer.
### Skips its contents

The specification refers to the concept of skips its contents. This means that the element referred to is not relevant to the user and will not be rendered to improve performance.

To be precise, when an element skips its contents:

* It has layout, style, paint, and size containment turned on.
* Its contents are not painted, as if `visibility: hidden` was set on it.
* Its contents do not receive pointer events, as if `pointer-events: none` was set on it.
Reference
---------

### CSS Properties

* `contain`
* `content-visibility`
Specifications
--------------

| Specification |
| --- |
| CSS Containment Module Level 2 # contain-property |
| CSS Containment Module Level 2 # content-visibility |

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

### css.properties.contain

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

### css.properties.content-visibility

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

See also
--------

* An Introduction to CSS Containment
* The `contentvisibilityautostatechange` event


CSS miscellaneous - CSS: Cascading Style Sheets

CSS miscellaneous
=================

These pages contain CSS properties that are supported by browsers but either aren't included in a CSS specification, don't fit into any other CSS categories, or are experimental.

Reference
---------

### Properties

* `all`
* `text-rendering`
Specifications
--------------

*These properties are mostly unrelated to each other. Consult their individual pages for specifications.*

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

*These properties are mostly unrelated to each other. Consult their individual pages for availability in browsers.*


column-rule-color - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

```css
/\* <color> values \*/
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);

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

The `column-rule-color` property is specified as a single `<color>` value.

### Values

`<color>`

The color of the rule that separates columns.

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

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

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

column-rule-color =
  <color>

```

Examples
--------

### Setting a blue column rule

#### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```

#### CSS

```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}
```

#### Result

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

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

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

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

See also
--------

* The `<color>` data type
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, and `caret-color`
* Applying color to HTML elements using CSS


clear - CSS: Cascading Style Sheets

clear
=====

The **`clear`** CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The `clear` property applies to floating and non-floating elements.

Try it
------

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. The non-floated block's top margin collapses.

Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

**Note:** If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element's `display` property to `flow-root`.

```css
#container {
  display: flow-root;
}
```

Syntax
------

```css
/\* Keyword values \*/
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

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

### Values

`none`

Is a keyword indicating that the element is *not* moved down to clear past floating elements.

`left`

Is a keyword indicating that the element is moved down to clear past *left* floats.

`right`

Is a keyword indicating that the element is moved down to clear past *right* floats.

`both`

Is a keyword indicating that the element is moved down to clear past *both* left and right floats.

`inline-start`

Is a keyword indicating that the element is moved down to clear floats on *start side of its containing block*, that is the *left* floats on ltr scripts and the *right* floats on rtl scripts.

`inline-end`

Is a keyword indicating that the element is moved down to clear floats on *end side of its containing block*, that is the *right* floats on ltr scripts and the *left* floats on rtl scripts.

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

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

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

clear =
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

```

Examples
--------

### clear: left

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: right

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: both

#### HTML

```html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>
```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-clear |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

See also
--------

* CSS basic box model


CSS scroll snap - CSS: Cascading Style Sheets

CSS scroll snap
===============

The **CSS scroll snap** module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning.

This module includes the scroll container scroll-padding properties to adjust the optimal viewing region of paging during scroll-into-view operations. It also includes scroll-margin and scroll-alignment, set on the scroll container's children, to adjust the children's visual area when that child is scrolled into view, as well as a property to force scrolling to stop on individual children.

Scroll snap in action
---------------------

To view scroll snapping in the box below, scroll up-and-down and left-and-right through the grid of 45 numbered boxes in the scrollable viewport.

With scroll snap, one of the numbered boxes that you scroll to will snap into place. The initial CSS makes the numbered box snap into the center of the viewport. Use the sliders to change the block and inline snap positions.

Using snap properties, you can allow or block the scrolling past an element, a numbered box in this case. Select the "Prevent scrolling past boxes" checkbox to force all scrolling actions to be limited to scrolling to an adjacent box.

To compare scroll snapping to regular scrolling, check the "disable snapping" checkbox and try scrolling again.

To see the code for this example, view the source on GitHub.

Reference
---------

### Properties on containers

* `scroll-snap-type`
* `scroll-padding`
    + `scroll-padding-top`
    + `scroll-padding-right`
    + `scroll-padding-bottom`
    + `scroll-padding-left`
    + `scroll-padding-inline`
    + `scroll-padding-inline-start`
    + `scroll-padding-inline-end`
    + `scroll-padding-block`
    + `scroll-padding-block-start`
    + `scroll-padding-block-end`
### Properties on children

* `scroll-snap-align`
* `scroll-margin`
    + `scroll-margin-top`
    + `scroll-margin-right`
    + `scroll-margin-bottom`
    + `scroll-margin-left`
    + `scroll-margin-inline`
    + `scroll-margin-inline-start`
    + `scroll-margin-inline-end`
    + `scroll-margin-block`
    + `scroll-margin-block-start`
    + `scroll-margin-block-end`
* `scroll-snap-stop`
Guides
------

Basic concepts of CSS scroll snap

An overview and examples of CSS scroll snap features.

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

* `:target` pseudo-class
* `overflow` CSS property
* Element `scroll()` method
* Element `scrollBy()` method
* Element `scrollIntoView()` method
* Element `scrollTo()` method
* Document `scroll` event
* `scrollbar` ARIA role
* Scroll container glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |

See also
--------

* CSS overflow module
* CSS scrollbars styling module
* Keyboard-only scrolling areas on adrianroselli.com (2022)
* Scroll snap examples on Codepen (2022)
* Well-controlled scrolling with CSS scroll snap on web.dev (2021)
* Practical CSS scroll snapping/ on CSS-Tricks (2020)
* CSS scroll snap on 12 Days of Web (2019)


border-bottom-color - CSS: Cascading Style Sheets

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

The **`border-bottom-color`** CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties `border-color` or `border-bottom`.

Try it
------

Syntax
------

```css
/\* <color> values \*/
border-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255 0 0);
border-bottom-color: hsl(100deg 50% 25% / 75%);
border-bottom-color: currentcolor;
border-bottom-color: transparent;

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

The `border-bottom-color` property is specified as a single value.

### Values

`<color>`

The color of the bottom border.

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

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

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

border-bottom-color =
  <color>     |
  <image-1D>

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

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

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

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

```

Examples
--------

### A simple div with a border

#### HTML

```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```

#### CSS

```css
.mybox {
  border: solid 0.3em gold;
  border-bottom-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```

#### Result

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

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

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-bottom`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-top-color`, and `border-left-color`.
* The other border-related CSS properties applying to the same border: `border-bottom-style` and `border-bottom-width`.
* The default `currentcolor` color value.


flex-basis - CSS: Cascading Style Sheets

flex-basis
==========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.

Try it
------

In this example, the `flex-grow` and `flex-shrink` properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`.

The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at 200px but then shrink to fit the space available with the other items being at least `min-content` sized.

The image below shows how the Firefox Flexbox Inspector helps you understand the size items become:

![The Firefox Flexbox Inspector showing the size of the item once it has shrunk.](/en-US/docs/Web/CSS/flex-basis/firefox-flex-basis.png)

**Note:** In case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority.

Syntax
------

```css
/\* Specify <'width'> \*/
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

/\* Intrinsic sizing keywords \*/
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/\* Automatically size based on the flex item's content \*/
flex-basis: content;

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

The `flex-basis` property is specified as either the keyword `content` or a `<'width'>`.

### Values

`<'width'>`

Any of the following units:

* `<length>` sets an absolute value
* `<percentage>` sets a percentage of the width or height of a containing block's content area
* `auto` uses the value of the width in horizontal writing mode, and the value of the height in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead
* `max-content` sets the intrinsic preferred width
* `min-content` sets the intrinsic minimum width
* `fit-content` sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element

`content`

Indicates automatic sizing, based on the flex item's content.

**Note:** This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using `auto` together with a main size (width or height) of `auto`.

* Originally, `flex-basis:auto` meant "look at my `width` or `height` property".
* Then, `flex-basis:auto` was changed to mean automatic sizing, and "main-size" was introduced as the "look at my `width` or `height` property" keyword. It was implemented in Firefox bug 1032922.
* Then, that change was reverted in Firefox bug 1093316, so `auto` once again means "look at my `width` or `height` property"; and a new `content` keyword is being introduced to trigger automatic sizing. (Firefox bug 1105111 covers adding that keyword).

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | flex items, including in-flow pseudo-elements |
| Inherited | no |
| Percentages | refer to the flex container's inner main size |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

flex-basis =
  content    |
  <'width'>

```

Examples
--------

### Setting flex item initial sizes

#### HTML

```html
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>
```

#### CSS

```css
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 12px;
}

.flex1 {
  flex-basis: auto;
}

.flex1::after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2::after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3::after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4::after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5::after {
  content: "content";
}
```

#### Results

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

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

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

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

See also
--------

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


:root - CSS: Cascading Style Sheets

:root
=====

The **`:root`** CSS pseudo-class matches the root element of a tree representing the document. In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.

```css
/\* Selects the root element of the document:
 <html> in the case of HTML \*/
:root {
  background: yellow;
}
```

Syntax
------

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

Examples
--------

### Declaring global CSS variables

`:root` can be useful for declaring global CSS variables:

```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

See also
--------

* `<html>`
* `Document.rootElement`
* `Node.getRootNode()`
* `Element.shadowRoot`
* `ShadowRoot`


box-lines - CSS: Cascading Style Sheets

box-lines
=========

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft. It has been replaced in the specification. See flexbox for information about the current standard.

The **`box-lines`** CSS property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).

By default a horizontal box will lay out its children in a single row, and a vertical box will lay out its children in a single column. This behavior can be changed using the `box-lines` property. The default value is `single`, which means that all elements will be placed in a single row or column, and any elements that don't fit will be considered overflow.

If a value of `multiple` is specified, however, then the box is allowed to expand to multiple lines (that is, multiple rows or columns) in order to accommodate all of its children. The box must attempt to fit its children on as few lines as possible by shrinking all elements down to their minimum widths or heights if necessary.

If the children in a horizontal box still do not fit on a line after being reduced to their minimum widths, then children are moved one by one onto a new line, until the elements remaining on the previous line fit. This process can repeat to an arbitrary number of lines. If a line contains only a single element that doesn't fit, then the element should stay on that line and overflow out of the box. The later lines are placed below the earlier lines in normal direction boxes and above in reverse direction boxes. The height of a line is the height of the largest child in that line. No additional space appears between the lines apart from the margins on the largest elements in each line. For calculating the height of a line, margins with a computed value of auto should be treated as having a value of 0.

A similar process occurs for children in a vertical box. Later lines in normal direction boxes are placed to the right of earlier lines and to the left in reverse direction boxes.

Once the number of lines has been determined, elements with a computed value for `box-flex` other than `0` stretch as necessary in an attempt to fill the remaining space on the lines. Each line computes flexes independently, so only elements on that line are considered when evaluating `box-flex` and `box-flex-groups`. The packing of elements in a line, as specified by the `box-pack` property, is also computed independently for each line.

Syntax
------

```css
/\* Keyword values \*/
box-lines: single;
box-lines: multiple;

/\* Global values \*/
box-lines: inherit;
box-lines: initial;
box-lines: unset;
```

The `box-lines` property is specified as one of the keyword values listed below.

### Values

`single`

Box elements lay out in a single row or column.

`multiple`

Box elements layout in multiple rows or columns.

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

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

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

box-lines =
  single | multiple
```

Examples
--------

### Simple usage example

In the original version of the spec, `box-lines` allowed you to specify that you wanted your flex container's children to wrap onto multiple lines. This was only supported in WebKit-based browsers, with a prefix.

```css
div {
  display: box;
  box-orient: horizontal;
  box-lines: multiple;
}
```

The modern flexbox equivalent is `flex-wrap`.

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

* `flex`
* `flex-basis`
* `flex-grow`
* `flex-shrink`


-moz-orient - CSS: Cascading Style Sheets

-moz-orient
===========

**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-orient`** CSS property specifies the orientation of the element to which it's applied.

Syntax
------

The `-moz-orient` property is specified as one of the keyword values chosen from the list below.

### Values

`inline`

The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.

`block`

The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.

`horizontal`

The element is rendered horizontally.

`vertical`

The element is rendered vertically.

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

|  |  |
| --- | --- |
| Initial value | `inline` |
| Applies to | any element; it has an effect on `progress` and `meter`, but not on <input type="range"> or other elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

-moz-orient =
  inline | block | horizontal | vertical
```

Examples
--------

### HTML

```html
<p>The following progress meter is horizontal (the default):</p>
<progress max="100" value="75"></progress>

<p>The following progress meter is vertical:</p>
<progress class="vert" max="100" value="75"></progress>
```

### CSS

```css
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
```

### Result

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

Not part of any standard. Though submitted to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, `-moz-orient`).

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

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

See also
--------

* `box-orient`


margin-left - CSS: Cascading Style Sheets

margin-left
===========

The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

Try it
------

The vertical margins of two adjacent boxes may fuse. This is called *margin collapsing*.

In the rare cases where width is overconstrained (i.e., when all of `width`, `margin-left`, `border`, `padding`, the content area, and `margin-right` are defined), `margin-left` is ignored, and will have the same calculated value as if the `auto` value was specified.

Syntax
------

```css
/\* <length> values \*/
margin-left: 10px; /\* An absolute length \*/
margin-left: 1em; /\* relative to the text size \*/
margin-left: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-left: auto;

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

The `margin-left` property is specified as the keyword `auto`, or a `<length>`, or a `<percentage>`. Its value can be positive, zero, or negative.

### Values

`<length>`

The size of the margin as a fixed value.

`<percentage>`

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

`auto`

The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of `margin-left` and `margin-right` are both `auto`, the calculated space is evenly distributed. This table summarizes the different cases:

| Value of `display` | Value of `float` | Value of `position` | Computed value of `auto` | Comment |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`,
 `inline-table` | *any* | `static` or `relative` | `0` | Inline layout mode |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and
 `margin-right` are set to `auto`. In this case, it
 is set to the value centering the element inside its parent.
  | Block layout mode |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | Block layout mode (floating element) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` |
 Internal `table-*` elements don't have margins, use
 `border-spacing` instead
  |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and
 `margin-right` are set to `auto`. In this case, it
 is set to the value centering the border area inside the available
 `width`, if fixed.
  | Absolutely positioned layout mode |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space.
 In this case, it is evenly distributed to all horizontal
 `auto` margins.
  | Flexbox layout mode |

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

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

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

margin-left =
  <length-percentage>  |
  auto

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

```

Examples
--------

Percentage values for `margin-left` are relative to the container's inline size.

### CSS

```css
.example {
  margin-left: 50%;
}
```

### HTML

```html
<p>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>
```

### Result

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

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

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

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

See also
--------

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


min() - CSS: Cascading Style Sheets

min()
=====

The **`min()`** CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The `min()` function can be used anywhere a `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` is allowed.

Try it
------

In the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px). This technique uses an absolute unit to specify a fixed maximum value for the property, and a relative unit to allow the value to shrink to suit smaller viewports.

Syntax
------

The `min()` function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.

The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as `attr()`, that evaluate to a valid argument type (like `<length>`).

You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

### Notes

* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `max()` and other `min()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the `calc()` function itself.
* The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any `<length>` syntax value.
* You can (and often need to) combine `min()` and `max()` values, or use `min()` within a `clamp()` or `calc()` function.
* You can provide more than two arguments, if you have multiple constraints to apply.
### Formal syntax
```

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

<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

```

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

When using `min()` to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Examples
--------

### Setting a maximum size for a label and input

Another use case for `min()` is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.

Let's look at some CSS:

```css
input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}
```

Here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. We declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. In other words, the widest that the label and input can be is 400px. The narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small.

```html
<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

See also
--------

* `calc()`
* `clamp()`
* `max()`
* CSS Values


max() - CSS: Cascading Style Sheets

max()
=====

The **`max()`** CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The `max()` function can be used anywhere a `<length>`, `<frequency>`, `<angle>`, `<time>`, `<percentage>`, `<number>`, or `<integer>` is allowed.

Try it
------

In the first example shown above, the width will be at least 400px, but will be wider if the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). This technique uses an absolute unit to specify a fixed minimum value for the property, and a relative unit to allow the value to grow to suit larger viewports.

Syntax
------

The `max()` function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.

The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as `attr()`, that evaluate to a valid argument type (like `<length>`), or nested `min()` and `max()` functions.

You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.

### Notes

* Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables *may* be treated as if `auto` had been specified.
* It is permitted to nest `min()` and other `max()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
* The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value.
* You can (and often need to) combine `min()` and `max()` values, or use `max()` within a `clamp()` or `calc()` function.
### Formal syntax
```

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

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

### Setting a minimum size for a font

Another use case for `max()` is to allow a font size to grow while ensuring it is at least a minimum size, enabling responsive font sizes while ensuring legibility.

Let's look at some CSS:

```css
h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}
```

The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensures that it is legible and accessible.

```html
<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>
```

Think of the `max()` function as finding the minimum value allowed for a property.

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

When `max()` is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the `min()` function nested within a `max()` that has as its second value a relative length unit that is always large enough to read. For example:

```css
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}
```

This ensures a minimum size of *1rem*, with a text size that scales if the page is zoomed.

* MDN Understanding WCAG, Guideline 1.4 explanations
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

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

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

See also
--------

* `calc()`
* `clamp()`
* `min()`
* CSS Values


::highlight() - CSS: Cascading Style Sheets

::highlight()
=============

The **`::highlight()`** CSS pseudo-element applies styles to a custom highlight.

A custom highlight is a collection of `Range` objects and is registered on a webpage using the `HighlightRegistry`.

Allowable properties
--------------------

Only certain CSS properties can be used with `::highlight()`:

* `color`
* `background-color`
* `text-decoration` and its associated properties
* `text-shadow`
* `-webkit-text-stroke-color`, `-webkit-text-fill-color` and `-webkit-text-stroke-width`

In particular, `background-image` is ignored.

Syntax
------

```css
::highlight(custom-highlight-name)
```

Examples
--------

### Highlighting characters

#### HTML

```html
<p id="rainbow-text">CSS Custom Highlight API rainbow</p>
```

#### CSS

```css
#rainbow-text {
  font-family: monospace;
  font-size: 1.5rem;
}

::highlight(rainbow-color-1) {
  color: #ad26ad;
  text-decoration: underline;
}
::highlight(rainbow-color-2) {
  color: #5d0a99;
  text-decoration: underline;
}
::highlight(rainbow-color-3) {
  color: #0000ff;
  text-decoration: underline;
}
::highlight(rainbow-color-4) {
  color: #07c607;
  text-decoration: underline;
}
::highlight(rainbow-color-5) {
  color: #b3b308;
  text-decoration: underline;
}
::highlight(rainbow-color-6) {
  color: #ffa500;
  text-decoration: underline;
}
::highlight(rainbow-color-7) {
  color: #ff0000;
  text-decoration: underline;
}
```

#### JavaScript

```js
const textNode = document.getElementById("rainbow-text").firstChild;

if (!CSS.highlights) {
  textNode.textContent =
    "The CSS Custom Highlight API is not supported in this browser!";
}

// Create and register highlights for each color in the rainbow.
const highlights = [];
for (let i = 0; i < 7; i++) {
  // Create a new highlight for this color.
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);

  // Register this highlight under a custom name.
  CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}

// Iterate over the text, character by character.
for (let i = 0; i < textNode.textContent.length; i++) {
  // Create a new range just for this character.
  const range = new Range();
  range.setStart(textNode, i);
  range.setEnd(textNode, i + 1);

  // Add the range to the next available highlight,
  // looping back to the first one once we've reached the 7th.
  highlights[i % 7].add(range);
}
```

#### Result

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

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # custom-highlight-pseudo |

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

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


outline-color - CSS: Cascading Style Sheets

outline-color
=============

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

Try it
------

Syntax
------

```css
/\* <color> values \*/
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

/\* Keyword value \*/
outline-color: auto;

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

The `outline-color` property is specified as any one of the values listed below.

### Values

`<color>`

The color of the outline, specified as a `<color>`.

`auto`
Experimental

Computes to `currentcolor` unless `outline-style` is set to `auto` then it computes to the accent color.

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

An outline is a line that is drawn around an element, outside the `border`. Unlike the element's border, the outline is drawn outside the element's frame, and may overlap other content. The border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap).

It is often more convenient to use the shorthand property `outline` when defining the appearance of an outline.

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

Custom focus styles commonly involve making adjustments to the `outline` property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements |
| Inherited | no |
| Computed value | For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. |
| Animation type | a color |

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

outline-color =
  auto                      |
  [ <color> | <image-1D> ]

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

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

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

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

```

Examples
--------

### Setting a solid blue outline

#### HTML

```html
<p>My outline is blue, as you can see.</p>
```

#### CSS

```css
p {
  outline: 2px solid; /\* Set the outline width and style \*/
  outline-color: #0000ff; /\* Make the outline blue \*/
  margin: 5px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

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

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

See also
--------

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


CSS namespaces - CSS: Cascading Style Sheets

CSS namespaces
==============

The **CSS namespaces** module defines the syntax for using namespaces in CSS.

CSS isn't just for styling HTML. A stylesheet may be used to style SVG, MathML, XML, or HTML, each of which has a different namespace or a document containing multiple namespaces.

The `@namespace` at-rule defined in this module enables distinguishing between same-named elements in different namespaces. Element tag names are not unique to a single language. For example, the `<a>` element isn't limited to HTML. You may want to style the `<a>`s within your SVGs differently from the links in your HTML. You also will likely want to ensure that `querySelectorAll("a")` selects the right kind of element. Namespacing can help.

The `@namespace` rule is used for declaring a default namespace and for binding namespaces to namespace prefixes. The namespaces module also defines the syntax for using these prefixes to represent namespace-qualified names. That's it. What a name means or if the name is even valid depends on the context and host language.

Reference
---------

### At-rules

* `@namespace`
Guides
------

Namespaces crash course

Deep dive into what a namespace is and how they are used in XML and XML-based markup languages.

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

* CSS namespace separator (`|`) combinator
* CSS type selectors
* CSS universal selector
* `CSSNamespaceRule` interface
    + `CSSNamespaceRule.namespaceURI` property
    + `CSSNamespaceRule.prefix` property
* `Document.createAttributeNS()` method
* `Document.createElementNS()` method
* `Document.getElementsByTagNameNS()` method
* `Element.getAttributeNodeNS()` method
* `Element.getAttributeNS()` method
* `Element.getElementsByTagNameNS()` method
* `Element.hasAttributeNS()` method
* `Element.namespaceURI` property
* `Element.removeAttributeNS()` method
* `Element.setAttributeNS()` method
* `Element.setAttributeNodeNS()` method
* `NamedNodeMap.getNamedItemNS()` method
* `NamedNodeMap.removeNamedItemNS()` method
* `NamedNodeMap.setNamedItemNS()` method
* Namespace glossary term
Specifications
--------------

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

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

See also
--------

* `<a>` SVG element
* CSS `url()` function
* CSS at-rules
* CSS at-rule functions
* CSS selectors


counters() - CSS: Cascading Style Sheets

counters()
==========

The **`counters()`** CSS function enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style.

The `counters()` function is generally used within pseudo-element through the `content` property, but theoretically, it can be used wherever a `<string>` value is supported.

The `counters()` function has two forms: `counters(<name>, <string>)` and `counters(<name>, <string>, <style>)`. The generated text is the value of all counters with the given `<name>`, arranged from the outermost to the innermost, and separated by the specified `<string>`. The counters are rendered in the `<style>` indicated, defaulting to `decimal` if no `<style>` is specified.

Try it
------

Syntax
------

```css
/\* Simple usage - style defaults to decimal \*/
counters(countername, '.');

/\* changing the counter display \*/
counters(countername, '-', upper-roman)
```

A counter has no visible effect by itself. The `counters()` function (and `counter()` function) is what makes it useful by returning developer-defined content.

### Values

The `counters()` function accepts two or three parameters. The first parameter is the `<counter-name>`. The second parameter is the concatenator `<string>`. The optional third parameter is the `<counter-style>`.

`<counter-name>`

A `<custom-ident>` identifying the counters, which is the same case-sensitive name used for the `counter-reset` and `counter-increment` properties. The name cannot start with two dashes and can't be `none`, `unset`, `initial`, or `inherit`. Alternatively, for inline, single-use counters, the `symbols()` function can be used instead of a named counter in browsers that support `symbols()`.

`<string>`

Any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, `\000A9` represents the copyright symbol.

`<counter-style>`

A counter style name or a `symbols()` function. The counter style name can be a simple predefined style such as numeric, alphabetic, or symbolic, a complex longhand predefined style such as East Asian or Ethiopic, or another predefined counter style. If omitted, the counter-style defaults to decimal.

The return value is a string containing all the values of all the counters in the element's CSS counters set named `<counter-name>` in the counter style defined by `<counter-style>` (or decimal, if omitted). The return string is sorted in outermost-first to innermost-last order, joined by the `<string>` specified.

**Note:** For information about non-concatenated counters, see the `counter()` function, which omits the `<string>` as a parameter.

### Formal syntax
```

<counters()> =
  counters( <counter-name> , <string> , <counter-style>? )

<counter-style> =
  <counter-style-name>  |
  <symbols()>

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

<symbols-type> =
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

<image> =
  <url>       |
  <gradient>

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

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

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

```

Examples
--------

### Comparing default counter value to uppercase roman numerals

This example includes two `counters()` functions: one with `<counter-style>` set and the other defaulting to `decimal`.

#### HTML

```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    counters(listCounter, ".", upper-roman) ") ";
}
li::before {
  content:
    counters(listCounter, ".") " == "
    counters(listCounter, ".", lower-roman);
}
```

#### Result

### Comparing decimal-leading-zero counter value to lowercase letters

This example includes three `counters()` functions, each with different `<string>` and `<counter-style>` values.

#### HTML

```html
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>
```

#### CSS

```css
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
  content:
    counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
  content:
    counters(count, "~", upper-alpha) " == "
    counters(count,  "\*", lower-alpha);
}
```

#### Result

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-functions |

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

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

See also
--------

* Using CSS Counters
* `counter-set` property
* `counter-reset` property
* `counter-increment` property
* `@counter-style` at-rule
* CSS `counter()` function
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module
* CSS generated content module


user-select - CSS: Cascading Style Sheets

user-select
===========

The **`user-select`** CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.

Try it
------

Syntax
------

```css
/\* Keyword values \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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

**Note:** `user-select` is not an inherited property, though the initial `auto` value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers *do* implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium has chosen to fix the issues to make the final behavior meet the specifications.

### Values

`none`

The text of the element and its sub-elements is not selectable. Note that the `Selection` object can contain these elements.

`auto`

The used value of `auto` is determined as follows:

* On the `::before` and `::after` pseudo elements, the used value is `none`
* If the element is an editable element, the used value is `contain`
* Otherwise, if the used value of `user-select` on the parent of this element is `all`, the used value is `all`
* Otherwise, if the used value of `user-select` on the parent of this element is `none`, the used value is `none`
* Otherwise, the used value is `text`

`text`

The text can be selected by the user.

`all`

The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

`contain`

Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

**Note:** CSS UI 4 renamed the `element` value to `contain`.

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

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

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

user-select =
  auto     |
  text     |
  none     |
  contain  |
  all

```

Examples
--------

### HTML

```html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
```

### CSS

```css
.unselectable {
  -webkit-user-select: none; /\* Safari \*/
  user-select: none;
}

.all {
  -webkit-user-select: all;
  user-select: all;
}
```

### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

See also
--------

* Polyfill for `user-select: contain`
* `::selection` pseudo-element
* The JavaScript `Selection` object


border-top-style - CSS: Cascading Style Sheets

border-top-style
================

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

Try it
------

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

Syntax
------

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

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

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

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

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

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

border-top-style =
  <line-style>

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

```

Examples
--------

### Setting border-top-style

#### HTML

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

#### CSS

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

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

#### Result

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

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

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

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

See also
--------

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


-moz-image-rect - CSS: Cascading Style Sheets

-moz-image-rect
===============

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`-moz-image-rect`** value for CSS `background-image` lets you use a portion of a larger image as a background.

Syntax
------

```css
-moz-image-rect(url(), top, right, bottom, left);
```

### Values

`url()`

The URI of the image from which to take the sub-image.

`top`

The top edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

`right`

The right edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

`bottom`

The bottom edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

`left`

The left edge, specified as an `<integer>` or `<percentage>`, of the sub-image within the specified image.

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

This property allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.

This works very similarly to the `-moz-image-region` property, which is used with the `list-style-image` property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.

The syntax for the rectangle is similar to the `rect()` function generating a `<shape>` CSS type. All four values are relative to the upper left corner of the image.

Examples
--------

This example loads an image and uses it in four segments to draw the Firefox logo in four `<div>` blocks. Clicking on their container causes the four segments to rotate around by swapping the `background-image` property values among the four `<div>` blocks.

### CSS

The CSS defines one container style, then the styles for the four boxes that comprise the complete image.

The container looks like this:

```css
#container {
  width: 267px;
  height: 272px;
  top: 100px;
  left: 100px;
  position: absolute;
  font-size: 16px;
  text-shadow: white 0px 0px 6px;
  text-align: center;
}
```

Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.

```css
#box1 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file `firefox.jpg`.

```css
#box2 {
  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

This defines the top-right corner of the image.

The other corners follow a similar pattern:

```css
#box3 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
  width: 133px;
  height: 136px;
  position: absolute;
}
#box4 {
  background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
  width: 133px;
  height: 136px;
  position: absolute;
}
```

### HTML

The HTML is quite simple:

```html
<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Top left</div>
  <div id="box2" style="left:133px;top:0px;">Top right</div>
  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>
```

This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger `<div>` block whose primary purpose is to receive click events and dispatch them to our JavaScript code.

### The JavaScript code

This code handles the click event when the container receives a mouse click.

```js
function rotate() {
  let prevStyle = window
    .getComputedStyle(document.getElementById("box4"), null)
    .getPropertyValue("background-image");

  // Now that we've saved the last one, start rotating
  for (let i = 1; i <= 4; i++) {
    const curId = `box${i}`;

    // Shift the background images
    const curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}
```

This uses `window.getComputedStyle()` to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By copying the values of the `background-image` property from one element to the next with each mouse click, we achieve the desired effect.

### What it looks like

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

Not part of any standard.

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

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

See also
--------

* Mozilla CSS extensions
* CSS Backgrounds and Borders module


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

border-top-left-radius
======================

The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

Try it
------

The rounding can be a circle or an ellipse, or if one of the value is `0`, no rounding is done and the corner is square.

![border-radius.png](/en-US/docs/Web/CSS/border-top-left-radius/border-radius.png)

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the `background-clip` property.

**Note:** If the value of this property is not set in a `border-radius` shorthand property that is applied to the element after the `border-top-left-radius` CSS property, the value of this property is then reset to its initial value by the shorthand property.

Syntax
------

```css
/\* the corner is a circle \*/
/\* border-top-left-radius: radius \*/
border-top-left-radius: 3px;

/\* the corner is an ellipse \*/
/\* border-top-left-radius: horizontal vertical \*/
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

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

With one value:

* the value is a `<length>` or a `<percentage>` denoting the radius of the circle to use for the border in that corner.

With two values:

* the first value is a `<length>` or a `<percentage>` denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
* the second value is a `<length>` or a `<percentage>` denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
### Values

`<length-percentage>`

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS `<length>` data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

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

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

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

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

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

```

Examples
--------

### Arc of a circle

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

<div></div>
```

```css
div {
  border-top-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### Arc of an ellipse

Two different `<length>` values produce an arc of an ellipse.
```

<div></div>
```

```css
div {
  border-top-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### Square element with percentage radius

A square element with a single `<percentage>` value produces an arc of a circle.
```

<div></div>
```

```css
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}
```

### Non-square element with percentage radius

A non-square element with a single `<percentage>` value produces an arc of an ellipse.
```

<div></div>
```

```css
div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}
```

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

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

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

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

See also
--------

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