![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-block-end-width Property
![CSS border-block-end-width Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-block-end-width.webp)
Photo Credit to CodeToFun
๐ Introduction
The border-block-end-width
property in CSS is used to set the width of the border at the block-end of an element. The block-end is defined based on the element's writing mode, meaning it could be the bottom or right side depending on the text direction.
This property is part of the CSS Logical Properties and Values module, which allows for more flexible styling in different writing modes and text directions.
๐ก Syntax
The syntax for the border-block-end-width
property is straightforward. It can accept various units to define the width of the border.
element {
border-block-end-width: value;
}
๐๏ธ Default Value
The default value of the border-block-end-width
property is medium, which typically corresponds to a width of around 3-4 pixels depending on the browser's default settings.
๐ Property Values
Value | Description |
---|---|
thin | A thin border width (typically 1px). |
medium | A medium border width (default value, typically 3-4px). |
thick | A thick border width (typically 5-6px). |
length | A specific width defined using a length unit like px, em, rem, etc. |
initial | Sets the property to its default value. |
inherit | Inherits the property value from its parent element. |
๐ Example
In this example, we'll set the border-block-end-width
to 5px for 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-end-width Example</title>
<style>
div {
border-block-end-width: 5px;
border-style: solid;
border-color: black;
}
</style>
</head>
<body>
<h1>Block-End Border Width Example</h1>
<div>
This is a div with a block-end border width of 5px.
</div>
</body>
</html>
๐ฅ๏ธ Browser Compatibility
The border-block-end-width
property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, since it's part of the CSS Logical Properties module, older browsers may not fully support it. Testing across different browsers is recommended to ensure compatibility.
๐ Conclusion
The border-block-end-width
property provides a flexible way to control the width of an element's block-end border, especially in environments with varying text directions and writing modes.
By using this property, you can ensure that your layout remains consistent and visually appealing across different languages and browser settings.
๐จโ๐ป 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-end-width Property) , please comment here. I will help you immediately.