Tutorials

CSS 'border-block-end-color' Property Explained

  • Published
  • 1 min read
  • CSS
  • HTML
  • Web Design
CSS 'border-block-end-color' Property
In this article
  1. CSS 'border-block-end-color' Property Examples
  2. Browser Support For 'border-block-end-color' Property
  3. CSS Syntax of the 'border-block-end-color' Property
  4. Usage of the 'border-block-end-color' Property
  5. Property Values of the 'border-block-end-color' Property

The CSS 'border-block-end-color' property sets the border's color at the block-end of an element. It is part of the CSS Logical Properties, which adapts to the writing mode of the document, making it particularly useful for internationalization and ensuring designs adapt to different text directions seamlessly.

CSS 'border-block-end-color' Property Examples

See the Pen CSS 'border-block-end-color' Property Explained by Webzstore (@webzstore) on CodePen.

The 'border-block-end-color' property offers a targeted way to style the color of borders at the end of the block flow, accommodating designs that require flexibility for internationalization and writing mode variations, enhancing the global usability and accessibility of web content.

Browser Support For 'border-block-end-color' Property

firefoxsafarichromemicrosoft edgeopera
41.012.169.079.056.0

CSS Syntax of the 'border-block-end-color' Property

border-block-end-color: color | initial | inherit;

Usage of the 'border-block-end-color' Property

Use 'border-block-end-color' to specify the color of the border that appears at the end of an element's block flow direction. This property is valuable in creating designs that need to be consistent across languages and writing systems, as it adjusts automatically with the writing mode to apply styling to the appropriate edge of the element.

Property Values of the 'border-block-end-color' Property

  • Color: This defines the color of the block-end border. It can be specified using all standard CSS color formats, including named colors, HEX, RGB, RGBA, HSL, and HSLA.
  • Initial: Resets the 'border-block-end-color' to its default value. This value is typically the current color of the element unless otherwise defined.
  • Inherit: Causes the element to inherit the 'border-block-end-color' from its parent element.

Share this article

Written by

Webzstore Team

Webzstore has helped businesses since 2010. Today, we bring websites, digital marketing and enquiry follow-up into practical plans built around the work each business needs.

Related services

Talk about your website or marketing

Book a Free 30-Minute Call

More tutorials

All tutorials

Privacy choices

Choose what this website may load. Your choice is saved on this device for up to 180 days. Privacy Policy

Turning a choice off stops further use of that optional service on this site. It does not take back information already sent, and we cannot delete cookies that other services set in your browser.