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>
To Continue Learning Please Login
Login with Google