CSS scroll-padding-inline-end Property

What You’ll Learn

The scroll-padding-inline-end property insets the scrollport at the inline-end edge of a scroll container. It helps ensure content is not too close to the trailing inline edge when scrolling or scroll snapping.

Introduction

The scroll-padding-inline-end property in CSS is part of the CSS Scroll Snap Module. It allows you to define inset at the inline-end of a scroll container’s scrollport, ensuring that content is not too close to the trailing edge when it is scrolled into view.

This property is especially useful for horizontal carousels, overflow panels, and any scroll container where the last item should not sit flush against the inline-end edge.

Definition and Usage

Apply scroll-padding-inline-end to the scroll container — such as a horizontal carousel with overflow-x: auto and scroll snapping enabled.

It is one longhand of the scroll-padding-inline shorthand. Use it when only the inline-end side of the scrollport needs inset.

📝 Syntax

The syntax for the scroll-padding-inline-end property is straightforward. It can be applied to any scroll container.

element {
  scroll-padding-inline-end: length | percentage | auto;
}

Basic Example

.scroll-container {
  scroll-padding-inline-end: 20px;
}

Related Properties

• scroll-padding-inline-start — inset at the inline-start edge
• scroll-padding-inline — shorthand for start and end
• scroll-padding-right — physical right inset

🎯 Default Value

The default value of the scroll-padding-inline-end property is auto, which means the user agent determines the padding based on its default settings unless you specify a length or percentage.

💎 Property Values

When to Use scroll-padding-inline-end

scroll-padding-inline-end helps when the inline-end side of the scrollport needs inset:

• Last carousel slide — Inset the scrollport so the final slide is not clipped at the trailing edge.
• Horizontal snap panels — Add space after the last snap stop in a scroller.
• Overflow boxes — Prevent scrolled content from sitting flush against the container’s inline-end edge.
• Logical layouts — Prefer inline-end over hard-coded right in RTL-aware sites.

For the inline-start side (usually left in LTR), use scroll-padding-inline-start instead.

Examples Gallery

Start with the reference horizontal scroll example, inset a snap carousel at inline-end, add trailing-edge inset on a carousel, and use the longhand alone on a scroll box.

<style>
  .container {
    height: 200px;
    overflow-x: scroll;
    scroll-padding-inline-end: 20px;
  }

  .content {
    width: 1000px;
    height: 100px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="content">
    Scroll me and notice the padding on the inline-end side.
  </div>
</div>

.snap-box {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-end: 24px;
}

.carousel {
  scroll-padding-inline-end: 2rem;
}

.scroll-panel {
  scroll-padding-inline-end: 3rem;
}

scroll-padding-inline-end in the family

scroll-padding-inline-end is the inline-end longhand of scroll-padding-inline. For the opposite side, see scroll-padding-inline-start.

/* These are equivalent when only inline-end matters */
.a { scroll-padding-inline-end: 2rem; }
.b { scroll-padding-inline: 0 2rem; }

💡 Best Practices