Atributo border-block-end-width CSS

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

Definición y uso

border-block-end-width establecer el ancho del borde terminal del elemento en la dirección del bloque.

Nota:Para hacer que border-block-end-width Para que el atributo funcione, debe establecer border-block-end-style se aplican.

propiedades CSS border-block-end-width los atributos y border-bottom-width,border-left-width,border-right-width y border-top-width Los atributos son muy similares, pero border-block-end-width 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-width 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

Establecer el ancho del borde terminal de la dirección del bloque:

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

Pruebe usted mismo

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

La posición del borde terminal de la dirección del bloque está influenciada por writing-mode Impacto del atributo:

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

Pruebe usted mismo

Sintaxis de CSS

border-block-end-width: medium|thin|thick|length|initial|inherit;

Valor del atributo

Valor	Descripción
medium	Especifica un borde de anchura media. Valor predeterminado.
thin	Especifica un borde fino.
thick	Especifica un borde grueso.
length	Le permite definir el grosor del borde. Vea:Unidades CSS.
initial	Establezca este atributo en su valor predeterminado. Vea: initial.
inherit	Hereda este atributo de su elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado:	medium
Herencia:	No
Creación de animaciones:	Compatibilidad. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.borderBlockEndWidth="10px"