recursal/MDN huggingface dataset:
border-inline
=============

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

Try it
------

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

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

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

This property is a shorthand for the following CSS properties:

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


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

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

### Values

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

`<'border-width'>`

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

`<'border-style'>`

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

`<color>`

The color of the border.

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

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

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

border-inline =   
  <'border-block-start'>    
  
```

Examples
--------

### Border with vertical text

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  border-inline: 5px dashed blue;
}
```


#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-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
* This property maps to one of the physical border properties: `border-top`, `border-right`, `border-bottom`, or `border-left`.
* `writing-mode`, `direction`, `text-orientation`
::-webkit-meter-bar
===================

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

The **`::-webkit-meter-bar`** CSS pseudo-element is a WebKit extension that represents the meter bar in a `<meter>` element. It is used for selecting and applying styles to the container meter gauge.

Syntax
------


```css
::-webkit-meter-bar {
  /\* ... \*/
}
```

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

Not part of any standard.

Examples
--------

### HTML


```html
Normal: <meter min="0" max="10" value="6">Score 6/10</meter>
<br />
Styled: <meter id="styled" min="0" max="10" value="6">Score 6/10</meter>
```

### CSS


```css
body {
  font-family: monospace;
}

.safari meter {
  /\* Reset the default appearance for Safari only \*/
  /\* .safari class is added via JavaScript \*/
  -webkit-appearance: none;
}

#styled::-webkit-meter-bar {
  background: #eee;
  box-shadow: 0 2px 3px rgb(0 0 0 / 20%) inset;
  border-radius: 3px;
}
```

### JavaScript


```js
// Safari requires <meter> elements to have an `appearance` of `none` for custom styling
// using `::-webkit-meter-\*` selectors, but `appearance: none` breaks rendering on Chrome.
// Therefore, we must check if the browser is Safari-based.

const is_safari =
  navigator.userAgent.includes("AppleWebKit/") &&
  !navigator.userAgent.includes("Chrome/");

if (is_safari) {
  document.body.classList.add("safari");
}
```

### Result

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

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

See also
--------

* The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` element are as follows:
    + `::-webkit-meter-inner-element`
    + `::-webkit-meter-even-less-good-value`
    + `::-webkit-meter-optimum-value`
    + `::-webkit-meter-suboptimum-value`
* WebKit CSS extensions
border-bottom-style
===================

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

Try it
------

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

Syntax
------


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

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


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

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

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

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

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

Examples
--------

### Demonstrating all border styles

#### HTML


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


#### CSS


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

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


#### Result

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

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

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

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

See also
--------

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

The **`:disabled`** CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

Try it
------

Syntax
------


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

Examples
--------

This example shows a basic shipping form. It uses the JavaScript `change` event to let the user enable/disable the billing fields.

### HTML


```html
<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Address" />
    <input type="text" placeholder="Zip Code" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing-checkbox">Same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Name" disabled />
    <input type="text" placeholder="Address" disabled />
    <input type="text" placeholder="Zip Code" disabled />
  </fieldset>
