CSS - border-inline-start-style Property

Quiz

CSS border-inline-start-style property determines the style of an element's inline start border, which in turn is mapped to the physical border of the element depending on the element's writing mode, directionality, and text orientation.

Syntax

border-inline-start-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 Start Style Property

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

None Border Inline Start Style

To not have any border at the inline-start, we use the none value. In the following example, none value has been used.

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Transparent Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
      }

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

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

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

</html>

Dotted Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Dashed Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Solid Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Double Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Groove Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Ridge Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Inset Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Outset Border Inline Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Border Inline Start Style with Writing Mode

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

Example

<!DOCTYPE html>
<html>

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

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

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

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

</html>

Border Inline Start Style with Direction

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

      .border1 {
         direction: rtl;
      }

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

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

</html>

Supported Browsers

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

css_reference.htm

Print Page