The CSS property border-inline is a shorthand property that sets the values for different logical inline border attributes, combining them into a single statement.
- The writing mode, directionality, and text orientation of the element determine how the border-inline attribute is mapped to actual boundaries.
- Depending on values of writing-mode, direction, and text-orientation, border-inline behaves as either border-top and border-bottom or border-right and border-left properties.
- Use the border-block property, which sets both border-block-start and border-block-end, to establish borders in other dimension.
Possible values
The border-inline 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:
- border-inline-color
- border-inline-style
- border-inline-width
Syntax
border-inline = <'border-block-start'>Applies to
All the HTML elements.
CSS border-inline – Basic Example
The following example demonstrates the usage of border-inline CSS property.
<html><head><style>
.container {
background-color: #ffeeba;
width: 450px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 10px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}
.custom-border {
border-inline: 6px dashed #3498db;
padding: 10px;
font-weight: bold;
color: #333;
}
</style></head><body><div class="container"><p class="custom-border">A Example with border-inline property</p></div></body></html>CSS border-inline – Writing Mode
The following example demonstrates the usage of border-inline CSS property with vertical writing mode.
<html><head><style>
.container {
background-color: #fed8b1;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 15px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
writing-mode: vertical-rl;
}
.demo-border {
border:4px solid black;
border-inline: 0.9rem groove #e74c3c;
padding: 10px;
font-weight: bold;
color: #333;
}
</style></head><body><div class="container"><p class="demo-border">A border-inline example with vertical text.</p></div></body></html>Related Properties
The table given below lists some related properties:
| Property | Description |
|---|---|
| border-inline-width | Defines the width of the logical inline borders of an element. |
| border-inline-start-width | Defines the width of the logical inline-start border of an element. |
| border-inline-end-width | Defines the width of the logical inline-end border of an element. |
| border-inline-end | A shorthand property for setting the individual logical inline-end border property |
| border-inline-color | Defines the color of the logical inline borders of an element. |
| border-inline-start-color | Defines the color of the logical inline start border of an element. |
| border-inline-end-color | Defines the color of the logical inline-end border of an element. |
| border-inline-start | A shorthand property for setting the individual logical inline-start border property. |
| border-inline-style | Defines the style of the inline border of an element. |
| border-inline-start-style | Defines the style of the logical inline start border of an element. |
| border-inline-end-style | Defines the style of the logical inline end border of an element. |
Leave a Reply