Atributo border-block-start-color de CSS

Página anterior border-block-start
Página siguiente border-block-start-style

Definición y uso

border-block-start-color Establecer el color del borde en el inicio de la dirección del bloque del elemento.

Nota:Para hacer border-block-start-color Para que el atributo funcione, debe configurarse border-block-start-style atributos.

CSS border-block-start-color Los atributos y los atributos CSS border-bottom-color,border-left-color,border-right-color y border-top-color Muy similar, pero border-block-start-color El atributo depende de la dirección del bloque.

Nota:los atributos CSS relacionados writing-mode Define la dirección del bloque. Esto afecta la posición de inicio y final del bloque, así como border-block-start-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

Configurar el color del borde en el inicio del bloque direccional:

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

Pruebe usted mismo

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

La posición del color del borde en el inicio de la dirección del bloque se ve afectada por writing-mode Impacto del atributo:

div {
  border-block-start-style: solid;
  writing-mode: vertical-rl;
  border-block-start-color: blue;
}

Pruebe usted mismo

Sintaxis de CSS

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

Valor del atributo

Valor	Descripción
color	El color del borde debe especificarse. Por defecto es el color actual del elemento. Consulte:Valores de color de CSS.
transparent	El color del borde debe ser transparente.
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:	El color actual del elemento
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderBlockStartColor="pink"