Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS border-block-end-width Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
๐Ÿ‘๏ธ 14 - Views
โณ 4 mins
๐Ÿ’ฌ 1 Comment
CSS border-block-end-width Property

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.

Syntax
Copied
Copy To Clipboard
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

ValueDescription
thinA thin border width (typically 1px).
mediumA medium border width (default value, typically 3-4px).
thickA thick border width (typically 5-6px).
length A specific width defined using a length unit like px, em, rem, etc.
initialSets the property to its default value.
inheritInherits 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.

index.html
Copied
Copy To Clipboard
<!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:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
๐Ÿ‘‹ Hey, I'm Mari Selvan

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

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy