border-block-color

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-color define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades border-top-colorborder-bottom-color, o border-right-colorborder-left-color dependiendo de los valores definidos para writing-mode, direction, y text-orientation.

border-block-color: yellow;
border-block-color: #F5F6F7;

El color de borde en la otra dimensión puede ser establecida con border-inline-color que establece border-inline-start-color, y border-inline-end-color.

Valor inicialcurrentcolor
Applies toall elements
Heredableno
Mediavisual
Valor calculadocomputed color
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

<'color'>
El color del borde. Mirar color.

Sintaxis formal

<'border-top-color'>{1,2}

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-lr;
  border: 10px solid blue;
  border-block-color: red;
}

Especificación

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

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
border-block-color
Experimental
Chrome Soporte completo 69
Deshabilitado
Soporte completo 69
Deshabilitado
Deshabilitado From version 69: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge Sin soporte NoFirefox Soporte completo 66IE Sin soporte NoOpera Soporte completo 56
Deshabilitado
Soporte completo 56
Deshabilitado
Deshabilitado From version 56: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled).
Safari Sin soporte NoWebView Android Sin soporte NoChrome Android Soporte completo 69
Deshabilitado
Soporte completo 69
Deshabilitado
Deshabilitado From version 69: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Soporte completo 66Opera Android Soporte completo 48
Deshabilitado
Soporte completo 48
Deshabilitado
Deshabilitado From version 48: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled).
Safari 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.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Mira también