CSS - border-block-end-style Property
The logical block-end border style of an element is defined by the border-block-end-style CSS property. Based on the writing mode, directionality, and text orientation of the element, this logical border matches a physical border style.
The values given for writing-mode, direction and text-orientation attributes define the actual border-top-style, border-right-style, or border-left-style.
The additional border styles of the element are defined by related attributes border-block-start-style, border-inline-start-style, and border-inline-end-style.
Possible values
<'border-style'> - The line style of the border.
Syntax
border-block-end-style = <line-style>
Applies to
All the HTML elements.
CSS border-block-end-style - None Style
The following example demonstrates the usage of border-block-end-style property with none style value.
<html> <head> <style> .container { background-color: #d1e3ff; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .demo-border { border-block-end-style: none; border-block-end-width: 8px; padding: 10px; margin: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is a border-block-end-style example with none style.</p> </div> </body> </html>
CSS border-block-end-style - Hidden Style
The following example demonstrates the usage of border-block-end-style property with hidden style value.
<html> <head> <style> .container { background-color: #f3ffd1; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .demo-border { border-block-end-style: hidden; border-block-end-width: 8px; padding: 10px; margin: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is a border-block-end-style example with hidden style.</p> </div> </body> </html>
CSS border-block-end-style - Dotted Style
The following example demonstrates the usage of border-block-end-style property with dotted style value.
<html> <head> <style> .container { background-color: #99e0f2; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); } .demo-border { border: 3px solid grey; border-block-end-style: dotted; border-block-end-width: 6px; border-block-end-color: #0e58c7; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with dotted style</p> </div> </body> </html>
CSS border-block-end-style - Dashed Style
The following example demonstrates the usage of border-block-end-style property with dashed style value.
<html> <head> <style> .container { background-color: #acf2bb; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); } .demo-border { border: 3px solid grey; border-block-end-style: dashed; border-block-end-width: 6px; border-block-end-color: #069e27; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with dashed style</p> </div> </body> </html>
CSS border-block-end-style - Solid Style
The following example demonstrates the usage of border-block-end-style property with solid style value.
<html> <head> <style> .container { background-color: #e8f0c7; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } .demo-border { border: 3px dashed grey; border-block-end-style: solid; border-block-end-width: 6px; border-block-end-color: #8ba808; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with solid style</p> </div> </body> </html>
CSS border-block-end-style - Double Style
The following example demonstrates the usage of border-block-end-style property with double style value.
<html> <head> <style> .container { background-color: #f1f2eb; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } .demo-border { border: 3px dashed #3b1a02; border-block-end-style: double; border-block-end-width: 10px; border-block-end-color: #ba5609; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with double style</p> </div> </body> </html>
CSS border-block-end-style - Groove Style
The following example demonstrates the usage of border-block-end-style property with groove style value.
<html> <head> <style> .container { background-color: #f2f2d3; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } .demo-border { border: 3px solid #3b1a02; border-block-end-style: groove; border-block-end-width: 10px; border-block-end-color: #babd0b; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with groove style</p> </div> </body> </html>
CSS border-block-end-style - Ridge Style
The following example demonstrates the usage of border-block-end-style property with ridge style value.
<html> <head> <style> .container { background-color: #f0e0c7; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } .demo-border { border: 3px dashed #3b1a02; border-block-end-style: ridge; border-block-end-width: 10px; border-block-end-color: #d6880b; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with ridge style</p> </div> </body> </html>
CSS border-block-end-style - Inset Style
The following example demonstrates the usage of border-block-end-style property with inset style value.
<html> <head> <style> .container { background-color: #eef5c6; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } .demo-border { border: 3px dashed #3b1a02; border-block-end-style: inset; border-block-end-width: 8px; border-block-end-color: #a7c404; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with inset style</p> </div> </body> </html>
CSS border-block-end-style - Outset Style
The following example demonstrates the usage of border-block-end-style property with outset style value.
<html> <head> <style> .container { background-color: #a0e8a4; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } .demo-border { border: 3px dashed #3b1a02; border-block-end-style: outset; border-block-end-width: 8px; border-block-end-color: #07e312; margin: 10px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="container"> <p class="demo-border">This is border-block-end-style property example with outset style</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google