CSS - border-inline-end Property

CSS border-inline-end is a shortand property for defining multiple distinct logical inline-end border properties border-inline-end-width, border-inline-end-style and border-inline-end-color in one single statement. The writing mode, text-orientation and direction decide the direction of the borders.

Syntax

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

Property Values

Value	Description
border-inline-end-width	It specifies the width of the element's border at the end in inline direction. Default is medium.
border-inline-end-style	It specifies the style of the element's border at the end in inline direction. Default is none.
border-inline-end-color	It specifies the color of the element's border at the end in inline direction. Default is current color of border.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Inline End Property

The following examples explain the border-inline-end property with different values.

Defining All Values of Border Inline End Property

To set the values of border-inline-end-width, border-inline-end-style and border-inline-end-color in one single statement, we use the border-inline-end property. The values for the three properties can be given in one statement. The following example shows how this is done.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end: 6px solid #3498db;
      }

      .border2 {
         border-inline-end: 8px double #9900ff;
      }

      .border3 {
         border-inline-end: 10px dashed #009900;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end 
         property with 6px width, solid style 
         and #3498db color.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end
         property with 8px width, double style
         and #9900ff color.
      </p>
      <p class="borders border3">
         This border shows the boder-inline-end
         property with 10px width, dashed style
         and #009900 color.
      </p>
   </div>
</body>

</html>

Constituent Properties of Border Inline End Property

The border-inline-end property is a combination of the properties border-inline-end-width, border-inline-end-style and border-inline-end-color. The following example shows how these properties are used in combination to show the border-inline-end property effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: 8px;
         border-inline-end-style: dashed;
         border-inline-end-color: red;
      }

      .border2 {
         border-inline-end-width: 8px;
         border-inline-end-style: dotted;
         border-inline-end-color:  orange;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end
         property with 8px width, dashed style 
         and red color.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end
         property with 8px width, dotted style 
         and orange color.
      </p>
   </div>
</body>

</html>

Border Inline End Property with Writing Mode

The border-inline-end property is affected by the writing mode which decides the direction of the inline border end. In vertical writing mode, it affects the bottom border while in horizontal writing mode, it affects the right border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end: 8px dashed red;
         writing-mode: horizontal-tb ;
      }

      .border2 {
         border-inline-end: 8px dashed red;
         writing-mode: vertical-rl;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end
         property with 8px width, dashed style and
         red color with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end 
         property with 8px width, dashed style and 
         red color with vertical writing mode.
      </p>
   </div>
</body>

</html>

Border Inline End Property with Direction

The border-inline-end property is affected by direction, which also decides the direction of the inline border end. With rtl(right-to-left) value, the left border is affected while with ltr(left-to-right) value, the right border is affected. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgray;
         padding: 20px;
         width: 100vh;
         height: 350px;
         display: grid;
         align-items: center;
         justify-content: center;

      }

      .borders {
         color:blue;
         border: 1px solid black;
         margin: 15px;
         padding: 20px;
         text-align: center;
      }

      .border1 {
         border-inline-end: 8px dashed red;
         direction: rtl ;
      }

      .border2 {
         border-inline-end: 8px dashed red;
         direction: ltr;
      }

   </style>
</head>

<body>
   <h2>
      CSS border-inline-end property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border shows the boder-inline-end property
         with 8px width, dashed style and red color with
         right-to-left direction.
      </p>
      <p class="borders border2">
         This border shows the boder-inline-end property
         with 8px width, dashed style and red color 
         with left-to-right direction.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-inline-end	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page