![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-block-style Property
![CSS border-block-style Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-block-style.webp)
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.
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.
<!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.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS border-block-style Property), please comment here. I will help you immediately.