CSS - border-inline-style Property

Quiz

CSS border-inline-style property determines how an element's logical inline borders should look, translating that style into a physical border style according to the writing mode, directionality, and text orientation of the element.

Syntax

border-inline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

Value	Description
none	It specifies no border. Default value.
hidden	It is similar to none, except in border conflict resolution for table elements.
dotted	It specifies a dotted border.
dashed	It specifies a dashed border.
solid	It specifies a solid border.
double	It specifies a double border.
groove	It specifies a 3D grooved border. Effect depends on the border-color value.
ridge	It specifies a 3D ridged border. Effect depends on the border-color value.
inset	It specifies a 3D inset border. Effect depends on the border-color value.
outset	It specifies a 3D outset border. Effect depends on the border-color value.
initial	This sets the property to the default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Inline Style Property

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

None Border Inline Style

To not have any inline borders, we use the none value. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-inline-style: none;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-none">
      none inline border
   </p>
   </div>
</body>

</html>

Transparent Border Inline Style

To have borders that exist but are not visible, we can use the transparent value. The transparent value creates invisible borders as compared to none, which creates no borders. This difference is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid gold;
         border-inline-style: none;
      }

      .border2 {
         border: 8px solid gold;
         border-inline-color: grey;
         border-inline-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have inline borders
         indicated by the gap.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has invisible borders. Since borders
         exist, the border color is applied to them 
         indicated by the grey color.
      </p>
   </div>
</body>

</html>

Dotted Border Inline Style

To have dotted inline borders, we use the dotted value. In the following example, dotted value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dotted {
         border-inline-style: dotted;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-dotted">
         dotted inline borders
      </p>
   </div>
</body>

</html>

Dashed Border Inline Style

To have dashed inline borders, we use the dashed value. In the following example, dashed value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dashed {
         border-inline-style: dashed;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-dashed">
         dashed inline borders
      </p>
   </div>
</body>

</html>

Solid Border Inline Style

To have solid inline borders, we use the solid value. In the following example, solid value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-solid {
         border-inline-style: solid;
      }

      p {
         padding: 15px;
         border: 6px dashed gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-solid">
         solid inline borders
      </p>
   </div>
</body>

</html>

Double Border Inline Style

To have double inline borders, we use the double value. In the following example, double value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-double {
         border-inline-style: double;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-double">
         double inline borders
      </p>
   </div>
</body>

</html>

Groove Border Inline Style

To have groove inline borders, we use the groove value. In the following example, groove value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-groove {
         border-inline-style: groove;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-groove">
         groove inline borders
      </p>
   </div>
</body>

</html>

Ridge Border Inline Style

To have ridge inline borders, we use the ridge value. In the following example, ridge value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-ridge {
         border-inline-style: ridge;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-ridge">
         ridge inline borders
      </p>
   </div>
</body>

</html>

Inset Border Inline Style

To have an inset inline borders, we use the inset value. In the following example, inset value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-inset {
         border-inline-style: inset;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-inset">
         inset inline borders
      </p>
   </div>
</body>

</html>

Outset Border Inline Style

To have an outset inline borders, we use the outset value. In the following example, outset value has been used with the border-inline-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-outset {
         border-inline-style: outset;
      }

      p {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="border-outset">
         outset inline borders
      </p>
   </div>
</body>

</html>

Border Inline Style Property with Multiple Styles

The style of the inline borders can have multiple values, if single value is given, it applies to both the inline start and end borders, if two values are given, the first style is applied to inline start border and the second to the inline end border. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 2px solid gold;
         margin: 8px;
         border-inline-width: 10px;
         border-inline-color: red;
         text-align: center;
      }

      .border1 {
         border-inline-style: double;
      }

      .border2 {
         border-inline-style: dashed dotted;
      }
      .border3 {
         border-inline-style: double solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         double inline borders- single value
      </p>
      <p class="borders border2">
         double and solid inline borders- multiple values
      </p>
      <p class="borders border3">
         double and solid inline borders- multiple values
      </p>
   </div>
</body>

</html>

Border Inline Style with Writing Mode

The border-inline-style property is influenced by the writing mode. In vertical writing mode, it affects the inline-start and inline-end borders (top and bottom), while in horizontal writing mode, it affects the same borders (left and right). The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         border-inline-style: dashed dotted;
         border-inline-color: red;
         text-align: center;
      }

      .border1 {
         writing-mode: horizontal-tb;
      }

      .border2 {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         dashed inline border with 
         horizontal writing mode
      </p>
      <p class="borders border2">
         dashed inline border with 
         vertical writing mode.
      </p>
   </div>
</body>

</html>

Border Inline Style with Direction

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         border: 6px solid gold;
         margin: 8px;
         text-align: center;
         border-inline-style: dashed dotted;
      }

      .border1 {
         direction: rtl;
      }

      .border2 {
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-inline-style property
   </h2>
   <div>
      <p class="borders border1">
         dashed inline border with 
         (right-to-left) direction.
      </p>
      <p class="borders border2">
         dashed inline border with 
         (left-to-right) direction.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
border-inline-style	87.0	87.0	66.0	14.1	73.0

css_reference.htm

Print Page