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

border-top-right-radius
=======================

The **`border-top-right-radius`** CSS property rounds the top-right 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-top-right-radius.png](/en-US/docs/Web/CSS/border-top-right-radius/border-top-right-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-right-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-right-radius: radius \*/
border-top-right-radius: 3px;

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

border-top-right-radius: inherit;

/\* Global values \*/
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-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-right-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-right-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-right-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-right-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-right-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-bottom-right-radius`, `border-bottom-left-radius`, and `border-top-left-radius`


unset - CSS: Cascading Style Sheets

unset
=====

The **`unset`** CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the `inherit` keyword in the first case, when the property is an inherited property, and like the `initial` keyword in the second case, when the property is a non-inherited property.

**`unset`** can be applied to any CSS property, including the CSS shorthand property `all`.

Examples
--------

### Color

`color` is an inherited property.

#### HTML

```html
<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>
```

#### CSS

```css
.foo {
  color: blue;
}

.bar {
  color: green;
}

p {
  color: red;
}

.bar p {
  color: unset;
}
```

#### Result

### Border

`border` is a non-inherited property.

#### HTML

```html
<p>This text has a red border.</p>
<div>
  <p>This text has a red border.</p>
</div>
<div class="bar">
  <p>This text has a black border (initial default, not inherited).</p>
</div>
```

#### CSS

```css
div {
  border: 1px solid green;
}

p {
  border: 1px solid red;
}

.bar p {
  border-color: unset;
}
```

#### Result

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit-initial |

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

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

See also
--------

* Use the `initial` keyword to set a property to its initial value.
* Use the `inherit` keyword to make an element's property the same as its parent.
* Use the `revert` keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
* Use the `revert-layer` keyword to reset a property to the value established in a previous cascade layer.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.


orphans - CSS: Cascading Style Sheets

orphans
=======

The **`orphans`** CSS property sets the minimum number of lines in a block container that must be shown at the *bottom* of a page, region, or column.

In typography, an *orphan* is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)

Syntax
------

```css
/\* <integer> values \*/
orphans: 2;
orphans: 3;

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

### Values

`<integer>`

The minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. The value must be positive.

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

|  |  |
| --- | --- |
| Initial value | `2` |
| Applies to | block container elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type |

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

orphans =
  <integer [1,∞]>

```

Examples
--------

### Setting a minimum orphan size of three lines

#### HTML

```html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how orphans work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```

#### CSS

```css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```

#### Result

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |

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

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

See also
--------

* `widows`
* Paged media


print-color-adjust - CSS: Cascading Style Sheets

print-color-adjust
==================

 The **`print-color-adjust`** CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
 By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.

Syntax
------

```css
print-color-adjust: economy;
print-color-adjust: exact;

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

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

### Values

`economy`

 The user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for.
 For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
 This is the default.

`exact`

 The element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better.
 The appearance of the content should not be changed except by the user's request.
 For example, a page might include a list of information with rows whose background colors alternate between white and a light grey.
 Removing the background color would decrease the legibility of the content.

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

There are a number of reasons a browser might wish to deviate from the specified appearance, such as:

* The content uses text and background colors that will be too similar on the output device for legibility purposes.
* If the output device is a printer, and to save ink, dark or extremely dense background images might be removed.
* When printing a page, the browser might want to replace light-colored text on a dark background with dark text on a white background.

 Any options the user agent offers the user to allow them to control the use of color and images will take priority over the value of `print-color-adjust`.
 In other words, there isn't any guarantee that `print-color-adjust` will do anything.
 Not only can the user override the behavior, but each user agent is allowed to decide for itself how to handle `print-color-adjust` in any given situation.

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

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

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

print-color-adjust =
  economy  |
  exact

```

Examples
--------

### Preserving low contrast

 In this example, a box is shown which uses a `background-image` and a translucent `linear-gradient()` function atop a black background color to have a dark blue gradient behind medium red text.
 For whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use `print-color-adjust: exact` to tell the browser not to make color or style adjustments to the box when rendering it.

#### CSS

```css
.my-box {
  background-color: black;
  background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
  color: #900;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}
```

#### HTML

```html
<div class="my-box">
  <p>Need more contrast!</p>
</div>
```

#### Result

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # propdef-print-color-adjust |

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

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

See also
--------

* Applying color to HTML elements using CSS
* Other color-related properties: `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, and `column-rule-color`
* `background-image`


margin-trim - CSS: Cascading Style Sheets

margin-trim
===========

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

The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container's edges.

Syntax
------

```css
margin-trim: none;
margin-trim: block;
margin-trim: block-start;
margin-trim: block-end;
margin-trim: inline;
margin-trim: inline-start;
margin-trim: inline-end;

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

### Values

`none`

Margins are not trimmed by the container.

`block`

Margins provided to the block children where they adjoin the container's edges are trimmed to zero without affecting the margins provided to the container.

`block-start`

Margin of the first block child with the container's edge is trimmed to zero.

`block-end`

Margin of last block child with the container's edge is trimmed to zero.

`inline`

Margins provided to the inline children where they adjoin the container's edges are trimmed to zero, without affecting the spacing at the beginning and end of the row.

`inline-start`

Margin between the container's edge and the first inline child is trimmed to zero.

`inline-end`

Margin between the container's edge and the last inline child is trimmed to zero.

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | Block containers and multi-column containers. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

margin-trim =
  none                                                |
  block                                               |
  inline                                              |
  [ block-start || inline-start || block-end || inline-end ]

```

Examples
--------

### Basic usage

Once support is implemented for this property, it will probably work like so:

When you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this:

```css
article {
  background-color: red;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}

article > span {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  margin-left: 30px;
}
```

The problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it:

```css
span:last-child {
  margin-right: 0;
  margin-left: 0;
}
```

It is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, `margin-trim` could fix it:

```css
article {
  margin-trim: inline-end;
  /\* … \*/
}
```

Similarly, to remove left margin with the container's edge:

```css
article {
  margin-trim: inline-start;
  /\* … \*/
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 4 # margin-trim |

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

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

See also
--------

* `margin`


row-gap - CSS: Cascading Style Sheets

row-gap
=======

The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.

Early versions of the specification called this property `grid-row-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-row-gap` as an alias for `row-gap`.

Try it
------

Syntax
------

```css
/\* <length> values \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> value \*/
row-gap: 10%;

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

### Values

`<length-percentage>`

Is the width of the gutter separating the rows. `<percentage>` values are relative to the dimension of the element.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | multi-column elements, flex containers, grid containers |
| Inherited | no |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |

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

row-gap =
  normal                     |
  <length-percentage [0,∞]>

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

```

Examples
--------

### Flex layout

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

#### Result

### Grid layout

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 150px 1fr;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

#### Result

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

See also
--------

* Related CSS properties: `column-gap`, `gap`
* Grid Layout Guide: *Basic concepts of grid layout - Gutters*


background-size - CSS: Cascading Style Sheets

background-size
===============

 The **`background-size`** CSS property sets the size of the element's background image.
 The image can be left to its natural size, stretched, or constrained to fit the available space.

Try it
------

Spaces not covered by a background image are filled with the `background-color` property, and the background color will be visible behind background images that have transparency/translucency.

Syntax
------

```css
/\* Keyword values \*/
background-size: cover;
background-size: contain;

/\* One-value syntax \*/
/\* the width of the image (height becomes 'auto') \*/
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/\* Two-value syntax \*/
/\* first value: width of the image, second value: height \*/
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/\* Multiple backgrounds \*/
background-size: auto, auto; /\* Not to be confused with `auto auto` \*/
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

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

The `background-size` property is specified in one of the following ways:

* Using the keyword values `contain` or `cover`.
* Using a width value only, in which case the height defaults to `auto`.
* Using both a width and a height value, in which case the first sets the width and the second sets the height.
 Each value can be a `<length>`, a `<percentage>`, or `auto`.

To specify the size of multiple background images, separate the value for each one with a comma.

### Values

`contain`

 Scales the image as large as possible within its container without cropping or stretching the image.
 If the container is larger than the image, this will result in image tiling, unless the `background-repeat` property is set to `no-repeat`.

`cover`

 Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely *cover* the container), leaving no empty space.
 If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

`auto`

Scales the background image in the corresponding direction such that its intrinsic proportions are maintained.

`<length>`

Stretches the image in the corresponding dimension to the specified length. Negative values are not allowed.

`<percentage>`

 Stretches the image in the corresponding dimension to the specified percentage of the *background positioning area*.
 The background positioning area is determined by the value of `background-origin` (by default, the padding box).
 However, if the background's `background-attachment` value is `fixed`, the positioning area is instead the entire viewport.
 Negative values are not allowed.

### Intrinsic dimensions and proportions

 The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio).
 These attributes are as follows:

