CSS - border-inline Property

Quiz

CSS border-inline is a shorthand property that sets the values for different logical inline border attributes, border-inline-width, border-inline-style and border-inline-color in one single declaration. The border-style is required. Default values of color and width will be used if not specified. The property is affected by writing mode, text-orientation and direction.

Syntax

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

Property Values

Value	Description
border-inline-width	It specifies the width of element borders in inline direction. Default value is medium.
border-inline-style	It specifies the style of element borders in inline direction. Default value is none.
border-inline-color	It specifies the color of element borders in inline direction. Default value is color of the text.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Border Inline Property

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

Defining All Values of Border Inline Property

To define the values of border-inline-width, border-inline-style and border-inline-color in one single declaration, we use the border-inline property.The following example shows how this is done.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgrey;
         width: 100vh;
         height: 400px;
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight:bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline: 4px solid red;
      }

      .border2 {
         border-inline: 6px dashed blue;
      }

      .border3 {
         border-inline: 8px dotted yellow;
      }

      .border4 {
         border-inline: 8px double brown;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
      <p class="borders border1">
         This has border-inline property with 
         4px width solid style and red color
      </p>
      <p class="borders border2">
         This has border-inline property with 
         6px width dashed style and blue color
      </p>
      <p class="borders border3">
         This has border-inline property with 
         8px width dotted style and yellow color
      </p>
      <p class="borders border4 ">
         This has border-inline property with 
         8px width double style and brown color
      </p>
   </div>
</body>

</html>

Constituent Properties of Border Inline Property

The border-inline property is composed of properties border-inline-width, border-inline-style and border-inline-color. The following example shows how these individual properties combine to show the border-inline effect.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: lightgreen;
         width: 100vh;
         height: 200px;
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight: bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline-width: 4px;
         border-inline-style: solid;
         border-inline-color: red;
      }

      .border2 {
         border-inline-width: 6px;
         border-inline-style: dashed;
         border-inline-color: blue;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
   <p class="borders border1"> 
      This has border-inline-width:4px, 
      border-inline-style:solid, 
      border-inline-color:red
   </p>
   <p class="borders border2">
      This has border-inline-width:6px, 
      border-inline-style:dashed, 
      border-inline-color:blue
   </p>
   </div>
</body>

</html>

Border Inline Property with Writing Mode

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

Example

   
<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         justify-content: center;
         padding: 25px;
         text-align: center;
         font-weight: bold;
      }

      .borders {
         border: 1px solid black;
         padding: 20px;
      }

      .border1 {
         border-inline: 4px solid red;
         writing-mode: horizontal-rl;
      }

      .border2 {
         border-inline: 6px dashed blue;
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline property
   </h2>
   <div class="container">
   <p class="borders border1">
      This has border-inline 4px width, 
      solid style, red color and 
      horizontal writing mode.
   </p>
   <p class="borders border2">
      This has border-inline 6px width,
      dashed style, blue color and 
      vertical writing mode.
   </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-inline	87.0	87.0	66.0	14.1	73.0

css_reference.htm

Print Page