CSS - border-inline-end Property

The border-inline-end is a CSS shortand property that serves as a shortcut for centrally defining multiple distinct logical inline-end border attributes within a style sheet.

The writing-mode, direction, and text-orientation of the element affect how the border-inline-end attribute is mapped to a real border.
It aligns with the border-left, border-top, border-right, or border-bottom property according to the writing-mode, direction, and text-orientation values that are supplied.
In relation to border-inline-end, the attributes border-block-start, border-block-end, and border-inline-start define all of an element's borders together.

Possible values

The border-inline-end is specified with one or more of the following values:

<'border-width'> - The width of the border.
<'border-style'> - The line style of the border.
<color> - The color of the border.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-inline-end = <line-width> || <line-style> || <color>

Applies to

All the HTML elements.

CSS border-inline-end - Basic Example

The following example demonstrates the usage of border-inline-end property.

<html>
<head>
<style>
   .container {
      background-color: lightgray;
      width: 300px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #e74c3c;
      border-radius: 10px;
   }
   .custom-border {
      margin-right: 25px;
      text-align: center;
      font-family: 'Verdana', sans-serif;
      font-size: 20px;
      color: #2c3e50;
      border-inline-end: 6px double #3498db;
   }
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A simple example with border-inline-end.</p>
</div>
</body>
</html>

CSS border-inline-end - Writing Mode.

The following example demonstrates the border-inline-end proeprty with vertical writing mode.

<html>
<head>
<style>
   .container {
      background-color: #f0f0f0;
      width: 300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px solid #3498db;
      border-radius: 12px;
   }
   .custom-border {
      writing-mode: vertical-rl;
      margin-bottom: 10px;
      text-align: center;
      font-family: 'Helvetica', sans-serif;
      font-size: 18px;
      color: #333;
      border-inline-end: 1rem solid #e74c3c;
   }
</style>
</head>
<body>
<div class="container">
<p class="custom-border">An example of border-inline-end with writing-mode: vertical-rl;</p>
</div>
</body>
</html>