recursal/MDN huggingface dataset:
border-right-color
==================

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

Try it
------

Syntax
------


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

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


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

### Values

`<color>`

The color of the right border.

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

|  |  |
| --- | --- |
| Initial value | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | computed color |
| Animation type | a color |

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

border-right-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### A simple div with a border

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### Result

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

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

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

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

See also
--------

* The border-related CSS shorthand properties: `border`, `border-right`, and `border-color`.
* The color-related CSS properties for the other borders: `border-left-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-right-style` and `border-right-width`.
* The default `currentcolor` color value.
Descendant combinator
=====================

The **descendant combinator** — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called *descendant selectors*.


```css
/\* List items that are descendants of the "my-things" list \*/
ul.my-things li {
  margin: 2em;
}
```


The descendant combinator is technically one or more CSS white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.

Syntax
------


```css
selector1 selector2 {
  /\* property declarations \*/
}
```

Examples
--------

### CSS


```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML


```html
<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

See also
--------

* Child combinator
path()
======

The **`path()`** CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn.

Try it
------

Syntax
------

When used in `offset-path` or `d`:


```css
path(<string>)
```


When used in `clip-path`:


```css
path([<'fill-rule'>,]?<string>)
```

### Parameters

`<fill-rule>` Optional

An optional value of `nonzero` (the default when omitted) or `evenodd`, which specifies the filling rule.

`<string>`

A data string for defining an SVG path. The syntax for the contents of this `<string>` is identical to SVG.

### Return value

Returns a `<basic-shape>` value.

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

<path()> =   
  path( <'fill-rule'>? , <string> )    
  
```

Examples
--------

### Examples of correct values for path()


```css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
```

### Use as the value of offset-path

The `path()` function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.

### Modify the value of the SVG path d attribute

The `path()` can be used to modify the value of the SVG `d` attribute, which can also be set to `none` in your CSS.

The "V" symbol will flip vertically when you hover over it, if `d` is supported as a CSS property.

#### CSS


```css
html,
body,
svg {
  height: 100%;
}

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}
```


#### HTML


```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>
```


#### Result

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # funcdef-basic-shape-path |

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

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

See also
--------

* `<shape-outside>`
* CSS Shapes
* Overview of CSS Shapes
* SVG Path Syntax Illustrated Guide
::spelling-error
================

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

The **`::spelling-error`** CSS pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.

Allowable properties
--------------------

Only a small subset of CSS properties can be used in a rule with `::spelling-error` in its selector:

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` and its longhands
* `text-decoration` and its associated properties
* `text-emphasis-color`
* `text-shadow`
Syntax
------


```css
::spelling-error {
  /\* ... \*/
}
```

Examples
--------

### Simple document spell check

In this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.

#### HTML


```html
<p contenteditable spellcheck="true">
  My friends are coegdfgfddffbgning to the party tonight.
</p>
```


#### CSS


```css
::spelling-error {
  text-decoration: wavy red;
}
```


#### Result

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

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

See also
--------

* `::grammar-error`
text-decoration-line
====================

The **`text-decoration-line`** CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.

Try it
------

When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead.

Syntax
------


```css
/\* Single keyword \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/\* Multiple keywords \*/
text-decoration-line: underline overline; /\* Two decoration lines \*/
text-decoration-line: overline underline line-through; /\* Multiple decoration lines \*/

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


The `text-decoration-line` property is specified as `none`, or **one or more** space-separated values from the list below.

### Values

`none`

Produces no text decoration.

`underline`

Each line of text has a decorative line beneath it.

`overline`

Each line of text has a decorative line above it.

`line-through`

Each line of text has a decorative line going through its middle.

`blink` 
Deprecated

The text blinks (alternates between visible and invisible). Conforming user agents may not blink the text. This value is **deprecated** in favor of CSS animations.

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

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

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

text-decoration-line =   
  none                                                |  
  [ underline || overline || line-through || blink ]    
  
```

Examples
--------

### Basic example


```html
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
```



