Thanks to visit codestin.com
Credit goes to www.cssportal.com

CSS Portal

CSS border-inline Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

Example of the Border
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

<div class="container">
<h2>border-inline example</h2>
<div class="box">
<p>Left-to-right (default): border-inline applies to the left and right edges.</p>
</div>
<div class="box rtl override" dir="rtl">
<p>Right-to-left (dir="rtl"): border-inline flips sides; override demonstrates border-inline-start and border-inline-end.</p>
</div>
</div>
.container {
  max-width: 720px;
  margin: 40px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111827;
}

h2 {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.box {
  padding: 16px;
  margin: 12px 0;
  background: #f7fbff;
  border-inline: 8px solid #2b90ff; /* applies to left/right in LTR, right/left in RTL */
  border-block: 4px solid rgba(0, 0, 0, 0.08); /* top/bottom */
  border-radius: 8px;
}

.rtl {
  direction: rtl;
  background: #fff7fb;
}

/* override an inline side explicitly (start/end are logical sides) */
.rtl.override {
  border-inline-start: 12px dashed #ff4d6d;
  border-inline-end: 4px solid #2b90ff;
}

p {
  margin: 0;
  line-height: 1.4;
}

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
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!