Apply Border-Radius To Scrollbars with CSS

I've been having the same issue. It's not the most elegant of solutions but, simply put a smaller div inside your outer box so the scroll bar doesn't overlap the outer box.

Like this code copied from this pen:

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>

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>

Google implemented something like this when showing their web apps.

enter image description here

With the help of the inspect element and copy-paste, I came with the codes below.

ul::-webkit-scrollbar-thumb {
  background-color: red;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;  
}

ul::-webkit-scrollbar {
  width: 16px;
}

ul {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  width: 350px;
  max-height: 300px;
  background-color: #ddd;

  border-radius: 8px;
}

li {
  list-style-type: none;
  padding: 13px;
}

<ul>
  <li>google.com</li>
  <li>facebook.com</li>
  <li>twitter.com</li>
  <li>instagram.com</li>
  <li>linkedin.com</li>
  <li>reddit.com</li>
  <li>whatsapp.com</li>
  <li>tumblr.com</li>
  <li>skype.com</li>
</ul>

I don't consider myself a CSS expert, so hopefully, someone will explain how these things work.

Or you can check the docs on MDN:

::-webkit-scrollbar
background-clip

Apply Border-Radius To Scrollbars with CSS

Related

Recent Posts