CSS border-block-color attribute

Previous Page border-block
Next Page border-block-end

Definition and Usage

border-block-color Set the border color of the element on the block direction.

Note:To make border-block-color The attribute must be set for it to take effect border-block-style.

border-block-color The value of an attribute can be set in different ways:

If border-block-color Attributes have two values:

border-block-color: pink lightblue;

The border color at the start of the block is pink
The border color at the end of the block is lightblue

If border-block-color property has one value:

border-block-color: pink;

The border colors at the start and end of the block are both pink

CSS's border-block-color properties are similar to border-bottom-color,border-left-color,border-right-color and border-top-color The properties are very similar, but border-block-color 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-color 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 color for the border on the block direction:

#example1 {
  border-block-style: solid;
  border-block-color: pink;
}
#example2 {
  border-block-style: solid;
  border-block-color: pink lightblue;
}

Try It Yourself

Example 2: Combined with writing-mode Property

The starting and ending positions of the border on the block direction are affected by the writing-mode property:

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

Try It Yourself

CSS Syntax

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

Property Value

Value	Description
color	Specify the border color. The default color is the current color of the element. View CSS color values to get a complete list of 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.borderBlockColor="pink"