Atributo border-block-end-color CSS

página anterior border-block-end
Página siguiente border-block-end-style

Definición y uso

border-block-end-color propiedad se utilice para establecer el color del borde en el extremo final del bloque.

Nota:Para que border-block-end-color Para que el atributo funcione, debe establecerse border-block-end-style propiedad.

La propiedad border-block-end-color de CSS y la propiedad border-bottom-width,border-left-width,border-right-width y border-top-width Muy similar, pero border-block-end-color El atributo depende de la dirección del bloque.

Nota:propiedades CSS relacionadas writing-mode Define la dirección del bloque. Esto afecta la posición de inicio y final del bloque, así como border-block-end-color El resultado del atributo. Para las páginas en inglés, la dirección en línea es de izquierda a derecha, y la dirección del bloque es hacia abajo.

Ejemplo

Ejemplo 1

Establezca el color para el extremo final del borde en la dirección del bloque:

div {
  border-block-end-style: solid;
  border-block-end-color: pink;
}

Intente usted mismo

Ejemplo 2: Combinación con el atributo writing-mode

La posición del borde en el extremo final de la dirección del bloque está influenciada por writing-mode Afecta a las propiedades:

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-color: 5px;
}

Intente usted mismo

Sintaxis de CSS

border-block-end-color: color|transparent|initial|inherit;

Valor del atributo

Valor	Descripción
color	Debe especificarse el color del borde. Por defecto es el color actual del elemento. Consulte:Valores de color CSS.
transparent	Debe especificarse el color del borde.
initial	Establezca este atributo en su valor predeterminado. Consulte initial.
inherit	Hereda este atributo de su elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado:	Color actual del elemento
Herencia:	No
Producción de animación:	Soportado. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderBlockEndColor="pink"