CSS - border-block-end-color Property
An element's logical block-end border color is determined by the border-block-end-color CSS property, and it is converted into a physical border color depending on the writing mode, directionality, and text orientation of the element.
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.
The other border colors of the element are defined by related attributes border-block-start-color, border-inline-start-color, and border-inline-end-color.
Possible value
<color> - The color of the border.
Syntax
border-block-end-color = <color> | <image-1D>
Applies to
All the HTML elements.
CSS border-block-end-color - Using HEX color
The following example demonstrates the usage of border-block-end-color property with HEX color value.
<html> <head> <style> .container { background-color: #0c97ed; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .demo-border { writing-mode: horizontal-tb; border: 8px dashed #111211; border-block-end-color: white; border-block-end-style: solid; 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-end-color property.</p> </div> </body> </html>
CSS border-block-end-color - Using RGB color
The following example demonstrates the usage of border-block-end-color property with RGB color value.
<html> <head> <style> .container { background-color: #f2f2eb; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .demo-border { writing-mode: horizontal-tb; border: 8px double #111211; border-block-end-color: rgb(230, 230, 94); border-block-end-style: solid; padding: 15px; margin: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 20px; color: black; } </style> </head> <body> <div class="container"> <p class="demo-border">A example with border-block-end-color property.</p> </div> </body> </html>
CSS border-block-end-color - Using HSL color
The following example demonstrates the usage of border-block-end-color property with HSL color value.
<html> <head> <style> .container { background-color: #c6f5d3; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .demo-border { writing-mode: horizontal-tb; border: 8px double #111211; border-block-end-color: hsl(120, 70%, 50%); border-block-end-style: solid; padding: 15px; margin: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 20px; color: black; } </style> </head> <body> <div class="container"> <p class="demo-border">A example with border-block-end-color property.</p> </div> </body> </html>
CSS border-block-end-color - Using named color
The following example demonstrates the usage of border-block-end-color property with named color value.
<html> <head> <style> .container { background-color: #c6e1f5; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .demo-border { writing-mode: horizontal-tb; border: 8px dashed #111211; border-block-end-color: blue; border-block-end-style: solid; padding: 15px; margin: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 20px; color: black; } </style> </head> <body> <div class="container"> <p class="demo-border">A example with border-block-end-color property.</p> </div> </body> </html>
CSS border-block-end-color - Using RGBA color
The following example demonstrates the usage of border-block-end-color property with RGBA color value and vertical writing mode.
<html> <head> <style> .container { background-color: #c6e1f5; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .demo-border { writing-mode: vertical-rl; border: 4px double #111211; border-block-end-color: rgba(255, 0, 0, 0.7); border-block-end-style: solid; padding: 15px; margin: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 20px; color: black; } </style> </head> <body> <div class="container"> <p class="demo-border">An example with border-block-end-color property.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google