```css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-line-property |

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

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

See also
--------

* When setting multiple line-decoration properties at once, it may be more convenient to use the `text-decoration` shorthand property instead, which also includes:
    + `text-decoration-style`
    + `text-decoration-color`
    + `text-decoration-thickness`
* `text-underline-offset`
widows
======

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

In typography, a *widow* is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.)

Syntax
------


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

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

### Values

`<integer>`

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

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

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

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

widows =   
  <integer [1,∞]>    
  
```

Examples
--------

### Controlling column widows

#### HTML


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


#### CSS


```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

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


#### Result

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

See also
--------

* `orphans`
* Paged media
abs()
=====

The **`abs()`** CSS function returns the absolute value of the argument, as the same type as the input.

Syntax
------


```css
/\* property: abs(expression) \*/
width: abs(20% - 100px);
```

### Parameters

The `abs(x)` function accepts only one value as its parameter.

`x`

A calculation which resolves to a number.

### Return value

The absolute value of `x`.

* if `x`'s numeric value is positive or `0⁺`, return `x`.
* Otherwise, returns `-1 * x`.
### Formal syntax
```

<abs()> =   
  abs( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Examples
--------

### Positive variables

The `abs()` function can be used to ensure that a value is always positive. In the following example a CSS custom property `--font-size` is used as the value of `font-size`. Wrapping this custom property in `abs()` will convert a negative value to a positive one.


```css
h1 {
  font-size: abs(var(--font-size));
}
```

### Control gradient angle of direction

You can also control the gradient direction using `abs()` function. In the following example, with an angle of -45deg the gradient would start red and transition to blue. By using `abs()` to make the value positive, the gradient will start blue and transition to red.


```css
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}
```

### Backwards compatible fallback

In older browsers that lack the support for CSS `abs()` function, you can use the CSS `max()` function to achieve the same result, as shown below:


```css
p {
  line-height: max(var(--lh), -1 * var(--lh));
}
```


We use the `max()` function to return the largest (most positive) value from a list of two values: `var(--lh)` or `-1 * var(--lh)`. Irrespective of whether `--lh` is positive or negative, the calculated return value will always be positive, that is, an absolute number.

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # sign-funcs |

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

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

See also
--------

* `sign()`
box-direction
=============

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Warning:** This is a property of the original CSS Flexible Box Layout Module draft, and has been replaced by a newer standard. The `-moz-box-direction` will only be used for XUL while the previous standard `box-direction` has been replaced by `flex-direction`. See flexbox for information about the current standard.

The **`box-direction`** CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

Syntax
------


```css
/\* Keyword values \*/
box-direction: normal;
box-direction: reverse;

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


The `box-direction` property is specified as one of the keyword values listed below.

### Values

`normal`

The box lays out its contents from the start (the left or top edge).

`reverse`

The box lays out its contents from the end (the right or bottom edge).

Notes
-----

The edge of the box designated the *start* for layout purposes depends on the box's orientation:

* For horizontal elements, the *start* is the top edge.
* For vertical elements, the *start* is the left edge.

The edge opposite to the start is designated the *end*.

If the direction is set using the element's `dir` attribute, then the style is ignored.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | elements with a CSS `display` value of `box` or `inline-box` |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |

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

box-direction =
  normal | reverse | inherit
```

Examples
--------

### Setting box direction


```css
.example {
  /\* bottom-to-top layout \*/
  -moz-box-direction: reverse; /\* Mozilla \*/
  -webkit-box-direction: reverse; /\* WebKit \*/
  box-direction: reverse; /\* As specified \*/
}
```

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

* `box-orient`
* `box-pack`
* `box-align`
* `flex-direction`
border-right-width
==================

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

Try it
------

Syntax
------


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

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

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

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

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

Examples
--------

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

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

Try it
------

Syntax
------


```css
/\* <'border-style'> values \*/
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: groove;

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


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

### Values

`<'border-style'>`

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

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

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

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

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

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: 5px solid blue;
  border-inline-start-style: dashed;
}
```

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

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

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-style`, `border-right-style`, `border-bottom-style`, or `border-left-style`.
* `writing-mode`, `direction`, `text-orientation`