CSS - border-block-color Property

The color of logical block borders is specified by the border-block-color CSS property; the writing mode, directionality, and text orientation of the element determine the physical border color.

Depending on the values supplied for writing-mode, direction, and text-orientation, it corresponds to either the border-top-color and border-bottom-color, or the border-right-color and border-left-color properties.
The border color in the other dimension can be set with border-inline-color which sets border-inline-start-color and border-inline-end-color.

Possible value

<color> - The color of the border.

Syntax

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

Applies to

All the HTML elements.

CSS border-block-color - Using named color

The following example demonstrates the usage of border-block-color property along with named color value.

<html>
<head>
<style>
   .custom-div {
      background-color: lightgreen;
      width: 350px;
      height: 250px;
   }
   .demo-border {
      border: 6px dashed orange; 
      border-block-color: purple; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">This is a bordered element with a specific border-block-color.</p>
</div>
</body>
</html>

CSS border-block-color - Using HEX

The following example demonstrates the usage of border-block-color property along with HEX color value.

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: #eb21b8; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
}
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">This is a bordered element with a specific border-block-color.</p>
</div>
</body>
</html>

CSS border-block-color - Using RGB color

The following example demonstrates the usage of border-block-color property along with RGB color value.

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: rgb(72, 168, 109); 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
   <p class="demo-border">This is a bordered element with a specific border-block-color.</p>
</div>
</body>
</html>

CSS border-block-color - Using HSL color

The following example demonstrates the usage of border-block-color property along with HSL color value.

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: hsl(200, 70%, 50%); 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
   <p class="demo-border">This is a bordered element with a specific border-block-color.</p>
</div>
</body>
</html>

CSS border-block-color - Using Transparent

The following example demonstrates the usage of border-block-color property along with transparent color value.

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border { 
      border: 8px groove blue; 
      border-block-color: transparent; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
   }
</style>
</head>
<body>
<div class="custom-div">
   <p class="demo-border">This is a bordered element with a specific border-block-color and transparent value.</p>
</div>
</body>
</html>

CSS border-block-color - Writing Mode

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

<html>
<head>
<style>
   .custom-div {
      background-color: lightblue; 
      width: 350px;
      height: 350px; 
      padding: 15px;
      margin: 20px;
   }
   .demo-border {
      writing-mode: vertical-rl; 
      border: 8px groove blue; 
      border-block-color: orange red; 
      padding: 15px;
      margin: 20px;
      color: #333;
      font-size: 18px;
}
</style>
</head>
<body>
<div class="custom-div">
<p class="demo-border">This is a bordered element with a specific border-block-color and vertical writing mode.</p>
</div>
</body>
</html>