![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-block-width Property
![CSS border-block-width Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-block-width.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-block-width
property in CSS is a shorthand property that sets the width of the border on the block-start and block-end edges of an element. These edges correspond to the top and bottom borders in a horizontal writing mode, or the left and right borders in a vertical writing mode.
This property is part of the logical properties module, which allows for more flexible and context-aware styling.
💡 Syntax
The syntax for the border-block-width
property can include one or two values:
element {
border-block-width: value;
}
- One value: Applies the same width to both the block-start and block-end edges.
- Two values: The first value sets the width of the block-start edge, and the second value sets the width of the block-end edge.
🎛️ Default Value
The default value of the border-block-width
property is medium, which typically means 3px, depending on the browser's default settings.
🏠 Property Values
Value | Description |
---|---|
thin | A thin border width. |
medium | A medium border width (default). |
thick | A thick border width. |
length | A specific measurement using units such as px, em, rem, etc. |
initial | Sets the property to its default value. |
inherit | Inherits the value from the parent element. |
📄 Example
In this example, we'll set different border widths for the block-start and block-end edges 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-width Example</title>
<style>
div {
border-block-width: 5px 10px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<h1>Div with Custom Block Border Widths</h1>
<div>
This div has a 5px border on the block-start edge and a 10px border on the block-end edge.
</div>
</body>
</html>
🖥️ Browser Compatibility
The border-block-width
property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Since it is a part of the logical properties module, which is relatively new, ensure to test your styles across different browsers to confirm compatibility.
🎉 Conclusion
The border-block-width
property is a powerful tool for developers who want to control the border widths on block-level elements more intuitively. It simplifies the styling process, especially for multi-language websites or layouts that need to adapt to different writing modes. By using this property, you can easily create responsive and adaptable designs that work across various languages and writing directions.
👨💻 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-width Property), please comment here. I will help you immediately.