CSS border-inline-end-color Master Logical Border Colors

Introduction

The border-inline-end-color property in CSS sets the color of the logical inline-end border of an element. This property adjusts based on the element’s writing mode, direction, and text orientation, making it useful for creating adaptable and accessible web designs.

Baseline Widely Available

The border-inline-end-color property has been widely supported since September 2021. For more details on compatibility, you can check out the following resources:

• Learn more about baseline compatibility
• Full compatibility details
• Report feedback

Description

The border-inline-end-color property sets the color of the logical inline-end border of an element. This property is useful for layouts that adapt to different writing modes, directions, and text orientations. Depending on these factors, border-inline-end-color can correspond to one of the traditional border properties: border-top-color, border-right-color, border-bottom-color, or border-left-color.

This adaptability makes border-inline-end-color essential for designing responsive and accessible websites. It ensures that the border colors of your elements are consistent with the content’s direction, enhancing the overall user experience.

Syntax

border-inline-end-color: rebeccapurple;
border-inline-end-color: #663399;

/* Global values */
border-inline-end-color: inherit;
border-inline-end-color: initial;
border-inline-end-color: revert;
border-inline-end-color: revert-layer;
border-inline-end-color: unset;

Explanation of Syntax

• Color Values: Specify the border color using named colors (e.g., rebeccapurple), hexadecimal values (e.g., #663399), or other color notations.
• Global Values: These values allow you to inherit the border color from the parent element (inherit), reset the border color to its initial value (initial), revert to the user-agent stylesheet value (revert), revert to a specific CSS layer (revert-layer), or unset the border color (unset).

This property is part of the CSS Logical Properties and Values module, which aims to make web design more intuitive and adaptable to different writing modes and directions.

Values

The border-inline-end-color property accepts various values to define the color of the inline-end border.

Color Values

• Named Colors: Like red, blue, green, etc.
• Hexadecimal Colors: Like #ff0000 for red, #00ff00 for green, etc.
• RGB and RGBA: Like rgb(255, 0, 0) for red, rgba(255, 0, 0, 0.5) for semi-transparent red.
• HSL and HSLA: Like hsl(0, 100%, 50%) for red, hsla(0, 100%, 50%, 0.5) for semi-transparent red.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Resets the property to its initial value.
• revert: Reverts the property to the user-agent stylesheet value.
• revert-layer: Reverts the property to the value specified in a specific CSS layer.
• unset: Resets the property to its natural value, which means it behaves like inherit if the property is inherited or like initial if not.

Formal Definition

The border-inline-end-color property specifies the color of the logical inline-end border of an element. This property is part of the CSS Logical Properties and Values module, which provides a more intuitive way to define styles that adapt to different writing modes and directions.

Formal Syntax

border-inline-end-color =
  <color>
  | inherit
  | initial
  | revert
  | revert-layer
  | unset

Initial Value

The initial value for border-inline-end-color is currentcolor, which means it will use the current text color of the element if no other value is specified.

Applies To

This property applies to all elements that can have a border.

Inherited

No, the border-inline-end-color property is not inherited from parent elements.

Computed Value

The computed value is a computed color, which is the final color value after all CSS calculations are applied.

Animation Type

The animation type for border-inline-end-color is by computed value type, meaning it can be animated using CSS animations and transitions.

Examples

Basic Usage

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-inline-end-color: red;
}

Vertical Writing Mode

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid black;
  border-inline-end-color: green;
  background-color: purple;
}

