CSS - border-inline-end-width Property

Quiz

CSS border-inline-end-width property determines the logical border width of an element, which is then translated into a physical border width depending on the element's writing mode, directionality, and text orientation.

Syntax

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

Property Values

Value	Description
medium	It specifies medium width of border. Default.
thin	It specifies a thin border.
thick	It specifies a thick border.
length	Thickness can be given in the form of value.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Inline End Width Property

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

Border Inline End Width Property with Medium Value

To set a medium width to the inline-end border, we can use the medium value. In the following example, medium value has been used for the border-inline-end-width property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: 1px;
      }

      .border2 {
         border-inline-end-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'medium' 
         border-inline-end-width.
      </p>
   </div>
</body>

</html>

Border Inline End Width Property with Thin Value

To set a small width to the inline-end border, we can use the thin value. In the following example, thin value has been used for the border-inline-end-width property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 5px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: 5px;
      }

      .border2 {
         border-inline-end-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'thin' 
         border-inline-end-width.
      </p>
   </div>
</body>

</html>

Border Inline End Width Property with Thick Value

To set a thick width to the inline-end border, we can use the thick value. In the following example, thick value has been used for the border-inline-end-width property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 2px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: 2px;
      }

      .border2 {
         border-inline-end-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has same width all sides.
      </p>
      <p class="borders border2">
         This border has a 'thick' 
         border-inline-end-width.
      </p>
   </div>
</body>

</html>

Border Inline End Width Property with Length Values

To set the width of the inline-end border, we can specify the width using length values (eg. 10px, 15px etc.). In the following example, length values have been used for the border-inline-end-width property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 2px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: 10px;
      }

      .border2 {
         border-inline-end-width: 20px;
      }

      .border3 {
         border-inline-end-width: 50px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px border-inline-end-width.
      </p>
      <p class="borders border2">
         This border has 20px border-inline-end-width.
      </p>
      <p class="borders border3">
         This border has 50px border-inline-end-width.
      </p>
   </div>
</body>

</html>

Border Inline End Width Property with Writing Mode

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

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: thick;
         writing-mode: horizontal-tb;
      }

      .border2 {
         border-inline-end-width: thick;
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has a 'thick' border-inline-end-width
         with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border has a 'thick'
         der-inline-end-width with vertical writing mode.
      </p>
   </div>
</body>

</html>

Border Inline End Width Property with Direction

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

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 1px solid #e74c3c;
         padding: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-end-width: thick;
         direction: rtl;
      }

      .border2 {
         border-inline-end-width: thick;
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-end-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has a 'thick' border-inline-end-width
         with (right-to-left) direction.
      </p>
      <p class="borders border2">
         This border has a 'thick' border-inline-end-width
         with (left-to-right) direction.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-inline-end-width	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page