CSS border-block-start-width attribute

Previous Page border-block-start-style
Next Page border-block-style

Definition and usage

border-block-start-width properties set the border width at the start of the block direction of the element.

Note:To make border-block-start-width properties take effect, you must set border-block-start-style properties.

CSS border-block-start-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-start-width The property depends on the block direction.

Note:related CSS properties writing-mode Defines the block direction. This affects the starting and ending positions of the block, as well as border-block-start-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 border width at the start of the block direction:

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

Try it yourself

Example 2: Combined with the writing-mode property

The position of the border width at the start of the block direction is affected by writing-mode The effect of the property:

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

Try it yourself

CSS syntax

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

Property value

Value	Description
medium	Specifies a border of medium width. Default value.
thin	Specifies a thin border.
thick	Specifies a thick border.
length	Allows you to define the thickness of the border. Also see:CSS Units.
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 creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderBlockStartWidth="10px"