![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS border-inline-end-width Property
![CSS border-inline-end-width Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-border-inline-end-width.webp)
Photo Credit to CodeToFun
π Introduction
The border-inline-end-width
property in CSS is used to specify the width of the border on the inline end side of an element. The inline end side refers to the side that corresponds to the end of the text direction in an elementβs writing mode.
This property is part of the CSS Logical Properties and Values module, which allows for more flexible layouts that adapt to different writing modes, such as left-to-right (LTR) or right-to-left (RTL) text.
π‘ Syntax
The syntax for the border-inline-end-width
property is straightforward. It can accept various values that define the width of the border.
element {
border-inline-end-width: value;
}
ποΈ Default Value
The default value for border-inline-end-width
is medium, which is typically interpreted by the browser as a value of 3px.
π Property Values
Value | Description |
---|---|
thin | Sets the border width to a thin value, typically 1px. |
medium | Sets the border width to a medium value, typically 3px. This is the default value. |
thick | Sets the border width to a thick value, typically 5px. |
length | A specific length value, such as 2px, 0.5em, etc. |
initial | Sets the property to its default value (medium). |
inherit | Inherits the property value from its parent element. |
π Example
In this example, we'll set the border-inline-end-width
to 5px on 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-width Example</title>
<style>
p {
border-inline-end-width: 5px;
border-inline-end-style: solid;
border-inline-end-color: black;
}
</style>
</head>
<body>
<h1>Paragraph with Custom Inline-End Border Width</h1>
<p>
This paragraph has a border width of 5px on the inline-end side. This property is particularly useful when designing layouts that need to adapt to different writing modes.
</p>
</body>
</html>
π₯οΈ Browser Compatibility
The border-inline-end-width
property is supported in most modern browsers. This includes Chrome, Firefox, Safari, Edge, and Opera. However, as with any CSS property, it is advisable to test your layout across different browsers to ensure consistent behavior.
π Conclusion
The border-inline-end-width
property is a valuable tool in responsive web design, especially for websites that need to support multiple writing modes. By specifying the border width on the inline end side, you can create layouts that are both flexible and visually appealing. Experiment with different values to see how this property can enhance the design of your web pages.
π¨βπ» 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-width Property), please comment here. I will help you immediately.