CSS - border-inline-end-style Property
CSS border-inline-end-style property determines the style of an element's inline end border, which in turn is mapped to the physical border of the element.
This property is a logical inline end 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 end 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-end-style = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset;
CSS border-inline-end-style - Solid Border Style
Here is an example showing the solid border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-solid { border-inline-end-style: solid; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-solid">solid inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Inset Border Style
Here is an example showing the inset border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-inset { border-inline-end-style: inset; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-inset">inset inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Dashed Border Style
Here is an example showing the dashed border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-dashed { border-inline-end-style: dashed; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-dashed">dashed inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Dotted Border Style
Here is an example showing the dotted border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-dotted { border-inline-end-style: dotted; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-dotted">dotted inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Groove Border Style
Here is an example showing the groove border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-groove { border-inline-end-style: groove; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-groove">groove inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Double Border Style
Here is an example showing the double border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-double { border-inline-end-style: double; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-double">double inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Outset Border Style
Here is an example showing the outset border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-outset { border-inline-end-style: outset; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-outset">outset inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Ridge Border Style
Here is an example showing the ridge border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-ridge { border-inline-end-style: ridge; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-ridge">ridge inline end border</p> </div> </body> </html>
CSS border-inline-end-style - None Border Style
Here is an example showing no border style of inline end border of p element:
<html> <head> <style> div { background-color: black; width: 220px; height: max-content; padding: 10px; } .border-none { border-inline-end-style: none; } p { padding: 15px; color: white; border: 5px solid gold; margin: 8px; } </style> </head> <body> <div> <p class="border-none">No inline end border</p> </div> </body> </html>
CSS border-inline-end-style - Based On Writing Mode (Horizontal)
Here is an example showing the style of inline end border of p element based on the writing mode of the text, which is horizontal. The style that is given is dotted. 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-end-style: double; } p { padding: 5px; } </style> </head> <body> <div> <p class="sampleText-wm-vtl">Vertical Text</p> </div> </body> </html>
CSS border-inline-end-style - Based On Writing Mode (Vertical)
Here is an example showing the style of inline end border of p element based on the writing mode of the text, which is vertical. The style that is given is 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-end-style: double; } p { padding: 5px; } </style> </head> <body> <div> <p class="sampleText-wm-vtl">Vertical Text</p> </div> </body> </html>
CSS border-inline-end-style - Based On Direction (left-to-right)
Here is an example showing the style of inline end border of p element based on the direction of the text, which is left-to-right. The style that is given is dashed. 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-end-style: dashed; } .sampleText-dir-rtl { direction: rtl; border: 10px solid gold; border-inline-end-style: groove; } p { padding: 15px; color: white; } </style> </head> <body> <div> <p class="sampleText-dir-ltr">Direction ltr</p> <p class="sampleText-dir-rtl">Direction rtl</p> </div> </body> </html>
CSS border-inline-end-style - Based On Direction (right-to-left)
Here is an example showing the style of inline end border of p element based on the direction of the text, which is right-to-left. The style that is given is 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-end-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-end-style - Related Properties
Following is the list of CSS properties related to border-inline-end-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