* A bitmap image (such as JPG) always has intrinsic dimensions and proportions.
* A vector image (such as SVG) does not necessarily have intrinsic dimensions.
 If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions.
 If it has no dimensions or only one dimension, it may or may not have proportions.
* CSS `<gradient>`s have no intrinsic dimensions or intrinsic proportions.
* Background images created with the `element()` function use the intrinsic dimensions and proportions of the generating element.

**Note:** In Gecko, background images created using the `element()` function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.

Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

* **If both components of `background-size` are specified and are not `auto`:** The background image is rendered at the specified size.
* **If the `background-size` is `contain` or `cover`:** While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area.
 If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
* **If the `background-size` is `auto` or `auto auto`:**
    + If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
    + If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
    + If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if `contain` had been specified instead.
    + If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension.
     The other dimension is computed using the specified dimension and the intrinsic proportions.
    + If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.
**Note:** SVG images have a `preserveAspectRatio` attribute that defaults to the equivalent of `contain`; an explicit `background-size` causes `preserveAspectRatio` to be ignored.
* **If the `background-size` has one `auto` component and one non-`auto` component:**
    + If the image has intrinsic proportions, it's stretched to the specified dimension.
     The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
    + If the image has no intrinsic proportions, it's stretched to the specified dimension.
     The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one.
     If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.

**Note:** Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers.
 Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.

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

|  |  |
| --- | --- |
| Initial value | `auto auto` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | relative to the background positioning area |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a repeatable list |

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

background-size =
  <bg-size>#

<bg-size> =
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain

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

