CSS - border-inline-start-style Property
CSS border-inline-start-style property determines the style of an element's inline start border, which in turn is mapped to the physical border of the element.
This property is a logical inline start border, which means that its value depends on the element's writing mode, directionality, and text orientation.
Based on the values of writing-mode, direction, and text-orientation, the inline start border corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style.
Possible Values
<'border-style'>: Shows the line style of the border. Refer border-style.
Applies to
All the HTML elements.
Syntax
border-inline-start-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;
CSS border-inline-start-style - Solid Border Style
Here is an example showing the solid border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-solid { border-inline-start-style: solid; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-solid">solid inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Inset Border Style
Here is an example showing the inset border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-inset { border-inline-start-style: inset; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-inset">inset inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Dashed Border Style
Here is an example showing the dashed border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-dashed { border-inline-start-style: dashed; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-dashed">dashed inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Dotted Border Style
Here is an example showing the dotted border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-dotted { border-inline-start-style: dotted; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-dotted">dotted inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Groove Border Style
Here is an example showing the groove border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-groove { border-inline-start-style: groove; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-groove">groove inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Double Border Style
Here is an example showing the double border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-double { border-inline-start-style: double; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-double">double inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Outset Border Style
Here is an example showing the outset border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-outset { border-inline-start-style: outset; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-outset">outset inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Ridge Border Style
Here is an example showing the ridge border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-ridge { border-inline-start-style: ridge; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-ridge">ridge inline start border</p> </div> </body> </html>
CSS border-inline-start-style - None Border Style
Here is an example showing no border style of inline start border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-none { border-inline-start-style: none; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-none">No inline start border</p> </div> </body> </html>
CSS border-inline-start-style - Based On Writing Mode (Horizontal)
Here is an example showing the style of inline start border of p element based on the writing mode of the text, which is horizontal. The styles that are given are dotted and double. You may use other style values to see the change.
<html> <head> <style> div { background-color: peachpuff; width: 220px; height: 220px; } .sampleText-wm-htl { writing-mode: horizontal-tb; border: 5px solid blue; border-inline-start-style: dotted; } p { padding: 5px; } </style> </head> <body> <div> <p class="sampleText-wm-htl">Horizontal Text</p> </div> </body> </html>
CSS border-inline-start-style - Based On Writing Mode (Vertical)
Here is an example showing the style of inline start border of p element based on the writing mode of the text, which is vertical. The styles that are given are dotted and double. You may use other style values to see the change.
<html> <head> <style> div { background-color: peachpuff; width: 220px; height: 220px; } .sampleText-wm-vtl { writing-mode: vertical-rl; border: 5px solid red; border-inline-start-style: double; } p { padding: 5px; } </style> </head> <body> <div> <p class="sampleText-wm-vtl">Vertical Text</p> </div> </body> </html>
CSS border-inline-start-style - Based On Direction (left-to-right)
Here is an example showing the style of inline start border of p element based on the direction of the text, which is left-to-right. The styles that are given are dashed and groove. You may use other style values to see the change.
<html> <head> <style> div { background-color: black; width: 220px; height: 220px; } .sampleText-dir-ltr { direction: ltr; border: 8px solid red; border-inline-start-style: dashed; } p { padding: 15px; color: white; } </style> </head> <body> <div> <p class="sampleText-dir-ltr">Direction ltr</p> </div> </body> </html>
CSS border-inline-start-style - Based On Direction (right-to-left)
Here is an example showing the style of inline start border of p element based on the direction of the text, which is right-to-left. The styles that are given are dashed and groove. You may use other style values to see the change.
<html> <head> <style> div { background-color: black; width: 220px; height: 220px; } .sampleText-dir-rtl { direction: rtl; border: 10px solid gold; border-inline-start-style: groove; } p { padding: 15px; color: white; } </style> </head> <body> <div> <p class="sampleText-dir-rtl">Direction rtl</p> </div> </body> </html>
CSS border-inline-start-style - Related Properties
Following is the list of CSS properties related to border-inline-start-style:
property | description |
---|---|
border-block-start-style | Sets the style of the logical block start border of an element. |
border-block-end-style | Sets the style of the logical block end border of an element. |
border-inline-end-style | Sets the style of the logical inline end border of an element. |
To Continue Learning Please Login
Login with Google