recursal/MDN huggingface dataset:
border-block-style
==================

The **`border-block-style`** CSS property defines the style of the logical block borders 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` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

Try it
------

The border style in the other dimension can be set with `border-inline-style`, which sets `border-inline-start-style`, and `border-inline-end-style`.

Syntax
------


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

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

### 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-block-style =   
  <'border-top-style'>{1,2}    
  
```

Examples
--------

### Dashed border with vertical text

#### 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-block-style: dashed;
}
```


#### Results

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-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`
CSS flow layout
===============

*Normal Flow*, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout. The flow is essentially a set of things that are all working together and know about each other in your layout. Once something is taken *out of flow* it works independently.

In normal flow, **inline** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. **Block** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.

Basic Example
-------------

The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.

The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.

Guides
------

* Block and Inline Layout in Normal Flow
* In Flow and Out of Flow
* Formatting Contexts Explained
* Flow Layout and Writing Modes
* Flow Layout and Overflow
Reference
---------

### Glossary Entries

* Block (CSS)
margin-block-start
==================

The **`margin-block-start`** CSS property defines the logical block start 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-start: 10px; /\* An absolute length \*/
margin-block-start: 1em; /\* relative to the text size \*/
margin-block-start: 5%; /\* relative to the nearest block container's width \*/

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

/\* Global values \*/
margin-block-start: inherit;
margin-block-start: initial;
margin-block-start: revert;
margin-block-start: revert-layer;
margin-block-start: 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-end`, `margin-inline-start`, and `margin-inline-end`, which define the other margins of the element.

### Values

The `margin-block-start` 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-start =   
  <'margin-top'>    
  
```

Examples
--------

