CSS - border-inline-start-color Property

CSS border-inline-start-color property specifies the color of an element's logical inline-start border, this color is then converted into the element's physical border color according to the writing mode, direction, and text orientation.

Syntax

border-inline-start-color: color | transparent | initial | inherit;

Property Values

Value	Description
color	It specifies the color of border. Different color formats can be used (names,rgb values,hex values,hsl values etc.). Default color is the current color of the element.
transparent	It specifies that the border must be transparent.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Inline Start Color Property

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

Border Inline Start Color Property with Color Names.

The color of the inline-start border can be set using color names (eg. red, green etc.). In the following example, color names have been used with this property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: blue;
      }

      .border2 {
         border-inline-start-color: green;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'blue'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as 'green'.
      </p>
   </div>
</body>

</html>

Border Inline Start Color Property with Hexadecimal Values

The color of the inline-start border can be set using hexadecimal values (eg. #cc99ff, r#6600cc etc.). In the following example, hexadecimal values have been used with this property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgrey;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: #99ff66;
      }

      .border2 {
         border-inline-start-color: #99ccff;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as '#99ff66'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as '#99ccff'.
      </p>
   </div>
</body>

</html>

Border Inline Start Color Property with RGB Values

The color of the inline-start border can be set using rgb values (eg. rgb(255, 0, 0), rgb(128, 0, 0) etc.). In the following example, rgb values have been used with this property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: rgb(102, 102, 153);
      }

      .border2 {
         border-inline-start-color: rgb(102, 102, 0);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'rgb(102, 102, 153)'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as 'rgb(102, 102, 0)'.
      </p>
   </div>
</body>

</html>

Border Inline Start Color Property with HSL Values

The color of the inline-start border can be set using hsl values (eg. hsl(60, 100%, 70%), hsl(330, 100%, 40%) etc.). In the following example, hsl values have been used with this property.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: hsl(60, 100%, 50%);
      }

      .border2 {
         border-inline-start-color: hsl(150, 100%, 15%);
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'hsl(60, 100%, 50%)'.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color 
         as 'hsl(150, 100%, 15%)'.
      </p>
   </div>
</body>

</html>

Border Inline Start Color Property with Transparent Value

To set a transparent border inline-start, we use the transparent value. In the following example, transparent value has been used.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         padding: 20px;
         width: 100vh;
         height: 100px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
      This border has a transparent border-inline-start-color.
      </p>
   </div>
</body>

</html>

Border Inline Start Color Property with Writing Mode

The border-inline-start-color property is affected by the writing mode which decides the direction of the inline border start color. In vertical writing mode, it affects the top border color while in horizontal writing mode, it affects the left border color. These are shown in the following example.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 740px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: dashed;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: darkgreen;
         writing-mode: horizontal-rl;
      }

      .border2 {
         border-inline-start-color: hsl(150, 100%, 15%);
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'darkgreen' with horizontal 
         writing mode.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color
         as 'hsl(150, 100%, 15%)' with vertical 
         writing mode.
      </p>
   </div>
</body>

</html>

Border Inline Start Color Property with Direction

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

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightcyan;
         padding: 20px;
         width: 100vh;
         height: 200px;
         display: block;
         align-items: center;
         justify-content: center;
      }

      .borders {
         border: 3px solid #e74c3c;
         padding: 20px;
         border: 3px solid red;
         border-inline-start-style: double;
         border-inline-start-width: 10px;
         text-align: center;
      }

      .border1 {
         border-inline-start-color: darkgreen;
         direction: rtl;
      }

      .border2 {
         border-inline-start-color: hsl(150, 100%, 15%);
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-start-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has border-inline-start-color
         as 'darkgreen' with right-to-left 
         direction.
      </p>
      <p class="borders border2">
         This border has border-inline-start-color
         as 'hsl(150, 100%, 15%)' with left-to-right
         direction.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-inline-start-color	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page