CSS inset-inline-end Property

Sets the logical offset from the end edge of an element's inline dimension, automatically adapting to the document's text direction.

selector { inset-inline-end: value; }
auto Allows the browser to calculate the offset based on the element's natural flow and position.
<length> Sets a fixed distance from the end edge using units like px, rem, or em.
<percentage> Defines the offset as a percentage relative to the width of the containing block.

Code Examples

A basic example showing a box positioned 20px from the end edge of its parent container.

<div style="position: relative; width: 100%; height: 80px; background-color: #eeeeee;">
  <div style="position: absolute; inset-inline-end: 20px; top: 20px; background-color: #333333; color: #ffffff; padding: 10px;">
    End-Aligned Box
  </div>
</div>

An advanced example using JavaScript to toggle the container's direction, showing how the box automatically jumps to the opposite side.

<div id="layout_container" dir="ltr" style="position: relative; width: 100%; height: 120px; border: 2px dashed #666666;">
  <div id="moving_box" style="position: absolute; inset-inline-end: 10%; top: 25%; width: 50px; height: 50px; background-color: #0088ff;"></div>
</div>
<button onclick="toggleDirection()" style="margin-top: 15px; padding: 10px;">Toggle Text Direction</button>

<script>
function toggleDirection() {
  const container = document.getElementById("layout_container");
  const isLtr = container.getAttribute("dir") === "ltr";
  container.setAttribute("dir", isLtr ? "rtl" : "ltr");
  const box = document.getElementById("moving_box");
  box.style.backgroundColor = isLtr ? "#ff5500" : "#0088ff";
}
</script>

Pro Tip

If you are tired of writing right: 10px; and then writing a separate RTL stylesheet to reset it and use left: 10px;, just use inset-inline-end: 10px; once. It is a massive time-saver for full-stack developers who need to support global audiences without doubling their workload.

Deep Dive

Think of inset-inline-end as a smart version of the right property. In a standard English layout, which is Left-to-Right (LTR), the end is the right side. However, if you switch the language to Arabic or Hebrew, which are Right-to-Left (RTL), the end becomes the left side. It is part of the CSS Logical Properties module, designed to make your life easier when building international websites. Instead of writing separate CSS rules to flip positions for different languages, this property detects the direction and handles the positioning for you. Just remember, it only works on positioned elements—those with a position value other than static.

Best Practices

You should use logical properties like inset-inline-end instead of physical properties like right or left whenever you are building layouts that might be translated. It keeps your codebase dry and reduces the amount of CSS you need to write. It is like building a car that can automatically move the steering wheel depending on which country you are driving in.

Common Pitfalls

The most common mistake is applying this property to an element that is still using position: static. If you do not set the position to relative, absolute, or fixed, this property will sit there doing absolutely nothing. Also, keep in mind that it follows the inline axis; if you change the writing-mode to a vertical style, the end edge might be the bottom of the container instead of the side.

Accessibility

Using logical properties ensures that the visual structure of your site remains consistent with the reading order of the user's language. This creates a more natural and accessible experience for people using screen readers or navigating via keyboard in different locales, as the UI elements will appear where they logically expect them to be.

Dev Data Table: inset-inline-end property

default auto
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.insetInlineEnd = "20px";
js_syntax_2 element.style.setProperty("inset-inline-end", "20px");
js_note When manipulating this property via JavaScript, ensure the element has a position value like absolute or relative for the change to take effect visually.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 63, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...