```

Examples
--------

### Tiling a large image

 Let's consider a large image, a 2982x2808 Firefox logo image. We want to tile four copies of this image into a 300x300-pixel element.
 To do this, we can use a fixed `background-size` value of 150 pixels.

#### HTML

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

#### CSS

```css
.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}
```

#### Result

See Resizing background images for more examples.

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

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

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

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

See also
--------

* Resizing background images
* Scaling of SVG backgrounds
* `object-fit`


CSS fonts - CSS: Cascading Style Sheets

CSS fonts
=========

The **CSS fonts** module defines font-related properties and how font resources are loaded. It lets you define the style of a font, such as its family, size and weight, and the glyph variants to use when multiple are available for a single character.

A font is a resource file containing the visual representation of characters, mapping character codes to glyphs that represent letters, numbers, punctuation and even emojis of a typeface. A font family is a group of fonts that share common design styles and font properties, with each member of the group providing different ways of displaying the glyphs, varying by stroke weight, slant, or relative width, among other attributes. A font typically represents a single style of a typeface, such as Helvetica that is Bold and Italic. A font family is the complete set of styles. Including such a font in a document or design is done by defining a separate `@font-face` declaration for each font resource.

The properties, at-rules, and descriptors of the CSS fonts module enable the downloading of multiple variations of a font. They also define the font file to use for a particular font characteristic, along with fallback instructions in case a resource fails to load. The CSS font selection mechanism describes the process of matching a given set of CSS font properties to a single font face.

The CSS fonts module also supports variable fonts. Unlike regular fonts, where each style is implemented as a separate font file, variable fonts can contain all styles within a single file. By using a single `@font-face` declaration, you can import a variable font that includes all the styles. Depending on the font, this can include a multitude of font variants. Variable fonts are a part of the OpenType font specification.

Reference
---------

### Properties

* `font` shorthand
* `font-family`
* `font-feature-settings`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-palette`
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-synthesis` shorthand
* `font-synthesis-small-caps`
* `font-synthesis-style`
* `font-synthesis-weight`
* `font-variant` shorthand
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
### At-rules and descriptors

At-rule: `@font-face`

Descriptors:

* `ascent-override`
* `descent-override`
* `font-display`
* `font-family`
* `font-feature-settings`
* `font-stretch`
* `font-style`
* `font-variation-settings`
* `font-weight`
* `line-gap-override`
* `size-adjust`
* `src`
* `unicode-range`

At-rule: `@font-feature-values`

Descriptor:

* `font-display`

At-rule: `@font-palette-values`

Descriptors:

* `base-palette`
* `font-family`
* `override-colors`

### Data types

`font-size` types:

* `<absolute-size>`
* `<relative-size>`

`font-family` type:

* `<generic-family>`

`font-feature-settings` type:

* `<feature-tag-value>`

`font-format` type:

* `<font-format>`

`font-stretch` type:

* `<font-stretch-css3>`

`font-tech` types:

* `<color-font-tech>`
* `<font-features-tech>`
* `<font-tech>`

`font-variant` types:

* `<font-variant-css2>`
* `<east-asian-variant-values>`
* `<east-asian-width-values>`

`font-variant-ligatures` types:

* `<common-lig-values>`
* `<contextual-alt-values>`
* `<discretionary-lig-values>`
* `<historical-lig-values>`

`font-variant-numeric` types:

* `<numeric-figure-values>`
* `<numeric-fraction-values>`
* `<numeric-spacing-values>`

`font-weight` type:

* `<font-weight-absolute>`
### Interfaces

* `CSSFontFaceRule`
* `CSSFontFeatureValuesRule`
* `CSSFontPaletteValuesRule`
Guides
------

Learn: Fundamental text and font styling

This beginner's learning article covers the basic fundamentals of text and font styling. It covers how to set the font weight, family, and style by using the `font` shorthand and how to align text and manage line and letter spacing.

Learn: Web fonts

This beginner's learning article explains how to use custom fonts on your web page to allow for more varied and custom text styling.

OpenType font features guide

Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — `font-feature-settings`. This article provides you with all you need to know about using OpenType font features in CSS.

Variable fonts guide

This article will help you get started with using variable fonts.

Improving font performance

This article, part of the CSS performance guide, discusses font loading, loading only the required glyphs, and defining font display behavior with the `font-display` descriptor.

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

* `letter-spacing` CSS property
* `line-height` CSS property
* `text-transform` CSS property
Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4  |

See also
--------

* CSS font loading module
* CSS font loading API
* CSS text module
* CSS writing modes module


list-style - CSS: Cascading Style Sheets

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

The **`list-style`** CSS shorthand property allows you to set all the list style properties at once.

Try it
------

The values of this property are applied to list items, including `<li>` elements and elements with ``display`: list-item;`. Because this property is inherited, it can be set on a parent element (normally `<ol>` or `<ul>`) to make the same list styling apply to all the nested items.

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

This property is a shorthand for the following CSS properties:

* `list-style-image`
* `list-style-position`
* `list-style-type`
Syntax
------

```css
/\* type \*/
list-style: square;

/\* image \*/
list-style: url("../img/shape.png");

/\* position \*/
list-style: inside;

/\* two values \*/
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/\* three values \*/
list-style: lower-roman url("img/shape.png") outside;

/\* Keyword value \*/
list-style: none;

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

The `list-style` property is specified as one, two, or three values in any order. If `list-style-type` and `list-style-image` are both set, the `list-style-type` is used as a fallback if the image is unavailable.

### Values

`list-style-type`

A `<counter-style>`, `<string>`, or `none`. If omitted in the shorthand, the default `disc` value is used. See `list-style-type`.

`list-style-image`

An `<image>` or `none`. If omitted, the default `none` value is used. See `list-style-image`.

`list-style-position`

Either `inside` or `outside`. If omitted, the default `outside` value is used. See `list-style-position`.

`none`

No list style is used.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `list-style-type`: `disc`
* `list-style-position`: `outside`
* `list-style-image`: `none`
 |
| Applies to | list items |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:* `list-style-image`: The keyword `none` or the computed <image>
* `list-style-position`: as specified
* `list-style-type`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `list-style-image`: discrete
* `list-style-position`: discrete
* `list-style-type`: discrete
 |

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

list-style =
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>

```

Examples
--------

### Setting list style type and position

#### HTML

```html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>
```

#### CSS

```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```

#### Result

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

Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a `list-style` value of `none`, unless the list is nested within the `<nav>` navigation element. This behavior is intentional and is not considered a bug.

To ensure lists are announced as lists, include `role="list"` to `<ol>` and `<ul>` elements, especially if the list is not nested in a `<nav>`. This restores list semantics without affecting the design:

```html
<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>
```

If an ARIA `role` is not an option for your code, CSS can be used instead. Adding non-empty pseudo-content such as text or images before each list item can restore list semantics, but impacts the visual appearance. Safari determines if the added pseudo-content suffices as accessible content, restoring list semantics if so. Generally, Safari considers text and images as sufficient, which is why the `content: "+ ";` shown below works (but requires additional styling to not affect the design).

```css
ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}
```

A declaration of `content: "";` (an empty string) is ignored, as are `content` values that contain only spaces, such as `content: " ";`.

These CSS workarounds should only be used when an HTML solution is unavailable, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact user experience.

* 'Fixing' Lists (2023)
* VoiceOver and list-style-type: none (2017)
* Understanding WCAG: Create content that can be presented in different ways
* Understanding success criterion 1.3.1: Info and relationships | WCAG 2.1
Specifications
--------------

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

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

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

See also
--------

* Component properties: `list-style-type`, `list-style-image`, and `list-style-position`
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module


font-variant-position - CSS: Cascading Style Sheets

font-variant-position
=====================

The **`font-variant-position`** CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in `<sub>` and `<sup>` elements.

When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

Syntax
------

```css
/\* Keyword values \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

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

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

### Values

`normal`

Deactivates alternate superscript and subscript glyphs.

`sub`

Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

`super`

Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.

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

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

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

font-variant-position =
  normal  |
  sub     |
  super

```

Examples
--------

### Setting superscript and subscript forms

#### HTML

```html
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
```

#### CSS

```css
p {
  display: inline;
}

.normal {
  font-variant-position: normal;
}

.super {
  font-variant-position: super;
}

.sub {
  font-variant-position: sub;
}
```

#### Result

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

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

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

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

See also
--------

* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji`
* `font-variant-ligatures`
* `font-variant-numeric`


:has() - CSS: Cascading Style Sheets

:has()
======

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

Newly availableSince December 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 functional **`:has()`** CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

```css
/\* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 \*/
h1:has(+ p) {
  margin-bottom: 0;
}
```

