border-block

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 es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. 

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

border-block puede ser usada para establecer los valores de uno o más border-block-width, border-block-style, y border-block-color estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades border-top y border-bottom o border-right, y border -left dependiendo de los valores definidos para modo de escritura , dirección , y orientación de texto .

Los bordes en la otra dimensión se pueden establecer con border-inline, que establece border-inline-start, y border-inline- fin.

Valor inicialas each of the properties of the shorthand:
Applies toall elements
Heredableno
Mediavisual
Valor calculadoas each of the properties of the shorthand:
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

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

<'border-width'>
El ancho del borde. Mirar border-width.
<'border-style'>
El estilo de la línea del borde. Mirar border-style.
<'color'>
El color del borde. Mirar color.

Sintaxis formal

<'border-top-width'> || <'border-top-style'> || <'color'>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplo

Contenido HTML

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

Contenido CSS

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

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

Especificación

Especificación Estado Comentario
CSS Logical Properties and Values Level 1
La definición de 'border-block' en esta especificación.
Editor's Draft Definition inicial

Compatibilidad en navegadores 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
border-block
Experimental
Chrome Soporte completo 69Edge Sin soporte NoFirefox Soporte completo 66IE Sin soporte NoOpera Soporte completo 56Safari Sin soporte NoWebView Android Soporte completo 69Chrome Android Soporte completo 69Firefox Android Soporte completo 66Opera Android Soporte completo 48Safari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

Mira también