CSS border-inline Property
Description
The border-inline property is a logical-axis shorthand used to set the borders that lie along an element’s inline axis - essentially the “start” and “end” edges in the direction text flows. Because it operates on the logical inline dimension rather than fixed physical sides, it automatically adapts when the document’s writing mode or text direction changes (for example, horizontal left-to-right vs. right-to-left or vertical writing modes). That makes it a convenient way to express border intent without having to repeatedly change physical side declarations when supporting multiple languages or orientation changes.
As a shorthand, border-inline interacts with its longhand partners: individual inline edges may be controlled separately via border-inline-start and border-inline-end. When both the shorthand and a corresponding longhand are present, the cascade rules determine the final applied border for each inline edge - longhands can override components of the shorthand if they are declared later or have higher specificity. This behavior lets you set a common inline border with the shorthand and then tweak one side without repeating all border settings.
The property also works alongside other border shorthands and sub-properties. You can use it in combination with block-axis shorthands such as border-block or with global shorthand properties like border to define a complete border system for a box; low-level sub-properties like border-width can further refine specific aspects if needed. Because borders contribute to the box’s painted edge, changes to inline borders affect visual size and layout and should be considered together with how the element’s sizing model is configured (for example, via box-sizing).
In practice, border-inline is most useful when you want direction-aware, maintainable borders for components that will be used in multiple writing contexts. It reduces duplication compared to setting each physical side (left/right) and makes intent clearer in stylesheets that must handle both LTR and RTL content or changes in writing-mode. If you later need a different border on only the start or only the end, the corresponding longhand properties let you override just that edge without redefining the whole inline border.
Definition
- Initial value
- See individual properties
- Applies to
- all elements
- Inherited
- no
- Computed value
- See individual properties
- Animatable
- See individual properties
- JavaScript syntax
- object.style.borderInline
Interactive Demo
Inline Property
Syntax
border-inline: <border-width> | <border-style> | <color>
Values
- <border-width>Specifies the width of the border
- <border-style>Specifies the style of the border
- <color>Specifies the color of the border
Example
Browser Support
The following information will show you the current browser support for the CSS border-inline property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