</form>
```

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript


```js
// Wait for the page to finish loading
document.addEventListener(
  "DOMContentLoaded",
  () => {
    // Attach `change` event listener to checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // Select the billing text fields
  const billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Toggle the billing text fields
  billingItems.forEach((item) => {
    item.disabled = !item.disabled;
  });
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

See also
--------

* `:enabled`
Specified value
===============

The **specified value** of a CSS property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules:

1. If the document's style sheet explicitly specifies a value for the property, the given value will be used.
2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.
3. If none of the above pertain, the element's initial value will be used.
Examples
--------

### HTML


```html
<p>My specified color is given explicitly in the CSS.</p>

<div>
  The specified values of all my properties default to their initial values,
  because none of them are given in the CSS.
</div>

<div class="fun">
  <p>
    The specified value of my font family is not given explicitly in the CSS, so
    it is inherited from my parent. However, the border is not an inheriting
    property.
  </p>
</div>
```

### CSS


```css
.fun {
  border: 1px dotted pink;
  font-family: fantasy;
}

p {
  color: green;
}
```

### Result

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

See also
--------

* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
CSS transitions
===============

The **CSS transitions** module lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their easing function, duration, and other attributes.

Reference
---------

### Properties

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
### At rules

* `@starting-style`
Guides
------

Using CSS transitions

Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other.

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

| Specification |
| --- |
| CSS Transitions  |

See also
--------

* Related to CSS transitions, CSS animations provide finer control over animated properties.
:-moz-broken
============

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

The **`:-moz-broken`** CSS pseudo-class is a Mozilla extension that matches elements representing broken image links.

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

Syntax
------


```css
:-moz-broken {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<img src="broken.jpg" alt="This image is broken. :-(" />
```

### CSS


```css
:-moz-broken {
  background: bisque;
  padding: 8px;
}
```

### Result

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

Not part of any standard.

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

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

See also
--------

* `:-moz-loading`, `:-moz-suppressed`, `:-moz-user-disabled`
* Firefox bug 11011
<hex-color>
===========

The **`<hex-color>`** CSS data type is a notation for describing the *hexadecimal color syntax* of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.

A `<hex-color>` value can be used everywhere where a `<color>` can be used.

Syntax
------
```

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax
```

### Value

`R` or `RR`

The *red* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `1` means `11`.

`G` or `GG`

The *green* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `c` means `cc`.

`B` or `BB`

The *blue* component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `9` means `99`.

`A` or `AA` Optional

The *alpha* component of the color, indicating its transparency, as a case-insensitive hexadecimal number between `0` and `ff` (255). If there is only one number, it is duplicated: `e` means `ee`. `0`, or `00`, represents a fully transparent color, and `f`, or `ff`, a fully opaque one.


**Note:** The syntax is case-insensitive: `#00ff00` is the same as `#00FF00`.

Examples
--------

### Hexadecimal syntax for a fully opaque hot pink

#### HTML


```html
<span>
  #f09
  <div class="c1"></div>
</span>
<span>
  #F09
  <div class="c2"></div>
</span>
<span>
  #ff0099
  <div class="c3"></div>
</span>
<span>
  #FF0099
  <div class="c4"></div>
</span>
```


#### CSS
```

body {
  display: flex;
  justify-content: space-evenly;
}
```



```css
div {
  width: 40px;
  height: 40px;
}
.c1 {
  background: #f09;
}
.c2 {
  background: #f09;
}
.c3 {
  background: #ff0099;
}
.c4 {
  background: #ff0099;
}
```


#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # hex-notation |

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

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

See also
--------

* `<color>`: the color data type
* `rgb()`: the function allowing to set the three components of the color, as well as its transparency, using decimal values
* CSS color module
:right
======

The **`:right`** CSS pseudo-class, used with the `@page` at-rule, represents all right-hand pages of a printed document.


```css
/\* Selects any right-hand pages when printing \*/
@page :right {
  margin: 2in 3in;
}
```


Whether a given page is "left" or "right" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page; if it has a major writing direction of right-to-left then it will be a `:left` page.

**Note:** This pseudo-class can be used to change only the `margin`, `padding`, `border`, and `background` properties of the *page box*. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.

Syntax
------


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

Examples
--------

### Setting margins for right-hand pages


```css
@page :right {
  margin: 2in 3in;
}
```

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

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

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

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

See also
--------

* `@page`
* Other page-related pseudo-classes: `:first`, `:left`
CSS paged media
===============

The **CSS paged media** module defines the properties that control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements.

Reference
---------

### Properties

* `break-after`
* `break-before`
* `break-inside`
* `orphans`
* `widows`
### At-rules

* `@page`
### Pseudo-classes

* `:blank`
* `:first`
* `:left`
* `:right`
Specifications
--------------

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |

See also
--------

* Printing guide
* CSS media queries module
overflow-anchor
===============

The **`overflow-anchor`** CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.

Scroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
overflow-anchor: auto;
overflow-anchor: none;

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

### Values

`auto`

The element becomes a potential anchor when adjusting scroll position.

`none`

The element won't be selected as a potential anchor.

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

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

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

overflow-anchor =   
  auto  |  
  none    
  
```

Examples
--------

### Prevent scroll anchoring

To prevent scroll anchoring in a document, use the `overflow-anchor` property.


```css
\* {
  overflow-anchor: none;
}
```

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

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

See also
--------

* Guide to scroll anchoring
CSS overscroll behavior
=======================

The **CSS overscroll behavior** module provides properties to control the behavior of a scroll container when its scroll position reaches the scroll boundary. Controlling this aspect is particularly useful in scenarios where embedded scrollable areas should not trigger scrolling of the parent container.

When commenting on a blog, you might notice that if your comment exceeds the length of the provided `<textarea>`, scrolling beyond the end of the text area causes the entire blog to scroll. This is because reaching the end of a scrollable area, known as the scroll boundary, can lead to scrolling other content or the entire page. This continuous scrolling experience is called scroll chaining.

In situations where the contents of an element are larger than its container and `overflow` allows or defaults to scrolling (like in `<textarea>`), continued scrolling past the element's scrollable area will initiate scrolling in the parent element or the underlying page.

Conversely, scrolling through a website's terms and conditions and reaching the end of the content to enable a checkbox, may not force the page to scroll or bounce (as on a phone). This example shows that you can control overscroll behavior and prevent scroll chaining.

This module defines the overscroll behavior, enabling you to specify the actions when a user scrolls beyond the boundaries of a scrollable element.

Reference
---------

### CSS properties

* `overscroll-behavior` shorthand
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `overscroll-behavior-x`
* `overscroll-behavior-y`
### Glossary terms

* Scroll boundary
* Scroll chaining
Guides
------

CSS building blocks: Overflowing content

Learn what overflow is and how to manage it.

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

* `scrollbar` ARIA role
* Containing block concept
* CSS overflow module:
    + `overflow` shorthand property
        - `overflow-x`
        - `overflow-y`
        - `overflow-block`
        - `overflow-inline`
    + `overflow-clip-margin` property
    + `scroll-behavior` property
    + `text-overflow` property
* Scroll container and scrollport glossary terms
* CSS scroll snap module:
    + `scroll-padding` shorthand property
    + `scroll-snap-type` property
    + `scroll-margin` shorthand property
    + `scroll-snap-stop` property
    + `scroll-snap-align` property
* CSSOM view module:
    + `Element.getBoundingClientRect()` method
    + `Element.scroll()` method
    + `Element.scrollBy()` method
    + `Element.scrollIntoView()` method
    + `Element.scrollTo()` method
    + `scroll` Document event
Specifications
--------------

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1  |

See also
--------

* CSS box model module
* CSS logical properties and values module
* CSS scroll snap module
* Take control of your scroll - customizing pull-to-refresh and overflow effects on developer.chrome.com (2017)