![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-inline-end Property
![CSS border-inline-end Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-inline-end.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-inline-end
property in CSS is part of the Logical Properties and Values module. It allows you to define the border on the end side of an element's inline dimension, which adapts depending on the text direction (left-to-right or right-to-left).
This property is useful for creating layouts that are responsive to different writing modes, such as languages that use right-to-left text.
💡 Syntax
The syntax for the border-inline-end
property is similar to other border properties. It allows you to set the width, style, and color of the border on the inline-end side of an element.
element {
border-inline-end: width style color;
}
🎛️ Default Value
The default value of the border-inline-end
property is medium none currentcolor. This means that by default, the border is not visible unless explicitly defined.
🏠 Property Values
Value | Description |
---|---|
width | Specifies the thickness of the border. Can be set using units like px, em, rem, or keywords like thin, medium, and thick. |
style | Defines the style of the border, such as solid, dashed, dotted, double, etc. |
color | Sets the color of the border. Can be defined using named colors, hexadecimal values, RGB values, HSL values, or currentcolor. |
📄 Example
In this example, we'll add a solid, red border to the inline-end side 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-inline-end Example</title>
<style>
div {
border-inline-end: 4px solid red;
}
</style>
</head>
<body>
<h1>Div with border-inline-end</h1>
<div>This div has a red border on the inline-end side.</div>
</body>
</html>
🖥️ Browser Compatibility
The border-inline-end
property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is a good practice to test your website across different browsers to ensure full compatibility.
🎉 Conclusion
The border-inline-end
property is a versatile tool for creating borders that adapt to different text directions and writing modes. It is particularly useful for websites that need to support multiple languages or layouts that change based on the writing mode. By using logical properties like border-inline-end
, you can ensure your designs are more flexible and responsive.
👨💻 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-inline-end Property), please comment here. I will help you immediately.