Introduction

The border-block-end-color property in CSS is a handy tool for setting the color of the logical block-end border of an element. It’s great for responsive design as it adapts to the element’s writing mode, direction, and text orientation. This property can be mapped to border-top-color, border-right-color, border-bottom-color, or border-left-color depending on the context.

Introduced in September 2021, border-block-end-color is widely supported across devices and browsers, making it a reliable choice for modern web development. It helps enhance the visual appeal of web pages while maintaining a flexible design.

Specification

The border-block-end-color property is part of the CSS Logical Properties and Values Level 1 specification. This specification aims to provide more intuitive and flexible ways to handle layout and styling, especially for internationalization and responsive design.

The specification can be found in the CSS Logical Properties and Values Level 1 documentation under the border-color section. For more details, you can refer to the official specification:

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

Description

The border-block-end-color property defines the color of the logical block-end border of an element. It adapts based on the element’s writing mode, direction, and text orientation, making it useful for complex layouts where the text flow direction may change.

Depending on the values set for writing-mode, direction, and text-orientation, border-block-end-color can map to one of the following physical border color properties:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

This flexibility makes border-block-end-color a powerful tool for creating responsive and adaptable designs. Whether you’re working with horizontal or vertical text layouts, this property ensures that your border colors are applied correctly and consistently across different contexts.

Syntax

The border-block-end-color property is easy to implement and can be specified using various color values. The syntax for this property is straightforward and allows you to set the color of the logical block-end border of an element.

Here is the basic syntax for border-block-end-color:

border-block-end-color: <color>;

Example Syntax

You can use different types of color values, such as named colors, hexadecimal values, RGB values, and more. Here are a few examples:

border-block-end-color: yellow;
border-block-end-color: #f5f6f7;
border-block-end-color: rgb(255, 0, 0);

Global Values

In addition to specific color values, border-block-end-color also supports global CSS values. These include:

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its initial value.
• revert: Reverts the property to the user-agent stylesheet value.
• revert-layer: Reverts the property to its value in the previous cascade layer.
• unset: Resets the property to its natural value, which is either its inherited value if it inherits, or its initial value if not.

Examples

border-block-end-color: inherit;
border-block-end-color: initial;
border-block-end-color: revert;
border-block-end-color: revert-layer;
border-block-end-color: unset;

Using the border-block-end-color property with these syntax options allows you to customize the border colors of your elements effectively.

Values

The border-block-end-color property accepts a range of values to define the color of the logical block-end border of an element. These values provide flexibility and control over the border color, allowing you to create visually appealing and responsive designs.

Color Values

The primary value for border-block-end-color is a <color>. This can be specified using various formats, including:

• Named Colors: Common color names such as red, blue, green, etc.
• Hexadecimal Values: Hex codes like #ffffff for white or #000000 for black.
• RGB Values: RGB color values such as rgb(255, 255, 255) for white.
• HSL Values: HSL color values like hsl(0, 100%, 50%) for red.

Examples of Color Values

border-block-end-color: yellow;
border-block-end-color: #f5f6f7;
border-block-end-color: rgb(0, 255, 0);
border-block-end-color: hsl(120, 100%, 50%);

Global Values

In addition to specific color values, border-block-end-color also supports global CSS values. These include:

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its initial value.
• revert: Reverts the property to the user-agent stylesheet value.
• revert-layer: Reverts the property to its value in the previous cascade layer.
• unset: Resets the property to its natural value, which is either its inherited value if it inherits, or its initial value if not.

Examples of Global Values

border-block-end-color: inherit;
border-block-end-color: initial;
border-block-end-color: revert;
border-block-end-color: revert-layer;
border-block-end-color: unset;

Formal Syntax

The formal syntax for border-block-end-color is defined as follows:

border-block-end-color = <color> | <image-1D>

