CSS border-block-start-style Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-start-style property in CSS is part of the Logical Properties and Values specification, which allows developers to control the style of the border on the block-start side of an element. The block-start side corresponds to the top border in left-to-right writing modes (like English) and may vary in different writing modes (e.g., right-to-left, vertical).

This property is useful when designing layouts that need to adapt to different writing directions.

💡 Syntax

The syntax for the border-block-start-style property is similar to other border style properties. You can specify the border style using any valid border style keyword.

Syntax

Copied

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

🎛️ Default Value

The default value of the border-block-start-style property is none, meaning no border is displayed by default.

🏠 Property Values

Value	Description
none	No border is displayed.
solid	A single solid line.
dotted	A series of dots.
dashed	A series of short dashes.
double	Two parallel lines with some space between them.
groove	A carved effect that makes the border appear inset.
ridge	A raised effect that makes the border appear outset.
inset	A border that makes the element appear embedded.
outset	A border that makes the element appear elevated.

📄 Example

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

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-style Example</title>
  <style>
    p {
      border-block-start-style: solid;
      border-block-start-width: 3px;
      border-block-start-color: #3498db;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Block-Start Border Style</h1>
  <p>This paragraph has a solid border on the block-start side.</p>
</body>
</html>

🖥️ Browser Compatibility

The border-block-start-style property is supported in most modern browsers. This includes the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it's important to test your website across different browsers and writing modes to ensure consistent rendering.

🎉 Conclusion

The border-block-start-style property is a versatile tool for web developers, especially when creating layouts that need to adapt to different writing directions. By controlling the style of the block-start border, you can add subtle design touches that enhance the overall look and feel of your web pages. Experiment with different styles to see how this property can be used in your projects.