CSS border-inline-end-width

The border-inline-end-width property specifies the width of the inline-end border of an element. The inline-end side of an element is determined by the direction of the text in the document - in English, for example, the inline-end side is on the right. This property is useful for styling borders on inline-level elements like text or inline blocks.

The syntax for border-inline-end-width is:

border-inline-end-width: medium|thin|thick|length|initial|inherit;

Let's look at some examples to understand how to use this property in CSS:

Result:

This is a paragraph with a border of 3px on the inline-end side.


p {
  border-inline-end-width: 3px;
  border-style: solid;
}

In this example, we set the border-inline-end-width property of the paragraph to 3px, creating a solid border on the inline-end side of the paragraph.

Result:

This is an inline-block element with a dotted border on the inline-end side.


<div style="display: inline-block; border-inline-end-width: 2px; border-style: dotted; padding: 10px;">Text</div>

In this example, we have an inline-block element with a border of 2px on the inline-end side. The border style is set to dotted for a different visual effect.

As you can see, the border-inline-end-width property is a useful tool for styling the inline-end border of elements on a webpage. It allows for greater control over the appearance of text and inline elements.