border-block-color

Definition

In CSS, the border-block-color property specifies the color of the block borders of an element. The block borders are the vertical borders of the element, which are on the left and right sides in left-to-right languages such as English.

Examples

To set the color of the block borders to red:

div {
  border-block-color: red;
}

To set the color of the block borders to a hexadecimal color code:

div {
  border-block-color: #ff0000;
}

To set the color of the block borders to a RGB value:

div {
  border-block-color: rgb(255, 0, 0);
}

To set the color of the block borders to a HSL value:

div {
  border-block-color: hsl(0, 100%, 50%);
}

To make the block borders transparent:

div {
  border-block-color: transparent;
}

Values

Best Practices

• Use the border-block-color property in combination with the border-block-style and border-block-width properties to create well-defined block borders for your elements
• Use the border-block-color property to provide visual contrast between different elements on the page
• Use the border-block-color property to draw attention to specific elements or areas on the page
• Use the border-block-color property sparingly, as excessive use of borders can clutter the layout and make the page difficult to read
• Use the transparent value for the border-block-color property to remove the block borders from an element

Browser Compatibility

Some older web browsers may not support the border-block-color property. In particular, Internet Explorer 11 and earlier versions do not support the border-block-color property.