border-block-start-color

Definition

border-block-start-color is a CSS property that defines the color of the border at the block-start edge of an element. It is used to set the color of the top border of an element if the writing mode is vertical and the element is rotated 90 degrees clockwise, or the left border of an element if the writing mode is horizontal.

Examples

To set the color of the top border of an element to red:

.my-element {
  border-block-start-color: red;
}

To set the color of the left border of an element to blue:

.my-element {
  writing-mode: horizontal;
  border-block-start-color: blue;
}

To set the color of the top border of an element to green and the color of the left border to yellow:

.my-element {
  writing-mode: vertical;
  border-block-start-color: green;
  border-inline-end-color: yellow;
}

To set the color of the top border of an element to purple and the color of the left border to orange using vendor-prefixed versions of the property:

.my-element {
  writing-mode: vertical;
  -webkit-border-block-start-color: purple;
  -moz-border-block-start-color: purple;
  border-block-start-color: purple;
  -webkit-border-inline-end-color: orange;
  -moz-border-inline-end-color: orange;
  border-inline-end-color: orange;
}

Values

Best Practices

• Use a named color or a hex code for maximum compatibility: To ensure that your border colors are displayed consistently across all modern browsers, it's best to use a named color or a hex code when specifying the border-block-start-color property. RGB and HSL values are not fully supported in all browsers, so they should be avoided if possible.
• Consider using vendor-prefixed versions of the property: As mentioned earlier, border-block-start-color is part of the CSS Writing Modes module, which is not fully supported in all modern browsers. In order to ensure that your border colors are displayed correctly in all browsers, you may need to use vendor-prefixed versions of the property, such as -webkit-border-block-start-color and -moz-border-block-start-color.
• Use the initial value to reset the property to its default value: If you need to reset the border-block-start-color property to its default value, you can use the initial value. This can be useful if you have previously set the property to a non-default value and want to return to the default
• Use the inherit value to inherit the property from the parent element: If you want an element to inherit the border-block-start-color value from its parent element, you can use the inherit value. This can be useful if you want to apply a consistent border color to a group of elements and don't want to specify the color for each element individually.

Browser Compatibility