Border Block Color

What Are CSS Logical Properties?

CSS was initially designed with only physical coordinates in mind. Properties like border-top-color and border-bottom-color assume a left-to-right, top-to-bottom reading direction. However, the web is global, and content flows in many different directions depending on the language and writing system.

Logical properties and values use the abstract terms block and inline to describe the direction in which content flows. These terms adapt to the document's writing mode rather than assuming a fixed physical orientation. Understanding these concepts is essential for modern web development services that serve international audiences.

The block dimension is perpendicular to the flow of text within a line. In horizontal writing modes (like English), this is the vertical dimension. In vertical writing modes (like traditional Japanese), this becomes the horizontal dimension.

The inline dimension runs parallel to the text flow. For horizontal text, this is the horizontal dimension; for vertical text, this becomes the vertical dimension.

Understanding border-block-color

The border-block-color CSS property defines the color of the logical block borders of an element. This property maps to physical border colors depending on the element's writing mode, directionality, and text orientation.

When you use border-block-color, you're setting the color for both block-start and block-end borders simultaneously. This is a shorthand behavior that affects both edges of the block dimension.

Physical Border Mapping

The actual borders that receive the color depend on the writing mode:

• Horizontal writing modes (horizontal-tb): border-block-color maps to border-top-color and border-bottom-color
• Vertical writing modes (vertical-rl or vertical-lr): border-block-color maps to border-right-color and border-left-color

The mapping is determined by the values defined for writing-mode, direction, and text-orientation.

For teams building international websites, using logical properties eliminates the need for separate CSS files or conditional styles for different languages.

Syntax and Values

Basic Syntax

border-block-color: <color>;

The property accepts either one or two color values:

/* Single value - both block borders */
border-block-color: red;

/* Two values - block-start and block-end */
border-block-color: red blue;

When a single value is provided, it applies to both block-start and block-end borders. When two values are specified, the first applies to block-start and the second to block-end.

Accepted Color Values

The <color> value can be any valid CSS color expression:

• Named colors: red, blue, green
• Hexadecimal: #ff0000, #f00, #ff000080
• RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
• HSL/HSLA: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
• currentcolor: Uses the current text color
• Transparent: Makes the border transparent

Practical Examples

Example 1: Horizontal Writing Mode

.box {
 border-block-color: #e63946;
 border-block-style: solid;
 border-block-width: 3px;
 writing-mode: horizontal-tb;
}

In horizontal-tb mode, the border appears at the top and bottom of the element.

Example 2: Vertical Writing Mode

.box {
 border-block-color: #457b9d;
 border-block-style: solid;
 border-block-width: 2px;
 writing-mode: vertical-rl;
}

With vertical-rl (vertical right-to-left), the block borders appear on the left and right sides.

Example 3: Different Colors for Start and End

.box {
 border-block-color: #2a9d8f #264653;
 border-block-style: solid;
 border-width: 4px;
}

When two colors are specified, the first color applies to the block-start border, and the second to the block-end border.

Related Properties

Border Block Family

The complete set of logical border properties for the block dimension includes:

• border-block-color - Sets color for both block borders (shorthand)
• border-block-start-color - Color of the block-start border
• border-block-end-color - Color of the block-end border
• border-block-style - Style for both block borders
• border-block-width - Width for both block borders

Border Inline Family

The inline dimension has its own set of properties:

• border-inline-color - Color for both inline borders
• border-inline-start-color - Color of the inline-start border
• border-inline-end-color - Color of the inline-end border

Physical vs Logical Mapping

Conclusion

The border-block-color property represents a significant advancement in CSS, enabling developers to create layouts that naturally adapt to different writing modes and text directions. By thinking in terms of block and inline dimensions rather than physical top, bottom, left, and right edges, you can write more maintainable and internationally-friendly CSS.

As the web continues to become more global, understanding and using logical properties like border-block-color becomes increasingly important. They provide a cleaner, more semantic approach to styling that works seamlessly across languages and writing systems.

Whether you're building a multilingual corporate website, creating a design system, or simply want more maintainable CSS, logical border properties are an essential tool in your modern CSS toolkit. Our professional web development team specializes in building internationally-compatible websites that scale across markets.

Sources

1. MDN Web Docs: border-block-color - Official documentation for the border-block-color CSS property
2. MDN Web Docs: CSS Logical Properties and Values - Comprehensive guide to CSS logical properties and values