Atributo border-block-width CSS

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

Definición y uso

border-block-width Establecer el ancho del borde en la dirección del bloque del elemento de configuración del atributo.

Note:Para que border-block-width Para que el atributo surta efecto, debe estar configurado border-block-style.

border-block-width Los valores de los atributos se pueden configurar de diferentes maneras:

If border-block-width Los atributos tienen dos valores:

border-block-width: 10px 50px;

The border width at the beginning of the block is 10px
The border width at the end of the block is 50px

If border-block-width The property has one value:

border-block-width: 10px;

The border width at the beginning and end of the block is 10px

CSS border-block-width properties are similar to the CSS properties border-bottom-width,border-left-width,border-right-width and border-top-width Very similar, but border-block-width The property depends on the block direction.

Note:related CSS properties writing-mode Defines the block direction. This affects the beginning and end positions of the block, as well as border-block-width The result of the property. For English pages, the inline direction is from left to right, and the block direction is downward.

Instance

Example 1

Set the width of the border in the block direction:

#example1 {
  border-block-style: solid;
  border-block-width: 10px;
}
#example2 {
  border-block-style: solid;
  border-block-width: thin thick;
}

Try It Yourself

Example 2: Combined with the writing-mode property

The borders at the beginning and end of the block direction are affected by writing-mode Property Affects:

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
medium	Specifies a medium border. Default value.
thin	Specifies a thin border.
thick	Specifies a thick border.
length	Allows you to define the thickness of the border. See:Unidades CSS.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default Value:	medium
Inheritance:	No
Animation Production:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.borderBlockWidth="3px 10px"