It supports various color values and global options like inherit, initial, revert, and unset.
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:
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:
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
CSS
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
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
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.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.