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

The **`border-top-style`** CSS property sets the line style of an element's top `border`.

Try it
------

**Note:** The specification doesn't define how borders of different styles connect in the corners.

Syntax
------


```css
/\* Keyword values \*/
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

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


The `border-top-style` property is specified as a single `<line-style>` keyword value.

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

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

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

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

Examples
--------

### Setting border-top-style

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-top-style example classes \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-style: outset;
}
```


#### Result

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

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

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

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

See also
--------

* The other style-related border properties: `border-left-style`, `border-right-style`, `border-bottom-style`, and `border-style`.
* The other top-border-related properties: `border-top`, `border-top-color`, and `border-top-width`.
column-rule-width
=================

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

Try it
------

Syntax
------


```css
/\* Keyword values \*/
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/\* <length> values \*/
column-rule-width: 1px;
column-rule-width: 2.5em;

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


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

### Values

`<'border-width'>`

Is a keyword defined by `border-width` describing the width of the rule. It may be either a `<length>` or one of the `thin`, `medium`, or `thick` keywords.

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

|  |  |
| --- | --- |
| Initial value | `medium` |
| Applies to | multicol elements |
| Inherited | no |
| Computed value | the absolute length; `0` if the `column-rule-style` is `none` or `hidden` |
| Animation type | a length |

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

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

Examples
--------

### Setting a thick column rule

#### HTML


```html
<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width 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: solid;
  column-rule-width: thick;
}
```


#### Result

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

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

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

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

See also
--------

* Multiple-column Layout
* `column-rule-style`
* `column-rule-color`
* `column-rule`
:local-link
===========

The **`:local-link`** CSS pseudo-class represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL.


```css
/\* Selects any <a> that links to the current document \*/
a:local-link {
  color: green;
}
```

Syntax
------


```css
:local-link {
  /\* ... \*/
}
```

Examples
--------

### HTML


```html
<a href="#target">This is a link on the current page.</a><br />
<a href="https://example.com">This is an external link</a><br />
```

### CSS


```css
a:local-link {
  color: green;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # local-link-pseudo |

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

This feature is a proposal integrated into the specification. Currently, no browser supports it.

See also
--------

* Link-related pseudo-classes: `:link`, `:visited`, `:hover`, `:active`, `:any-link`
block-size
==========

The **`block-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 `block-size` relates to the width of the element; otherwise, it relates to the height of the element. A related property is `inline-size`, which defines the other dimension of the element.

Try it
------

Syntax
------


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

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

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

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

### Values

The `block-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 | block-size of containing block |
| Computed value | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

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

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

Examples
--------

### Block size with vertical text

#### HTML


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


#### CSS


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


#### 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`
CSS ruby layout
===============

The **CSS ruby layout** module provides the rendering model and formatting controls related to the display of ruby annotation. Ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.

Reference
---------

### Properties

* `ruby-align`
* `ruby-position`
Specifications
--------------

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |

See Also
--------

* `<ruby>`
:host()
=======

The **`:host()`** CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host. **`:host()`** has no effect when used outside a shadow DOM.

The most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of `:host-context()`.

**Note:** While other functional pseudo-classes such as `:is()` and `:not()` accept a list of selectors as their parameters, `:host()` takes a single compound selector as its parameter. In addition, while `:is()` and `:not()` only take into account the specificity of their argument, the specificity of `:host()` is both the specificity of the pseudo-class **and** the specificity of its argument.

Try it
------


```css
/\* Selects a shadow root host, only if it is
 matched by the selector argument \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

Syntax
------


```css
:host(<compound-selector>) {
  /\* ... \*/
}
```

Examples
--------

### Selectively styling shadow hosts

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a simple custom element — `<context-span>` — that you can wrap around text:


```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```


Inside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:


```js
const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); padding: 2px 5px; }";
```


The `:host(.footer) { color : red; }` rule styles all instances of the `<context-span>` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the `<footer>` a special color.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

See also
--------

* Web components
* `:host`
* `:host-context()`
view-transition-name
====================

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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`view-transition-name`** CSS property provides the selected element with a distinct identifying name (a `<custom-ident>`) and causes it to participate in a separate view transition from the root view transition — or no view transition if the `none` value is specified.

Syntax
------


```css
/\* <custom-ident> value examples \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* Keyword value \*/
view-transition-name: none;
```

### Values

`<custom-ident>`

A distinct identifying name that causes the selected element to participate in a separate view transition from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, `ViewTransition.ready` will reject and the transition will be skipped.

`none`

The selected element will not participate in a view transition.

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

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

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

view-transition-name =   
  none            |  
  auto            |  
  <custom-ident>    
  
```

Examples
--------


```css
figcaption {
  view-transition-name: figure-caption;
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # view-transition-name-prop |

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

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

See also
--------

* View Transitions API
* Smooth and simple transitions with the View Transitions API
::-webkit-progress-bar
======================

**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-progress-bar`** CSS pseudo-element represents the entire bar of a `<progress>` element. Normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the `::-webkit-progress-value` pseudo-element. It is a child of the `::-webkit-progress-inner-element` pseudo-element and the parent of the `::-webkit-progress-value` pseudo-element.

