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

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

La propiedad CSS **`-webkit-border-before`** es una propiedad que permite configurar los valores de la propiedad borde para el bloque lógico de inicio en un sólo sitio de la hoja de estilos. `-webkit-border-before` se puede usar para establecer los valores para más de uno de: `-webkit-border-before-width`, `-webkit-border-before-style`, y `-webkit-border-before-color`. Se mapea a un borde físico dependiendo del modo de escritura del elemento, la direccionalidad y la orientación del texto. Se corresonde con la propiedad `border-top`, `border-right`, `border-bottom`, o `border-left` dependiendo de los valores definidos en `writing-mode`, `direction`, y `text-orientation`.

Se relaciona con `-webkit-border-after`, `-webkit-border-start`, y `-webkit-border-end`, que definen los otros bordes del elemento.

Esta propiedad se prevee que será incluida en el estándar como `border-block-start`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `border-width`: as each of the properties of the shorthand:
    + `border-top-width` (en-US): `medium`
    + `border-right-width` (en-US): `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width` (en-US): `medium`
* `border-style`: as each of the properties of the shorthand:
    + `border-top-style` (en-US): `none`
    + `border-right-style` (en-US): `none`
    + `border-bottom-style`: `none`
    + `border-left-style` (en-US): `none`
* `color`: `canvastext`
 |
| Applies to | all elements |
| Heredable | yes |
| Percentages | as each of the properties of the shorthand:* `-webkit-border-before-width`: logical-width of containing block
 |
| Valor calculado | 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` (en-US): the absolute length or `0` if `border-left-style` (en-US) is `none` or `hidden`
    + `border-right-width` (en-US): the absolute length or `0` if `border-right-style` (en-US) is `none` or `hidden`
    + `border-top-width` (en-US): the absolute length or `0` if `border-top-style` (en-US) is `none` or `hidden`
* `border-style`: as each of the properties of the shorthand:
    + `border-bottom-style`: como se especifica
    + `border-left-style` (en-US): como se especifica
    + `border-right-style` (en-US): como se especifica
    + `border-top-style` (en-US): como se especifica
* `color`: computed color
 |
| Animation type | discrete |

Síntaxis
--------


```css
/\* Valores para el borde \*/
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

/\* Valores globales \*/
-webkit-border-before: inherit;
-webkit-border-before: initial;
-webkit-border-before: unset;
```

### Valores

Uno o más de los siguiente valores, dando igual el orden en el que se especifiquen:

`<'border-width'>`

Ver `border-width`

`<'border-style'>`

Ver `border-style`

`<'color'>`

Ver `color`

### Formal syntax

Error: could not find syntax for this itemEjemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Texto de ejemplo</p>
</div>
```

### Contenido CSS


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

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}
```

Especificaciones
----------------

No es parte de ninguna especificación aunque está relacionada con la propiedad `border-block-start`.

Compatibilidad con navegadores
------------------------------

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

Ver además
----------

* `border-block-start`
* Las propiedad físicas mapeadas: `border-top`, `border-right`, `border-bottom`, y`border-left`
* `writing-mode`, `direction`, `text-orientation`