CSS - border-inline-style Property
The border-inline-style CSS property determines how an element's logical inline borders should look, translating that style into a physical border style according to the writing mode, directionality, and text orientation of the element.
Depending on the values set for writing-mode, direction, and text-orientation, its behavior corresponds to either the border-left-style and border-right-style, or the border-top-style and border-bottom-style properties.
Use the border-block-style property to configure both border-block-start-style and border-block-end-style in order to specify the border style in the perpendicular dimension.
Possible value
<'border-style'> - The line style of the border.
Syntax
border-inline-style = <'border-top-style'>{1,2}
Applies to
All the HTML elements.
CSS border-inline-style - None style
The following example demonstrates the usage of border-inline-style property along with none style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #f7f2f3; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } .mod-border { border: 3px solid #e83a4e; border-inline-style: none; padding: 12px; margin: 15px; font-size: 18px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and none style.</p> </div> </body> </html>
CSS border-inline-style - Hidden style
The following example demonstrates the usage of border-inline-style property along with hidden style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #f7f2f3; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } .mod-border { border: 5px solid blue; border-inline-style: hidden; padding: 12px; margin: 15px; font-size: 18px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and hidden style.</p> </div> </body> </html>
CSS border-inline-style - Dotted style
The following example demonstrates the usage of border-inline-style property along with dotted style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #ffa07a; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .mod-border { border: 3px dashed #b32509; border-inline-style: dotted; border-inline-width: 8px; padding: 12px; margin: 10px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and dotted style.</p> </div> </body> </html>
CSS border-inline-style - Dotted style
The following example demonstrates the usage of border-inline-style property along with dotted style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #e3dd84; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .mod-border { border: 3px solid #9e9405; border-inline-style: dashed; border-inline-width: 8px; padding: 12px; margin: 10px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and dashed style.</p> </div> </body> </html>
CSS border-inline-style - Solid style
The following example demonstrates the usage of border-inline-style property along with solid style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #88dceb; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .mod-border { border: 3px solid #096396; border-inline-style: solid; border-inline-width: 10px; padding: 12px; margin: 15px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and solid style.</p> </div> </body> </html>
CSS border-inline-style - Groove style
The following example demonstrates the usage of border-inline-style property along with groove style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #b9e7ed; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .mod-border { border: 3px solid gray; border-inline-style: groove; border-inline-width: 10px; border-inline-color: blue; padding: 12px; margin: 15px; font-size: 20px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and groove style.</p> </div> </body> </html>
CSS border-inline-style - Ridge style
The following example demonstrates the usage of border-inline-style property along with Ridge style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #e8e6e6; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .mod-border { border: 3px solid #e83a4e; border-inline-style: ridge; border-inline-width: 10px; border-inline-color: blue; padding: 12px; margin: 15px; font-size: 18px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and ridge style.</p> </div> </body> </html>
CSS border-inline-style - Inset style
The following example demonstrates the usage of border-inline-style property along with inset style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #f7f2f3; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } .mod-border { border: 3px solid #e83a4e; border-inline-style: inset; border-inline-width: 10px; border-inline-color: blue; padding: 12px; margin: 15px; font-size: 18px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and inset style.</p> </div> </body> </html>
CSS border-inline-style - Outset style
The following example demonstrates the usage of border-inline-style property along with outset style value.
<html> <head> <style> body { font-family: 'Arial', sans-serif; margin: 50px; padding: 50px; background-color: #f3f3f3; } .custom-container { background-color: #f7f2f3; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } .mod-border { border: 3px solid #e83a4e; border-inline-style: outset; border-inline-width: 8px; border-inline-color: blue; padding: 12px; margin: 15px; font-size: 18px; font-weight: bold; color: #333; } </style> </head> <body> <div class="custom-container"> <p class="mod-border">A example with border-inline-style property and outset style.</p> </div> </body> </html>
CSS border-inline-style - Double style
The following example demonstrates the usage of border-inline-style property along with double style and vertical writing mode.
<html> <head> <style> .body-style { margin: 50px; padding: 50px; background-color: #f3f3f3; } .container { background-color: #ffcccb; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .new-border { writing-mode: vertical-rl; border: 6px solid #e74c3c; border-inline-style: double; padding: 15px; margin: 10px 10px; font-weight: bold; color: #2c3e50; } </style> </head> <body class="body-style"> <div class="container"> <p class="new-border">An example with border-inline-style property with vertical writing mode</p> </div> </body> </html>
To Continue Learning Please Login
Login with Google