Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS border-block-end-color Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 8 - Views
⏳ 4 mins
💬 1 Comment
CSS border-block-end-color Property

Photo Credit to CodeToFun

🙋 Introduction

The border-block-end-color property in CSS is used to set the color of an element's block-end border. In languages written from top to bottom, like English, the block-end corresponds to the bottom edge of the element.

This property is part of the logical properties module, which allows you to control layout properties in a way that adapts to different writing modes, such as right-to-left or vertical text.

💡 Syntax

The syntax for the border-block-end-color property is simple and similar to other border color properties.

Syntax
Copied
Copy To Clipboard
element {
  border-block-end-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the border-block-end-color property is currentcolor, which means it inherits the value of the element's color property.

🏠 Property Values

ValueDescription
named-colorA color keyword, such as black, white, red, etc.
hexadecimal valueA hex code representing a color, such as #000000 (black).
RGB valueAn RGB color value, such as rgb(0, 0, 0) (black).
HSL valueAn HSL color value, such as hsl(0, 0%, 0%) (black).
currentcolorUses the current value of the color property.

📄 Example

In this example, we'll set the block-end border color of a div element to red.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-block-end-color Example</title>
  <style>
    div {
      border-block-end-style: solid;
      border-block-end-width: 4px;
      border-block-end-color: red;
    }
  </style>
</head>
<body>
  <h1>Block-End Border with Custom Color</h1>
  <div>This div has a red block-end border.</div>
</body>
</html>

🖥️ Browser Compatibility

The border-block-end-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is part of the CSS Logical Properties and Values Module, which is well-supported across these browsers. However, testing across different browsers is recommended to ensure consistent behavior.

🎉 Conclusion

The border-block-end-color property provides a flexible way to control the color of an element's block-end border, adapting to different writing modes and layouts. It is a useful addition to CSS, especially when building multilingual websites or layouts that need to support various text directions. Experiment with different colors and see how this property can enhance your design.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy