CSS border-block-color

The border-block-color property in CSS is used to set the color of the borders on block-level elements like <div> or <p>. This property is helpful when you want to apply different colors to different sides of the border.

The syntax for using border-block-color is:


selector {
  border-block-color: value;
}

The value can be a color name, hex code, RGB value, etc.

Result:

This is a block-level element with a red border.

In the example above, we have applied a red color to all sides of the border using border-block-color.

If you want to apply different colors to different sides of the border, you can use the border-block-start-color, border-block-end-color, border-block-start-color, and border-block-end-color properties.

Here is an example:

<div style="border: 2px solid; border-block-start-color: red; 
border-block-end-color: blue; border-block-start-color: green; border-block-end-color: yellow;">
    This is a block-level element with different colors on each side of the border.
</div>

Result:

This is a block-level element with different colors on each side of the border.

In this example, we have applied different colors to each side of the border using the border-block-start-color, border-block-end-color, border-block-start-color, and border-block-end-color properties.