Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS border-block-color Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
πŸ‘οΈ 11 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS border-block-color Property

Photo Credit to CodeToFun

πŸ™‹ Introduction

The border-block-color property in CSS is used to set the color of the logical block borders of an element. Logical block borders refer to the top and bottom borders in a block-level context.

This property is particularly useful in writing modes where the direction of text flow can vary, such as in vertical or right-to-left layouts.

πŸ’‘ Syntax

The syntax for the border-block-color property is simple, allowing you to specify one or two color values.

Syntax
Copied
Copy To Clipboard
element {
  border-block-color: color;
}
  • Single color value: Applies the same color to both the start and end of the block.
  • Two color values: The first value sets the color of the start border (top in horizontal writing modes), and the second sets the color of the end border (bottom in horizontal writing modes).

πŸŽ›οΈ Default Value

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

🏠 Property Values

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

πŸ“„ Example

In this example, we'll set the top border color of a block element to blue and the bottom border color to green.

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-color Example</title>
  <style>
    .block {
      border-style: solid;
      border-width: 4px;
      border-block-color: blue green;
    }
  </style>
</head>
<body>
  <h1>Block with Custom Border Colors</h1>
  <div class="block">
    This block has a blue top border and a green bottom border.
  </div>
</body>
</html>

πŸ–₯️ Browser Compatibility

The border-block-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is recommended to test your website across different browsers to ensure consistent behavior.

πŸŽ‰ Conclusion

The border-block-color property provides a convenient way to control the color of an element’s block borders, particularly in layouts where the direction of text flow varies.

By using this property, you can create visually distinct and adaptable designs that respond to different writing modes and layouts. Experiment with different color combinations to see how this property can enhance your web 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