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

The **`border-inline-end-color`** CSS property defines the color of the logical inline-end 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-end-color: rebeccapurple;
border-inline-end-color: #663399;

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


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

The **`min-block-size`** CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `min-width` or the `min-height` property, depending on the value of `writing-mode`.

If the writing mode is vertically oriented, the value of `min-block-size` relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is `min-inline-size`, which defines the other dimension of the element.

Try it
------

Syntax
------


```css
/\* <length> values \*/
min-block-size: 100px;
min-block-size: 5em;

/\* <percentage> values \*/
min-block-size: 10%;

/\* Keyword values \*/
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content;
min-block-size: fit-content(20em);

/\* Global values \*/
min-block-size: inherit;
min-block-size: initial;
min-block-size: revert;
min-block-size: revert-layer;
min-block-size: unset;
```

### Values

The `min-block-size` property takes the same values as the `min-width` and `min-height` properties.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | block-size of containing block |
| Computed value | same as `min-width` and `min-height` |
| Animation type | a length, percentage or calc(); |

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

min-block-size =   
  <'min-width'>    
  
```

Examples
--------

### Setting minimum block size for vertical text

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  min-block-size: 200px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `min-width` and `min-height`
* `writing-mode`
CSS Layout cookbook
===================

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

**Note:** If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

The Recipes
-----------

| Recipe | Description | Layout Methods |
| --- | --- | --- |
| Media objects | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | CSS Grid, `float` fallback, `fit-content` sizing |
| Columns | When to choose multi-column layout, flexbox or grid for your columns. | CSS Grid, Multicol, Flexbox |
| Center an element | How to center an item horizontally and vertically. | Flexbox, Box Alignment |
| Sticky footers | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | CSS Grid, Flexbox |
| Split navigation | A navigation pattern where some links are visually separated from the others. | Flexbox, `margin` |
| Breadcrumb navigation | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | Flexbox |
| List group with badges | A list of items with a badge to display a count. | Flexbox, Box Alignment |
| Pagination | Links to pages of content (such as search results). | Flexbox, Box Alignment |
| Card | A card component, which displays in a grid of cards. | Grid Layout |
| Grid wrapper | For aligning grid content within a central wrapper, while also allowing items to break out. | CSS Grid |

Contribute a Recipe
-------------------

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See the guide for adding Layout Cookbook recipes for a template and guidelines for writing your own example.
border-left-color
=================

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

Try it
------

Syntax
------


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

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


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

### Values

`<color>`

The color of the left 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-left-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-left-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-left`, and `border-color`.
* The color-related CSS properties for the other borders: `border-right-color`, `border-bottom-color`, and `border-top-color`.
* The other border-related CSS properties applying to the same border: `border-left-style` and `border-left-width`.
* The default `currentcolor` color value.
outline-offset
==============

The **`outline-offset`** CSS property sets the amount of space between an outline and the edge or border of an element.

Try it
------

Syntax
------


```css
/\* <length> values \*/
outline-offset: 3px;
outline-offset: 0.2em;

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

### Values

``<length>``

The width of the space between the element and its outline. A negative value places the outline inside the element. A value of `0` places the outline so that there is no space between it and the element.

Description
-----------

An outline is a line that is drawn around an element, outside the border edge. The space between an element and its outline is transparent. In other words, it is the same as the parent element's background.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

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

outline-offset =   
  <length>    
  
```

Examples
--------

### Setting outline offset in pixels

#### HTML


```html
<p>Gallia est omnis divisa in partes tres.</p>
```


#### CSS


```css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}
```


#### Result

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

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

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

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

See also
--------

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
tan()
=====

The **`tan()`** CSS function is a trigonometric function that returns the tangent of a number, which is a value between `−infinity` and `infinity`. The function contains a single calculation that must resolve to either a `<number>` or an `<angle>` by interpreting the result of the argument as radians.

Syntax
------


```css
/\* Single <angle> values \*/
width: calc(100px * tan(45deg));
width: calc(100px * tan(0.125turn));
width: calc(100px * tan(0.785398163rad));

/\* Single <number> values \*/
width: calc(100px * tan(0.5773502));
width: calc(100px * tan(1.732 - 1));

/\* Other values \*/
width: calc(100px * tan(pi / 3));
width: calc(100px * tan(e));
```

### Parameter

The `tan(angle)` function accepts only one value as its parameter.

`angle`

A calculation which resolves to a `<number>` or an `<angle>`. When specifying unitless numbers they are interpreted as a number of radians, representing an `<angle>`.

### Return value

The tangent of an `angle` will always return a number between `−∞` and `+∞`.

