recursal/MDN huggingface dataset:
border-block-end-width
======================

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

Try it
------

Syntax
------


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

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


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

### Values

`<'border-width'>`

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

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

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

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

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

Examples
--------

### Border width with vertical text

#### HTML


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


#### CSS


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

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


#### Results

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

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

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

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

See also
--------

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

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

Try it
------

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

This property is a shorthand for the following CSS properties:

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


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

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

### Values

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

`<'column-rule-width'>`

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

`<'column-rule-style'>`

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

`<'column-rule-color'>`

Is a `<color>` value.

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

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

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

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

Examples
--------

### Example 1


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

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

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

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

### Example 2

#### HTML


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


#### CSS


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


#### Result

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

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

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

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

See also
--------

* Multiple-column Layout
* `column-rule-style`
* `column-rule-width`
* `column-rule-color`
CSS box model
=============

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

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

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

### Box-edge keywords

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

`content-box`

The edge of the content area of the box.

`padding-box`

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

`border-box`

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

`margin-box`

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

`stroke-box`

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

`view-box`

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

Reference
---------

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

### Properties for controlling the margin of a box

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

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

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

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

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

Borders

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

Overflow

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

Guides
------

Introduction to the CSS box model

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

Mastering margin collapsing

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

Visual formatting model

Explains the visual formatting model.

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

| Specification |
| --- |
| CSS Box Model Module Level 3  |
:last-of-type
=============

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

Try it
------

Syntax
------


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

Examples
--------

### Styling the last paragraph

#### HTML


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


#### CSS


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


#### Result

### Nested elements

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

#### HTML


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


#### CSS


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


#### Result

### Multiple selectors elements

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

#### HTML


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


#### CSS


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

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


#### Result

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

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

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

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

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

See also
--------

* `:last-child`, `:nth-last-of-type`
math-depth
==========

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

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

Syntax
------


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

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

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

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

### Values

`auto-add`

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

`add(`<integer>`)`

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

`<integer>`

Set to the specified integer.

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

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

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

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

Examples
--------

### Specifying a math depth

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

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

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

#### HTML


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

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

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

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


#### Result

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

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

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

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

See also
--------

* `font-size`
* `math-style`
font-optical-sizing
===================

The **`font-optical-sizing`** CSS property sets whether text rendering is optimized for viewing at different sizes.

Try it
------

Syntax
------


```css
/\* keyword values \*/
font-optical-sizing: none;
font-optical-sizing: auto; /\* default \*/

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

### Values

none

The browser will not modify the shape of glyphs for optimal viewing.

auto

The browser will modify the shape of glyphs for optimal viewing.

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

Optical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by `opsz` in `font-variation-settings`.

When optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.

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

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

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

font-optical-sizing =   
  auto  |  
  none    
  
```

Examples
--------

### Disabling optical sizing


```html
<p class="optical-sizing">
  This paragraph is optically sized. This is the default across browsers.
</p>

<p class="no-optical-sizing">
  This paragraph is not optically sized. You should see a difference in
  supporting browsers.
</p>
```



```css
@font-face {
  src: url("AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: Amstelvar;
}

.no-optical-sizing {
  font-optical-sizing: none;
}
```


**Note:** The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can download it on GitHub.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-optical-sizing-def |

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

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

See also
--------

* `font-size`
* `font-size-adjust`
* Fundamental text and font styling
:user-invalid
=============

The **`:user-invalid`** CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it.

The `:user-invalid` pseudo-class must match an `:invalid`, `:out-of-range`, or blank-but `:required` element between the time the user has attempted to submit the form and before the user has interacted again with the form element.

Syntax
------


```css
:user-invalid {
  /\* ... \*/
}
```

Examples
--------

### Setting a color and symbol on :user-invalid

 In the following example, the red border and ❌ only display once the user has interacted with the field.
 Try typing something other than an email address to see it in action.


```html
<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>
```



```css
input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # user-invalid-pseudo |

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

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

See also
--------

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-valid`
resize
======

The **`resize`** CSS property sets whether an element is resizable, and if so, in which directions.

Try it
------

`resize` does not apply to the following:

* Inline elements
* Block elements for which the `overflow` property is set to `visible`
Syntax
------


```css
/\* Keyword values \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

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


The `resize` property is specified as a single keyword value from the list below.

### Values

`none`

The element offers no user-controllable method for resizing it.

`both`

The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.

`horizontal`

The element displays a mechanism for allowing the user to resize it in the *horizontal* direction.

`vertical`

The element displays a mechanism for allowing the user to resize it in the *vertical* direction.

`block` 
Experimental

The element displays a mechanism for allowing the user to resize it in the *block* direction (either horizontally or vertically, depending on the `writing-mode` and `direction` value).

`inline` 
Experimental

The element displays a mechanism for allowing the user to resize it in the *inline* direction (either horizontally or vertically, depending on the `writing-mode` and `direction` value).

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

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

resize =   
  none        |  
  both        |  
  horizontal  |  
  vertical    |  
  block       |  
  inline        
  
```

Examples
--------

### Disabling resizability of textareas

In many browsers, `<textarea>` elements are resizable by default. You may override this behavior with the `resize` property.

#### HTML


```html
<textarea>Type some text here.</textarea>
```


#### CSS


```css
textarea {
  resize: none; /\* Disables resizability \*/
}
```


#### Result

### Using resize with arbitrary elements

You can use the `resize` property to make any element resizable. In the example below, a resizable `<div>` contains a resizable paragraph (`<p>` element).

#### HTML


```html
<div class="resizable">
  <p class="resizable">
    This paragraph is resizable in all directions, because the CSS `resize`
    property is set to `both` on this element.
  </p>
</div>
```


#### CSS


```css
.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # resize |

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

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

See also
--------

* `<textarea>`
CSS lists and counters
======================

The **CSS lists and counters** module enables styling and positioning of list item bullets and manipulating their values with a combination of strings, counters, and other features.

A list item's marker, whether a bullet symbol or ordinal counter, is its defining feature. List items are not limited to `<li>` elements nested within `<ol>` or `<ul>` elements. Rather, list items are any element with `display: list-item` set.

This module defines CSS features to set and reset a list's counters, set which counter-styles or symbols to use as its markers, and position those markers. It also provides developers with the ability to create customized markers.

Reference
---------

### Properties

* `counter-increment`
* `counter-reset`
* `counter-set`
* `list-style-image`
* `list-style-type`
* `list-style-position`
* `list-style` shorthand

There is also a `marker-side` property, which is yet to be fully defined or implemented.

### Pseudo-elements

* `::marker`
### Functions

* `counter()`
* `counters()`
### Data types

* `<counter>`
* `<counter-name>`
* `<counter-style>`
Guides
------

Consistent list indentation

Explains how to achieve consistent list indentation across different browsers.

Using CSS Counters

Explains how to use the CSS counter properties to control list counters.

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

* CSS counter styles
    + `@counter-style` at-rule
    + `<counter-style-name>` data type
    + `<symbol>` data type
    + `symbols()` function
* `<ol>` `start`, `reversed`, and `type` attributes
* `<ul>` `type` attribute
* `<li>` `type` and `value` attributes
Specifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3  |

See also
--------

* CSS counter styles module
* CSS pseudo-elements module
* CSS generated content module