The `:has()` pseudo-class takes on the specificity of the most specific selector in its arguments the same way as `:is()` and `:not()` do.

Syntax
------

```css
:has(<relative-selector-list>) {
  /\* ... \*/
}
```

If the `:has()` pseudo-class itself is not supported in a browser, the entire selector block will fail unless `:has()` is in a forgiving selector list, such as in `:is()` and `:where()`).

The `:has()` pseudo-class cannot be nested within another `:has()`. This is because many pseudo-elements exist conditionally based on the styling of their ancestors and allowing these to be queried by `:has()` can introduce cyclic querying.

Pseudo-elements are also not valid selectors within `:has()` and pseudo-elements are not valid anchors for `:has()`.

Examples
--------

### With the sibling combinator

The `:has()` style declaration in the following example adjusts the spacing after `<h1>` headings if they are immediately followed by an `<h2>` heading.

#### HTML

```html
<section>
  <article>
    <h1>Morning Times</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>
```

#### CSS
```

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1,
h2 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150 149 149);
}
```

```css
h1,
h2 {
  margin: 0 0 1rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}
```

#### Result

This example shows two similar texts side-by-side for comparison – the left one with an `H1` heading followed by a paragraph and the right one with an `H1` heading followed by an `H2` heading and then a paragraph. In the example on the right, `:has()` helps to select the `H1` element that is immediately followed by an `H2` element (indicated by the next-sibling combinator`+`) and the CSS rule reduces the spacing after such an `H1` element. Without the `:has()` pseudo-class, you cannot use CSS selectors to select a preceding sibling of a different type or a parent element.

### With the :is() pseudo-class

This example builds on the previous example to show how to select multiple elements with `:has()`.

#### HTML

```html
<section>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <h3>8:00 am</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>
```

#### CSS
```

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150 149 149);
}

h3 {
  font-size: 0.9em;
  color: darkgrey;
}
```

```css
h1,
h2,
h3 {
  margin: 0 0 1rem 0;
}

:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}
```

#### Result

Here, the first `:is()` pseudo-class is used to select any of the heading elements in the list. The second `:is()` pseudo-class is used to pass a list of next-sibling selectors as an argument to `:has()`. The `:has()` pseudo-class helps to select any `H1`, `H2`, or `H3` element that is immediately followed by (indicated by `+`) an `H2`, `H3`, or `H4` element and the CSS rule reduces the spacing after such `H1`, `H2`, or `H3` elements.

This selector could have also been written as:

```css
:is(h1, h2, h3):has(+ h2, + h3, + h4) {
  margin: 0 0 0.25rem 0;
}
```

### Logical operations

The `:has()` relational selector can be used to check if one of the multiple features is true or if all the features are true.

By using comma-separated values inside the `:has()` relational selector, you are checking to see if any of the parameters exist. `x:has(a, b)` will style `x` if descendant `a` OR `b` exists.

By chaining together multiple `:has()` relational selectors together, you are checking to see if all of the parameters exist. `x:has(a):has(b)` will style `x` if descendant `a` AND `b` exist.

```css
body:has(video, audio) {
  /\* styles to apply if the content contains audio OR video \*/
}
body:has(video):has(audio) {
  /\* styles to apply if the content contains both audio AND video \*/
}
```

Analogy between :has() and regular expressions
----------------------------------------------

Interestingly, we can relate some CSS `:has()` constructs with the lookahead assertion in regular expressions because they both allow you to select elements (or strings in regular expressions) based on a condition without actually selecting the condition matching the element (or string) itself.

### Positive lookahead (?=pattern)

In the regular expression `abc(?=xyz)`, the string `abc` is matched only if it is immediately followed by the string `xyz`. As it is a lookahead operation, the `xyz` is not included in the match.

The analogous construct in CSS would be `.abc:has(+ .xyz)`: it selects the element `.abc` only if there is a next sibling `.xyz`. The part `:has(+ .xyz)` acts as a lookahead operation because the element `.abc` is selected and not the element `.xyz`.

### Negative lookahead (?!pattern)

Similarly, for the negative lookahead case, in the regular expression `abc(?!xyz)`, the string `abc` is matched only if it is *not* followed by `xyz`. The analogous CSS construct `.abc:has(+ :not(.xyz))` doesn't select the element `.abc` if the next element is `.xyz`.

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

| Specification |
| --- |
| Selectors Level 4 # relational |

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

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

See also
--------

* `:is()`, `:where()`, `:not()`
* CSS selectors and combinators
* CSS selector structure
* Selector list
* CSS selector module
* Locating DOM elements using selectors


scroll-timeline - CSS: Cascading Style Sheets

scroll-timeline
===============

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

The **`scroll-timeline`** CSS shorthand property is used to define a *named scroll progress timeline*, which is progressed through by scrolling a scrollable element (*scroller*) between top and bottom (or left and right). `scroll-timeline` is set on the scroller that will provide the timeline. The starting scroll position represents 0% progress and the ending scroll position represents 100% progress. If the 0% position and 100% position coincide (i.e., the scroll container has no overflow to scroll), the timeline is inactive.

`scroll-timeline` can contain two constituent values — a name for the named scroll progress timeline, and an optional scroll axis value.

The name is then referenced in an `animation-timeline` declaration to indicate the container's element that is used to drive the progress of the animation through the scrolling action.

**Note:** If the scroller does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no timeline will be created.

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

This property is a shorthand for the following CSS properties:

* `scroll-timeline-name`
* `scroll-timeline-axis`
Syntax
------

```css
/\* two values: one each for scroll-timeline-name and scroll-timeline-axis \*/
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline inline;
scroll-timeline: --custom_name_for_timeline y;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none y;
scroll-timeline: none x;

/\* one value: scroll-timeline-name \*/
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;
```

The `scroll-timeline` shorthand property can be applied to a container element as a combination of the `<scroll-timeline-name>` and `<scroll-timeline-axis>` values. At least one of the values must be specified. If both the values are specified, the order followed must be the `<scroll-timeline-name>` value followed by the `<scroll-timeline-axis>` value.

**Note:** `<scroll-timeline-name>`s must be `<dashed-ident>` values, which means they must start with `--`. This helps avoid name clashes with standard CSS keywords.

### Values

`<scroll-timeline-name>`

See `scroll-timeline-name`.

`<scroll-timeline-axis>`

See `scroll-timeline-axis`. The default value is `block`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `scroll-timeline-name`: `none`
* `scroll-timeline-axis`: `block`
 |
