recursal/MDN huggingface dataset:
mask-border-outset
==================

The **`mask-border-outset`** CSS property specifies the distance by which an element's mask border is set out from its border box.

Syntax
------


```css
/\* <length> value \*/
mask-border-outset: 1rem;

/\* <number> value \*/
mask-border-outset: 1.5;

/\* top and bottom | left and right \*/
mask-border-outset: 1 1.2;

/\* top | left and right | bottom \*/
mask-border-outset: 30px 2 45px;

/\* top | right | bottom | left \*/
mask-border-outset: 7px 12px 14px 5px;

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


The `mask-border-outset` property may be specified as one, two, three, or four values. Each value is a `<length>` or `<number>`. Negative values are invalid.

* When **one** value is specified, it applies the same outset to **all four sides**.
* When **two** values are specified, the first outset applies to the **top and bottom**, the second to the **left and right**.
* When **three** values are specified, the first outset applies to the **top**, the second to the **left and right**, the third to the **bottom**.
* When **four** values are specified, the outsets apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).
### Values

`<length>`

The size of the mask border outset as a dimension.

`<number>`

The size of the mask border outset as a multiple of the corresponding `border-width`.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `<defs>` element and all graphics elements |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | discrete |

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

mask-border-outset =   
  [ <length> | <number> ]{1,4}    
  
```

Examples
--------

### Basic usage

This property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to move the mask away from the inner edge of the element's border box — you can use it to make the mask start from part way across the border, rather than the inside of it.


```css
mask-border-outset: 1rem;
```


Chromium-based browsers support an outdated version of this property — `mask-box-image-outset` — with a prefix:


```css
-webkit-mask-box-image-outset: 1rem;
```


**Note:** The `mask-border` page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-outset |

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

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

See also
--------

* `mask-border`
* `mask-border-mode`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`
scroll-behavior
===============

The **`scroll-behavior`** CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.

Try it
------

Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead. This property specified on the `body` element will *not* propagate to the viewport.

User agents are allowed to ignore this property.

Syntax
------


```css
/\* Keyword values \*/
scroll-behavior: auto;
scroll-behavior: smooth;

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


The `scroll-behavior` property is specified as one of the keyword values listed below.

### Values

`auto`

The scrolling box scrolls instantly.

`smooth`

The scrolling box scrolls in a smooth fashion using a user-agent-defined easing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scrolling boxes |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

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

scroll-behavior =   
  auto    |  
  smooth    
  
```

Examples
--------

### Setting smooth scroll behavior

#### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>
```


#### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```


#### Result

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scroll-padding-block-start
==========================

The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
scroll-padding-block-start: auto;

/\* <length> values \*/
scroll-padding-block-start: 10px;
scroll-padding-block-start: 1em;
scroll-padding-block-start: 10%;

/\* Global values \*/
scroll-padding-block-start: inherit;
scroll-padding-block-start: initial;
scroll-padding-block-start: revert;
scroll-padding-block-start: revert-layer;
scroll-padding-block-start: unset;
```

### Values

`<length-percentage>`

An inwards offset from the block start edge of the scrollport, as a valid length or a percentage.

`auto`

The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | scroll containers |
| Inherited | no |
| Percentages | relative to the scroll container's scrollport |
| Computed value | as specified |
| Animation type | by computed value type |

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

scroll-padding-block-start =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # padding-longhands-logical |

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

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

See also
--------

* CSS scroll snap
* Well-controlled scrolling with CSS scroll snap
:empty
======

The **`:empty`** CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS `content` do not affect whether an element is considered empty.

Try it
------

**Note:** In Selectors Level 4, the `:empty` pseudo-class was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.

Syntax
------


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

Examples
--------

### HTML


```html
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>
```

### CSS
```

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



```css
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
```

### Result

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

Assistive technology such as screen readers cannot parse interactive content that is empty. All interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element (anchors, buttons, etc.). Accessible names expose the interactive control to the accessibility tree, an API that communicates information useful for assistive technologies.

The text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.

* What is an accessible name? | The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN Understanding WCAG, Guideline 2.4 explanations
* Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0
Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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

See also
--------

* `:-moz-only-whitespace` 
Non-standard
 – The prefixed implementation of the changes in Selectors Level 4
* `:blank` 
Experimental
padding-left
============

The **`padding-left`** CSS property sets the width of the padding area to the left of an element.

Try it
------

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

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

Syntax
------


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

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

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


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

### Values

`<length>`

The size of the padding as a fixed value. Must be nonnegative.

`<percentage>`

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

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |

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

padding-left =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Setting left padding using pixels and percentages


```css
.content {
  padding-left: 5%;
}
.sidebox {
  padding-left: 10px;
}
```

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

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

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

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

See also
--------

* Introduction to the CSS basic box model
* `padding-top`, `padding-right`, `padding-bottom` and the `padding` shorthand
* The mapped logical properties: `padding-block-start`, `padding-block-end`, `padding-inline-start`, and `padding-inline-end` and the shorthands `padding-block` and `padding-inline`
border-bottom-width
===================

The **`border-bottom-width`** CSS property sets the width of the bottom border of an element.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;

/\* <length> values \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

