Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS border-block-end Property

Posted in CSS Tutorial
Updated on Oct 01, 2024
By Mari Selvan
👁️ 9 - Views
⏳ 4 mins
💬 1 Comment
CSS border-block-end Property

Photo Credit to CodeToFun

🙋 Introduction

The border-block-end property in CSS is a logical property that allows you to set the style, width, and color of the border on the block-end side of an element. The block-end side refers to the end of the block flow, which changes depending on the writing mode.

This property is useful for controlling the border in a way that adapts to different languages and text directions.

💡 Syntax

The syntax for the border-block-end property is as follows:

Syntax
Copied
Copy To Clipboard
element {
  border-block-end:  ||  || ;
}

You can use this shorthand to define the border's width, style, and color all at once. Alternatively, you can set these values individually using border-block-end-width, border-block-end-style, and border-block-end-color.

🎛️ Default Value

The default value for the border-block-end property depends on the individual border properties:

  • border-block-end-width: medium
  • border-block-end-style: none
  • border-block-end-color: currentcolor

🏠 Property Values

ValueDescription
<border-width>Specifies the width of the border. It can be a length (e.g., 2px), a keyword (thin, medium, thick), or it can be omitted, defaulting to medium.
<border-style>Specifies the style of the border, such as solid, dotted, dashed, double, etc.
<border-color>Specifies the color of the border. It can be a named color, hexadecimal value, RGB, HSL, or currentcolor.

📄 Example

In this example, we'll apply a 3px solid blue border to the block-end side of a paragraph.

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 Example</title>
  <style>
    p {
      border-block-end: 3px solid blue;
    }
  </style>
</head>
<body>
  <h1>Paragraph with border-block-end</h1>
  <p>
    This paragraph has a 3px solid blue border on the block-end side, which adapts to different writing modes.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The border-block-end property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, testing your website across different browsers and environments is always recommended to ensure full compatibility.

🎉 Conclusion

The border-block-end property is a versatile tool for applying borders in a way that respects the logical flow of content, particularly in multilingual websites.

By using logical properties like this, you can create designs that are more adaptable and maintainable. Experiment with different border styles, widths, and colors to see how this property can enhance your layouts.

👨‍💻 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