recursal/MDN huggingface dataset:
border-end-start-radius
=======================

The **`border-end-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius depending 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-start sides of the element. For instance, in a `horizontal-tb` writing mode with `ltr` direction, it corresponds to the `border-bottom-left-radius` property.

Syntax
------


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

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

/\* Global values \*/
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: revert;
border-end-start-radius: revert-layer;
border-end-start-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-start-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-start-radius: 10px;
}

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


#### Results

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-top-right-radius`
* `writing-mode`, `direction`, `text-orientation`
text-decoration-style
=====================

The **`text-decoration-style`** CSS property sets the style of the lines specified by `text-decoration-line`. The style applies to all lines that are set with `text-decoration-line`.

Try it
------

If the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like `<del>` or `
`. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.

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

Syntax
------


```css
/\* Keyword values \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

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

### Values

solid

Draws a single line.

double

Draws a double line.

dotted

Draws a dotted line.

dashed

Draws a dashed line.

wavy

Draws a wavy line.

-moz-none 
Non-standard

Draws no line. Use `text-decoration-line``: none` instead.

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

|  |  |
| --- | --- |
| Initial value | `solid` |
| 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-style =   
  solid   |  
  double  |  
  dotted  |  
  dashed  |  
  wavy      
  
```

Examples
--------

### Setting a wavy underline

The following creates a red wavy underline:

#### CSS


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


#### HTML


```html
<p class="wavy">This text has a wavy red line beneath it.</p>
```


#### Results

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-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.
* `text-decoration-line`
* `text-decoration-color`
* `text-decoration-thickness`
* `text-underline-offset`
Color picker tool
=================

This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats supported by CSS, including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Saturation/Lightness). Control over the alpha channel is also supported.

As you adjust the parameters that define the color, it gets displayed in all three standard Web CSS formats. In addition, based on the currently-selected color, a palette for HSL and HSV, as well as alpha, is generated. The "eyedropper" style color picker box can be toggled between HSL or HSV format. You can also test colors and how they overlap one another by dragging them into the box at the bottom of the tool and moving them over one another. Adjust their relative Z index values to move them forward and behind one another.

This tool will help you identify the perfect CSS colors to apply to your HTML.

The generated colors you create above can be used anywhere color is used in CSS and HTML, unless otherwise noted.

See also
--------

For more on using color, see:

* Applying color to HTML elements using CSS
* Fundamental text and font styling
* Styling borders using CSS
* Changing background styles using CSS
* Color and color contrast

For additional tools, see:

Border-image generator

This interactive tool lets you visually create border images (the `border-image` property).

Border-radius generator

This interactive tool lets you visually create rounded corners (the `border-radius` property).

Box-shadow generator

This interactive tool lets you visually create shadows behind elements (the `box-shadow` property).
invert()
========

The **`invert()`** CSS function inverts the color samples in the input image. Its result is a `<filter-function>`.

Try it
------

Syntax
------


```css
invert(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value of `100%` is completely inverted, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for interpolation is `0`.

Examples
--------

### Examples of correct values for invert()


```css
invert(0)     /\* No effect \*/
invert(.6)    /\* 60% inversion \*/
invert(100%)  /\* Completely inverted \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `opacity()`
* `saturate()`
* `sepia()`
saturate()
==========

The **`saturate()`** CSS function super-saturates or desaturates the input image. Its result is a `<filter-function>`.

Try it
------

Syntax
------


```css
saturate(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value under `100%` desaturates the image, while a value over `100%` super-saturates it. A value of `0%` is completely unsaturated, while a value of `100%` leaves the input unchanged. The initial value for interpolation is `1`.

Examples
--------

### Examples of correct values for saturate()


```css
saturate(0)     /\* Completely unsaturated \*/
saturate(.4)    /\* 40% saturated \*/
saturate(100%)  /\* No effect \*/
saturate(200%)  /\* Double saturation \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-saturate |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `sepia()`
grayscale()
===========

The **`grayscale()`** CSS function converts the input image to grayscale. Its result is a `<filter-function>`.

Try it
------

Syntax
------


```css
grayscale(amount)
```

### Parameters

`amount`

Amount of the input image that is converted to grayscale. It is specified as a `<number>` or a `<percentage>`. A value of `100%` changes the input completely to grayscale, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` have linear multipliers on the effect. If the `grayscale()` filter is present with no parameter, the default value is `1`. The initial value used for interpolation is `0`.

Examples
--------

### Examples of correct values for grayscale()


```css
grayscale(0)     /\* No effect \*/
grayscale(.7)    /\* 70% grayscale \*/
grayscale(100%)  /\* Completely grayscale \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-grayscale |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
* `sepia()`
sepia()
=======

The **`sepia()`** CSS function converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a `<filter-function>`.

Try it
------

Syntax
------


```css
sepia(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value of `100%` is completely sepia, while a value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for interpolation is `0`.

Examples
--------

### Examples of correct values for sepia()


```css
sepia(0)     /\* No effect \*/
sepia(.65)   /\* 65% sepia \*/
sepia(100%)  /\* Completely sepia \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-sepia |

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

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

See also
--------

The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:

* `blur()`
* `brightness()`
* `contrast()`
* `drop-shadow()`
* `grayscale()`
* `hue-rotate()`
* `invert()`
* `opacity()`
* `saturate()`
opacity()
=========

The **`opacity()`** CSS function applies transparency to the samples in the input image. Its result is a `<filter-function>`.

Try it
------

**Note:** This function is similar to the more established `opacity` property. The difference is that with filters, some browsers provide hardware acceleration for better performance.

Syntax
------


```css
opacity(amount)
```

### Parameters

`amount`

The amount of the conversion, specified as a `<number>` or a `<percentage>`. A value of `0%` is completely transparent, while a value of `100%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. The initial value for interpolation is `1`.

Examples
--------

### Examples of correct values for opacity()


```css
opacity(0%)   /\* Completely transparent \*/
opacity(50%)  /\* 50% transparent \*/
opacity(1)    /\* No effect \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-opacity |

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

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

See also
--------

* The other `<filter-function>` functions available to be used in values of the `filter` and `backdrop-filter` properties include:
    + `blur()`
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `saturate()`
    + `sepia()`
* The CSS `opacity` property
Using the :target pseudo-class in selectors
===========================================

When a URL points at a specific piece of a document, it can be difficult for the user to notice. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.

Picking a Target
----------------

The pseudo-class `:target` is used to style the target element of a URL containing a fragment identifier. For example, the URL `https://developer.mozilla.org/en-US/docs/Web/CSS#reference` contains the fragment identifier `#reference`. In HTML, identifiers are found as the values of either `id` or `name` attributes, since the two share the same namespace. Thus, the example URL would point to the heading "reference" in that document.

Suppose you wish to style any `h2` element that is the target of a URL, but do not want any other kind of element to get a target style. This is simple enough:


```css
h2:target {
  outline: 2px solid;
}
```


It's also possible to create styles that are specific to a particular fragment of the document. This is done using the same identifying value that is found in the URI. Thus, to add a background color to the `#reference` fragment, we would write:


```css
#reference:target {
  background-color: yellow;
}
```

Targeting all elements
----------------------

If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:


```css
:target {
  color: red;
}
```

Example
-------

In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause `<h1 id="one">` to become the target element. Note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.


```html
<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
```

Conclusion
----------

In cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading. By styling the target of a URI, reader confusion can be reduced or eliminated.

See also
--------

* `:target`
hwb()
=====

The **`hwb()`** functional notation expresses an sRGB color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.

Try it
------

Syntax
------


```css
hwb(194 0% 0%) /\* #00c3ff \*/
hwb(194 0% 0% / .5) /\* #00c3ff with 50% opacity \*/
```

### Values

Functional notation: `hwb(H W B[ / A])`

`H`

A `<number>`, an `<angle>`, or the keyword `none`, which represents the hue angle. More details on this type can be found on the `<hue>` reference.

`W`, `B`

Each as a `<percentage>` or the keyword `none`, which represent whiteness and blackness, respectively. They specify the amount of white and black to mix in, from `0%` (no whiteness or blackness) to `100%` (full whiteness or blackness).

If `W + B = 100%`, it defines some shade of gray. If `W + B > 100%`, `W` and `B` are effectively normalized as `W / (W + B)` and `B / (W + B)`, respectively.

`A` Optional

An `<alpha-value>` or the keyword `none`, where the number `1` corresponds to `100%` (full opacity).


**Note:** This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.

**Note:** See Missing color components for the effect of `none`.

