CSS - border-block
The CSS shorthand property border-block is a logical property that defines width, style and color of both the start and end in the block dimension at once.
border-block property acts on both the start and finish in the block dimension. The writing mode, directionality, and text orientation of the element determine which precise physical borders are impacted.
When the writing-mode is set to the default horizontal direction, border-block is applied to the top and bottom borders of an element.
Conversely, a vertical writing-mode, applies border-block to the right and left borders.
Possible values
<border-width> - The width of the border.
<border-style> - The line style of the border.
<border-color> - The color of the border.
Constituent Properties
This property is a shorthand for the following CSS properties:
Syntax
border-block: <border-block-width> || <border-block-style> || <border-block-color>
Applies to
All the HTML elements.
CSS border-block - Basic Example
The following example demonstrates the css border-block property.
<html> <head> <style> .border-demo { width: 300px; height: 150px; margin: 20px; padding: 20px; background-color: #f0f0f0; border-block: 5px dotted #3498db; } .add-demo { font-size: 18px; color: #111; } </style> </head> <body> <div class="border-demo"> <p class="add-demo">This is a bordered element with padding and background color.</p> <p>This is an example for border-block property</p> </div> </body> </html>
CSS border-block - writing-mode Property
The following example demonstrates the CSS properties border-block with vertical writing mode.
<html> <head> <style> .vertical-border { writing-mode: vertical-rl; direction: ltr; width: 150px; height: 250px; margin: 50px; padding: 20px; background-color: #f0f0f0; border-block: 1rem solid red; } .add-style { font-size: 18px; color: #333; } </style> </head> <body> <div class="vertical-border"> <p class="add-style">This is a vertical bordered element with a solid red border.</p> </div> </body> </html>
Related Properties
The table given below lists some related properties:
Property | Description |
---|---|
border-block | A shorthand property. |
border-block-start | A shorthand property for setting the individual logical block-start border property values. |
border-block-end | A shorthand property for setting the individual logical block-end border property values. |
border-block-color | Defines the color of the logical block borders of an element. |
border-block-start-color | Defines the color of the logical block-start border of an element. |
border-block-end-color | Defines the color of the logical block-end border of an element. |
border-block-style | Defines the style of the logical block borders of an element. |
border-block-start-style | Defines the style of the logical block start border of an element. |
border-block-end-style | Defines the style of the logical block-end border of an element. |
border-block-width | Defines the width of the logical block borders of an element. |
border-block-start-width | Defines the width of the logical block-start border of an element. |
border-block-end-width | Defines the width of the logical block-end border of an element. |
To Continue Learning Please Login
Login with Google