| Applies to | scroll containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `scroll-timeline-name`: `none` or an ordered list of identifiers
* `scroll-timeline-axis`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `scroll-timeline-name`: Not animatable
* `scroll-timeline-axis`: Not animatable
 |

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

scroll-timeline =
  [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

```

Examples
--------

### Creating a named scroll progress timeline animation

 In this example, a scroll timeline named `--squareTimeline` is defined using the `scroll-timeline-name` property on the element with the ID `container`.
 This is then applied to the animation on the `#square` element using `animation-timeline: --squareTimeline`.

#### HTML

The HTML for the example is shown below.

```html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>
```

#### CSS

 The CSS for the container sets it as the source of a scroll timeline named `--squareTimeline` using the `scroll-timeline` property.
 It also sets the scrollbar to use for the timeline as the vertical scrollbar (this is not actually needed as it is the default).

The height of the container is set to `300px`, and the container is also set to create a vertical scrollbar if it overflows (the CSS `height` rule on the `stretcher` element below does make the content overflow its container).

```css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: --squareTimeline y;
  /\* Firefox supports the older "vertical" syntax \*/
  scroll-timeline: --squareTimeline vertical;
  position: relative;
}
```

The CSS below defines a square that rotates according to the timeline provided by the `animation-timeline` property, which is set to the `--squareTimeline` timeline named above.

```css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  animation-name: rotateAnimation;
  animation-duration: 1ms; /\* Firefox requires this to apply the animation \*/
  animation-timeline: --squareTimeline;
  position: absolute;
  bottom: 0;
}

#stretcher {
  height: 600px;
  background: #dedede;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
```

 The `stretcher` CSS rule sets the block height to `600px`, which creates content that overflows the container element, thereby creating scroll bars.
 Without this element, the content would not overflow the container, there would be no scrollbar, and hence no scroll timeline to associate with the animation timeline.

#### Result

Scroll the vertical bar to see the square animate as you scroll.

The square animates as you scroll, and the animation duration when using `scroll-timeline` depends on the scroll speed (nevertheless, the `animation-duration` property has been defined so you can make out the scroll-driven animation).

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

| Specification |
| --- |
| Scroll-driven Animations # scroll-timeline-shorthand |

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

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

See also
--------

* `animation-timeline`
* `scroll-timeline-axis`, `scroll-timeline-name`
* `timeline-scope`
* CSS scroll-driven animations


border-top - CSS: Cascading Style Sheets

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

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

Try it
------

As with all shorthand properties, `border-top` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:

```css
border-top-style: dotted;
border-top: thick green;
```

It is actually the same as this one:

```css
border-top-style: dotted;
border-top: none thick green;
```

The value of `border-top-style` given before `border-top` is ignored. Since the default value of `border-top-style` is `none`, not specifying the `border-style` part results in no border.

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

This property is a shorthand for the following CSS properties:

* `border-top-color`
* `border-top-style`
* `border-top-width`
Syntax
------

```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

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

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-top-width`.

`<br-style>`

See `border-top-style`.

`<color>`

See `border-top-color`.

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

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

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

border-top =
  <line-width>  ||
  <line-style>  ||
  <color>

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

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

```

Examples
--------

### Applying a top border

#### HTML

```html
<div>This box has a border on the top side.</div>
```

#### CSS

```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

#### Results

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

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

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

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

See also
--------

* `border`
* `border-block`
* `outline`


border-spacing - CSS: Cascading Style Sheets

border-spacing
==============

The **`border-spacing`** CSS property sets the distance between the borders of adjacent cells in a `<table>`. This property applies only when `border-collapse` is `separate`.

Try it
------

The `border-spacing` value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) `border-spacing` and the relevant (top, right, bottom, or left) `padding` on the table.

**Note:** The `border-spacing` property is equivalent to the deprecated `cellspacing` attribute of the `<table>` element, except that `border-spacing` has an optional second value that can be used to set different horizontal and vertical spacing.

Syntax
------

```css
/\* <length> \*/
border-spacing: 2px;

/\* horizontal <length> | vertical <length> \*/
border-spacing: 1cm 2em;

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

The `border-spacing` property may be specified as either one or two values.

* When **one** `<length>` value is specified, it defines both the horizontal and vertical spacings between cells.
* When **two** `<length>` values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent *columns*), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent *rows*).
### Values

`<length>`

The size of the spacing as a fixed value.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | `table` and `inline-table` elements |
| Inherited | yes |
| Computed value | two absolute lengths |
| Animation type | discrete |

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

border-spacing =
  <length>{1,2}

```

Examples
--------

### Spacing and padding table cells

This example applies a spacing of `.5em` vertically and `1em` horizontally between a table's cells. Note how, along its outside edges, the table's `padding` values are added to its `border-spacing` values.

#### HTML

```html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
```

#### CSS

```css
table {
  border-spacing: 1em 0.5em;
  padding: 0 2em 1em 0;
  border: 1px solid orange;
}

td {
  width: 1.5em;
  height: 1.5em;
  background: #d2d2d2;
  text-align: center;
  vertical-align: middle;
}
```

#### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

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

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

See also
--------

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


border-inline-color - CSS: Cascading Style Sheets

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

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

Try it
------

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

Syntax
------

```css
border-inline-color: yellow;
border-inline-color: #f5f6f7;

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

### Values

`<color>`

The color of the border.

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

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

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

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

```

Examples
--------

### Border color with vertical text

#### HTML

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

#### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-color: red;
}
```

#### Results

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

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

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

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

See also
--------

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


margin-inline - CSS: Cascading Style Sheets

margin-inline
=============

The **`margin-inline`** CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `margin-inline-start`
* `margin-inline-end`
Syntax
------

```css
/\* <length> values \*/
margin-inline: 10px 20px; /\* An absolute length \*/
margin-inline: 1em 2em; /\* relative to the text size \*/
margin-inline: 5% 2%; /\* relative to the nearest block container's width \*/
margin-inline: 10px; /\* sets both start and end values \*/

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

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

This property corresponds to the `margin-top` and `margin-bottom`, or the `margin-right` and `margin-left` properties, depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

The `margin-inline` property may be specified using one or two values.

* When **one** value is specified, it applies the same margin to **both start and end**.
* When **two** values are specified, the first margin applies to the **start**, the second to the **end**.
### Values

