CSS border-inline is a shorthand property that sets the values for different logical inline border attributes, border-inline-width, border-inline-style and border-inline-color in one single declaration. The border-style is required. Default values of color and width will be used if not specified. The property is affected by writing mode, text-orientation and direction.
Syntax
border-inline: border-inline-width border-inline-style border-inline-color | initial | inherit;
Property Values
| Value | Description |
|---|---|
| border-inline-width | It specifies the width of element borders in inline direction. Default value is medium. |
| border-inline-style | It specifies the style of element borders in inline direction. Default value is none. |
| border-inline-color | It specifies the color of element borders in inline direction. Default value is color of the text. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Border Inline Property
The following examples explain the border-inline porperty with different values.
Defining All Values of Border Inline Property
To define the values of border-inline-width, border-inline-style and border-inline-color in one single declaration, we use the border-inline property.The following example shows how this is done.
Example
<!DOCTYPE html><html><head><style>.container { background-color: lightgrey; width: 100vh; height: 400px; display: block; justify-content: center; padding: 25px; text-align: center; font-weight:bold; }.borders { border: 1px solid black; padding: 20px; }.border1 { border-inline: 4px solid red; }.border2 { border-inline: 6px dashed blue; }.border3 { border-inline: 8px dotted yellow; }</style></head><body><h2>.border4 { border-inline: 8px double brown; }</h2><div class="container"><p class="borders border1">CSS border-inline propertyThis has border-inline property with 4px width solid style and red color </p><p class="borders border2"> This has border-inline property with 6px width dashed style and blue color </p><p class="borders border3"> This has border-inline property with 8px width dotted style and yellow color </p><p class="borders border4 "> This has border-inline property with 8px width double style and brown color </p></div></body></html></pre>Constituent Properties of Border Inline Property
The border-inline property is composed of properties border-inline-width, border-inline-style and border-inline-color. The following example shows how these individual properties combine to show the border-inline effect.
Example
<!DOCTYPE html><html><head><style>.container { background-color: lightgreen; width: 100vh; height: 200px; display: block; justify-content: center; padding: 25px; text-align: center; font-weight: bold; }.borders { border: 1px solid black; padding: 20px; }.border1 { border-inline-width: 4px; border-inline-style: solid; border-inline-color: red; }</style></head><body><h2>.border2 { border-inline-width: 6px; border-inline-style: dashed; border-inline-color: blue; }</h2><div class="container"><p class="borders border1">CSS border-inline property</p><p class="borders border2">This has border-inline-width:4px, border-inline-style:solid, border-inline-color:red</p></div></body></html>This has border-inline-width:6px, border-inline-style:dashed, border-inline-color:blueBorder Inline Property with Writing Mode
The border-inline property is affected by the writing mode which decides the direction of the inline borders. In vertical writing mode, it affects the top and bottom borders while in horizontal writing mode, it affects the left and right borders. These are shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { display: block; justify-content: center; padding: 25px; text-align: center; font-weight: bold; }.borders { border: 1px solid black; padding: 20px; }.border1 { border-inline: 4px solid red; writing-mode: horizontal-rl; }</style></head><body><h2>.border2 { border-inline: 6px dashed blue; writing-mode: vertical-rl; }</h2><div class="container"><p class="borders border1">CSS border-inline property</p><p class="borders border2">This has border-inline 4px width, solid style, red color and horizontal writing mode.</p></div></body></html>This has border-inline 6px width, dashed style, blue color and vertical writing mode.
Leave a Reply