CSS - border-block-style Property

The CSS property border-block-style determines the logical block borders; the element's writing mode, directionality, and text orientation dictate how the borders are physically represented.

Based on the given values for writing-mode, direction, and text-orientation, its mapping corresponds to either border-top-style and border-bottom-style, or border-left-style and border-right-style properties.
The border-inline-style property may be used to set the border style in the perpendicular dimension.

The values for border-inline-start-style and border-inline-end-style can be set using it.

Possible value

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

Syntax

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

Applies to

All the HTML elements.

CSS border-block-style - none Value

The following example demonstrates the usage of border-block-style property and none style value.

<html>
<head>
<style>
   div {
      background-color: #f0f0f0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: none;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property with none value.</p>
</div>
</body>
</html>

CSS border-block-style - hidden Value

The following example demonstrates the usage of border-block-style property and hidden style value.

<html>
<head>
<style>
   div {
      background-color: #ccf0c5;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: hidden;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and hidden style.</p>
</div>
</body>
</html>

CSS border-block-style - Dashed Style

The following example demonstrates the usage of border-block-style property and dashed style value.

<html>
<head>
<style>
   div {
      background-color: #e3e8b0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: dashed;
      border-block-width: 5px;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and dashed style.</p>
</div>
</body>
</html>

CSS border-block-style - Solid Style

The following example demonstrates the usage of border-block-style property and solid style value.

<html>
<head>
<style>
   div {
      background-color: #e8d1b0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: solid;
      border-block-width: 5px;
      border-block-color: #de880d;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and solid style.</p>
</div>
</body>
</html>

CSS border-block-style - Double Style

The following example demonstrates the usage of border-block-style property and double style value.

<html>
<head>
<style>
   div {
      background-color: #e8d1b0;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: double;
      border-block-width: 8px;
      border-block-color: #de880d;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and double style.</p>
</div>
</body>
</html>

CSS border-block-style - Groove Style

The following example demonstrates the usage of border-block-style property and groove style value.

<html>
<head>
<style>
   div {
      background-color: #ebf0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: groove;
      border-block-width: 8px;
      border-block-color: #b0bd06;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is an example with border-block-style property and groove style.</p>
</div>
</body>
</html>

CSS border-block-style - Ridge Style

The following example demonstrates the usage of border-block-style property and ridge style value.

<html>
<head>
<style>
   div {
      background-color: #ebf0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: ridge;
      border-block-width: 10px;
      border-block-color: #b0bd06;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a border-block-style property example and ridge style.</p>
</div>
</body>
</html>

CSS border-block-style - Inset Style

The following example demonstrates the usage of border-block-style property and inset style value.

<html>
<head>
<style>
   div {
      background-color: #c9f0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: inset;
      border-block-width: 10px;
      border-block-color: #56ba04;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a border-block-style property example and inset style.</p>
</div>
</body>
</html>

CSS border-block-style - Outset Style

The following example demonstrates the usage of border-block-style property and outset style value.

<html>
<head>
<style>
   div {
      background-color: #c9f0aa;
      width: 350px;
      height: 350px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 20px;
      color: #333;
      padding: 20px;
      margin: 10px;
      border-block-style: outset;
      border-block-width: 10px;
      border-block-color: #56ba04;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a border-block-style property example and outset style.</p>
</div>
</body>
</html>

CSS border-block-style - Writing mode

The following example demonstrates the usage of border-block-style property with vertical writing mode.

<html>
<head>
<style>
   div {
      background-color: #f0f0f0;
      width: 200px;
      height: 250px;
      margin: 50px;
      padding: 15px;
   }
   .border-demo {
      font-size: 18px;
      color: #333;
      writing-mode: vertical-rl;
      border: 7px solid red;
      border-block-style: inset;
}
</style>
</head>
<body>
<div>
<p class="border-demo">This is a bordered element with a  border style and vertical writing mode.</p>
</div>
</body>
</html>