CSS border-block-start-color Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-start-color property in CSS allows you to specify the color of the border on the block start side of an element. The block start side corresponds to the top edge in a left-to-right, top-to-bottom writing mode, but it can vary depending on the writing mode of the document (e.g., in a right-to-left writing mode, the block start side might be the right edge).

This property is useful for creating layouts that respect the document’s writing direction.

💡 Syntax

The syntax for the border-block-start-color property is simple. It can be applied to any element that has borders, and the color can be specified using any valid CSS color value.

Syntax

Copied

element {
  border-block-start-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-start-color property is the current color of the element, which is determined by the color property of the element. If no specific value is set, it will inherit this color.

🏠 Property Values

Value	Description
named-color	A color keyword, such as red, blue, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
transparent	Makes the border color fully transparent.
currentcolor	Uses the current value of the color property.

📄 Example

In this example, we'll change the color of the border on the block start side (top border in a standard left-to-right document) to green.

index.html

Copied

<!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-start-color Example</title>
  <style>
    .box {
      border: 2px solid;
      border-block-start-color: green;
    }
  </style>
</head>
<body>
  <h1>Box with Custom Border-Block-Start Color</h1>
  <div class="box">
    This box has a green top border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-block-start-color property is supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, it's a good idea to test your design across different browsers to ensure consistent behavior.

🎉 Conclusion

The border-block-start-color property is a useful tool for customizing the appearance of borders in relation to the writing mode of your document. By setting the color of the border on the block start side, you can create visually appealing and contextually appropriate designs that work well with different languages and writing directions. Experiment with this property to enhance the visual style of your web layouts.