Atributo border-block-end CSS

Página anterior border-block-color
Página siguiente border-block-end-color

Definición y uso

border-block-end Son la forma abreviada de los siguientes atributos:

CSS border-block-end Los atributos y los atributos de CSS border-bottom,border-left,border-right y border-top Los atributos son muy similares, pero border-block-end El atributo depende de la dirección de bloque.

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

Ejemplo

Ejemplo 1

Establezca el ancho, el color y el estilo del borde en el extremo final de la dirección de bloque:

div {
  border-block-end: 10px solid pink;
}

Pruebe usted mismo

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

La posición del borde en el extremo final de la dirección de bloque está influenciada por writing-mode El impacto del atributo:

div {
  writing-mode: vertical-rl;
  border-block-end: dotted blue;
}

Pruebe usted mismo

Sintaxis de CSS

border-block-end: border-block-end-width border-block-end-style border-block-end-color|initial|inherit;

Valor del atributo

Valor	Descripción
border-block-end-width	Especifica el ancho del borde en el extremo final de la dirección de bloque del elemento. El valor predeterminado es "medium".
border-block-end-style	Especifica el estilo del borde en el extremo final de la dirección de bloque del elemento. El valor predeterminado es "none".
border-block-end-color	Especifica el color del borde en el extremo final de la dirección de bloque del elemento. El valor predeterminado es el color actual del borde.
initial	Establezca este atributo en su valor predeterminado. Ver: initial.
inherit	Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado:	medium none currentcolor
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderBlockEnd="pink dotted 5px"