/\* Global keywords \*/
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: revert;
border-bottom-width: revert-layer;
border-bottom-width: unset;
```

### Values

`<line-width>`

Defines the width of the border, either as an explicit nonnegative `<length>` or a keyword. If it's a keyword, it must be one of the following values:

* `thin`
* `medium`
* `thick`


**Note:** Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern `thin ≤ medium ≤ thick`, and the values are constant within a single document.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | the absolute length or `0` if `border-bottom-style` is `none` or `hidden` |
| Animation type | a length |

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

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

Examples
--------

### Comparing bottom border widths

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}
```


#### Result

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

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

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

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

See also
--------

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

The **`shape-margin`** CSS property sets a margin for a CSS shape created using `shape-outside`.

Try it
------

The margin lets you adjust the distance between the edges of the shape (the **float element**) and the surrounding content.

Syntax
------


```css
/\* <length> values \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* <percentage> value \*/
shape-margin: 60%;

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

### Values

`<length-percentage>`

Sets the margin of the shape to a `<length>` value or to a `<percentage>` of the width of the element's containing block.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | floats |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length, percentage or calc(); |

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

shape-margin =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Adding a margin to a polygon

#### HTML


```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if one exists, probably
  knows its truth as we know it.
</section>
```


#### CSS


```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-margin-property |

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

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

See also
--------

* CSS Shapes
* Overview of CSS Shapes
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`
::-webkit-progress-inner-element
================================

**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-progress-inner-element`** CSS pseudo-element represents the outermost container of the `<progress>` element. It is the parent of the `::-webkit-progress-bar` pseudo-element.

**Note:** In order to let `::-webkit-progress-value` take effect, `appearance` needs to be set to `none` on the `<progress>` element.

Syntax
------


```css
::-webkit-progress-inner-element {
  /\* ... \*/
}
```

Examples
--------

These examples work only on Blink and WebKit.

### Adding a black border around the progress bar

In this example, a 2px black border is added around the progress bar.

#### HTML


```html
<progress value="10" max="50"></progress>
```


#### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}
```


#### Result

#### Result screenshot

If you're not using a Blink or WebKit browser, the above code results in a progress bar looking like this:

![Progressbar is a long green and grey box with a black border. The left 20% of the box is green. The right 80% is grey.](/en-US/docs/Web/CSS/::-webkit-progress-inner-element/-webkit-progress-inner-element_example.png)

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

* The pseudo-elements used by WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-bar`
    + `::-webkit-progress-value`
* `::-moz-progress-bar`
CSS syntax
==========

The **CSS syntax** module describes, in general terms, the structure and syntax of cascading stylesheets, or CSS. It defines CSS as the language for describing the rendering of structured documents (such as HTML and XML), on the web and elsewhere.

This module doesn't define any properties, data types, functions, or at-rules. Rather, it elaborates on how all of these features should be defined and how user agents should parse CSS.

At-rules
--------

* none

**Note:** The module explicitly states that `@charset` is not an actual at-rule, but rather an unrecognized legacy rule that should be omitted when a stylesheet is grammar-checked.

Reference
---------

### Key concepts

* `at-rule`
* character escaping
* CSS comments
* CSS declaration
* CSS declaration block
* CSS function
* invalid
* style rule
### Glossary terms

* CSS descriptor
* parse
* stylesheet
* whitespace
Guides
------

Syntax

Overview of CSS syntax, including CSS declarations, declaration blocks, rulesets, and statements.

Value definition syntax

Explains the formal grammar for defining valid values for CSS properties and functions, along with semantic constraints. A guide for understanding CSS component value types, combinators, and multipliers.

CSS syntax error handling

Overview of how the user agent handles invalid CSS.

Learn CSS first steps: CSS syntax

Introductory guide to CSS, including an introduction to CSS syntax.

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

CSS selectors module:

* CSS specificity

CSS cascade module:

* `@import` at-rule
* `important` flag
* Initial values
* Computed values
* Used values
* Actual values
* CSS inheritance
* CSS property

CSS custom properties for cascading variables module:

* custom property (`--*`)
* `var()` function

CSS conditional rules module:

* `@media` at-rule
* `@supports` at-rule

CSS Object Model (CSSOM) API:

* `cssText` property
* `insertRule(rule)` method
* `replace(text)` method

WHATWG specification:

* `<style>` element
* `<link>` element
* `class` attribute
* `rel` attribute
Specifications
--------------

| Specification |
| --- |
| Unknown specification  |

See also
--------

* CSS selectors module
* CSS values and units module
outline-width
=============

The CSS **`outline-width`** property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the `border`.

Try it
------

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

Syntax
------


```css
/\* Keyword values \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* <length> values \*/
outline-width: 1px;
outline-width: 0.1em;

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


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

### Values

`<length>`

The width of the outline specified as a `<length>`.

`thin`

Depends on the user agent. Typically equivalent to `1px` in desktop browsers (including Firefox).

`medium`

Depends on the user agent. Typically equivalent to `3px` in desktop browsers (including Firefox).

`thick`

Depends on the user agent. Typically equivalent to `5px` in desktop browsers (including Firefox).

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | all elements |
| Inherited | no |
| Computed value | an absolute length; if the keyword `none` is specified, the computed value is `0` |
| Animation type | a length |

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

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

Examples
--------

### Setting an element's outline width

#### HTML


```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```


#### CSS


```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```


#### Result

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

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

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

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

See also
--------

* `outline`
* `outline-color`
* `outline-style`