![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-inline-end-style Property
![CSS border-inline-end-style Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-inline-end-style.webp)
Photo Credit to CodeToFun
🙋 Introduction
The border-inline-end-style
property in CSS is part of the logical properties module, which allows you to control the style of the border on the inline-end side of an element. The inline-end side refers to the end of the line in the writing mode's inline direction, making this property particularly useful in multi-directional layouts or when dealing with right-to-left (RTL) text.
💡 Syntax
The syntax for the border-inline-end-style
property is simple and similar to other border style properties.
element {
border-inline-end-style: style;
}
Here, style can be any of the standard border styles such as solid, dashed, dotted, etc.
🎛️ Default Value
The default value of the border-inline-end-style
property is none, meaning no border is applied unless specified.
🏠 Property Values
Value | Description |
---|---|
none | No border. |
solid | A single solid line. |
dashed | A series of square-ended dashes. |
dotted | A series of round dots. |
double | Two parallel solid lines. |
groove | A 3D grooved border. |
ridge | A 3D ridged border. |
inset | A border that makes the element appear embedded. |
outset | A border that makes the element appear raised. |
📄 Example
In this example, we'll apply a dashed border style to the inline-end side of a paragraph 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-style Example</title>
<style>
p {
border-inline-end-style: dashed;
border-inline-end-width: 2px;
border-inline-end-color: black;
}
</style>
</head>
<body>
<h1>Paragraph with Dashed Inline-End Border</h1>
<p>This paragraph has a dashed border on the inline-end side.</p>
</body>
</html>
🖥️ Browser Compatibility
The border-inline-end-style
property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Since browser support can vary, especially in older browsers, it's a good practice to test your design across different browsers to ensure consistent rendering.
🎉 Conclusion
The border-inline-end-style
property is a useful tool for developers working with multi-directional layouts or RTL text. By controlling the style of the border on the inline-end side, you can create designs that are more adaptable to different writing modes and languages. Experiment with different border styles to see how this property can enhance the visual appeal of your web projects.
👨💻 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-style Property), please comment here. I will help you immediately.