CSS - border-inline-style Property

The border-inline-style CSS 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.

Depending on the values set for writing-mode, direction, and text-orientation, its behavior corresponds to either the border-left-style and border-right-style, or the border-top-style and border-bottom-style properties.
Use the border-block-style property to configure both border-block-start-style and border-block-end-style in order to specify the border style in the perpendicular dimension.

Possible value

<'border-style'> - The line style of the border.

Syntax

border-inline-style = <'border-top-style'>{1,2}

Applies to

All the HTML elements.

CSS border-inline-style - None style

The following example demonstrates the usage of border-inline-style property along with none style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #f7f2f3;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
   }
   .mod-border {
      border: 3px solid #e83a4e;
      border-inline-style: none;
      padding: 12px;
      margin: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and none style.</p>
</div>
</body>
</html>

CSS border-inline-style - Hidden style

The following example demonstrates the usage of border-inline-style property along with hidden style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #f7f2f3;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
   }
   .mod-border {
      border: 5px solid blue;
      border-inline-style: hidden;
      padding: 12px;
      margin: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and hidden style.</p>
</div>
</body>
</html>

CSS border-inline-style - Dotted style

The following example demonstrates the usage of border-inline-style property along with dotted style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #ffa07a;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
   }
   .mod-border {
      border: 3px dashed #b32509;
      border-inline-style: dotted;
      border-inline-width: 8px;
      padding: 12px;
      margin: 10px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and dotted style.</p>
</div>
</body>
</html>

CSS border-inline-style - Dotted style

The following example demonstrates the usage of border-inline-style property along with dotted style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #e3dd84;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
   }
   .mod-border {
      border: 3px solid #9e9405;
      border-inline-style: dashed;
      border-inline-width: 8px;
      padding: 12px;
      margin: 10px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and dashed style.</p>
</div>
</body>
</html>

CSS border-inline-style - Solid style

The following example demonstrates the usage of border-inline-style property along with solid style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #88dceb;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
   }
   .mod-border {
      border: 3px solid #096396;
      border-inline-style: solid;
      border-inline-width: 10px;
      padding: 12px;
      margin: 15px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and solid style.</p>
</div>
</body>
</html>

CSS border-inline-style - Groove style

The following example demonstrates the usage of border-inline-style property along with groove style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #b9e7ed;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
   }
   .mod-border {
      border: 3px solid gray;
      border-inline-style: groove;
      border-inline-width: 10px;
      border-inline-color: blue;
      padding: 12px;
      margin: 15px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and groove style.</p>
</div>
</body>
</html>

CSS border-inline-style - Ridge style

The following example demonstrates the usage of border-inline-style property along with Ridge style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #e8e6e6;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
   }
   .mod-border {
      border: 3px solid #e83a4e;
      border-inline-style: ridge;
      border-inline-width: 10px;
      border-inline-color: blue;
      padding: 12px;
      margin: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and ridge style.</p>
</div>
</body>
</html>

CSS border-inline-style - Inset style

The following example demonstrates the usage of border-inline-style property along with inset style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #f7f2f3;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
   }
   .mod-border {
      border: 3px solid #e83a4e;
      border-inline-style: inset;
      border-inline-width: 10px;
      border-inline-color: blue;
      padding: 12px;
      margin: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and inset style.</p>
</div>
</body>
</html>

CSS border-inline-style - Outset style

The following example demonstrates the usage of border-inline-style property along with outset style value.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .custom-container {
      background-color: #f7f2f3;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
   }
   .mod-border {
      border: 3px solid #e83a4e;
      border-inline-style: outset;
      border-inline-width: 8px;
      border-inline-color: blue;
      padding: 12px;
      margin: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="custom-container">
<p class="mod-border">A example with border-inline-style property and outset style.</p>
</div>
</body>
</html>

CSS border-inline-style - Double style

The following example demonstrates the usage of border-inline-style property along with double style and vertical writing mode.

 
<html>
<head>
<style>
   .body-style {
      margin: 50px;
      padding: 50px;
      background-color: #f3f3f3;
   }
   .container {
      background-color: #ffcccb;
      width: 380px;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
   }
   .new-border {
      writing-mode: vertical-rl;
      border: 6px solid #e74c3c;
      border-inline-style: double;
      padding: 15px;
      margin: 10px 10px;
      font-weight: bold;
      color: #2c3e50;
   }
</style>
</head>
<body class="body-style">
<div class="container">
<p class="new-border">An example with border-inline-style property with vertical writing mode</p>
</div>
</body>
</html>