Example 1: Basic Usage

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-inline-end-color Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: yellow;
      width: 220px;
      height: 40px;
    }
    .one {
      border: 5px solid gray;
      border-inline-end-color: yellow;
      background-color: purple;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS | border-inline-end-color Property</b>
    <br><br>
    <div class="one">A Computer Science Portal</div>
  </center>
</body>
</html>

CSS

h1 {
  color: green;
}
div {
  background-color: yellow;
  width: 220px;
  height: 40px;
}
.one {
  border: 5px solid gray;
  border-inline-end-color: yellow;
  background-color: purple;
}

Example 2: Vertical Writing Mode

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | border-inline-end-color Property</title>
  <style>
    h1 {
      color: green;
    }
    div {
      background-color: yellow;
      width: 220px;
      height: 40px;
    }
    .one {
      writing-mode: vertical-lr;
      border: 5px solid black;
      border-inline-end-color: green;
      background-color: purple;
    }
  </style>
</head>
<body>
  <center>
    <h1>Website</h1>
    <b>CSS | border-inline-end-color Property</b>
    <br><br>
    <div class="one">A Computer Science Portal</div>
  </center>
</body>
</html>

CSS

h1 {
  color: green;
}
div {
  background-color: yellow;
  width: 220px;
  height: 40px;
}
.one {
  writing-mode: vertical-lr;
  border: 5px solid black;
  border-inline-end-color: green;
  background-color: purple;
}

Specifications

The border-inline-end-color property is defined in the CSS Logical Properties and Values Level 1 specification. This specification introduces logical properties that are independent of the physical geometry of the web page, making it easier to create adaptable and responsive designs.

CSS Logical Properties and Values Level 1

• Specification: CSS Logical Properties and Values Level 1

Key Highlights

• Logical Border Colors: The border-inline-end-color property is part of a set of logical border properties that adapt to the writing mode, direction, and text orientation of an element.
• Adaptability: This property allows for more intuitive and adaptable styling, making it easier to create designs that work well with different writing systems and directions.
• Consistency: By using logical properties like border-inline-end-color, web developers can ensure consistent and coherent styling across various writing modes and directions.

Related Specifications

• CSS Logical Properties and Values: This broader specification includes other logical properties that work in tandem with border-inline-end-color to create adaptable and responsive designs.
• Writing Modes: The writing-mode property, which defines the block flow direction of an element, is closely related to logical properties.
• Directionality: The direction property, which defines the text direction of an element, also impacts the behavior of logical properties.

Browser Compatibility

The border-inline-end-color property is widely supported across modern browsers. Here’s a summary of its compatibility:

For the latest information, check Can I Use.

Handling Older Browsers

If you need to support older browsers, you can use feature detection or polyfills. Here’s an example of how to provide a fallback:

/* Modern browsers */
.exampleText {
  border-inline-end-color: red;
}

/* Fallback for older browsers */
@supports not (border-inline-end-color: red) {
  .exampleText {
    border-right-color: red; /* Assuming default left-to-right writing mode */
  }
}

Related Properties

The border-inline-end-color property is part of a larger set of CSS logical properties that help create adaptable and responsive designs. Here are some related properties:

border-block-start-color

Defines the color of the logical block-start border of an element.

Example:

.exampleText {
  border-block-start-color: blue;
}

border-block-end-color

Defines the color of the logical block-end border of an element.

Example:

.exampleText {
  border-block-end-color: green;
}

border-inline-start-color

Defines the color of the logical inline-start border of an element.

Example:

.exampleText {
  border-inline-start-color: orange;
}

writing-mode

Defines the block flow direction of an element.

Example:

.exampleText {
  writing-mode: vertical-lr;
}

direction

Defines the text direction of an element.

Example:

.exampleText {
  direction: rtl;
}

text-orientation

Defines the orientation of text within a line box.

Example:

.exampleText {
  text-orientation: upright;
}

Example Usage

Here’s an example that demonstrates how these related properties can be used together:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Related Properties Example</title>
  <style>
    .exampleText {
      writing-mode: vertical-lr;
      border: 5px solid black;
      border-inline-end-color: red;
      border-block-start-color: blue;
      border-block-end-color: green;
      border-inline-start-color: orange;
      background-color: yellow;
      width: 150px;
      height: 100px;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="exampleText">
    Example Text
  </div>
</body>
</html>

In this example, the writing-mode property is set to vertical-lr, and the various logical border color properties are used to customize the border colors.

See Also

For further exploration and understanding of the border-inline-end-color property and related concepts, you may find the following resources and topics helpful:

CSS Logical Properties and Values

• CSS Logical Properties and Values: This comprehensive guide provides an overview of logical properties and values, explaining how they can be used to create adaptable and responsive web designs.

Related CSS Properties

• border-top-color: Defines the color of the top border of an element.
• border-right-color: Defines the color of the right border of an element.
• border-bottom-color: Defines the color of the bottom border of an element.
• border-left-color: Defines the color of the left border of an element.

Writing Mode and Directionality

• writing-mode: Defines the block flow direction of an element, allowing for vertical or horizontal text layouts.
• direction: Defines the text direction of an element, supporting left-to-right (ltr) and right-to-left (rtl) text direction.
• text-orientation: Defines the orientation of text within a line box, allowing for mixed, upright, or sideways text orientation.

Additional Resources

• MDN Web Docs: A comprehensive resource for learning about CSS and its various properties and features.
• Can I Use: A useful tool for checking browser compatibility of CSS properties and features.

Examples and Tutorials

• CSS Examples and Tutorials: A collection of examples and tutorials to help you understand and apply CSS properties effectively.

By exploring these resources and related topics, you can deepen your understanding of CSS logical properties and values, and improve your ability to create adaptable, responsive, and visually appealing web designs.