CSS - border-block-start-color Property

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

Depending on the values provided for the element's writing-mode, direction, and text-orientation, its behavior corresponds to either border-top-color, border-right-color, border-bottom-color, or border-left-color.

Possible value

  • <color> - The color of the border.

Syntax

border-block-start-color = <color> | <image-1D>

Applies to

All the HTML elements.

CSS border-block-start-color - Using HEX color

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

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 350px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: #e4f0e4;
      padding: 15px;
      margin: 10px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 20px;
      color: #f5f4f0;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - Using RGB color

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

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: rgb(10, 150, 250); 
      padding: 15px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 25px;
      color: #f5f4f0;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">An example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - Using HSL color

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

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: hsl(120, 70%, 50%); 
      padding: 15px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 25px;
      color: #f5f4f0;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">An example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - Using named color

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

<html>
<head>
<style>
   .container {
      background-color: #098f07;
      width: 450px;
      height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px;
   }
   .demo-border {
      writing-mode: horizontal-tb;
      border: 8px dashed #111211;
      border-block-start-color: lightgrey; 
      padding: 15px;
      margin: 15px;
      text-align: center;
      font-family: 'Arial', sans-serif;
      font-size: 25px;
      color: #f5f4f0;
   }
</style>
</head>
<body>
<div class="container">
   <p class="demo-border">An example with border-block-start-color property.</p>
</div>
</body>
</html>

CSS border-block-start-color - Using RGBA color

The following example demonstrates the usage of border-block-start-color property with vertical writing mode and RGBA color value.

<html>
<head>
<style>
   .custom-container {
      background-color: #2c3e50;
      width: 300px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
   }
   .demo-block {
      writing-mode: vertical-rl;
      border: 6px double #3498db;
      border-block-start-color: rgba(120, 180, 50, 0.8);
      padding: 12px;
      text-align: center;
      font-family: 'Verdana', sans-serif;
      font-size: 25px;
      color: #ecf0f1;
}
</style>
</head>
<body>
<div class="custom-container">
<p class="demo-block">An example of border-block-start-color property with vertical text.</p>
</div>
</body>
</html>
Advertisements