The `margin-inline` property takes the same values as the `margin` property.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `margin-inline-start`: `0`
* `margin-inline-end`: `0`
 |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | as each of the properties of the shorthand:* `margin-inline-start`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `margin-inline-end`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length |

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

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

```

Examples
--------

### Setting inline start and end margins

#### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-inline: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}
```

#### HTML

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

#### Result

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

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

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

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

See also
--------

* CSS Logical Properties and Values
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`


transition - CSS: Cascading Style Sheets

transition
==========

The **`transition`** CSS property is a shorthand property for `transition-property`, `transition-duration`, `transition-timing-function`, `transition-delay`, and `transition-behavior`.

Try it
------

Transitions enable you to define the transition between two states of an element. Different states may be defined using pseudo-classes like `:hover` or `:active` or dynamically set using JavaScript.

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

This property is a shorthand for the following CSS properties:

* `transition-behavior`
Experimental
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
Syntax
------

```css
/\* Apply to 1 property \*/
/\* property name | duration \*/
transition: margin-right 4s;

/\* property name | duration | delay \*/
transition: margin-right 4s 1s;

/\* property name | duration | easing function \*/
transition: margin-right 4s ease-in-out;

/\* property name | duration | easing function | delay \*/
transition: margin-right 4s ease-in-out 1s;

/\* property name | duration | behavior \*/
transition: display 4s allow-discrete;

/\* Apply to 2 properties \*/
transition:
  margin-right 4s,
  color 1s;

/\* Apply to all changed properties \*/
transition: all 0.5s ease-out allow-discrete;
transition: 200ms linear 50ms;

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

The `transition` property value is specified as one of the following:

* The special value `none`, which specifies that no transitions will occur on this element. This is the default value.
* One or more single-property transitions, separated by commas.

Each single-property transition describes the transition that should be applied to a single property or all properties. It includes:

* zero or one value representing the property or properties to which the transition should apply. This can be set as:
    + A `<custom-ident>` representing a single property.
    + The special value `all`, which specifies that the transition will be applied to all properties that change as the element changes state.
    + No value, in which case a value of `all` will be inferred and the specified transition will still apply to all changing properties.
* zero or one `<easing-function>` value representing the easing function to use
* zero, one, or two `<time>` values. The first value that can be parsed as a time is assigned to the `transition-duration`, and the second value that can be parsed as a time is assigned to `transition-delay`.
* zero or one value declaring whether to start transitions for properties whose animation behavior is discrete. The value, if present, is either the keyword `allow-discrete` or the keyword `normal`.

If you specify `all` as the transition property for one single-property transition, but then specify subsequent single-property transitions with `<custom-ident>` values, those subsequent transitions will override the first one. For example:

```css
transition:
  all 200ms,
  opacity 400ms;
```

In this case, all the properties that change as the element changes state will transition with a duration of 200ms except for `opacity`, which will take 400ms to transition.

See how things are handled when lists of property values aren't the same length. In short, extra transition descriptions beyond the number of properties actually being animated are ignored.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `transition-delay`: `0s`
* `transition-duration`: `0s`
* `transition-property`: all
* `transition-timing-function`: `ease`
* `transition-behavior`: `normal`
 |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `transition-delay`: as specified
* `transition-duration`: as specified
* `transition-property`: as specified
* `transition-timing-function`: as specified
* `transition-behavior`: as specified
 |
| Animation type | Not animatable |

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

transition =
  <single-transition>#

<single-transition> =
  [ none | <single-transition-property> ]  ||
  <time>                                   ||
  <easing-function>                        ||
  <time>

<single-transition-property> =
  all             |
  <custom-ident>

<easing-function> =
  linear                          |
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                |
  ease-in                                             |
  ease-out                                            |
  ease-in-out                                         |
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             |
  step-end                               |
  steps( <integer> , <step-position>? )

<linear-stop-list> =
  [ <linear-stop> ]#

<step-position> =
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end

<linear-stop> =
  <number>               &&
  <linear-stop-length>?

<linear-stop-length> =
  <percentage>{1,2}

```

Examples
--------

### Basic example

In this example, when the user hovers over the element, there is a one-second delay before the four-second `font-size` transition occurs.

#### HTML

```html
<a class="target">Hover over me</a>
```

#### CSS

We include two `<time>` values. In the `transition` shorthand, the first `<time>` value is the `transition-duration`. The second time value is the `transition-delay`. Both default to `0s` if omitted.

```css
.target {
  font-size: 14px;
  transition: font-size 4s 1s;
}

.target:hover {
  font-size: 36px;
}
```

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

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

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

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

See also
--------

* CSS transitions module
* Using CSS transitions
* `TransitionEvent`


CSS generated content - CSS: Cascading Style Sheets

CSS generated content
=====================

The **CSS generated content** module defines how an element's content can be replaced and content can be added to a document with CSS.

Generated content can be used for content replacement, in which case the content of a DOM node is replaced with a CSS `<image>`. The CSS generated content also enables generating language-specific quotes, creating custom list item numbers and bullets, and visually adding content by generating content on select pseudo-elements as anonymous replaced elements.

### Generated content in action

The HTML for this sample is a single, empty `<div>` inside an otherwise empty `<body>`. The snowman was created with CSS images and CSS backgrounds and borders. The carrot nose was added using generated content: an empty box with a wide orange `left border` added to the `::before` pseudo-element. The text is also generated content: "only one <div>" was generated with the `content` property applied to the `::after` pseudo-element.

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

Reference
---------

### Properties

* `content`
* `quotes`

**Note:** The CSS generated content module introduces four at-risk properties that have not been implemented: `string-set`, `bookmark-label`, `bookmark-level`, and `bookmark-state`.

### Functions

The CSS generated content module introduces six yet-to-be implemented CSS functions including `content()`, `string()`, and `leader()`, and the three `<target>` functions `target-counter()`, `target-counters()`, and `target-text()`.

### Data types

* `<content-list>`
* `<content-replacement>` (see `<image>`)
* `<image>`
* `<counter>`
* `<quote>`
* `<target>`
Guides
------

"How to" guide for generated content

Learn how to add text or image content to a document using the `content` property.

Create fancy boxes with generated content

Example of styling generated content for visual effects.

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

* CSS pseudo-elements module
    + `::before` pseudo-element
    + `::after` pseudo-element
    + `::marker` pseudo-element
* CSS lists and counters module
    + `counter()` function
    + `counters()` function
    + `counter-increment` property
    + `counter-reset` property
* CSS values and units module
    + `attr()` function
    + `<string>` data type
    + `<image>` data type
Specifications
--------------

| Specification |
| --- |
| CSS Generated Content Module Level 3  |

See also
--------

* CSS pseudo-elements module
* CSS lists and counters module
* Replaced elements


:popover-open - CSS: Cascading Style Sheets

:popover-open
=============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`:popover-open`** CSS pseudo-class represents a popover element (i.e. one with a `popover` attribute) that is in the showing state. You can use this to apply style to popover elements only when they are shown.

Syntax
------

```css
:popover-open {
  /\* ... \*/
}
```

Examples
--------

By default, popovers appear in the middle of the viewport. The default styling is achieved like this in the UA stylesheet:

```css
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}
```

To override the default styles and get the popover to appear somewhere else on your viewport, you could need to override the above styles with something like this:

```css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-popover-open |

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

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

