CSS - border-block-end Property
The CSS shorthand property border-block-end provides an easy way to set the values of all logical block-end border properties in one place inside the style sheet.
Values forborder-block-end-width, border-block-end-style, and border-block-end-color can be specified using the shorthand border-block-end property.
The writing-mode, direction, and text-orientation of the element, which correspond to characteristics like border-top, border-right, border-bottom, or border-left determine its mapping to a particular physical border.
It is associated with properties that specify the remaining borders of the element, such border-block-start, border-inline-start, and border-inline-end.
Possible values
The border-block-end can be specified with one or more of the following:
<'border-width'> - The width of the border.
<'border-style'> - The line style of the border.
<color> - The color of the border.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
border-block-end = <line-width> || <line-style> || <color>
Applies to
All the HTML elements.
CSS border-block-end - Basic Example
The following example demonstrates the usage of border-block-end property.
<html> <head> <style> body { background-color: lightgray; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #fff; width: 250px; height: 200px; display: flex; justify-content: center; align-items: center; border: 2px solid #333; border-radius: 8px; } .border-text { font-size: 20px; text-align: center; color: #333; border-block-end: 10px dashed grey; padding-block-end: 10px; margin-block-end: 10px; } </style> </head> <body> <div class="container"> <p class="border-text">A border-block-end example.</p> </div> </body> </html>
CSS border-block-end - Writing Mode
The following example demonstrates the usage of border-block-end property.
<html> <head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #f1f1f1; width: 180px; height: 300px; display: flex; justify-content: center; align-items: center; border: 3px solid #ff6f61; border-radius: 8px; writing-mode: vertical-rl; } .demo-box { font-size: 20px; text-align: center; color: #333; border-block-end: 1rem solid #4caf50; padding-block-end: 1.5rem; margin-block-end: 1rem; } </style> </head> <body> <div class="container"> <p class="demo-box">A border-block-end example with vertical writing mode.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google