CSS - border-block-width Property
The width of logical block borders is defined by the CSS property border-block-width, which maps to a physical border width depending on the writing mode, directionality, and text orientation of the element.
Depending on the values provided for writing-mode, direction, and text-orientation, its mapping relates to either the border-left-width and border-right-width, or the border-top-width and border-bottom-width properties.
The border-inline-width property may be used to define the border width in the other dimensions. Both the border-inline-start-width and border-inline-end-width values are configured.
Possible value
<'border-width'> - The width of the border.
Syntax
border-block-width = <'border-top-width'>{1,2}
Applies to
All the HTML elements.
CSS border-block-width - thin value
The following example demonstrates the usage of border-block-width property along with thin width value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f0f0f0; } .new-container { background-color: #f0e8e6; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 15px; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); } .custom-border { border: 4px dashed #e74c3c; border-block-width: thin; padding: 15px; margin: 10px; font-size: 22px; font-weight: bold; color: #333; } </style> </head> <body> <div class="new-container"> <p class="custom-border">A example with border-block-width property with thin style</p> </div> </body> </html>
CSS border-block-width - medium value
The following example demonstrates the usage of border-block-width property along with medium width value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f0f0f0; } .new-container { background-color: #ebad9b; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 15px; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); } .custom-border { border: 4px dashed #b5401d; border-block-width: medium; padding: 15px; margin: 10px; font-size: 22px; font-weight: bold; color: #333; } </style> </head> <body> <div class="new-container"> <p class="custom-border">A example with border-block-width property with medium style</p> </div> </body> </html>
CSS border-block-width - thick Value
The following example demonstrates the usage of border-block-width property along with thick width value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f0f0f0; } .new-container { background-color: #ced7f0; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 15px; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); } .custom-border { border: 2px dashed #134ef0; border-block-width: thick; padding: 15px; margin: 10px; font-size: 22px; font-weight: bold; color: #333; } </style> </head> <body> <div class="new-container"> <p class="custom-border">A example with border-block-width property with thick style</p> </div> </body> </html>
CSS border-block-width - length Value
The following example demonstrates the usage of border-block-width property along with length value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f0f0f0; } .new-container { background-color: #f5f3e1; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 15px; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); } .custom-border { border: 2px solid #9c9105; border-block-width: 5px 10px; padding: 15px; margin: 10px; font-size: 20x; font-weight: bold; color: #333; } </style> </head> <body> <div class="new-container"> <p class="custom-border">A example with border-block-width property.</p> </div> </body> </html>
CSS border-block-width - Writing mode
The following example demonstrates the usage of border-block-style property with vertical writing mode.
<html> <head> <style> .custom-div { background-color: gray; width: 450px; height: 350px; } .demo-border { writing-mode: vertical-rl; border: 1px solid blue; border-block-width: 5px; padding: 15px; margin: 10px; color: #fff; font-size: 22px; } </style> </head> <body> <div class="custom-div"> <p class="demo-border">This is a example with border-block-width property.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google