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