See also
--------

* Popover API
* `popover` HTML global attribute


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

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

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

Try it
------

Syntax
------

```css
border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

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

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

### Values

`<color>`

The color of the border.

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

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

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

border-inline-end-color =
  <color>     |
  <image-1D>

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

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

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

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

```

Examples
--------

### HTML

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

### CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}
```

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

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

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

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

See also
--------

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


text-wrap - CSS: Cascading Style Sheets

text-wrap
=========

The **`text-wrap`** CSS property controls how text inside an element is wrapped. The different values provide:

* Typographic improvements, for example more balanced line lengths across broken headings
* A way to turn text wrapping off completely.

**Note:** The `white-space-collapse` and `text-wrap` properties can be declared together using the `white-space` shorthand property.

Syntax
------

```css
/\* Keyword values \*/
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;

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

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

### Values

`wrap`
Experimental

Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value.

`nowrap`
Experimental

Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line.

`balance`

Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six for Chromium and ten for Firefox).

`pretty`

Results in the same behavior as `wrap`, except that the user agent will use a slower algorithm that favors better layout over speed. This is intended for body copy where good typography is favored over performance (for example, when the number of orphans should be kept to a minimum).

`stable`
Experimental

Results in the same behavior as `wrap`, except that when the user is editing the content, the lines that come before the lines they are editing remain static rather than the whole block of text re-wrapping.

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

There are 2 ways that text can flow across lines within a block of content, such as a paragraph (`<p>`) or headings (<h1>–<h6>). These are *forced line breaks*, that are controlled by the user, and *soft line breaks*, that are controlled by the browser. The `text-wrap` property can be used to prompt the browser how to control the *soft line breaks*.

The value you choose, for `text-wrap`, depends on how many lines of text you anticipate styling, whether the text is `contenteditable`, and whether you need to prioritize appearance or performance.

When the styled content will be limited to a short number of lines, such as headings, captions, and blockquotes, `text-wrap: balance` can be added to balance the number of characters on each line, enhancing layout quality and legibility. As browsers limit the number of lines impacted by this property, this value's impact on performance is negligible.

For longer sections of text, `text-wrap: pretty` can be used. Note that `pretty` has a negative effect on performance, so it should be only used for longer blocks of text when the layout is more important than speed.

The `stable` value improves user experience when used on content that is `contenteditable`. This value ensures that, as the user is editing text, the previous lines in the area being edited remain stable.

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

|  |  |
| --- | --- |
| Initial value | `wrap` |
| Applies to | text and block containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

text-wrap =
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>

```

Examples
--------

### Basic text wrap value comparison

#### HTML

```html
<h2 class="wrap" contenteditable="true">
  The default behavior; the text in the heading wraps "normally"
</h2>

<h2 class="nowrap" contenteditable="true">
  In this case the text in the heading doesn't wrap, and overflows the container
</h2>

<h2 class="balance" contenteditable="true">
  In this case the text in the heading is nicely balanced across lines
</h2>
```

### CSS

```css
.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}
```

#### Result

The text in the example is editable. Change the text, adding long words, to view how the different line and word lengths impact wrapping.

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

| Specification |
| --- |
| CSS Text Module Level 4 # text-wrap |

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

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

See also
--------

* `white-space`
* `white-space-collapse`
* CSS text module
* CSS `text-wrap: balance` on developer.chrome.com
* CSS `text-wrap: pretty` on developer.chrome.com


min-block-size - CSS: Cascading Style Sheets

min-block-size
==============

The **`min-block-size`** CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`.

If the writing mode is vertically oriented, the value of `min-block-size` relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is `min-inline-size`, which defines the other dimension of the element.

Try it
------

Syntax
------

```css
/\* <length> values \*/
min-block-size: 100px;
min-block-size: 5em;

/\* <percentage> values \*/
min-block-size: 10%;

/\* Keyword values \*/
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content;
min-block-size: fit-content(20em);

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

### Values

The `min-block-size` property takes the same values as the `min-width` and `min-height` properties.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | block-size of containing block |
| Computed value | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

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

min-block-size =
  <'min-width'>

```

Examples
--------

### Setting minimum block size for vertical text

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  min-block-size: 200px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `min-width` and `min-height`
* `writing-mode`


CSS Layout cookbook - CSS: Cascading Style Sheets

CSS Layout cookbook
===================

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

**Note:** If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

The Recipes
-----------

| Recipe | Description | Layout Methods |
| --- | --- | --- |
| Media objects | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | CSS Grid, `float` fallback, `fit-content` sizing |
| Columns | When to choose multi-column layout, flexbox or grid for your columns. | CSS Grid, Multicol, Flexbox |
| Center an element | How to center an item horizontally and vertically. | Flexbox, Box Alignment |
| Sticky footers | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | CSS Grid, Flexbox |
| Split navigation | A navigation pattern where some links are visually separated from the others. | Flexbox, `margin` |
| Breadcrumb navigation | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | Flexbox |
| List group with badges | A list of items with a badge to display a count. | Flexbox, Box Alignment |
| Pagination | Links to pages of content (such as search results). | Flexbox, Box Alignment |
| Card | A card component, which displays in a grid of cards. | Grid Layout |
| Grid wrapper | For aligning grid content within a central wrapper, while also allowing items to break out. | CSS Grid |

Contribute a Recipe
-------------------

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See the guide for adding Layout Cookbook recipes for a template and guidelines for writing your own example.