**Note:** For `::-webkit-progress-value` to take effect, `appearance` needs to be set to `none` on the `<progress>` element.

Syntax
------


```css
::-webkit-progress-bar {
  /\* ... \*/
}
```

Examples
--------

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}
```

### HTML


```html
<progress value="10" max="50"></progress>
```

### Result

### Result screenshot

The code above results in a progress bar that looks like this when using a WebKit or Blink browser:

![The progress bar is a horizontal bar about the height of a letter. The left 20% is green. The right 80% is orange.](/en-US/docs/Web/CSS/::-webkit-progress-bar/progress-bar.png)

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

* The pseudo-elements used by WebKit/Blink to style other parts of a `<progress>` element:
    + `::-webkit-progress-value`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
offset-rotate
=============

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
The **`offset-rotate`** CSS property defines the orientation/direction of the element as it is positioned along the `offset-path`.

Try it
------

**Note:** Early versions of the spec called this property `motion-rotation`.

Syntax
------


```css
/\* Follow the path direction, with optional additional angle \*/
offset-rotate: auto;
offset-rotate: auto 45deg;

/\* Follow the path direction but facing the opposite direction of `auto` \*/
offset-rotate: reverse;

/\* Keep a constant rotation regardless the position on the path \*/
offset-rotate: 90deg;
offset-rotate: 0.5turn;

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


`auto`

The element is rotated by the angle of the direction of the `offset-path`, relative to the positive x-axis. This is the default value.

``<angle>``

The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.

`auto <angle>`

If `auto` is followed by an `<angle>`, the computed value of the angle is added to the computed value of `auto`.

`reverse`

The element is rotated similar to `auto`, except it faces the opposite direction. It is the same as specifying a value of `auto 180deg`.

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

|  |  |
| --- | --- |
| Initial value | `auto` |
| Applies to | transformable elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | as <angle>, <basic-shape> or <path()> |

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

offset-rotate =   
  [ auto | reverse ]  ||  
  <angle>               
  
```

Examples
--------

### Setting element orientation along its offset path

#### HTML


```html
<div></div>
<div></div>
<div></div>
```


#### CSS


```css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}
```


#### Result

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

| Specification |
| --- |
| Motion Path Module Level 1 # offset-rotate-property |

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

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

See also
--------

* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
Computed value
==============

The **computed value** of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by:

1. Handling the special values `inherit`, `initial`, `revert`, `revert-layer`, and `unset`.
2. Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table.

The computation needed to reach a property's computed value typically involves converting relative values (such as those in `em` units or percentages) to absolute values. For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size).

However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the used value is determined.

**Note:** The `getComputedStyle()` DOM API returns the resolved value, which may either be the computed value or the used value, depending on the property.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # computed-value |

See also
--------

* `window.getComputedStyle`
* CSS key concepts:
    + CSS syntax
    + At-rules
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
::-moz-list-bullet
==================

**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-list-bullet`** CSS pseudo-element is a Mozilla extension that represents the marker (typically a bullet) of a list item (`<li>`) in an unordered list (`<ul>`).

Syntax
------


```css
li::-moz-list-bullet {
  /\* ... \*/
}
```

Examples
--------

### Styling list item markers

#### HTML


```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```


#### CSS


```css
::-moz-list-bullet {
  color: red;
  font-size: 1.5em;
}
```


#### Result

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

Not part of any standard.

See also
--------

* `::-moz-list-number`
* `::marker`
zoom
====

**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 non-standard **`zoom`** CSS property can be used to control the magnification level of an element. `transform: scale()` should be used instead of this property, if possible. However, unlike CSS Transforms, `zoom` affects the layout size of the element.

Syntax
------


```css
/\* Keyword values \*/
zoom: normal;
zoom: reset;

/\* <percentage> values \*/
zoom: 50%;
zoom: 200%;

/\* <number> values \*/
zoom: 1.1;
zoom: 0.7;

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

### Values

`normal`

Render this element at its normal size.

`reset` 
Non-standard

Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing `Ctrl` - `-` or `Ctrl` + `+` keyboard shortcuts) to the document. **Do not use** this value, *use the standard `unset` value instead*.

`<percentage>`

Zoom factor. `100%` is equivalent to `normal`. Values larger than `100%` zoom in. Values smaller than `100%` zoom out.

`<number>`

Zoom factor. Equivalent to the corresponding percentage (`1.0` = `100%` = `normal`). Values larger than `1.0` zoom in. Values smaller than `1.0` zoom out.

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

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | an integer |

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

zoom =
  normal | reset | <number> | <percentage>
```

Examples
--------

### First example

#### HTML


```html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
```


#### CSS
```

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



```css
.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}
```


#### Result

### Second example

#### HTML


```html
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>
```


#### CSS


```css
div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}
```


#### Result

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

Not part of any standard. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.

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

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

See also
--------

* `zoom` entry in CSS-Tricks' CSS Almanac
* Bug 390936: Implement Internet Explorer `zoom` property for CSS on the Firefox issue tracker Bugzilla