CSS border-inline-end Property

CSS border-inline-end

The border-inline-end property in CSS is a shorthand property that sets the width, style, and color of an element’s inline-end border. The inline-end side depends on the element’s writing mode, text directionality, and text orientation.

Syntax of border-inline-end

</>

Copy

border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color | initial | inherit;

Values

Value	Description
`border-inline-end-width`	Specifies the width of the inline-end border. Accepts values like `thin`, `medium`, `thick`, or any valid CSS length (e.g., `2px`).
`border-inline-end-style`	Defines the style of the inline-end border. Accepts values like `solid`, `dashed`, `dotted`, `none`, etc.
`border-inline-end-color`	Specifies the color of the inline-end border. Accepts any valid CSS color value (e.g., `red`, `#ff0000`, `rgba(255,0,0,0.5)`).
`initial`	Sets the property to its default value (`medium none currentColor`).
`inherit`	Inherits the value from its parent element.

Default Value

medium none currentColor

Examples for border-inline-end

Using the CSS border-inline-end Property

The following examples demonstrate how to use the border-inline-end property to set the appearance of the inline-end border.

</>

Copy

/* Set the width, style, and color of the inline-end border */
.element {
  border-inline-end: 5px solid blue;
}

/* Set only the style and color of the inline-end border */
.element {
  border-inline-end: dashed red;
}

/* Set the inline-end border to transparent */
.element {
  border-inline-end: thin solid transparent;
}

/* Inherit the inline-end border properties from the parent */
.element {
  border-inline-end: inherit;
}

Example for a Solid Inline-End Border

Below is an example demonstrating how to use border-inline-end: 4px solid red; to apply a solid red border to the inline-end side:

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline-end: 4px solid red;
    background: lightgreen;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Example for a Dotted Blue Inline-End Border

border-inline-end: 8px dotted #00f;

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .highlight {
    padding: 10px;
    border-inline-end: 8px dotted #00f;
    background: yellow;
  }
</style>
</head>
<body>

<h1 class="highlight">Lorem Ipsum</div>

</body>
</html>

Browser Support

The border-inline-end property is supported in modern browsers. Below is a compatibility table:

Browser	Version
Chrome	69.0
Edge	79.0
Firefox	41.0
Safari	12.1
Opera	56.0

TutorialKart

CSS border-inline-end Property