CSS - border-inline-start Property
The CSS property border-inline-start is a shorthand that allows for the centralized setting of various individual logical inline-start border properties within a style sheet.
The writing mode, directionality, and text orientation of the element determine how the border-inline-start attribute maps to a physical border.
With respect to the values specified for writing-mode, direction, and text-orientation, it corresponds to the border-top, border-right, border-bottom, or border-left property.
The different borders of an element are determined by the properties border-block-start, border-block-end, and border-inline-end that are linked to border-inline-start.
Possible Values
The border-inline-start is specified with one or more of the following, in any order:
<'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-inline-start = <line-width> || <line-style> || <color>
Applies to
All the HTML elements.
CSS border-inline-start - Basic Example
The following example demonstrates the usage of border-inline-start CSS property.
<html> <head> <style> .container { background-color: lightblue; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; } .customText { border-inline-start: 8px double #e74c3c; padding: 10px; margin-left: 10px; text-align: center; font-family: 'Arial', sans-serif; font-size: 16px; color: #2c3e50; } </style> </head> <body> <div class="container"> <p class="customText">An example with css property border-inline-start.</p> </div> </body> </html>
CSS border-inline-start - Writing Mode.
The following example demonstrates the usage of border-inline-start CSS property with veritcal writing mode.
<html> <head> <style> .custom-container { background-color: #d6d4d4; width: 250px; height: 350px; display: flex; align-items: center; justify-content: center; } .demo-border { writing-mode: vertical-rl; border: 2px solid #5e5a5a; border-inline-start: 1rem solid #3498db; padding: 12px; margin: 15px 15px; text-align: center; font-family: 'Verdana', sans-serif; font-size: 20px; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="demo-border">An example with CSS property border-inline-start and veritcal writing-mode</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google