CSS inset-inline-end Property

Definition and Usage

The inset-inline-end property sets the logical inline-end offset of a positioned element. In horizontal left-to-right text, that usually means the same edge as right.

With direction: rtl, the same value maps to the left edge. With writing-mode: vertical-rl, it can map to a different physical side (often bottom). It has no effect on static elements. Pair it with inset-inline-start, or set both via inset-inline.

CSS Syntax

The initial value is auto. The property is not inherited. Percentages refer to the containing block’s size on the inline axis.

Property Values

How to Use inset-inline-end

Position the element, then offset it from the inline-end edge.

1. Create a containing block if needed (position: relative on the parent).
2. Set the child to position: absolute (or another non-static value).
3. Add inset-inline-end with a length or percentage.
4. Optionally change direction or writing-mode to see which physical edge moves.

Live Preview

The blue box is position: absolute. Change only inset-inline-end. In horizontal LTR text this acts like right.

CSS Examples

Each snippet focuses on inset-inline-end. Position is required so the offset applies. Use Try It Yourself for a live editor.

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 16px;
    width: 120px;
    inset-inline-end: 20px;
    background: #2563eb;
    color: #fff;
    padding: 8px;
  }
</style>

<div class="stage">
  <div class="box">end: 20px</div>
</div>

<style>
  .stage { position: relative; height: 140px; border: 1px dashed #94a3b8; }
  .box {
    position: absolute;
    top: 16px;
    width: 120px;
    inset-inline-end: 20%;
    background: #2563eb;
    color: #fff;
    padding: 8px;
  }
</style>

<div class="stage">
  <div class="box">end: 20%</div>
</div>

<style>
  .stage {
    position: relative;
    height: 160px;
    border: 1px dashed #94a3b8;
    writing-mode: vertical-rl;
  }
  .box {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 20px;
    background: #2563eb;
    color: #fff;
    padding: 8px;
  }
</style>

<div class="stage">
  <div class="box">Follows inline-end</div>
</div>

Key Takeaways