CSS - border-inline-width Property

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

The values set for writing-mode, direction, and text-orientation define its behavior, which corresponds to either the border-left-width and border-right-width, or the border-top-width and border-bottom-width properties.
Use the border-block-width property, configuring both border-block-start-width and border-block-end-width, to specify the border width in the perpendicular dimension.

Possible value

<'border-width'> - The width of the border.

Syntax

border-inline-width = <'border-top-width'>{1,2}

Applies to

All the HTML elements.

CSS border-inline-width - length Value

The following example demonstrates the usage of border-inline-width along with length values.

<html>
<head>
<style>
   .container {
      background-color: lightgreen;
      width: 350px;
      height: 350px;
      align-items: center;
      justify-content: center;
      border: 2px dotted #3498db;
      border-radius: 8px;
   }
   .demo-border {
      border: 1px solid #e74c3c;
      border-inline-width: 8px 15px;
      padding: 10px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width.</p>
</div>
</body>
</html>

CSS border-inline-width - thin value

The following example demonstrates the usage of border-inline-width along with thin width value.

<html>
<head>
<style>
   .container {
      background-color: #e6cacd;
      width: 350px;
      height: 350px;
      align-items: center;
      display: flex;
      justify-content: center;
      border-radius: 8px;
   }
   .demo-border {
      border: 5px solid #e74c3c;
      border-inline-width: thin;
      border-inline-color: black;
      padding: 10px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width property with thin value.</p>
</div>
</body>
</html>

CSS border-inline-width - medium value

The following example demonstrates the usage of border-inline-width along with medium width value.

<html>
<head>
<style>
   .container {
      background-color: #e8e1e2;
      width: 350px;
      height: 350px;
      align-items: center;
      display: flex;
      justify-content: center;
      border-radius: 8px;
   }
   .demo-border {
      border: 5px solid gray;
      border-inline-width: medium;
      border-inline-color: red;
      padding: 10px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 18px;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width property with medium value.</p>
</div>
</body>
</html>

CSS border-inline-width - thick value

The following example demonstrates the usage of border-inline-width along with thick width value.

<html>
<head>
<style>
   .container {
      background-color: #fcf7f8;
      width: 350px;
      height: 350px;
      align-items: center;
      display: flex;
      justify-content: center;
      border-radius: 8px;
   }
   .demo-border {
      border: 3px solid gray;
      border-inline-width: thick;
      border-inline-color: red;
      padding: 10px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-inline-width property with thick value.</p>
</div>
</body>
</html>

CSS border-inline-width - Writing mode

The following example demonstrates the usage of border-inline-width property along with length value and vertical writing mode.

       
<html>
<head>
<style>
   .custom-container {
      background-color: #f9f9f9;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px dashed #27ae60;
      border-radius: 10px;
   }
   .custom-border {
      writing-mode: vertical-rl;
      border: 2px solid #e67e22;
      border-inline-width: 10px;
      padding: 15px;
      text-align: center;
      font-family: 'Verdana', sans-serif;
      font-size: 20px;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="custom-border">An example with property border-inline-width.</p>
</div>
</body>
</html>