The inset-inline-end property controls the offset of an element’s inline-end edge using logical CSS. In horizontal LTR pages, that usually means the right edge.
Logical edge.
Default value.
One side only.
Adapts direction.
Common use.
Shorthand pair.
The inset-inline-end property in CSS is a logical property that defines the offset of an element’s inline-end edge within its containing block. Logical properties are writing-mode and direction-aware, so they adapt to LTR, RTL, and other layout contexts.
It is part of the CSS Logical Properties and Values specification, which helps you build layouts that work across languages and text directions without rewriting positioning rules.
Apply inset-inline-end on positioned elements when you need to offset or anchor the inline-end side only. Use it for badges, side panels, close buttons, or any UI pinned to the logical end of the inline axis.
Think of inset-inline-end as logical right in horizontal LTR writing mode. Pair it with inset-inline-start or use the inset-inline shorthand when you need both inline edges.
The syntax for the inset-inline-end property accepts a single value:
element {
inset-inline-end: value;
}.badge {
position: absolute;
inset-inline-end: 20px;
inset-block-start: 1rem;
}The default value of the inset-inline-end property is auto, which means the browser determines the inline-end offset from other positioning rules.
inset-inline shorthand.position is not static.auto values.right.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Positioned elements |
| Inherited | No |
| Animatable | Yes, as a length |
| Horizontal LTR writing mode | Behaves like right |
| Value | Description |
|---|---|
| length | A fixed offset such as 20px, 1em, or 1rem. |
| percentage | An offset relative to the containing block size on the inline axis. |
auto | Lets the browser calculate the inline-end offset automatically. |
Logical inset properties follow the document’s direction instead of fixed physical sides:
dir="ltr") — inline-end is usually the physical right edge.dir="rtl") — inline-end moves to the opposite side, but the same CSS rule still works.inset-inline-start controls the opposite inline edge; inset-inline sets both in one rule.Use inset-inline-end alone when only the inline-end edge needs a fixed offset. Use inset-inline when both inline-start and inline-end should be set together.
An absolutely positioned box with inset-inline-end: 20px in horizontal LTR writing mode:
Offset from the inline-end edge, anchor a side panel, stretch with inline-start, and see behavior in RTL direction.
Start with a fixed inline-end offset and anchor UI to the logical end of the container.
Place a badge 20px from the inline-end edge of a positioned container.
.badge {
position: absolute;
inset-inline-end: 20px;
inset-block-start: 1rem;
}In horizontal LTR writing mode, the badge sits 20px from the right edge of its containing block.
Pin a side panel flush to the inline-end edge with inset-inline-end: 0.
.side-panel {
position: absolute;
inset-inline-end: 0;
inset-block: 0;
inline-size: 3.5rem;
}inset-inline-end: 0 anchors the element to the inline-end edge, which is a common pattern for side rails and drawer panels.
Combine inline-start and inline-end offsets, then test logical behavior in right-to-left direction.
Set both inline edges to stretch a bar along the inline axis.
.bar {
position: absolute;
inset-inline-start: 1rem;
inset-inline-end: 1rem;
inset-block-start: 1.5rem;
block-size: 2.5rem;
}When both inline edges are set, the element stretches between them. This is equivalent to inset-inline: 1rem.
See how inset-inline-end still controls the inline-end edge when text direction is right-to-left.
html {
direction: rtl;
}
.box {
position: absolute;
inset-inline-end: 16px;
}Logical properties follow the inline axis, not fixed right directions, so the same rule works in both LTR and RTL layouts.
dir on the document — Correct text direction helps both layout and assistive technology.inset-inline-end WorksLTR or RTL text flow determines which physical direction inline-end maps to.
You specify the distance from the containing block’s inline-end edge to the element’s inline-end edge.
The box is positioned along the inline axis while other inset values remain at their defaults.
Badges, panels, and controls stay on the correct logical edge when text direction changes.
The inset-inline-end property is supported in modern browsers including Chrome 87+, Firefox 63+, Safari 14.1+, and Edge 87+.
All major browsers support inset-inline-end as part of the CSS Logical Properties module.
Bottom line: Safe for modern logical layouts. Use physical right only when legacy support is required.
The inset-inline-end property is a useful tool for web developers who want layouts that adapt to different writing modes and text directions. By using logical properties, you can anchor UI to the inline-end edge in a way that stays correct when direction changes.
For beginners, start with horizontal LTR pages where it behaves like right, then explore RTL direction to see the real advantage of logical CSS.
inset-inline-start when stretching along the inline axisposition value firstinset-inline-endUse these points when anchoring elements to the logical inline-end edge.
Logical edge.
PurposeBrowser pick.
DefaultOne side.
SyntaxAdapts axis.
PatternShorthand.
FamilyOpen the HTML editor, set inset-inline-end on positioned elements, and compare LTR versus RTL direction.
5 people found this page helpful