CSS border-inline-style Property
This property sets the style of an element's logical inline-start and inline-end borders based on the writing mode and direction.
| none | No border is drawn and the computed width is forced to zero. |
| hidden | Same as none but primarily used to resolve border conflicts in tables. |
| dotted | Renders the border as a series of round dots. |
| dashed | Renders the border as a series of short line segments. |
| solid | Renders a single, continuous solid line. |
| double | Renders two solid parallel lines with some space between them. |
| groove | Renders a border that looks carved into the page surface. |
| ridge | Renders a border that looks like it is coming out of the page. |
| inset | Renders a border that makes the element look embedded. |
| outset | Renders a border that makes the element look embossed. |
Code Examples
A basic example showing solid logical borders on the start and end sides of a container.
<div style="border-inline-style: solid; border-inline-width: 5px; border-inline-color: #2196f3; padding: 15px;">This div has solid blue logical borders on its inline sides.</div>An advanced example using JavaScript to toggle text direction and update logical border styles dynamically.
<div id="ui-box" style="border-inline-style: double; border-inline-width: 6px; border-inline-color: #333333; padding: 20px; direction: ltr;">Toggle the direction to see the borders adapt logically.</div><button onclick="toggleDir()">Toggle RTL</button><script>function toggleDir(){ const el = document.getElementById("ui-box"); const current = window.getComputedStyle(el).direction; el.style.direction = current === "ltr" ? "rtl" : "ltr"; el.style.borderInlineStyle = "dashed"; el.style.setProperty("border-inline-color", "#e91e63"); }</script>Pro Tip
You can combine this with the writing-mode property to create unique decorative layouts that transform automatically. Instead of rewriting your entire stylesheet for a vertical layout, the browser handles the border orientation for you, keeping your code lean and maintainable.
Deep Dive
The border-inline-style property is a logical shorthand. Unlike physical properties like border-left-style, logical properties adapt to how content flows. In a standard English document, it controls the left and right borders. If the document uses a right-to-left language like Arabic, those borders stay logically tied to the start and end of the text. Think of it like the side rails on a ladder; no matter how you tilt the ladder, the rails stay at your sides as you climb through the content. It simultaneously sets both border-inline-start-style and border-inline-end-style.
Best Practices
Use logical properties like border-inline-style instead of physical ones to make your layouts internationally friendly from the start. This prevents you from having to write extra CSS overrides for different languages. Use it whenever you want the styling of the sides of a text block to remain consistent regardless of whether the text is flowing horizontally or vertically.
Common Pitfalls
A common mistake is expecting the border to appear without defining a border-inline-width or border-inline-color. By default, the width is often zero or the style is none, making the border invisible. Also, remember that this affects two sides; if you only need to style the beginning of a line of text, use border-inline-start-style specifically.
Accessibility
Ensure that the chosen style provides enough visual distinction for users. Dotted or dashed lines can help users who have difficulty perceiving color to identify boundaries. Always check that the color contrast between the border and the background meets accessibility standards to ensure visibility for all users.
Dev Data Table: border-inline-style property
| default | none |
| animatable | no |
| inherited | no |
| experimental | no |
| year_intro | 2017 |
| year_standard | 2021 |
| js_syntax_1 | element.style.borderInlineStyle = "dashed"; |
| js_syntax_2 | element.style.setProperty("border-inline-style", "dotted"); |
| js_note | When using camelCase in JavaScript, the property maps to borderInlineStyle. |
| browsers | { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 } |