![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-block-start-width Property
![CSS border-block-start-width Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-block-start-width.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-block-start-width
property in CSS is a logical property that allows you to set the width of the border on the start side of the block in a block-level element. The "start" side is determined by the writing mode of the document or the block's container.
This property is part of CSS Logical Properties, which provide a way to control layout by using terms that depend on the writing mode, directionality, and text orientation of the document.
💡 Syntax
The syntax for the border-block-start-width
property is as follows:
element {
border-block-start-width: value;
}
Here, value can be a specific width, such as a length (e.g., 2px, 0.5em), or keywords like thin, medium, thick.
🎛️ Default Value
The default value of the border-block-start-width
property is medium, which typically corresponds to a width of around 3-4 pixels, but this can vary depending on the browser.
🏠 Property Values
Value | Description |
---|---|
length | Specifies the width of the border using any valid CSS length unit (e.g., px, em, rem). |
thin | A keyword representing a thin border width. |
medium | A keyword representing a medium border width. This is the default value. |
thick | A keyword representing a thick border width. |
📄 Example
In this example, we'll set the width of the border on the start side of a block element to 5 pixels.
<!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-width Example</title>
<style>
.box {
border-block-start-width: 5px;
border-block-start-style: solid;
border-block-start-color: black;
padding: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<h1>Block Element with Custom Border Block Start Width</h1>
<div class="box">
This block element has a 5px wide border on the block start side.
</div>
</body>
</html>
🖥️ Browser Compatibility
The border-block-start-width
property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, as always, it's recommended to test your design across various browsers to ensure consistent rendering.
🎉 Conclusion
The border-block-start-width
property is a flexible way to control the width of the start-side border in a block-level element, especially in documents that use different writing modes or text orientations. By using logical properties like this, you can create layouts that are more adaptable to various languages and writing directions, ensuring a more robust and accessible design.
👨💻 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-start-width Property), please comment here. I will help you immediately.