* If `angle` is `infinity`, `-infinity`, or `NaN`, the result is `NaN`.
* If `angle` is `0⁻`, the result is `0⁻`.
* If `angle` is one of the asymptote values (such as `90deg`, `270deg`, etc.), the result is *explicitly undefined*. Authors *must not* rely on `tan()` returning any particular value for these inputs.
### Formal syntax
```

<tan()> =   
  tan( <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
--------

### Drawing parallelograms

The `tan()` function can be used to draw a parallelogram with a given bounding box.

#### HTML


```html
<div class="parallelogram"></div>
```


#### CSS
```

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
```



```css
.parallelogram {
  --w: 400;
  --h: 200;
  --angle: 30deg;
  position: relative;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
}
.parallelogram::before {
  content: "";
  position: absolute;
  width: calc(100% - 100% * var(--h) / var(--w) * tan(var(--angle)));
  height: 100%;
  transform-origin: 0 100%;
  transform: skewX(calc(0deg - var(--angle)));
  background-color: red;
}
```


#### Result

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

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

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

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

See also
--------

* `sin()`
* `cos()`
* `asin()`
* `acos()`
* `atan()`
* `atan2()`
:-moz-locale-dir(rtl)
=====================

**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-locale-dir(rtl)`** CSS pseudo-class is a Mozilla extension that matches an element if the user interface is being displayed right-to-left. This is determined by the preference `intl.uidirection.locale` (where `locale` is the current locale) being set to "rtl".

**Note:** This selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (This can vary from window to window, and even from tab to tab.) It also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics.

**Warning:** This selector does not work properly from HTML; it never matches, no matter whether the UI locale is left-to-right or right-to-left.

Syntax
------


```css
:-moz-locale-dir(rtl) {
  /\* ... \*/
}
```

Examples
--------

This example will not work if you're not using Firefox, and might not work properly even in Firefox due to an issue with using this selector in HTML.

### HTML


```html
<p>If you're using a right-to-left interface, this should be red.</p>
```

### CSS


```css
p:-moz-locale-dir(rtl) {
  color: red;
}
```

### Result

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

Not part of any standard.

See also
--------

* `:dir(…)`
* `:-moz-locale-dir(ltr)`
CSS media queries
=================

**CSS media queries** are a key component of responsive design that allow you to apply CSS styles depending on the presence or value of device characteristics.

 It's common to apply a media query based on the viewport size so that layout choices can be made for devices with different screen sizes.
 For example, you may have a smaller font size for devices with small screens, increase the padding between paragraphs when a page is viewed in portrait mode, or increase the size of buttons on touchscreens.

![A laptop and a mobile device with different viewport sizes that can be queried using media queries where we can see the content being laid out differently.](/en-US/docs/Web/CSS/CSS_media_queries/media-queries.svg)

 In CSS, use the `@media` at-rule to conditionally apply part of a style sheet based on the result of a media query.
 To conditionally apply an entire style sheet, use `@import`.

When designing reusable HTML components, you may also use container queries, which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics.

### Media queries in HTML

In HTML, media queries can be applied to various elements:

* In the `<link>` element's `media` attribute, they define the media to which a linked resource (typically CSS) should be applied.
* In the `<source>` element's `media` attribute, they define the media to which that source should be applied. (This is only valid inside `<picture>` elements.)
* In the `<style>` element's `media` attribute, they define the media to which the style should be applied.
### Media queries in JavaScript

 In JavaScript, you can use the `Window.matchMedia()` method to test the window against a media query.
 You can also use `MediaQueryList.addListener()` to be notified whenever the state of a query changes.
 With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

You can learn more about programmatically using media queries in Testing media queries.

Reference
---------

### At-rules

* `@import`
* `@media`
Guides
------

Using media queries

Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.

Testing media queries programmatically

Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).

Using media queries for accessibility

Learn how Media Queries can help users understand your website better.

Printing

Tips and techniques for helping improve web content printer output.

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

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

See also
--------

* Container queries
* Use `@supports` to apply styles that depend on browser support for various CSS technologies.
inline-size
===========

The **`inline-size`** CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the `width` or the `height` property, depending on the value of `writing-mode`.

If the writing mode is vertically oriented, the value of `inline-size` relates to the height of the element; otherwise, it relates to the width of the element. A related property is `block-size`, which defines the other dimension of the element.

Try it
------

Syntax
------


```css
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content;
inline-size: fit-content(20em);
inline-size: auto;

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

### Values

The `inline-size` property takes the same values as the `width` and `height` properties.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | same as `width` and `height` |
| Inherited | no |
| Percentages | inline-size of containing block |
| Computed value | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

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

inline-size =   
  <'width'>    
  
```

Examples
--------

### Setting inline size in pixels

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `width` and `height`
* `writing-mode`
margin-block-end
================

The **`margin-block-end`** CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Try it
------

Syntax
------


```css
/\* <length> values \*/
margin-block-end: 10px; /\* An absolute length \*/
margin-block-end: 1em; /\* relative to the text size \*/
margin-block-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-block-end: auto;

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


It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

It relates to `margin-block-start`, `margin-inline-start`, and `margin-inline-end`, which define the other margins of the element.

### Values

The `margin-block-end` property takes the same values as the `margin-left` property.

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

|  |  |
| --- | --- |
| Initial value | `0` |
| Applies to | same as `margin` |
| Inherited | no |
| Percentages | depends on layout model |
| Computed value | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

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

margin-block-end =   
  <'margin-top'>    
  
```

Examples
--------

### Setting block end margin

#### HTML


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


#### CSS


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

.exampleText {
  writing-mode: vertical-rl;
  margin-block-end: 20px;
  background-color: #c8c800;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-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 properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation`