CSS - border-inline-end-style Property

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.

This property is a logical inline end border, which means that its value depends on the element's writing mode, directionality, and text orientation.

Based on the values of writing-mode, direction, and text-orientation, the inline end border corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style.

Possible Values

  • <'border-style'>: Shows the line style of the border. Refer border-style.

Applies to

All the HTML elements.

Syntax

border-inline-end-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;

CSS border-inline-end-style - Solid Border Style

Here is an example showing the solid border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-solid {
      border-inline-end-style: solid;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-solid">solid inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Inset Border Style

Here is an example showing the inset border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-inset {
      border-inline-end-style: inset;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-inset">inset inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Dashed Border Style

Here is an example showing the dashed border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-dashed {
      border-inline-end-style: dashed;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-dashed">dashed inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Dotted Border Style

Here is an example showing the dotted border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-dotted {
      border-inline-end-style: dotted;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-dotted">dotted inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Groove Border Style

Here is an example showing the groove border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-groove {
      border-inline-end-style: groove;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-groove">groove inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Double Border Style

Here is an example showing the double border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

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

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-double">double inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Outset Border Style

Here is an example showing the outset border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-outset {
      border-inline-end-style: outset;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-outset">outset inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Ridge Border Style

Here is an example showing the ridge border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-ridge {
      border-inline-end-style: ridge;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-ridge">ridge inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - None Border Style

Here is an example showing no border style of inline end border of p element:

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: max-content;
      padding: 10px;
   }

   .border-none {
      border-inline-end-style: none;
   }

   p {
      padding: 15px;
      color: white;
      border: 5px solid gold;
      margin: 8px;
   }
</style>
</head>
<body>
   <div>
      <p class="border-none">No inline end border</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Based On Writing Mode (Horizontal)

Here is an example showing the style of inline end border of p element based on the writing mode of the text, which is horizontal. The style that is given is dotted. You may use other style values to see the change.

<html>
<head>
<style>
   div {
      background-color: peachpuff;
      width: 220px;
      height: 220px;
   }

   .sampleText-wm-vtl {
      writing-mode: vertical-rl;
      border: 5px solid red;
      border-inline-end-style: double;
   }

   p {
      padding: 5px;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-wm-vtl">Vertical Text</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Based On Writing Mode (Vertical)

Here is an example showing the style of inline end border of p element based on the writing mode of the text, which is vertical. The style that is given is double. You may use other style values to see the change.

<html>
<head>
<style>
   div {
      background-color: peachpuff;
      width: 220px;
      height: 220px;
   }

   .sampleText-wm-vtl {
      writing-mode: vertical-rl;
      border: 5px solid red;
      border-inline-end-style: double;
   }

   p {
      padding: 5px;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-wm-vtl">Vertical Text</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Based On Direction (left-to-right)

Here is an example showing the style of inline end border of p element based on the direction of the text, which is left-to-right. The style that is given is dashed. You may use other style values to see the change.

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: 220px;
   }

   .sampleText-dir-ltr {
      direction: ltr;
      border: 8px solid red;
      border-inline-end-style: dashed;
   }

   .sampleText-dir-rtl {
      direction: rtl;
      border: 10px solid gold;
      border-inline-end-style: groove;
   }

   p {
      padding: 15px;
      color: white;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-dir-ltr">Direction ltr</p>
      <p class="sampleText-dir-rtl">Direction rtl</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Based On Direction (right-to-left)

Here is an example showing the style of inline end border of p element based on the direction of the text, which is right-to-left. The style that is given is groove. You may use other style values to see the change.

<html>
<head>
<style>
   div {
      background-color: black;
      width: 220px;
      height: 220px;
   }

   .sampleText-dir-rtl {
      direction: rtl;
      border: 10px solid gold;
      border-inline-end-style: groove;
   }

   p {
      padding: 15px;
      color: white;
   }
</style>
</head>
<body>
   <div>
      <p class="sampleText-dir-rtl">Direction rtl</p>
   </div> 
</body>
</html>

CSS border-inline-end-style - Related Properties

Following is the list of CSS properties related to border-inline-end-style:

property description
border-block-start-style Sets the style of the logical block start border of an element.
border-block-end-style Sets the style of the logical block end border of an element.
border-inline-end-style Sets the style of the logical inline end border of an element.
Advertisements