CSS border-block-start Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-start property in CSS is used to set the style, width, and color of the border on the start side of an element's block axis. In languages such as English, where text flows from left to right and top to bottom, the block-start edge corresponds to the top edge of an element.

This property is particularly useful when designing for different writing modes, ensuring that the border adapts to the flow of content in various languages.

💡 Syntax

The border-block-start property can be set using one or more of the following values:

Syntax

Copied

element {
  border-block-start:  ||  || ;
}

Each of these values is optional, but at least one must be provided.

🎛️ Default Value

The default value of the border-block-start property is:

Syntax

Copied

border-block-start: medium none currentcolor;

medium: The default width of the border.
none: No border style is applied.
currentcolor: Uses the current text color for the border color.

🏠 Property Values

Value	Description
<border-width>	Specifies the width of the border (e.g., thin, medium, thick, or any valid length value).
<border-style>	Defines the style of the border (e.g., solid, dashed, dotted, double, none).
<border-color>	Sets the color of the border (e.g., named colors, hex values, RGB, HSL).

📄 Example

In this example, we'll apply a solid blue border to the block-start side of a paragraph element.

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 Example</title>
  <style>
    p {
      border-block-start: 5px solid blue;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Border-Block-Start</h1>
  <p>
    This paragraph has a solid blue border on the block-start side. In English, this is the top edge of the paragraph.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The border-block-start property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is always recommended to test your design across various browsers to ensure full compatibility, especially if your website is designed for multiple writing modes.

🎉 Conclusion

The border-block-start property is an excellent tool for adding a border to the start of an element's block in a way that respects the writing mode of the document. This allows for more flexible and language-sensitive designs.

By using this property, you can control the appearance of your website's elements more precisely and ensure a consistent visual experience across different languages and writing directions.