1. css
  2. /properties
  3. /border-block-end-color

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:

Color ValueDescription
redRed color keyword
#ff0000Red hex code
rgb(255, 0, 0)Red RGB value
rgba(255, 0, 0, 1)Red RGB value with fully opaque alpha channel (equivalent to red)
rgba(255, 0, 0, 0.5)Red RGB value with 50% transparent alpha channel
blackBlack color keyword
#000000Black hex code
rgb(0, 0, 0)Black RGB value
rgba(0, 0, 0, 1)Black RGB value with fully opaque alpha channel (equivalent to black)
rgba(0, 0, 0, 0.5)Black RGB value with 50% transparent alpha channel

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

Browserborder-block-end-color Support
Google ChromeFull support
Mozilla FirefoxFull support with vendor prefix
Apple SafariFull support with vendor prefix
Microsoft EdgeFull support with vendor prefix
Google Chrome (Mobile)Full support
Mozilla Firefox (Mobile)Full support with vendor prefix
Apple Safari (Mobile)Full support with vendor prefix
Microsoft Edge (Mobile)Full support with vendor prefix

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