CSS border-block-end-color attribute

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

Course recommendation:

border-block-end-color Definition and usage

The attribute depends on the block direction.property used to set the border color at the end of the block direction of the element. border-block-end-color to make border-block-end-style properties take effect, you must set

properties. CSS border-block-end-color property is similar to CSS propertiesborder-left-widthborder-bottom-widthborder-left-width, border-right-width and border-top-width border-block-end-color Very similar, but

The attribute depends on the block direction.Note: writing-mode Defines the block direction. This affects the start and end positions of the block and related CSS properties border-block-end-color The result of the attribute. 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 at the end of the block direction:

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

Try it yourself

Example 2: Combined with the writing-mode attribute

The position of the border color at the end of the block direction is affected by writing-mode Attribute effect:

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

Try it yourself

CSS syntax

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

Attribute 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.borderBlockEndColor="pink"