border-block-end-color

Definition

The border-block-end-color CSS property sets the color of the block-end border of an element.

Examples

Set the block-end border to a solid color

div {
  border-block-end-color: red;
  border-block-end-style: solid;
  border-block-end-width: 2px;
}

Use a hex code to specify the color

div {
  border-block-end-color: #00ff00;
  border-block-end-style: solid;
  border-block-end-width: 2px;
}

Use a color keyword

div {
  border-block-end-color: green;
  border-block-end-style: solid;
  border-block-end-width: 2px;
}

Use the rgba() function to specify the color with an alpha channel

div {
  border-block-end-color: rgba(255, 0, 0, 0.5);
  border-block-end-style: solid;
  border-block-end-width: 2px;
}

Values

Here is a table of some common color values that you can use with border-block-end-color:

Best Practices

• Use the border-block-end shorthand property to set all of the block-end border properties in one declaration, rather than setting each property separately. This makes your code more concise and easier to read.
• Use vendor prefixes to ensure that your border styles are applied consistently across different browsers. The border-block-end-color property is part of the CSS Logical Properties and Values module, which is not fully supported by all browsers.
• Use the rgba() function to specify the border color with an alpha channel if you want to control the transparency of the border.
• Consider using a consistent color scheme for your borders to create a cohesive design. You can define your colors in a separate stylesheet or using CSS variables to make it easier to maintain and update your border styles.

Browser Compatibility

Note that some older versions of these browsers may not support border-block-end-color.