CSS - border-inline-color Property

Previous
Quiz

CSS border-inline-color property specifies the logical inline border color of an element; the element's writing mode, directionality, and text orientation determine the actual border color.

Syntax

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

Property Values

ValueDescription
colorIt 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.
transparentIt specifies that the border must be transparent.
initialThis sets the property to its default value.
inheritThis inherits the property from the parent element.

Examples of CSS Border Inline Color Property

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

Border Inline Color Property with Color Names

The inline border color can be set using color names (eg. red, blue etc). The specified color will be applied to the border. In the following example color names have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: red;
      }

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

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 'red' border-inline-color
      </p>
      <p class="borders border2">
         This border has 'green' border-inline-color
      </p>
      <p class="borders border3">
         This border has 'blue-purple' 
         border-inline-colors
      </p>
   </div>
</body>

</html>

Border Inline Color Property with Hexadecimal Values

The inline border color can be set using hexadecimal values (eg. #ff0000). The specified color will be applied to the border. In the following example hexadecimal values have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: #ffaa00;
      }

      .border2 {
         border-inline-color: #ff3333;
      }
      .border3{
         border-inline-color: #66ff33 #333300;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has '#ffaa00' value border-inline-color
      </p>
      <p class="borders border2">
         This border has '#ff3333' value border-inline-color
      </p>
      <p class="borders border3">
         This border has '#66ff33 #333300'
          values border-inline-color
      </p>
   </div>
</body>

</html>

Border Inline Color Property with RGB Values

The inline border color can be set using rgb values (eg. rgb(255, 0, 0)). The specified color will be applied to the border. In the following example rgb values have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: rgb(0, 0, 179);
      }

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

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 'rgb(0, 0, 179)' value 
      border-inline-color
      </p>
      <p class="borders border2">
         This border has 'rgb(0, 153, 77)' value 
         border-inline-color
      </p>
      <p class="borders border3">
         This border has 'rgb(153, 102, 255)
         rgb(255, 153, 0)' values 
         border-inline-color
      </p>
   </div>
</body>

</html>

Border Inline Color Property with HSL Values

The inline border color can be set using hsl values (eg. hsl(0, 100%, 50%)). The specified color will be applied to the border. In the following example hsl values have been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 250px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: hsl(180, 100%, 15%);
      }

      .border2 {
         border-inline-color: hsl(120, 50%, 40%);
      }
      .border3 {
         border-inline-color: hsl(0, 100%, 55%) 
                              hsl(60, 19%, 15%);
      }
    </style>
</head>

<body>
   <h2>
      CSS border-inline-color property
   </h2>
   <div class="container">
      <p class="borders border1">
         This border has 'hsl(180, 100%, 15%)' value 
         border-inline-color
      </p>
      <p class="borders border2">
         This border has 'hsl(120, 50%, 40%)' value 
         border-inline-color
      </p>
      <p class="borders border3">
         This border has 'hsl(0, 100%, 55%) 
         hsl(60, 19%, 15%)' values 
         border-inline-color
      </p>
   </div>
</body>

</html>

Note: border-inline-color accepts different number of values.

  • One-value: if single value is given, then it applies to both the inline borders.
  • Two-values: if two values are given, the first color is applied to first border and second color to second border.

These have been shown in the above examples.

Border Inline Color Property with Transparent Value

The set a transparent inline border, we use the transparent value. In the following example transparent value has been used for the borders.

Example

    
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2ebc9;
         padding: 20px;
         width: 350px;
         height: 200px;
         display: block;
         text-align: center;
         justify-content: center;
      }

      .borders {
         padding: 12px;
         border: 4px solid #a6890c;
         border-inline-style: double;
         border-inline-width: 10px;
      }

      .border1 {
         border-inline-color: transparent;
      }

    </style>
</head>

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

</html>

Supported Browsers

PropertyChromeEdgeFirefoxSafariOpera
border-inline-color87.087.066.014.173.0
css_reference.htm
Print Page
Previous
Next