Apply Border-Radius To Scrollbars with CSS

Question

Put the content that needs to be scrolled in a div with overflow: auto. Around that content div put a div with your rounded corners and overflow: hidden.

Now you can see the scroll bar but its outer corners are hidden and
are not disturbing the rounded corners of the outer div.

Example:

// Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);

.outer {
  width: 150pt;
  border: 1px solid red;
  border-radius: 15pt;
  overflow: hidden;
}

.inner {
  height: 200px;
  overflow-y: auto;
}

<div class="outer">
    <div class="inner">
        <!-- lots of text here -->
    </div>
</div>

Leave a Comment Cancel reply