CSS - border-inline-end-width Property
The CSS property border-inline-end-width determines the logical border width of an element, which is then translated into a physical border width.
Its mapping, depending on the given values for writing-mode, direction, and text-orientation, corresponds to properties like border-top-width, border-right-width, border-bottom-width, or border-left-width.
The properties border-inline-end-width is associated with border-block-start-width, border-block-end-width, and border-inline-start-width. When combined, they establish the various border widths of an element.
Possible Value
<'border-width'> - The width of the border.
Syntax
border-inline-end-width = <line-width> <line-width> = <length [0,∞]> | thin | medium | thick
Applies to
All the HTML elements.
CSS border-inline-end-width - length Value
The following example demonstrates the usage of border-inline-end-width property along with length value.
<html> <head> <style> .container { background-color: lightgreen; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; } .custom-box { border: 4px dashed #e74c3c; border-inline-end-width: 10px; padding: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 16px; color: #333; } </style> </head> <body> <div class="container"> <p class="custom-box">A example with border-inline-end-width property.</p> </div> </body> </html>
CSS border-inline-end-width - thin value
The following example demonstrates the usage of border-inline-end-width property along with thin width value.
<html> <head> <style> .container { background-color: #7aecf0; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; } .custom-box { border: 4px solid #141edb; border-inline-end-width: thin; padding: 10px; margin: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 20px; color: #333; } </style> </head> <body> <div class="container"> <p class="custom-box">A example with border-inline-end-width property thin value.</p> </div> </body> </html>
CSS border-inline-end-width - medium Value
The following example demonstrates the usage of border-inline-end-width property along with medium width value.
<html> <head> <style> .container { background-color: #7aecf0; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; } .custom-box { border: 8px solid #141edb; border-inline-end-width: medium; padding: 10px; margin: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 18px; color: #333; } </style> </head> <body> <div class="container"> <p class="custom-box">A example with border-inline-end-width property medium value.</p> </div> </body> </html>
CSS border-inline-end-width - thick value
The following example demonstrates the usage of border-inline-end-width property with vertical writing mode and thick width value.
<html> <head> <style> .custom-container { background-color: #f0f0f0; width: 250px; height: 350px; display: flex; align-items: center; justify-content: center; } .demo-box { writing-mode: vertical-rl; border: 1px solid #3498db; border-inline-end-width: thick; padding: 15px; margin-bottom: 10px; text-align: center; font-family: 'Verdana', sans-serif; font-size: 18px; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="demo-box">An example with border-inline-end-width property with verical writing mode.</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google