CSS inset-block-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-block-end property controls the offset of an element’s logical end edge along the block axis. In writing modes where the block axis runs top-to-bottom (the common horizontal writing mode), this maps to the physical bottom edge; in vertical writing modes it maps to a left or right edge depending on the direction of the block flow. Because it targets the logical “end” side of the block axis, it lets authors position elements in a writing-mode–agnostic way so the same style will behave correctly across rotated or vertical text layouts.

When used on a positioned element, inset-block-end participates in the same positioning model as other inset properties and can interact with counterparts and shorthands; for example, it works together with inset-block-start to determine an element’s block-axis placement and can be overridden by or combined into shorthands such as inset-block and the overall inset shorthand. The property is meaningful only when the element is in a positioning context that considers offsets (for instance, not on static-flow elements), so you’ll commonly use it alongside the position property to establish that context.

Beyond simple offsetting, inset-block-end affects layout decisions when both block-start and block-end offsets are specified: user agents resolve those constraints to determine position and, where applicable, size adjustments for absolutely positioned boxes. Because the mapping of “end” depends on the page’s text orientation, authors should consider the current writing-mode (and related directionality settings) when reasoning about its effect; conceptually, it serves the same role as the physical bottom (or top/right/left in other modes) but in a logical, transformable way that keeps styles robust across international and vertical layouts.

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.insetBlockEnd

Interactive Demo

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

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

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

inset-block-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-block-end: auto | <length-percentage>

Values

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

Example

HTML

<div class="container">

    <p class="label">Default writing-mode (horizontal-tb)</p>

    <div class="box">Inset end 20px</div>

</div>



<div class="container vertical">

    <p class="label">Writing-mode: vertical-rl</p>

    <div class="box">Inset end 20px</div>

</div>

CSS

/* Example demonstrating inset-block-end */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 24px;
    background: #f7f9fc;
}

.container {
    position: relative;
    width: 320px;
    height: 160px;
    border: 1px solid #d1dbe8;
    border-radius: 8px;
    margin-bottom: 24px;
    background: linear-gradient(180deg, #ffffff, #f0f6ff);
    overflow: hidden;
}

.container .label {
    margin: 12px 16px 0;
    font-size: 14px;
    color: #334155;
}

.box {
    position: absolute;
    inset-inline-start: 16px; /* distance from inline start (left in LTR horizontal writing-mode) */
    inset-block-end: 20px;    /* distance from block end (bottom in horizontal writing-mode) */
    padding: 8px 12px;
    background: #2563eb;
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}

/* Change writing mode to show how inset-block-end adapts */
.container.vertical {
    writing-mode: vertical-rl; /* block flow runs vertically right-to-left */
}

.container.vertical .label {
    margin-left: 12px;
}

/* Small responsive tweak */
@media (max-width: 360px) {
    .container { width: 100%; }
}

Result

Editor

Browser Support

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