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

The **`border-inline-start-color`** CSS property defines the color of the logical inline start 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-start-color: red;
border-inline-start-color: #ee4141;

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


Related properties are `border-block-start-color`, `border-block-end-color`, and `border-inline-end-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-start-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-start-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`, and `border-left-color`
* `writing-mode`, `direction`, `text-orientation`
CSS Houdini
===========

**CSS Houdini** is a set of APIs that expose parts of the CSS engine. This makes it easier for developers to create extensions for CSS. These extensions might be to polyfill features that are not yet available in a browser, experiment with new ways of doing layout, or add creative borders or other effects.

While many Houdini examples showcase the creative possibilities of the APIs, there are many practical use cases. For example, you can use Houdini to create advanced custom properties with type checking and default values.

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

A regular CSS custom property consists of a property name and a value. Therefore I might create a custom property called `--background-color` and expect it to be given a color value. The value is then used in the CSS as if it were the color value.


```css
:root {
  --background-color: blue;
}

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


In the above example however, there is nothing to stop someone using some other value for this property, perhaps setting it to a length. Having done so, anywhere that the property is used would have no background color as `background-color: 12px` is not valid. When browsers come across CSS they don't recognize as valid they throw that line away.

Using `@property` however, we can declare the custom property with a `syntax` of `<color>`. This shows that we need this property to have a value which is a valid color.


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

Houdini worklets
----------------

A feature of Houdini is the `Worklet`. A worklet is a module, written in JavaScript, that extends CSS using one of the Houdini APIs. You can see an example worklet on the `PaintWorkletGlobalScope.registerPaint()` page. Once a worklet has been registered you can use it in CSS just like any other value. This means that even if you are not a JavaScript developer, you can access Houdini APIs by using worklets other people have created.

The Houdini.how website has a number of worklets that you can try on your own site.

Reference
---------

### CSS at-rule and descriptors

The `@property` at-rule allows you to register an advanced custom property.

* `@property`
* `inherits`
* `initial-value`
* `syntax`
### Houdini API references

* CSS Properties and Values API
* CSS Typed Object Model API
* CSS Painting API
* `Worklet` reference
### Houdini guides

* Properties and Values API Guide
* Typed OM API Guide
* Using the CSS Painting API
External resources
------------------

* Interactive introduction to Houdini
* A Practical Overview of CSS Houdini
* Smarter custom properties with Houdini's new API
border-end-end-radius
=====================

The **`border-end-end-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode.

Try it
------

This property affects the corner between the block-end and the inline-end sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the `border-bottom-right-radius` property.

Syntax
------


```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-end-radius: 10px;
border-end-end-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-end-radius: 1em 2em;

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

### 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-end-end-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Border radius with vertical text

#### HTML


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


#### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-end-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-end-radius: 10px;
}
```


#### Result

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

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

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 property: `border-bottom-right-radius`
* `writing-mode`, `direction`, `text-orientation`
column-rule-style
=================

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

Try it
------

Syntax
------


```css
/\* <'border-style'> values \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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


The `column-rule-style` property is specified as a single `<'border-style'>` value.

### Values

`<'border-style'>`

Is a keyword defined by `border-style` describing the style of the rule. The styling must be interpreted as in the collapsing border model.

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

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

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

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

Examples
--------

### Setting a dashed column rule

#### HTML


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


#### CSS


```css
p {
  column-count: 3;
  column-rule-style: dashed;
}
```


#### Result

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

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

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

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

See also
--------

* Multiple-column Layout
* `column-rule`
* `column-rule-width`
* `column-rule-color`
initial
=======

The **`initial`** CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property, including the CSS shorthand property `all`. With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately.

On inherited properties, the initial value may be unexpected. You should consider using the `inherit`, `unset`, `revert`, or `revert-layer` keywords instead.

Examples
--------

### Using initial to reset color for an element

#### HTML


```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```


#### CSS


```css
p {
  color: red;
}

