CSS - border-block-style Property

Quiz

CSS border-block-style property determines the logical block borders in the block direction, influenced by the writing mode-horizontal and vertical. If two styles are specified, the first applies to the start border and the second to the end border. If only one style is given, it applies to both borders.

Syntax

border-block-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.
inherit	This inherits the property from the parent element.

Examples of CSS Border Block Style Property

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

No Border Border Block Style

To avoid having a border at the border-block, we use the none value. In the following example, none value has been used with the border-block-style property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 2px solid black;
         padding: 10%;
         border-block-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with none value.
   </p>
</body>

</html>

Hidden Border Block Style

To set a hidden border block, we use the hidden value. This makes the borders occupy space but remain invisible. The example below shows this effect with a red indication line highlighting the hidden borders.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         width: 300px;
         padding: 10%;
         border: 2px solid black;
         position: relative;
         margin-bottom: 20px;
      }

      .none {
         border-block-style: none;
      }

      .hidden {
         border-block-style: hidden;
      }

      .indicator {
         background-color: grey;
         height: 5px;
         width: 100%;
         position: absolute;
         left: 0;
         display: none;
      }

      .show-indicator .indicator-top {
         top: 0;
         display: block;
      }

      .show-indicator .indicator-bottom {
         bottom: 0;
         display: block;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <div class="container none">
      Border Block Style: none
   </div>
   <div class="container hidden show-indicator">
      Border Block Style: hidden
   <div class="indicator indicator-top">
   </div>
   <div class="indicator indicator-bottom">
   </div>
   </div>
</body>

</html>

Dotted Border Block Style

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with dotted value.
   </p>
</body>

</html>

Dashed Border Block Style

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with dashed value.
   </p>
</body>

</html>

Solid Border Block Style

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 4px solid black;
         padding: 10%;
         border-block-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with solid value.
   </p>
</body>

</html>

Double Border Block Style

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

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 6px solid black;
         padding: 10%;
         border-block-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with double value.
   </p>
</body>

</html>

Groove Border Block Style

To have a 3D grooved border block, we use the groove value. This effect depends on the border-color. In the following example, groove value has been used with the border-block-style property with red border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid red;
         padding: 10%;
         border-block-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with groove value.
   </p>
</body>

</html>

Ridge Border Block Style

To have a 3D ridged border block, we use the ridge value. This effect depends on the border-color. In the following example, ridge value has been used with the border-block-style property with yellow border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid yellow;
         padding: 10%;
         border-block-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">T
      This shows the border-block-style
      property with ridge value.
   </p>
</body>

</html>

Inset Border Block Style

To have a 3D inset border block, we use the inset value. This effect depends on the border-color. In the following example, inset value has been used with the border-block-style property with orange border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         border: 15px solid orange;
         padding: 10%;
         border-block-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with inset value.
   </p>
</body>

</html>

Outset Border Block Style

To have a 3D outset border block, we use the outset value. This effect depends on the border-color. In the following example, outset value has been used with the border-block-style property with green border color.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
            border: 20px solid green;
            padding: 10%;
            border-block-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p class="box">
      This shows the border-block-style
      property with outset value.
   </p>
</body>

</html>

Border Block Style with Writing Mode

The writing mode influences the border-block-style property as it determines the direction of the border. Horizontal mode for top and bottom borders and vertical mode for right and left borders. These are shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      #horizontal {
         border: 1px solid black;
         padding: 8%;
         writing-mode: horizontal-tb;
         border-block-width:5px;
         border-block-style: dashed dotted;
      }

      #vertical {
         border: 1px solid black;
         padding: 8%;
         writing-mode: vertical-rl;
         border-block-width:5px;
         border-block-style:dashed dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-block-style property
   </h2>
   <p id="horizontal">
      This shows the border-block-style property 
      with dashed and dotted style in horizontal mode.
   </p>
   <p id="vertical">
      This shows the border-block-style property 
      with dashed and dotted style in vertical mode.
   </p>
</body>

</html>

Supported Browsers

Property
border-block-style	69.0	79.0	41.0	12.1	56.0

css_reference.htm

Print Page