CSS - border-inline-end-style Property

Quiz

CSS border-inline-end-style property determines the style of an element's inline end 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-end-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 End Style Property

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

None Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Transparent Border Inline End 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-end-style: none;
      }

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

<body>
   <h2>
      CSS border-inline-end-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have an inline-end 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 End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Dashed Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Solid Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Double Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Groove Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Ridge Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Inset Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Outset Border Inline End Style

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

Example

<!DOCTYPE html>
<html>

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

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

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

</html>

Border Inline End Style with Writing Mode

The border-inline-end-style property is affected by the writing mode which decides the direction of the inline border end style. In vertical writing mode, it affects the bottom border style while in horizontal writing mode, it affects the right 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-end-style: dashed;
      }

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

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

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

</html>

Border Inline End Style with Direction

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

      .border1 {
         direction: rtl;
      }

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

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

</html>

Supported Browsers

Property
border-inset-end-style	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page