CSS - border-block-start-style Property

Previous
Quiz

CSS border-block-start-style property determines the logical block-start border style and is converted into a physical border style depending on the writing mode, directionality, and text orientation of the element.

Syntax

border-block-start-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Property Values

ValueDescription
noneIt specifies no border. Default value.
hiddenIt is similar to none, except in border conflict resolution for table elements.
dottedIt specifies a dotted border.
dashedIt specifies a dashed border.
solidIt specifies a solid border.
doubleIt specifies a double border.
grooveIt specifies a 3D grooved border. Effect depends on the border-color value.
ridgeIt specifies a 3D ridged border. Effect depends on the border-color value.
insetIt specifies a 3D inset border. Effect depends on the border-color value.
outsetIt specifies a 3D outset border. Effect depends on the border-color value.
inheritThis inherits the property from the parent element.

Examples of CSS Border Block Start Style Property

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

No Border Border Block Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Hidden Border Block Start Style

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

Example

<!DOCTYPE html>
<html>

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

      .none {
         border-block-start-width: 5px;
         border-block-start-style: none;
         border-block-start-color: transparent;
      }

      .hidden {
         border-block-start-width: 5px;
         border-block-start-style: hidden;
         border-block-start-color: transparent;
      }

      .indicator {
         background-color: red;
         height: 5px;
         width: 100%;
         position: absolute;
         top: 0;
         left: 0;
      }

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

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

</html>

Dotted Border Block Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Dashed Border Block Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Solid Border Block Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Double Border Block Start Style

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

Example

<!DOCTYPE html>
<html>

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

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

</html>

Groove Border Block Start Style

To have a 3D grooved border at the border block start, 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-start-style property with red border color.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Ridge Border Block Start Style

To have a 3D ridged border at the border block start, 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-start-style property with yellow border color.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Inset Border Block Start Style

To have a 3D inset border at the border block start, 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-start-style property with orange border color.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Outset Border Block Start Style

To have a 3D outset border at the border block start, 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-start-style property with green border color.

Example

<!DOCTYPE html>
<html>

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

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

</html>

Border Block Start Style with Writing Mode

The writing mode influences the border-block-start-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: 9px solid black;
         padding: 8%;
         writing-mode: horizontal-tb;
         border-block-start-style: dashed;
      }

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

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

</html>

Supported Browsers

PropertyChromeEdgeFirefoxSafariOpera
border-block-start-style69.079.041.012.156.0
css_reference.htm
Print Page
Previous
Next