CSS inset-inline-end Property

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

Description

The inset-inline-end property defines the offset of an element’s inline end edge relative to the corresponding edge of its containing block. It is one of the logical “inset” properties that let you describe offsets in terms of the flow-relative inline axis rather than fixed physical directions; this makes layouts that adapt to different writing modes and text directions much simpler because you express placement in semantic terms (inline start / inline end) rather than left / right.

Because it is a logical property, the result of inset-inline-end depends on the writing mode and direction of the element’s containing context. The property’s effect is governed by properties such as writing-mode and direction, and in simple horizontal LTR flows it corresponds to the physical right edge while in RTL flows it corresponds to the physical left edge. It also has a natural counterpart in the inline dimension: inset-inline-start, which together describe offsets on both inline faces of a box.

In practical layout scenarios inset-inline-end is most relevant when an element participates in positioned layout (for example when it has a non-static position), or when used with the logical shorthand inset. If both inline-start and inline-end offsets are specified, they interact to determine the element’s inline position and, depending on the other constraints, may cause the element to be sized or stretched between those two edges rather than remaining a fixed width. Because it’s a box offset property it participates in the cascade and the normal layout resolution rules, and it will resolve percentage offsets against the inline-size of the containing block.

Definition

Initial value: auto
Applies to: positioned elements
Inherited: no
Computed value: same as box offsets: top, right, bottom, left properties except that directions are logical
Animatable: a length, percentage or calc();
JavaScript syntax: object.style.insetInlineEnd

Interactive Demo

inset-inline-end: 20px;
writing-mode: horizontal-tb;

inset-inline-end: 20px;
writing-mode: vertical-rl;

inset-inline-end: 20%;
writing-mode: horizontal-tb;
direction: rtl;

inset-inline-end: 20%;
writing-mode: vertical-lr;

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

inset-inline-end: auto | <length-percentage>

Values

<length-percentage>Specifies distance in px, pt, cm, etc. Negative values are allowed.

Example

HTML

<div class='example'>

    <div class='container ltr'>

        <div class='child'>LTR: inset-inline-end: 20px;</div>

    </div>



    <div class='container rtl'>

        <div class='child'>RTL: inset-inline-end: 20px;</div>

    </div>

</div>

CSS

/* Demonstrates inset-inline-end with LTR and RTL containers */
.example {
    display: flex;
    gap: 24px;
    padding: 24px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #fbfbfb;
}

.container {
    width: 260px;
    height: 120px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    padding: 12px;
    overflow: hidden;
}

.container.ltr {
    direction: ltr; /* inline end == right edge */
}

.container.rtl {
    direction: rtl; /* inline end == left edge */
}

.child {
    position: absolute;
    inset-block-start: 20px;    /* vertical offset from the top (block start) */
    inset-inline-end: 20px;     /* horizontal offset from the inline end (depends on direction) */
    width: 140px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0ea5a4;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(14, 165, 164, 0.12);
    text-align: center;
}

Result

Editor

Browser Support

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