border-block-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since abril de 2021.

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-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-color y border-bottom-color, o border-right-color y border-left-color dependiendo de los valores definidos para writing-mode, direction, y text-orientation.

css
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 inicialApplies toHeredable Valor calculado Animation type

as each of the properties of the shorthand:

border-block-start-color: currentcolor
border-block-end-color: currentcolor

all elements

as each of the properties of the shorthand:

border-block-start-color: computed color
border-block-end-color: computed color

as each of the properties of the shorthand:

border-block-start-color: by computed value type
border-block-end-color: by computed value type

Sintaxis

Valores

<'color'>

El color del borde. Mirar color.

Sintaxis formal

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

<border-top-color> =
<color> |
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes( <color-stripe># )

<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?

<length-percentage> =
<length> |
<percentage>
Esta sintaxis refleja el estándar más reciente según CSS Borders and Box Decorations Module Level 4, CSS Images Module Level 4, CSS Values and Units Module Level 4. Es posible que no todos los navegadores hayan implementado todas las partes. Consulte Compatibilidad del navegador para obtener información de soporte.

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

Especificaciones

Specification

CSS Logical Properties and Values Module Level 1
# propdef-border-block-color

Compatibilidad con navegadores

Enable JavaScript to view this browser compatibility table.

Mira también

Esta propiedad se asigna a las propiedades del borde físico: border-top-color, border-right-color, border-bottom-color, o border-left-color.
writing-mode, direction, text-orientation+ error 1297097

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 mar 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

border-block-color

In this article

Help improve MDN