CSS border-block-start-width Property

Posted in CSS Tutorial

Updated on Aug 16, 2024

By Mari Selvan

👁️ 5 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-start-width property in CSS is a logical property that allows you to set the width of the border on the start side of the block in a block-level element. The "start" side is determined by the writing mode of the document or the block's container.

This property is part of CSS Logical Properties, which provide a way to control layout by using terms that depend on the writing mode, directionality, and text orientation of the document.

💡 Syntax

The syntax for the border-block-start-width property is as follows:

Syntax

Copied

element {
  border-block-start-width: value;
}

Here, value can be a specific width, such as a length (e.g., 2px, 0.5em), or keywords like thin, medium, thick.

🎛️ Default Value

The default value of the border-block-start-width property is medium, which typically corresponds to a width of around 3-4 pixels, but this can vary depending on the browser.

🏠 Property Values

Value	Description
length	Specifies the width of the border using any valid CSS length unit (e.g., px, em, rem).
thin	A keyword representing a thin border width.
medium	A keyword representing a medium border width. This is the default value.
thick	A keyword representing a thick border width.

📄 Example

In this example, we'll set the width of the border on the start side of a block element to 5 pixels.

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-width Example</title>
  <style>
    .box {
      border-block-start-width: 5px;
      border-block-start-style: solid;
      border-block-start-color: black;
      padding: 20px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <h1>Block Element with Custom Border Block Start Width</h1>
  <div class="box">
    This block element has a 5px wide border on the block start side.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-block-start-width property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, as always, it's recommended to test your design across various browsers to ensure consistent rendering.

🎉 Conclusion

The border-block-start-width property is a flexible way to control the width of the start-side border in a block-level element, especially in documents that use different writing modes or text orientations. By using logical properties like this, you can create layouts that are more adaptable to various languages and writing directions, ensuring a more robust and accessible design.