CSS border-inline-style 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-style property controls the line style drawn on an element’s inline-axis edges - that is, the edges that correspond to the start and end of the inline direction for the element. Because it is a logical property, it does not target a fixed physical side such as left or right; instead the affected edges depend on the element’s text orientation and flow. The mapping from inline start/end to physical sides is influenced by layout-related properties such as writing-mode and direction, so the same rule can produce different visible results in horizontal left-to-right text vs. vertical or right-to-left contexts.

When using border-inline-style in a stylesheet it commonly interacts with shorthand and longhand border properties. The generic logical shorthand border-style can set all four logical/physical border styles at once, while the more specific longhands border-inline-start-style and border-inline-end-style (linked once each) override the corresponding inline edge if present. Because of this cascade behavior, authors can apply a broad inline style with border-inline-style and then fine-tune one side with the start/end longhands when necessary.

Visually, the effect of border-inline-style becomes meaningful only when combined with border thickness and color - for example with border-inline-width and border-color - and by the element’s surrounding context (padding, margin, adjacent elements). It is especially useful for internationalized layouts where you want the same styling intent to adapt to different writing systems without rewriting rules for left/right or top/bottom. In practice, using logical border properties reduces duplication and makes components more robust across direction and writing-mode changes.

Definition

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.borderInlineStyle

Interactive Demo

border-inline-style: solid;
writing-mode: horizontal-tb;

border-inline-style: dotted;
writing-mode: vertical-rl;

border-inline-style: dashed;
writing-mode: horizontal-tb;

border-inline-style: double;
writing-mode: vertical-lr;

Example of the Border
Inline Style Property

Syntax

border-inline-style: <border-style>

Values

<border-style>Specifies the style of the border

Example

HTML

<div class="container">

  <h2>border-inline-style examples</h2>

  <div class="row">

    <div class="box solid">Solid</div>

    <div class="box dashed">Dashed</div>

    <div class="box dotted">Dotted</div>

    <div class="box double">Double</div>

    <div class="box groove">Groove</div>

    <div class="box ridge">Ridge</div>

    <div class="box inset">Inset</div>

    <div class="box outset">Outset</div>

  </div>



  <h3>RTL direction (inline axis flips)</h3>

  <div class="row rtl">

    <div class="box solid">Solid (RTL)</div>

    <div class="box dashed">Dashed (RTL)</div>

  </div>

</div>

CSS

/* Simple demo of border-inline-style */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 24px;
  background: #f7f9fc;
  color: #0b2545;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

/* Make the row RTL to demonstrate inline-axis flipping */
.row.rtl {
  direction: rtl;
  background: #ffffff;
  padding: 12px;
  border-radius: 6px;
}

.box {
  display: inline-block;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 6px;
  /* Explicitly control block and inline borders so only inline sides are visible */
  border-block-style: none;
  border-block-width: 0;
  border-inline-width: 8px;
  border-inline-color: #2b6cb0;
  box-shadow: 0 1px 2px rgba(11, 37, 69, 0.06);
}

.box.solid {
  border-inline-style: solid;
}

.box.dashed {
  border-inline-style: dashed;
}

.box.dotted {
  border-inline-style: dotted;
}

.box.double {
  border-inline-style: double;
}

.box.groove {
  border-inline-style: groove;
}

.box.ridge {
  border-inline-style: ridge;
}

.box.inset {
  border-inline-style: inset;
}

.box.outset {
  border-inline-style: outset;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-inline-style property. Hover over a browser icon to see the version that first introduced support for this CSS property.