CSS border-block-start-color attribute

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

Definition and usage

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

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

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

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

Example

Example 1

Set the border color at the start of the block direction:

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

Try it yourself

Example 2: Combined with the writing-mode property

The position of the border color 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-color: blue;
}

Try it yourself

CSS syntax

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

Property value

Value	Description
color	Specify the border color. The default is the current color of the element. See:CSS Color Values.
transparent	Specify that the border color should be transparent.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical details

Default value:	The current color of the element
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.borderBlockStartColor="pink"