### Formal syntax
```

<hwb()> =   
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )    
  
<hue> =   
  <number>  |  
  <angle>     
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # the-hwb-notation |

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

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

See also
--------

* `<color>`: For a list of all color notations
* `<hue>`: the data type representing a hue angle of a color
device-cmyk()
=============

The **`device-cmyk()`** functional notation is used to express CMYK colors in a device dependent way, specifying the cyan, magenta, yellow, and black components.

This approach to color is useful when creating material to be output to a particular printer, when the output for particular ink combinations is known. CSS processors may attempt to approximate the color, however the end result is likely to be different to the printed result.

Syntax
------


```css
device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);
device-cmyk(0 81% 81% 30% / .5, rgb(178 34 34));
```

### Values

Functional notation: `device-cmyk(C M Y K[ / A][, color])`

`C`, `M`, `Y`, `K`

`<number>` or `<percentage>` values providing the cyan, magenta, yellow, and black components of CMYK color.

`A` Optional

An `<alpha-value>`, where the number `1` corresponds to `100%` (full opacity).

`color` Optional

An optional fallback `<color>` to use if the user agent does not know how to translate the CMYK color to RGB.

### Formal syntax
```

<device-cmyk()> =   
  <legacy-device-cmyk-syntax>  |  
  <modern-device-cmyk-syntax>    
  
<legacy-device-cmyk-syntax> =   
  device-cmyk( <number>#{4} )    
  
<modern-device-cmyk-syntax> =   
  device-cmyk( <cmyk-component>{4} [ / [ <alpha-value> | none ] ]? )    
  
<cmyk-component> =   
  <number>      |  
  <percentage>  |  
  none            
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Color Module Level 5 # device-cmyk |

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

There is no browser implementing this feature.
color-contrast()
================

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

The **`color-contrast()`** functional notation takes a `color` value and compares it to a list of other `color` values, selecting the one with the highest contrast from the list.

Syntax
------


```css
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
```

### Values

Functional notation: `color-contrast(color vs color-list)`

`color`

Any valid `<color>`.

`vs`

A literal token as a component of the syntax.

`color-list`

A comma-separated list of at least two color values to compare with the first value.

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

| Specification |
| --- |
| CSS Color Module Level 6 # colorcontrast |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
rgb()
=====

The **`rgb()`** functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

**Note:** The legacy `rgba()` syntax is an alias for `rgb()`, accepting the same parameters and behaving in the same way.

Try it
------

Syntax
------


```css
rgb(255 255 255)
rgb(255 255 255 / 50%)
```


The function also accepts a legacy syntax in which all values are separated with commas.

### Values

Functional notation: `rgb(R G B[ / A])`

`R`, `G`, `B`

Each as a `<number>` between `0` and `255`, a `<percentage>` between `0%` and `100%`, or the keyword `none`, which represent the red, green, and blue channels, respectively.

`A` Optional

An `<alpha-value>` or the keyword `none`, where the number `1` corresponds to `100%` (full opacity).


**Note:** This functional notation serializes to sRGB values, and the values of the red, green, blue components may be rounded in serialization.

**Note:** See Missing color components for the effect of `none`.

### Formal syntax
```

<rgb()> =   
  <legacy-rgb-syntax>  |  
  <modern-rgb-syntax>    
  
<legacy-rgb-syntax> =   
  rgb( <percentage>#{3} , <alpha-value>? )  |  
  rgb( <number>#{3} , <alpha-value>? )        
  
<modern-rgb-syntax> =   
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

Examples
--------

### Legacy syntax: comma-separated values

For legacy reasons, the `rgb()` function accepts a form in which all values are separated using commas.

#### HTML


```html
<div class="space-separated"></div>
<div class="comma-separated"></div>
```


#### CSS


```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 50%);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}
```


#### Result

### Legacy syntax: rgba()

The legacy `rgba()` syntax is an alias for `rgb()`.

#### HTML


```html
<div class="rgb"></div>
<div class="rgba"></div>
```


#### CSS


```css
div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.rgb {
  background-color: rgb(255 0 0 / 50%);
}

div.rgba {
  background-color: rgba(255 0 0 / 0.5);
}
```


#### Result

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

| Specification |
| --- |
| CSS Color Module Level 4 # rgb-functions |

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

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

See also
--------

* The `<color>` data type for a list of all color notations