Attribute selectors - CSS: Cascading Style Sheets

Attribute selectors
===================

The CSS **attribute selector** matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.

The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case insensitive, as are spec-defined enumerated values. The case-insensitive HTML attribute values are listed in the HTML spec. For these attributes, the attribute value in the selector is case-insensitive, regardless of whether the value is invalid or the attribute for the element on which it is set is invalid.

If the attribute value is case sensitive, like `class`, `id`, and `data-*` attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like `role` and `aria-*` attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier (`i`).

```css
/\* <a> elements with a title attribute \*/
a[title] {
  color: purple;
}

/\* <a> elements with an href matching "https://example.org" \*/
a[href="https://example.org"]
{
  color: green;
}

/\* <a> elements with an href containing "example" \*/
a[href\*="example"] {
  font-size: 2em;
}

/\* <a> elements with an href ending ".org", case-insensitive \*/
a[href$=".org" i] {
  font-style: italic;
}

/\* <a> elements whose class attribute contains the word "logo" \*/
a[class~="logo"] {
  padding: 2px;
}
```

Syntax
------

`[attr]`

Represents elements with an attribute name of *attr*.

`[attr=value]`

Represents elements with an attribute name of *attr* whose value is exactly *value*.

`[attr~=value]`

Represents elements with an attribute name of *attr* whose value is a whitespace-separated list of words, one of which is exactly *value*.

`[attr|=value]`

Represents elements with an attribute name of *attr* whose value can be exactly *value* or can begin with *value* immediately followed by a hyphen, `-` (U+002D). It is often used for language subcode matches.

`[attr^=value]`

Represents elements with an attribute name of *attr* whose value is prefixed (preceded) by *value*.

`[attr$=value]`

Represents elements with an attribute name of *attr* whose value is suffixed (followed) by *value*.

`[attr*=value]`

Represents elements with an attribute name of *attr* whose value contains at least one occurrence of *value* within the string.

`[attr operator value i]`

Adding an `i` (or `I`) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

`[attr operator value s]`
Experimental

Adding an `s` (or `S`) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

Examples
--------

### Links

#### CSS

```css
a {
  color: blue;
}

/\* Internal links, beginning with "#" \*/
a[href^="#"] {
  background-color: gold;
}

/\* Links with "example" anywhere in the URL \*/
a[href\*="example"] {
  background-color: silver;
}

/\* Links with "insensitive" anywhere in the URL,
 regardless of capitalization \*/
a[href\*="insensitive" i] {
  color: cyan;
}

/\* Links with "cAsE" anywhere in the URL,
with matching capitalization \*/
a[href\*="cAsE" s] {
  color: pink;
}

/\* Links that end in ".org" \*/
a[href$=".org"] {
  color: red;
}

/\* Links that start with "https://" and end in ".org" \*/
a[href^="https://"][href$=".org"]
{
  color: green;
}
```

#### HTML

```html
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>
```

#### Result

### Languages

#### CSS

```css
/\* All divs with a `lang` attribute are bold. \*/
div[lang] {
  font-weight: bold;
}

/\* All divs without a `lang` attribute are italicized. \*/
div:not([lang]) {
  font-style: italic;
}

/\* All divs in US English are blue. \*/
div[lang~="en-us"] {
  color: blue;
}

/\* All divs in Portuguese are green. \*/
div[lang="pt"] {
  color: green;
}

/\* All divs in Chinese are red, whether
 simplified (zh-Hans-CN) or traditional (zh-Hant-TW). \*/
div[lang|="zh"] {
  color: red;
}

/\* All divs with a Traditional Chinese
 `data-lang` are purple. \*/
/\* Note: You could also use hyphenated attributes
 without double quotes \*/
div[data-lang="zh-Hant-TW"] {
  color: purple;
}
```

#### HTML

```html
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-Hans-CN">世界您好！</div>
<div lang="zh-Hant-TW">世界您好！</div>
<div data-lang="zh-Hant-TW">世界您好！</div>
```

#### Result

### HTML ordered lists

 The HTML specification requires the `type` attribute to be matched case-insensitively because it is primarily used in the `<input>` element.
 Note that if a modifier is not supported by the user agent, then the selector will not match.

#### CSS

```css
/\* Case-sensitivity depends on document language \*/
ol[type="a"]:first-child {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="i" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="I" s] {
  list-style-type: upper-alpha;
  background: grey;
}

ol[type="a" i] {
  list-style-type: upper-alpha;
  background: green;
}
```

#### HTML

```html
<ol type="A">
  <li>
    Red background for case-insensitive matching (default for the type selector)
  </li>
</ol>
<ol type="i">
  <li>Lime background if `s` modifier is supported (case-sensitive match)</li>
</ol>
<ol type="I">
  <li>Grey background if `s` modifier is supported (case-sensitive match)</li>
</ol>
<ol type="A">
  <li>
    Green background if `i` modifier is supported (case-insensitive match)
  </li>
</ol>
```

#### Result

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

| Specification |
| --- |
| Selectors Level 4 # attribute-selectors |

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

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

See also
--------

* `attr()`
* Selecting a single element: `Document.querySelector()`, `DocumentFragment.querySelector()`, or `Element.querySelector()`
* Selecting all matching elements: `Document.querySelectorAll()`, `DocumentFragment.querySelectorAll()`, or `Element.querySelectorAll()`
* Case-insensitive attribute selector values on WHATWG


border-left-color - CSS: Cascading Style Sheets

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

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

Try it
------

Syntax
------

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

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

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

### Values

`<color>`

The color of the left 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-left-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-left-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-left`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-left-style` and `border-left-width`.
* The default `currentcolor` color value.


outline-offset - CSS: Cascading Style Sheets

outline-offset
==============

The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.

Try it
------

Syntax
------

```css
/\* <length> values \*/
outline-offset: 3px;
outline-offset: 0.2em;

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

### Values

``<length>``

The width of the space between the element and its outline. A negative value places the outline inside the element. A value of `0` places the outline so that there is no space between it and the element.

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

An outline is a line that is drawn around an element, outside the border edge. The space between an element and its outline is transparent. In other words, it is the same as the parent element's background.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

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

outline-offset =
  <length>

```

Examples
--------

### Setting outline offset in pixels

#### HTML

```html
<p>Gallia est omnis divisa in partes tres.</p>
```

#### CSS

```css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}
```

#### Result

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

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

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`