<image-1D> = stripes( <color-stripe># )

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

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

• <color>: Specifies the color of the border.
• <image-1D>: Represents a one-dimensional image, typically used for more complex border effects.
• stripes( <color-stripe># ): Defines a border pattern using stripes of specified colors and dimensions.

Example of Formal Syntax

border-block-end-color: stripes(red 5px, blue 10px);

By utilizing these values, you can effectively customize the border colors of your elements to match your design requirements. Whether you’re using simple color values or more complex patterns, border-block-end-color provides the tools you need to create visually appealing and responsive web layouts.

Formal Definition

The border-block-end-color property in CSS is formally defined to control the color of the logical block-end border of an element. This property adapts to the element’s writing mode, directionality, and text orientation, making it a crucial tool for responsive web design.

Formal Attributes

Explanation

• Initial Value: The default value for border-block-end-color is currentcolor, which means it will use the current text color of the element.
• Applies To: This property can be applied to all HTML elements, making it versatile for various design scenarios.
• Inherited: The border-block-end-color property is not inherited from parent elements. This allows for more precise control over border colors.
• Computed Value: The computed value is the final color that is applied to the border after all styles have been resolved.
• Animation Type: The property can be animated based on its computed value type, allowing for smooth transitions and dynamic effects.

Usage

The border-block-end-color property is particularly useful in internationalized web designs where text direction and orientation may vary. By adapting to the writing mode and directionality, this property ensures that border colors are applied consistently and appropriately across different languages and layouts.

Examples

div {
  border-block-end-color: red;
}

p {
  border-block-end-color: #00ff00;
}

In these examples, the div element will have a red border at its logical block-end, while the p element will have a green border. The exact physical border this affects will depend on the element’s writing mode and directionality.

By understanding and utilizing the formal definition of border-block-end-color, web developers and designers can create more adaptable and visually coherent web layouts that cater to a diverse range of users.

Formal Syntax

The formal syntax for the border-block-end-color property in CSS defines the structure and acceptable values for setting the color of the logical block-end border of an element. This section provides a detailed breakdown of the syntax, ensuring that web developers and designers can use the property correctly and effectively.

Basic Syntax

The basic syntax for border-block-end-color is as follows:

border-block-end-color = <color> | <image-1D>

Components

<color>

The <color> value specifies the color of the border. It can be defined using various color formats, such as:

• Named Colors: Common color names like red, blue, green, etc.
• Hexadecimal Values: Hex codes like #ffffff for white or #000000 for black.
• RGB Values: RGB color values such as rgb(255, 255, 255) for white.
• HSL Values: HSL color values like hsl(0, 100%, 50%) for red.

Example

border-block-end-color: red;
border-block-end-color: #00ff00;
border-block-end-color: rgb(0, 0, 255);
border-block-end-color: hsl(240, 100%, 50%);

<image-1D>

The <image-1D> value represents a one-dimensional image, which can be used for more complex border effects. It is defined using the stripes function.

Syntax

<image-1D> = stripes( <color-stripe># )

Components

• stripes( <color-stripe># ): Defines a border pattern using stripes of specified colors and dimensions.
• <color-stripe>: Specifies the color and dimensions of each stripe.

<color-stripe> Syntax

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

• <color>: The color of the stripe.
• <length-percentage>: The length or percentage value for the stripe size.
• <flex>: Flexible length value for the stripe size (optional).

Example

border-block-end-color: stripes(red 5px, blue 10px);

Global Values

In addition to specific color values, border-block-end-color also supports global CSS values. These include:

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its initial value.
• revert: Reverts the property to the user-agent stylesheet value.
• revert-layer: Reverts the property to its value in the previous cascade layer.
• unset: Resets the property to its natural value, which is either its inherited value if it inherits, or its initial value if not.

Example of Global Values

border-block-end-color: inherit;
border-block-end-color: initial;
border-block-end-color: revert;
border-block-end-color: revert-layer;
border-block-end-color: unset;

Putting It All Together

The formal syntax for border-block-end-color allows for a wide range of customization options, from simple color values to complex striped patterns. This flexibility enables web developers and designers to create visually appealing and adaptable designs that cater to various user needs and preferences.

By understanding and utilizing the formal syntax of border-block-end-color, you can effectively control the border colors of your elements, ensuring consistency and coherence across different layouts and writing modes.

Examples

The border-block-end-color property in CSS can be used in various scenarios to enhance the visual appeal of your web pages. Below are some practical examples that demonstrate how to effectively use this property.

Basic Usage

This example shows how to set a basic color for the logical block-end border of an element.

Border Color with Vertical Text

This example demonstrates how border-block-end-color adapts to vertical text layouts.

HTML

<div>
  <p class="vertical-text">Example text</p>
</div>

CSS

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

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

Example Usage

This example shows how to set a basic color for the logical block-end border of an element.

HTML

<div class="example">
  This is a sample text.
</div>

CSS

.example {
  border: 5px solid black;
  border-block-end-color: green;
  padding: 10px;
}

Vertical Text Layout

This example demonstrates how border-block-end-color adapts to vertical text layouts.

HTML

<div class="vertical-example">
  <p>Vertical text example</p>
</div>

CSS

.vertical-example {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-end-color: red;
  padding: 10px;
}

By using these examples, you can see how border-block-end-color can be applied to different elements and layouts to create visually appealing and responsive designs. This property is particularly useful in scenarios where the text direction may change, ensuring that border colors are applied consistently and appropriately. Sure! Here’s the simplified and more accessible version of the content:

border-block-end-color Example

The border-block-end-color property adds a red border at the logical block-end of an element, while other borders are blue. This is useful for vertical text layouts.

Using Hexadecimal Color Values

HTML

<div class="hex-color">
  This is a sample text.
</div>

CSS

.hex-color {
  border: 5px solid #000000;
  border-block-end-color: #ff0000;
  background-color: #ffff00;
  width: 200px;
  height: 100px;
}

Using RGB Color Values

HTML

<div class="rgb-color">
  This is a sample text.
</div>

CSS

.rgb-color {
  border: 5px solid rgb(0, 0, 0);
  border-block-end-color: rgb(255, 0, 0);
  background-color: rgb(255, 255, 0);
  width: 200px;
  height: 100px;
}

Using HSL Color Values

HTML

<div class="hsl-color">
  This is a sample text.
</div>

CSS

.hsl-color {
  border: 5px solid hsl(0, 0%, 0%);
  border-block-end-color: hsl(0, 100%, 50%);
  background-color: hsl(60, 100%, 50%);
  width: 200px;
  height: 100px;
}

Using Global Values

HTML

<div class="global-values">
  This is a sample text.
</div>

CSS

.global-values {
  border: 5px solid black;
  border-block-end-color: inherit;
  background-color: yellow;
  width: 200px;
  height: 100px;
}

Border Color with Vertical Text

The border-block-end-color property is handy for vertical text layouts. Here’s how to use it:

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

Explanation

• HTML: A div with a p element inside it.
• CSS: The div has a yellow background. The p element has vertical text and a red border at the logical block-end, with blue borders on the other sides.

Output

The text “Example text” will be vertical with a red border at the block-end and blue borders elsewhere, inside a yellow box.

Browser Compatibility

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

Desktop Browsers

• Google Chrome: Supported from version 69.
• Mozilla Firefox: Supported from version 41.
• Microsoft Edge: Supported from version 79.
• Safari: Supported from version 12.1.
• Opera: Supported from version 56.

Mobile Browsers

• Chrome for Android: Supported from version 69.
• Firefox for Android: Supported from version 41.
• Safari on iOS: Supported from version 12.1.
• Samsung Internet: Supported from version 11.1.

How to Check Browser Compatibility

1. Consult Documentation: Check official docs for compatibility.
2. Use Tools: Use tools like Can I Use.
3. Test Across Browsers: Test your site on different browsers.

Importance of Browser Compatibility

Ensuring compatibility helps reach a broad audience and maintain usability across platforms.

Related Properties

border-block-start-color

Defines the color of the logical block-start border.

border-block-start-color: blue;

border-inline-start-color

Specifies the color of the logical inline-start border.

border-inline-start-color: green;

border-inline-end-color

Sets the color of the logical inline-end border.

border-inline-end-color: purple;

Physical Border Properties

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

writing-mode

Defines the direction of text flow.

writing-mode: vertical-lr;

direction

Specifies the text direction.

direction: rtl;

text-orientation

Determines the orientation of text within a line box.

text-orientation: upright;

Example of Related Properties in Use

.example {
  border-block-end-color: red;
  border-block-start-color: blue;
  border-inline-start-color: green;
  border-inline-end-color: purple;
  writing-mode: vertical-lr;
  direction: rtl;
  text-orientation: mixed;
}

See Also

CSS Logical Properties and Values

• CSS Logical Properties and Values

Related Border Properties

• border-block-start-color
• border-inline-start-color
• border-inline-end-color

Physical Border Properties

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Writing and Text Properties

• writing-mode
• direction
• text-orientation

Additional Resources

• CSS Border Properties
• CSS Flexible Box Layout
• MDN Web Docs - CSS
• CSS Tricks

Supported Browsers for border-block-end-color

The border-block-end-color property in CSS is well-supported across many browsers, making it a great choice for modern web development. Here’s a list of supported browsers:

Desktop Browsers

• Google Chrome: Supported from version 69.
• Mozilla Firefox: Supported from version 41.
• Microsoft Edge: Supported from version 79.
• Safari: Supported from version 12.1.
• Opera: Supported from version 56.

Mobile Browsers

• Chrome for Android: Supported from version 69.
• Firefox for Android: Supported from version 41.
• Safari on iOS: Supported from version 12.1.
• Samsung Internet: Supported from version 11.1.

Checking Browser Compatibility

To ensure your web app works across different browsers, follow these steps:

1. Consult Documentation: Check the official documentation for the CSS property.
2. Use Browser Compatibility Tools: Tools like Can I Use are helpful.
3. Test Across Browsers: Test your app manually across various browsers and devices.

Why Browser Compatibility Matters

Browser compatibility is essential for a smooth user experience. It ensures your app works well across different browsers and devices, reaching a wider audience and maintaining usability and accessibility.

By knowing which browsers support border-block-end-color, you can use this property confidently to make your web pages look great and work well on all platforms.

For the most accurate and up-to-date information on browser compatibility, check out the MDN Web Docs Browser Compatibility Data.

Hope this helps! Let me know if you have any questions.