CSS Border-Inline-Color Simplifying Border Styling

Introduction

The border-inline-color property in CSS allows you to set the color of the logical inline borders of an element. It is particularly useful for creating responsive and dynamic designs that adapt based on the element’s writing mode, directionality, and text orientation. This property simplifies style sheets by controlling the colors of the top and bottom borders or the right and left borders, depending on the context.

This feature is widely supported across many devices and browser versions, making it a reliable choice for web development. Introduced in September 2021, border-inline-color has become an essential part of modern CSS, enabling more flexible and adaptable web designs.

Browser Compatibility

The border-inline-color property enjoys broad compatibility across different devices and browser versions. It has been available since September 2021, ensuring that it works effectively in various web environments. This wide support makes it a reliable choice for web developers aiming to create consistent and visually appealing designs across multiple platforms.

For detailed compatibility information, refer to the browser compatibility table.

Description

The border-inline-color CSS property defines the color of the logical inline borders of an element. This property is particularly useful for creating designs that adapt to different writing modes, directionalities, and text orientations. It simplifies the process of setting border colors by mapping to the physical border colors (border-top-color, border-bottom-color, border-right-color, and border-left-color) based on the values defined for writing-mode, direction, and text-orientation.

By using border-inline-color, you can ensure that your element’s border colors are consistent and visually appealing, regardless of the text direction or orientation. This property is part of the CSS Logical Properties and Values module, which aims to make CSS more intuitive and easier to work with in various writing systems.

Specification

The border-inline-color property is defined in the CSS Logical Properties and Values Level 1 specification. This specification outlines the behavior and usage of logical properties, which are designed to make CSS more adaptable to different writing systems and text orientations. The border-inline-color property is specifically detailed in the CSS Logical Properties and Values Level 1 document.

This specification ensures that web developers can create more flexible and dynamic designs that automatically adjust based on the writing mode, directionality, and text orientation of the content.

Syntax

The border-inline-color property in CSS is straightforward to use. You can set it with a color value or use global values such as inherit, initial, revert, revert-layer, and unset.

border-inline-color: yellow;
border-inline-color: #f5f6f7;

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

Values

The border-inline-color property accepts the following values:

• <color>: This value specifies the color of the border. It can be any valid CSS color value, such as named colors (e.g., red, blue), hexadecimal values (e.g., #ff0000, #0000ff), RGB values (e.g., rgb(255, 0, 0), rgb(0, 0, 255)), or HSL values (e.g., hsl(0, 100%, 50%), hsl(240, 100%, 50%)).

• Global Values: In addition to color values, the border-inline-color property also accepts global values:

  • inherit: Inherits the value from its parent element.
  • initial: Sets the property to its initial value, which is currentcolor.
  • revert: Reverts the property to its default value as defined by the user agent or the user.
  • revert-layer: Reverts the property to its default value at the specified cascade layer.
  • unset: Resets the property to its natural value, which means it acts as though the property is not set and therefore the element does not get the border color from the stylesheet.

Formal Definition

The border-inline-color property in CSS is defined with specific characteristics that outline its behavior and usage.

• Initial Value: The initial value for border-inline-color is currentcolor.
• Applies To: All elements.
• Inherited: No.
• Computed Value: Computed color.
• Animation Type: By computed value type.

Examples

Example 1: Basic Usage

In this example, we’ll set the border-inline-color to change the color of the inline borders of a div element.

HTML:

<div class="exampleText">Example text</div>

CSS:

div {
  background-color: yellow;
  width: 220px;
  height: 40px;
}

.exampleText {
  border: 5px solid blue;
  border-inline-color: red;
}

Example 2: Usage with Vertical Text

In this example, we’ll use the border-inline-color property in combination with the writing-mode property to create a design with vertical text.

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Related Properties

The border-inline-color property is part of a larger set of CSS logical properties designed to make styling more intuitive and adaptable to different writing systems. Here are some related properties:

1. border-block-color: Sets the color of the logical block borders.
2. border-top-color and border-bottom-color: Set the color of the top and bottom borders.
3. border-right-color and border-left-color: Set the color of the right and left borders.
4. writing-mode: Defines the writing mode of an element.
5. direction: Sets the text direction of an element.
6. text-orientation: Specifies the orientation of text within a line box.

Usage with Vertical Text

The border-inline-color property is particularly useful when working with vertical text, as it adapts to the writing mode and directionality of the content.

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Global Values

The border-inline-color property in CSS can take several global values that help control its inheritance and initial values.

• inherit: Inherits the value from its parent element.
• initial: Sets the property to its initial value, which is currentcolor.
• revert: Resets the property to the user agent’s default value.
• revert-layer: Resets the property to the default value at a specified cascade layer.
• unset: Removes any custom styling applied to the property.

Examples:

border-inline-color: inherit;
border-inline-color: initial;
border-inline-color: revert;
border-inline-color: revert-layer;
border-inline-color: unset;

Formal Syntax

The formal syntax for the border-inline-color property defines its acceptable values and structure.

border-inline-color = <color> | stripes(<color-stripe>#)

<color-stripe> = <color> [<length-percentage> | <flex>]?

<length-percentage> = <length> | <percentage>

• <color>: Any valid CSS color value.
• stripes(): Creates a striped pattern using color stripes.
• <color-stripe>: A combination of a color and an optional length or percentage.
• <length-percentage>: A length (e.g., 10px) or percentage (e.g., 50%).

See Also

To learn more about border-inline-color and related concepts, check out these resources:

1. CSS Logical Properties and Values: A guide to logical properties for easier CSS in different writing systems.
   • CSS Logical Properties and Values
2. Physical Border Properties: The border-inline-color property maps to these depending on the writing mode:
   • border-top-color
   • border-right-color
   • border-bottom-color
   • border-left-color
3. Related Properties: These properties affect the behavior of border-inline-color:
   • writing-mode
   • direction
   • text-orientation
4. Additional Resources: For more details and examples:
   • MDN Web Docs
   • CSS Logical Properties and Values Level 1 Specification

These resources will help you understand and use the border-inline-color property effectively, creating flexible and visually appealing web designs.