### Setting block start 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-lr;
  margin-block-start: 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`
::part()
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`::part`** CSS pseudo-element represents any element within a shadow tree that has a matching `part` attribute.


```css
custom-element::part(foo) {
  /\* Styles to apply to the `foo` part \*/
}
```

Syntax
------


```css
::part(<ident>+) {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<template id="tabbed-custom-element">
  <style>
 \*,
 ::before,
 ::after {
 box-sizing: border-box;
 padding: 1rem;
 }
 :host {
 display: flex;
 }
 </style>
  <div part="tab active">Tab 1</div>
  <div part="tab">Tab 2</div>
  <div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>
```

### CSS


```css
tabbed-custom-element::part(tab) {
  color: #0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0d19;
  color: #ffffff;
  border-color: #0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0d33;
  color: #ffffff;
}

tabbed-custom-element::part(tab):focus {
  box-shadow:
    0 0 0 1px #0a84ff inset,
    0 0 0 1px #0a84ff,
    0 0 0 4px rgb(10 132 255 / 30%);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}
```

### JavaScript


```js
let template = document.querySelector("#tabbed-custom-element");
globalThis.customElements.define(
  template.id,
  class extends HTMLElement {
    constructor() {
      super().attachShadow({ mode: "open" }).append(template.content);
    }
  },
);
```

### Result

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

| Specification |
| --- |
| CSS Shadow Parts # part |

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

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

See also
--------

* The `part` attribute - Used to define parts which can be selected by the `::part()` selector
* The `exportparts` attribute - Used to transitively export shadow parts from a nested shadow tree into a containing light tree.
* CSS shadow parts module
Next-sibling combinator
=======================

The **next-sibling combinator** (`+`) separates two selectors and matches the second element only if it *immediately* follows the first element, and both are children of the same parent `element`.


```css
/\* Paragraphs that come immediately after any image \*/
img + p {
  font-weight: bold;
}
```

Syntax
------


```css
/\* The white space around the + combinator is optional but recommended. \*/
former\_element + target\_element { style properties }
```

Examples
--------

### CSS


```css
li:first-of-type + li {
  color: red;
}
```

### HTML


```html
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

See also
--------

* Subsequent-sibling combinator
::-webkit-search-cancel-button
==============================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`::-webkit-search-cancel-button`** CSS pseudo-element represents a button (the "cancel button") at the edge of an `<input>` of `type="search"` which clears away the current value of the `<input>` element. This button and pseudo-element are non-standard, supported only in WebKit and Blink, hence the vendor prefix. The clear button is only shown on non-empty search `<input>` elements.

Syntax
------


```css
selector::-webkit-search-cancel-button {
  /\* ... \*/
}
```

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

* `::-webkit-search-results-button`
CSS table
=========

The **CSS table** module helps you define how to lay out table data.

Reference
---------

### Properties

* `border-collapse`
* `border-spacing`
* `caption-side`
* `empty-cells`
* `table-layout`
* `vertical-align`
Specifications
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |
border-right
============

The **`border-right`** shorthand CSS property sets all the properties of an element's right border.

Try it
------

As with all shorthand properties, `border-right` always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. Consider the following code:


```css
border-right-style: dotted;
border-right: thick green;
```


It is actually the same as this one:


```css
border-right-style: dotted;
border-right: none thick green;
```


The value of `border-right-style` given before `border-right` is ignored. Since the default value of `border-right-style` is `none`, not specifying the `border-style` part results in no border.

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

This property is a shorthand for the following CSS properties:

* `border-right-color`
* `border-right-style`
* `border-right-width`
Syntax
------


```css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

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


The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-right-width`.

`<br-style>`

See `border-right-style`.

`<color>`

See `border-right-color`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-right-width`: `medium`
* `border-right-style`: `none`
* `border-right-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Inherited | no |
| Computed value | as each of the properties of the shorthand:* `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
* `border-right-style`: as specified
* `border-right-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-right-color`: a color
* `border-right-style`: discrete
* `border-right-width`: a length
 |

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

border-right =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Examples
--------

### Applying a right border

#### HTML


```html
<div>This box has a border on the right side.</div>
```


#### CSS


```css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```


#### Results

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

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

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

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

See also
--------

* `border`
* `border-block`
* `outline`
CSS masking
===========

The **CSS masking** module that defines masking and clipping for partially or fully hiding portions of visual elements.

Reference
---------

### Properties

* `clip` 
Deprecated
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1  |
text-align-last
===============

The **`text-align-last`** CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.

Try it
------

Syntax
------


```css
/\* Keyword values \*/
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;

/\* Global values \*/
text-align-last: inherit;
text-align-last: initial;
text-align-last: revert;
text-align-last: revert-layer;
text-align-last: unset;
```

### Values

`auto`

The affected line is aligned per the value of `text-align`, unless `text-align` is `justify`, in which case the effect is the same as setting `text-align-last` to `start`.

`start`

The same as `left` if direction is left-to-right and `right` if direction is right-to-left.

`end`

The same as `right` if direction is left-to-right and `left` if direction is right-to-left.

`left`

The inline contents are aligned to the left edge of the line box.

`right`

The inline contents are aligned to the right edge of the line box.

`center`

The inline contents are centered within the line box.

`justify`

The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | block containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |

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

text-align-last =   
  auto          |  
  start         |  
  end           |  
  left          |  
  right         |  
  center        |  
  justify       |  
  match-parent    
  
```

Examples
--------

### Justifying the last line
```

<p>
  Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
  in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```


#### CSS


```css
p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}
```


#### Results

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

See also
--------

* `text-align`
font-synthesis-position
=======================

The **`font-synthesis-position`** CSS property lets you specify whether or not a browser may synthesize the subscript and superscript "position" typefaces when they are missing in a font family, while using `font-variant-position` to set the positions.

The **`font-synthesis-position`** property has no effect when using the `<sup>` and `<sub>` elements.

It is often convenient to use the shorthand property `font-synthesis` to control all typeface synthesis values.

Syntax
------


```css
/\* Keyword values \*/
font-synthesis-position: auto;
font-synthesis-position: none;

/\* Global values \*/
font-synthesis-position: inherit;
font-synthesis-position: initial;
font-synthesis-position: revert;
font-synthesis-position: revert-layer;
font-synthesis-position: unset;
```

### Values

`auto`

Indicates that a missing position typeface may be synthesized by the browser if needed.

`none`

Indicates that the synthesis of a missing position typeface by the browser is not allowed.

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

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

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

font-synthesis-position =   
  auto  |  
  none    
  
```

Examples
--------

### Disabling synthesis of position typeface

This example shows turning off synthesis of the superscript and subscript typefaces by the browser in the `Montserrat` font.

#### HTML


```html
<p>
  These are the default position <span class="super">superscript</span>,
  position <span class="sub">subscript</span>, <strong>bold</strong> and
  <em>oblique</em> typefaces.
</p>

<p class="no-syn">
  The positions <span class="super">superscript</span> and
  <span class="sub">subscript</span> typeface is turned off here but not the
  <strong>bold</strong> and <em>oblique</em> typefaces (on browsers that support
  <code>font-synthesis-position</code>).
</p>
```


#### CSS


```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

\* {
  font-family: "Montserrat", sans-serif;
}
.super {
  font-variant-position: super;
}
.sub {
  font-variant-position: sub;
}
.no-syn {
  font-synthesis-position: none;
}
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-synthesis-position |

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

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

See also
--------

* `font-synthesis` shorthand, `font-synthesis-style`, `font-synthesis-weight`
* `font-style`, `font-variant`, `font-variant-position`, `font-weight`
<length-percentage>
===================

The **`<length-percentage>`** CSS data type represents a value that can be either a `<length>` or a `<percentage>`.

Syntax
------

Refer to the documentation for `<length>` and `<percentage>` for details of the individual syntaxes allowed by this type.

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

<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### length-percentage examples

The following simple example demonstrates several properties that use `<length-percentage>` values.

#### HTML


```html
<p>You can use percentages and lengths in so many places.</p>
```


#### CSS


```css
p {
  /\* length-percentage examples \*/
  width: 75%;
  height: 200px;
  margin: 3rem;
  padding: 1%;
  border-radius: 10px 10%;
  font-size: 250%;
  line-height: 1.5em;

  /\* length examples \*/
  text-shadow: 1px 1px 1px red;
  border: 5px solid red;
  letter-spacing: 3px;

  /\* percentage example \*/
  text-size-adjust: 20%;
}
```


#### Result

### Use in calc()

Where a `<length-percentage>` is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a `calc()` expression. Therefore, all of the following values are acceptable for `width`:


```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

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

See also
--------

* `<percentage>`
* `<length>`
* CSS Values and Units
::-webkit-slider-runnable-track
===============================

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

The **`::-webkit-slider-runnable-track`** CSS pseudo-element represents the "track" (the groove in which the indicator slides) of an <input type="range">.

Syntax
------


```css
::-webkit-slider-runnable-track {
  /\* ... \*/
}
```

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

* `::-webkit-slider-thumb`
* Similar pseudo-elements used by other browsers:
    + `::-moz-range-track`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders