CSS - border-inline-start-style Property

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.

This property is a logical inline start 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 start 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-start-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   .sampleText-wm-htl {
      writing-mode: horizontal-tb;
      border: 5px solid blue;
      border-inline-start-style: dotted;
   }

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

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

Here is an example showing the style of inline start border of p element based on the writing mode of the text, which is vertical. The styles that are given are dotted and 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-start-style: double;
   }

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

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

Here is an example showing the style of inline start border of p element based on the direction of the text, which is left-to-right. The styles that are given are dashed and groove. 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-start-style: dashed;
   }

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

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

Here is an example showing the style of inline start border of p element based on the direction of the text, which is right-to-left. The styles that are given are dashed and 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-start-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-start-style - Related Properties

Following is the list of CSS properties related to border-inline-start-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