CSS - border-block-style Property
The CSS property border-block-style determines the logical block borders; the element's writing mode, directionality, and text orientation dictate how the borders are physically represented.
Based on the given values for writing-mode, direction, and text-orientation, its mapping corresponds to either border-top-style and border-bottom-style, or border-left-style and border-right-style properties.
The border-inline-style property may be used to set the border style in the perpendicular dimension.
The values for border-inline-start-style and border-inline-end-style can be set using it.
Possible value
<'border-style'> - The line style of the border.
Syntax
border-block-style = <'border-top-style'>{1,2}
Applies to
All the HTML elements.
CSS border-block-style - none Value
The following example demonstrates the usage of border-block-style property and none style value.
<html> <head> <style> div { background-color: #f0f0f0; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: none; } </style> </head> <body> <div> <p class="border-demo">This is an example with border-block-style property with none value.</p> </div> </body> </html>
CSS border-block-style - hidden Value
The following example demonstrates the usage of border-block-style property and hidden style value.
<html> <head> <style> div { background-color: #ccf0c5; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: hidden; } </style> </head> <body> <div> <p class="border-demo">This is an example with border-block-style property and hidden style.</p> </div> </body> </html>
CSS border-block-style - Dashed Style
The following example demonstrates the usage of border-block-style property and dashed style value.
<html> <head> <style> div { background-color: #e3e8b0; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: dashed; border-block-width: 5px; } </style> </head> <body> <div> <p class="border-demo">This is an example with border-block-style property and dashed style.</p> </div> </body> </html>
CSS border-block-style - Solid Style
The following example demonstrates the usage of border-block-style property and solid style value.
<html> <head> <style> div { background-color: #e8d1b0; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: solid; border-block-width: 5px; border-block-color: #de880d; } </style> </head> <body> <div> <p class="border-demo">This is an example with border-block-style property and solid style.</p> </div> </body> </html>
CSS border-block-style - Double Style
The following example demonstrates the usage of border-block-style property and double style value.
<html> <head> <style> div { background-color: #e8d1b0; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: double; border-block-width: 8px; border-block-color: #de880d; } </style> </head> <body> <div> <p class="border-demo">This is an example with border-block-style property and double style.</p> </div> </body> </html>
CSS border-block-style - Groove Style
The following example demonstrates the usage of border-block-style property and groove style value.
<html> <head> <style> div { background-color: #ebf0aa; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: groove; border-block-width: 8px; border-block-color: #b0bd06; } </style> </head> <body> <div> <p class="border-demo">This is an example with border-block-style property and groove style.</p> </div> </body> </html>
CSS border-block-style - Ridge Style
The following example demonstrates the usage of border-block-style property and ridge style value.
<html> <head> <style> div { background-color: #ebf0aa; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: ridge; border-block-width: 10px; border-block-color: #b0bd06; } </style> </head> <body> <div> <p class="border-demo">This is a border-block-style property example and ridge style.</p> </div> </body> </html>
CSS border-block-style - Inset Style
The following example demonstrates the usage of border-block-style property and inset style value.
<html> <head> <style> div { background-color: #c9f0aa; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: inset; border-block-width: 10px; border-block-color: #56ba04; } </style> </head> <body> <div> <p class="border-demo">This is a border-block-style property example and inset style.</p> </div> </body> </html>
CSS border-block-style - Outset Style
The following example demonstrates the usage of border-block-style property and outset style value.
<html> <head> <style> div { background-color: #c9f0aa; width: 350px; height: 350px; margin: 50px; padding: 15px; } .border-demo { font-size: 20px; color: #333; padding: 20px; margin: 10px; border-block-style: outset; border-block-width: 10px; border-block-color: #56ba04; } </style> </head> <body> <div> <p class="border-demo">This is a border-block-style property example and outset style.</p> </div> </body> </html>
CSS border-block-style - Writing mode
The following example demonstrates the usage of border-block-style property with vertical writing mode.
<html> <head> <style> div { background-color: #f0f0f0; width: 200px; height: 250px; margin: 50px; padding: 15px; } .border-demo { font-size: 18px; color: #333; writing-mode: vertical-rl; border: 7px solid red; border-block-style: inset; } </style> </head> <body> <div> <p class="border-demo">This is a bordered element with a border style and vertical writing mode.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google