em {
  color: initial;
}
```


#### Result

With the `initial` keyword in this example, `color` value on the `em` element is restored to the initial value of `color`, as defined in the specification.

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

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

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

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

See also
--------

* 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.
* Use the `unset` keyword to set a property to its inherited value if it inherits or to its initial value if not.
* The `all` property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
:focus-within
=============

The **`:focus-within`** CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the `:focus` pseudo-class or has a descendant that is matched by `:focus`. (This includes descendants in shadow trees.)

Try it
------

This selector is useful, to take a common example, for highlighting an entire `<form>` container when the user focuses on one of its `<input>` fields.

Syntax
------


```css
:focus-within {
  /\* ... \*/
}
```

Examples
--------

In this example, the form will receive special coloring styles when either text input receives focus.

### HTML


```html
<p>Try typing into this form.</p>

<form>
  <label for="given\_name">Given Name:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Family Name:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS


```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

See also
--------

* `:focus`
* `:focus-visible`
* Grab your user's attention with the focus-within selector
::-moz-scrolled-page-sequence
=============================

**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-scrolled-page-sequence`** CSS pseudo-element is a Mozilla extension that represents the background of a print preview.

Syntax
------


```css
::-moz-scrolled-page-sequence {
  /\* ... \*/
}
```

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-page`
* `::-moz-page-sequence`
border-top-width
================

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

Try it
------

Syntax
------


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

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

/\* Global keywords \*/
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: revert-layer;
border-top-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-top-style` is `none` or `hidden` |
| Animation type | a length |

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

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

Examples
--------

### 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-top-width: thick;
}
div:nth-child(2) {
  border-top-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-bottom-width`, and `border-width`.
* The other border-top-related CSS properties: `border`, `border-top`, `border-top-style`, and `border-top-color`.
text-underline-offset
=====================

The **`text-underline-offset`** CSS property sets the offset distance of an underline text decoration line (applied using `text-decoration`) from its original position.

Try it
------

`text-underline-offset` is not part of the `text-decoration` shorthand. While an element can have multiple `text-decoration` lines, `text-underline-offset` only impacts underlining, and **not** other possible line decoration options such as `overline` or `line-through`.

Syntax
------


```css
/\* Single keyword \*/
text-underline-offset: auto;

/\* length \*/
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/\* percentage \*/
text-underline-offset: 20%;

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


The `text-underline-offset` property is specified as a single value from the list below.

### Values

`auto`

The browser chooses the appropriate offset for underlines.

`<length>`

Specifies the offset of underlines as a `<length>`, overriding the font file suggestion and the browser default. It is recommended to use `em` units so the offset scales with the font size.

`<percentage>`

Specifies the offset of underlines as a `<percentage>` of **1 em** in the element's font. A percentage inherits as a relative value, and so therefore scales with changes in the font. For a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Inherited | yes |
| Percentages | refer to the font size of the element itself |
| Computed value | as specified |
| Animation type | by computed value type |

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

text-underline-offset =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Demonstration of text-underline-offset


```html
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br />
<p class="twolines">
  This text has lines both above and below it. Only the bottom one is offset.
</p>
```



```css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # underline-offset |

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

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

See also
--------

* `text-decoration`
* `text-decoration-thickness`
Column combinator
=================

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

The **column combinator** (`||`) is placed between two CSS selectors. It matches only those elements matched by the second selector that belong to the column elements matched by the first.


```css
/\* Table cells that belong to the "selected" column \*/
col.selected||td {
  background: gray;
}
```

Syntax
------


```css
/\* The white space around the || combinator is optional but recommended. \*/
column-selector || cell-selector {
  /\* style properties \*/
}
```

Examples
--------

### HTML


```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>

    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS


```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

See also
--------

* `<col>`
* `<colgroup>`
* `grid`
* `:nth-of-type`
* `:nth-last-of-type`
flex-flow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

Try it
------

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

This property is a shorthand for the following CSS properties:

* `flex-direction`
* `flex-wrap`
Syntax
------


```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> and <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

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

### Values

See `flex-direction` and `flex-wrap` for details on the values.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| Applies to | flex containers |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `flex-direction`: as specified
* `flex-wrap`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

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

flex-flow =   
  <'flex-direction'>  ||  
  <'flex-wrap'>         
  
```

Examples
--------

### Setting column-reverse and wrap


```css
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}
```

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

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

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Ordering flex items*