CSS - border-block-start Property

The border-block-start is a shorthand CSS property that sets the values of individual logical block-start border attributes in sinlge declaration.

Values for border-block-start-width, border-block-start-style, and border-block-start-color can be specified using the shorthand border-block-start property.
The writing-mode, direction, and text-orientation of the element determines how it maps to a particular physical border; these characteristics include border-top, border-right, border-bottom, and border-left.
It is connected to properties that determine the other borders of the element, such border-block-end, border-inline-start, and border-inline-end.

Possible values

The border-block-start can be specified with one or more of the following, in any order:

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

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

border-block-start = <line-width> || <line-style> || <color>

Applies to

All the HTML elements.

CSS border-block-start - Basic Example

The following example demonstrates the usage of border-block-start property.

<html>
<head>
<style> 
   header {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
   }
      section {
      flex: 1;
      padding: 20px;
      background-color: #fff;
      margin: 10px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
   }
   .right-section {
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   .exampleText {
      border-block-start: 7px dashed blue;
      margin-top: 20px;
      padding: 10px;
      background-color: #ffcc00;
      font-weight: bold;
   }
</style>
</head>
<body>
<header>
<h1>Example</h1>
</header>
<main>
<section class="right-section">
<h2>Section</h2>
<p>Example of border-block-start, it has blue border</p>
<div class="exampleText">Example text</div>
</section>
</main>
</body>
</html>

CSS border-block-start - Writing Mode

The following example demonstrates the usage of border-block-start property with veritcal writing mode.

<html>
<head>
<style>  
   header {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
   }
   section {
      flex: 1;
      padding: 20px;
      background-color: #fff;
      margin: 10px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 1);
   }
   .right-section {
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   .exampleText {
      writing-mode: vertical-rl;
      border-block-start: 0.6rem solid red;
      margin-top: 20px;
      padding: 10px;
      background-color: #ffcc00;
      font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Example</h1>
</header>
<main>
<section class="right-section">
<h2>Section</h2>
<p>Example of border-block-start, it has red border. It has vertical text.</p>
<div class="exampleText">Example text</div>
</section>
</main>
</body>
</html>