-webkit-border-before
=====================

**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-border-before`** CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.

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

This property is a shorthand for the following CSS properties:

* `-webkit-border-before-color`
* `-webkit-border-before-style`
* `-webkit-border-before-width`
Syntax
------


```css
/\* Border values \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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

### Values

One or more of the following, in any order:

`<'border-width'>`

See `border-width`

`<'border-style'>`

See `border-style`

`<'color'>`

See `color`

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

The `-webkit-border-before` property maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top`, `border-right`, `border-bottom`, or `border-left` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.

It relates to `-webkit-border-after`, `-webkit-border-start`, and `-webkit-border-end`, which define the other borders of the element.

The standard-track equivalent of this property is `border-block-start`.

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

|  |  |
| --- | --- |
| Initial value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| Applies to | all elements |
| Inherited | yes |
| Percentages | as each of the properties of the shorthand:* `-webkit-border-before-width`: logical-width of containing block
 |
| Computed value | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
    + `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden`
    + `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden`
    + `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: as specified
    + `border-left-style`: as specified
    + `border-right-style`: as specified
    + `border-top-style`: as specified
* `color`: computed color
 |
| Animation type | discrete |

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

-webkit-border-before =
  <'border-width'> || <'border-style'> || <color>
```

Examples
--------

### Applying a 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-rl;
  -webkit-border-before: 5px dashed blue;
}
```


#### Result

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

Not part of any standard, but it relates to the standards-track `border-block-start` property.

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

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

See also
--------

* `border-block-start`
* The mapped physical properties: `border-top`, `border-right`, `border-bottom`, and `border-left`
* `writing-mode`, `direction`, `text-orientation`