CSS - border-inline-start-width Property

The CSS property border-inline-start-width indicates the logical inline-start border width of an element. The physical border width is determined by the writing mode, directionality, and text orientation of the element.

Its mapping, depending on the given values for writing-mode, direction, and text-orientation, corresponds to properties like border-top-width, border-right-width, border-bottom-width, or border-left-width.
The width of an element's various borders are determined by the properties border-block-start-width, border-block-end-width, and border-inline-end-width, which are linked to border-inline-start-width.

Possible Value

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

Syntax

border-inline-start-width = <line-width>
<line-width> = <length [0,∞]> | thin | medium | thick

Applies to

All the HTML elements.

CSS border-inline-start-width - thick value

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

    
<html>
<head>
<style>
   .container {
      background-color: #d5d9de;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .customText {
      border: 2px dashed #e74c3c;
      border-inline-start-width: thick;
      padding: 12px;
      margin: 15px 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 16px;
      color: #2c3e50;
   }
</style>
</head>
<body>
<div class="container">
<p class="customText">A example with property border-inline-start-width with value as thick.</p>
</div>
</body>
</html>

CSS border-inline-start-width - thin value

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

         
<html>
<head>
<style>
   .container {
      background-color: #d5d9de;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .customText {
      border: 5px dashed #3a43e8;
      border-inline-start-width: thin;
      padding: 12px;
      margin: 15px 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #2c3e50;
   }
</style>
</head>
<body>
<div class="container">
<p class="customText">A example with property border-inline-start-width with value as thin.</p>
</div>
</body>
</html>

CSS border-inline-start-width - medium value

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

    
<html>
<head>
<style>
   .container {
      background-color: #e8e7da;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .customText {
      border: 8px solid #c4bb04;
      border-inline-start-width: medium;
      padding: 12px;
      margin: 15px 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #2c3e50;
   }
</style>
</head>
<body>
<div class="container">
<p class="customText">A example with property border-inline-start-width with value as medium.</p>
</div>
</body>
</html>

CSS border-inline-start-width - length Value

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

<html>
<head>
<style>
   .container {
      background-color: lightgrey;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .custom-border {
      writing-mode: vertical-rl;
      border: 5px ridge #f0d807;
      border-inline-start-width: 11px;
      padding: 12px;
      margin: 15px 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #2c3e50;
   }
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A example with border-inline-start-width property and vertical writing mode.</p>
</div>
</body>
</html>