border-block-start
==================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-block-start`** es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.

Pruébalo
--------

Sintaxis
--------


```css
border-block-start: 1px;
border-block-start: 2px dotted;
border-block-start: medium dashed blue;
```


`border-block-start` puede ser usado para establecer los valores de uno o más de `border-block-start-width`, `border-block-start-style`, y `border-block-start-color`. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top`, `border-right`, `border-bottom`, o `border-left` dependiendo de los valores definidos para `writing-mode`, `direction`, y `text-orientation`.

Propiedades relacionadas son `border-block-end`, `border-inline-start`, y `border-inline-end`, que definen los otros bordes del elemento.

|  |  |
| --- | --- |
| 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 | no |
| 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
* `border-block-start-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-block-start-color`: by computed value type
* `border-block-start-style`: discrete
* `border-block-start-width`: by computed value type
 |

### Valores

El `border-block-start` es especificado con uno o más de los siguientes valores, en cualquier orden:

`<'border-width'>`

El ancho del borde. Mira `border-width`.

`<'border-style'>`

El estilo de la línea del borde. Mira `border-style`.

`<'color'>`

El color del borde. Mira `color`.

### Sintaxis formal
```

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

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


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

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

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-shorthands |

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

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

Mira también
------------

* Esta propiedad se asigna a una de las propiedades del borde físico: `border-top`, `border-right`, `border-bottom`, o `border-left`.
* `writing-mode`, `direction`, `text-orientation`