CSS - border-inline-start Property

Previous
Quiz
Next

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

Syntax

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

Property Values

Value Description
border-inline-start-width It specifies the width of the element's border at the start in inline direction. Default is medium.
border-inline-start-style It specifies the style of the element's border at the start in inline direction. Default is none.
border-inline-start-color It specifies the color of the element's border at the start 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 Start Property

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

Defining All Values of Border Inline Start Property

To set the values of border-inline-start-width, border-inline-start-style and border-inline-start-color in one single statement, we use the border-inline-start 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-start: 6px solid #3498db;
      }

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

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

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

</html>

Constituent Properties of Border Inline Start Property

The border-inline-start property is a combination of the properties border-inline-start-width, border-inline-start-style and border-inline-start-color. The following example shows how these properties are used in combination to show the border-inline-start 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-start-width: 8px;
         border-inline-start-style: dashed;
         border-inline-start-color: red;
      }

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

   </style>
</head>

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

</html>

Border Inline Start Property with Writing Mode

The border-inline-start property is affected by the writing mode which decides the direction of the inline border start. In vertical writing mode, it affects the top border while in horizontal writing mode, it affects the left 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-start: 8px dashed red;
         writing-mode: horizontal-tb ;
      }

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

   </style>
</head>

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

</html>

Border Inline Start Property with Direction

The border-inline-start property is affected by direction, which also decides the direction of the inline border start. With rtl(right-to-left) value, the right border is affected while with ltr(left-to-right) value, the left 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-start: 8px dashed red;
         direction: rtl ;
      }

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

   </style>
</head>

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

</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
border-inline-start 69.0 79.0 41.0 12.1 56.0
css_reference.htm
Print Page
Previous
Next
Advertisements