CSS border-block-color Defining Logical Block Border Colors

Introduction

The border-block-color property in CSS is a handy tool for controlling the color of the logical block borders of an element. It’s great for responsive design because it adapts to the element’s writing mode, directionality, and text orientation. This property allows you to set the top and bottom border colors, or the right and left border colors, depending on the context. It makes your web pages more flexible and readable.

Baseline Widely Available

The border-block-color property has been around since September 2021 and is widely supported across devices and browsers. This means you can rely on it for modern web design.

Description

The border-block-color property sets the color of the logical block borders of an element. It adjusts based on the element’s writing mode, directionality, and text orientation. This corresponds to the border-top-color and border-bottom-color properties, or the border-right-color and border-left-color properties, depending on the values of writing-mode, direction, and text-orientation.

Using border-block-color lets you set border colors in a single declaration, making your CSS simpler and easier to manage. This is especially useful in responsive design where the orientation of elements can change.

Syntax

You can set the border-block-color property using various values:

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

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

Values

• <color>: Specifies the color of the border.

This property is easy to use and offers flexibility with named colors, hex codes, or global values.

Values

The border-block-color property accepts various values:

<color>

• Named Colors: Like red, blue, green.
• Hexadecimal Colors: Like #f5f6f7.
• RGB and RGBA Colors: Uses red, green, and blue values, with optional alpha transparency.
• HSL and HSLA Colors: Uses hue, saturation, and lightness, with optional alpha transparency.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its initial value, currentcolor.
• revert: Reverts to the user agent’s default stylesheet.
• revert-layer: Reverts for the current layer.
• unset: Resets to either its inherited value or the default value.

These values help you control the color of the block borders effectively.

Formal Definition

The border-block-color property has specific attributes:

Initial Value

• currentcolor: The initial value is the current color of the element.

Applies To

• All Elements: Can be applied to any HTML element.

Inherited

• No: Not inherited from the parent element.

Computed Value

• Computed Color: Based on the specified color.

Animation Type

• By Computed Value Type: Can be animated based on the computed value type.

This definition ensures consistent behavior across different elements and contexts.

Formal Syntax

The formal syntax of the border-block-color property is:

border-block-color =
  [<'border-top-color'>]{1,2}

<border-top-color> =
  <color> | <image-1D>

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># )

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

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

Explanation

• <border-top-color>: Can be a <color> or an <image-1D>.
• <color>: Standard CSS color value.
• <image-1D>: One-dimensional image using the <stripes()> function.
• <stripes()>: Creates a striped pattern.
• <color-stripe>: Consists of a <color> and an optional <length-percentage> or <flex>.
• <length-percentage>: Length or percentage value for stripe size.

This syntax allows for both solid colors and patterned borders.

Examples

Border 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-block-color: red;
}

Results

This example shows how the border-block-color property adapts to vertical text. The text is oriented vertically, and the block borders are colored red.

Example with Dotted Border

HTML

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

Results

In this example, the border style is dotted, and the border-block-color property is set to yellow. This demonstrates how the property works with different border styles.

These examples show the flexibility of the border-block-color property in various contexts.

Specifications

The border-block-color property is defined in the CSS Logical Properties and Values Level 1 specification. This specification explains logical properties that adapt to the writing mode, directionality, and text orientation of elements.

Specification Document

• CSS Logical Properties and Values Level 1 - border-block-color

This specification is essential for understanding and implementing logical properties effectively.

Browser Compatibility

The border-block-color property is widely supported across modern browsers:

Supported Browsers

• Google Chrome: Supported since version 87.
• Mozilla Firefox: Supported since version 66.
• Opera: Supported since version 73.
• Microsoft Edge: Supported since version 87.
• Safari: Supported since version 14.1.

Browser Compatibility Table

The browser compatibility table provides detailed support information. Enable JavaScript to view this data.

Reporting Compatibility Issues

If you encounter compatibility issues, you can report them to improve the documentation and support for this feature.

See Also

For further reading and related topics, check out:

CSS Logical Properties and Values

This section provides additional resources on CSS logical properties and values, helping you understand and use them effectively in your web projects.

Related CSS Properties

• border-top-color: Sets the color of the top border.
• border-bottom-color: Sets the color of the bottom border.
• border-right-color: Sets the color of the right border.
• border-left-color: Sets the color of the left border.
• border-inline-color: Sets the color of the inline borders, which corresponds to the start and end borders depending on the text direction.
• border-inline-start-color: Sets the color of the start border, adapting to the text direction.
• border-inline-end-color: Sets the color of the end border, adapting to the text direction.

Related CSS Properties for Writing Mode and Directionality

• writing-mode: Defines the writing mode, specifying the direction in which text is laid out.
• direction: Sets the text direction, which can be left-to-right (ltr) or right-to-left (rtl).
• text-orientation: Defines the orientation of text within an element, such as upright, sideways, or mixed.

Documentation and Learning Resources

• MDN Web Docs: Offers detailed documentation and examples for various CSS properties and concepts.
• CSS Tricks: Provides articles, tutorials, and tips on CSS and web design, valuable for both beginners and experienced developers.

By exploring these resources, you can gain a deeper understanding of CSS logical properties and how to use them effectively in your web projects. This knowledge will help you create more adaptable, responsive, and visually appealing web designs that work seamlessly across different devices and platforms.