CSS border-block-style Property

Posted in CSS Tutorial

Updated on Aug 16, 2024

By Mari Selvan

👁️ 4 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-style property in CSS is a shorthand property that allows you to define the style of the block-start and block-end borders of an element. In a writing mode, "block" refers to the top and bottom borders in a horizontal writing mode (such as English) or the right and left borders in a vertical writing mode (such as Japanese).

This property is useful for setting the style of borders along the block axis, providing more control and flexibility in your design.

💡 Syntax

The border-block-style property can be used with one or two values. If one value is specified, it applies to both the block-start and block-end borders. If two values are specified, the first applies to the block-start border, and the second applies to the block-end border.

Syntax

Copied

element {
  border-block-style: style;
}

style: Specifies the line style of the border. This can be any valid border style value like solid, dashed, dotted, double, groove, ridge, inset, outset, none, or hidden.

🎛️ Default Value

The default value for border-block-style is none, which means that no border is drawn unless a specific style is defined.

🏠 Property Values

Value	Description
solid	Defines a solid border.
dashed	Defines a dashed border.
dotted	Defines a dotted border.
double	Defines a double-line border.
groove	Defines a border with a grooved edge.
ridge	Defines a border with a ridged edge.
inset	Defines an inset border that makes the element appear embedded.
outset	Defines an outset border that makes the element appear embossed.
none	No border is drawn.
hidden	The border is not visible.

📄 Example

In this example, we'll set different styles for the block-start and block-end borders of a div 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-style Example</title>
  <style>
    div {
      border-block-style: solid dashed;
      border-block-width: 4px;
      border-block-color: #0073e6;
    }
  </style>
</head>
<body>
  <h1>Block Border Styles</h1>
  <div>
    This `div` element has a solid block-start border and a dashed block-end border.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-block-style property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The border-block-style property provides a convenient way to control the appearance of borders along the block axis in your web design. Whether you want to apply the same border style to both the block-start and block-end sides or specify different styles for each, this property offers flexibility in achieving the desired visual effect. Experiment with different styles to enhance the borders of your elements and improve the overall design of your website.