CSS - border-inline-width Property

Quiz

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

Syntax

border-inline-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 Width Property

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

Border Inline Width Property with Medium Value

To set a medium width to the inline borders, we can use the medium value. In the following example, medium value has been used for the border-inline-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-width: 1px;
      }

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

<body>
   <h2>
      CSS border-inline-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-width.
      </p>
   </div>
</body>

</html>

Border Inline Width Property with Thin Value

To set a small width to the inline borders, we can use the thin value. In the following example, thin value has been used for the border-inline-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-width: 5px;
      }

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

<body>
   <h2>
      CSS border-inline-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-width.
      </p>
   </div>
</body>

</html>

Border Inline Width Property with Thick Value

To set a thick width to the inline borders, we can use the thick value. In the following example, thick value has been used for the border-inline-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-width: 2px;
      }

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

<body>
   <h2>
      CSS border-inline-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-width.
      </p>
   </div>
</body>

</html>

Border Inline Width Property with Length Values

To set the width of the inline borders, 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-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-width: 10px;
      }

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

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

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

</html>

Border Inline Width Property with Multiple Values

The border-inline-width property can take multiple values. If single value is given, both the inline-start and inline-end borders have the same width value. If two values are given, the first value is applied to the inline-start border and second value to the inline-end border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

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

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

        .border1 {
            border-inline-width: 8px;
        }

        .border2 {
            border-inline-width: 10px 25px;
        }

        .border3 {
            border-inline-width: thin thick;
        }
    </style>
</head>

<body>
    <h2>
        CSS border-inline-width property
    </h2>
    <div class="container">
        <p class="borders border1">
            This border has 8px 
            border-inline-width - single value.
        </p>
        <p class="borders border2">
            This border has 10px and 
            25px border-inline-width - multiple values.
        </p>
        <p class="borders border3">
            This border has 'thin' and 
            'thick' border-inline-width - multiple values.
        </p>
    </div>
</body>

</html>

Border Inline Width Property with Writing Mode

The border-inline-width property is influenced by the writing mode. In vertical writing mode, it affects the inline-start and inline-end borders (top and bottom) width, while in horizontal writing mode, it affects the same borders (left and right) 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-width: 10px 25px;
         writing-mode: horizontal-tb;
      }

      .border2 {
         border-inline-width: 10px 25px;
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px and 25px border-inline-width
         with horizontal writing mode.
      </p>
      <p class="borders border2">
         This border has 10px and 25px border-inline-width
         with vertical writing mode.
      </p>
   </div>
</body>

</html>

Border Inline Width Property with Direction

The border-inline-width property changes based on text direction. In right-to-left (RTL) direction, it affects the inline-start and inline-end borders in right to left direction, while in left-to-right (LTR) direction, it does the same in the opposite direction (left to right). This is 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-width: 10px 25px;
         direction: rtl;
      }

      .border2 {
         border-inline-width: 10px 25px;
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-width property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 10px and 25px border-inline-width
         with (right-to-left) direction.
      </p>
      <p class="borders border2">
         This border has 10px and 25px border-inline-width
         with (left-to-right) direction.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-inline-width	87.0	87.0	66.0	14.1	73.0

css_reference.htm

Print Page