Apply Border-Radius To Scrollbars with CSS

Question

To put it simple, this is what i want (obtained on a Webkit Browser using -webkit-scrollbar ):

And this is what I get on Opera (Firefox doesn't apply the border radius to the scrollbar either, but still applies the border):

Is there a simple way to make the border not disappear under the scrollbar?

I dont need the fancy style of -webkit-scrollbar but i would like the page to look clean and symmetric...

Answer 1

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>

Answer 2

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>

Answer 3

Google implemented something like this when showing their web apps.

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

Answer 4

Would be nice if you could supply a fiddle. Nevertheless, you shoud try changing the box-sizing on the container to border-box (if not already done):

box-sizing: border-box;

Answer 5

slim with rounded corners

 @-moz-document url-prefix() { .scrollbar { overflow: auto; width: 0.5em !important; scroll-behavior: smooth !important; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important; background-color: darkgrey !important; outline: 1px solid slategrey !important; border-radius: 10px !important; } } ::-webkit-scrollbar { width: 0.5em !important; scroll-behavior: smooth !important; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important; } ::-webkit-scrollbar-thumb { background-color: darkgrey !important; outline: 1px solid slategrey !important; border-radius: 10px !important; }

 <div class="scrollbar" style="height: 600px"> <h1>Scrollbar is slim with rounded corners</h1> <br/> <br/> <br/> <br/> <h1>Scrollbar is slim with rounded corners</h1> <br/> <br/> <br/> <br/> <h1>Scrollbar is slim with rounded corners</h1> </div>

Answer 6

The fancy horizontal scrollbar with a border radius.

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

The same in SCSS

::-webkit-scrollbar {
  width: 10px;
  height: 10px;

  &-track {
    background: #f1f1f1;
  }

  &-thumb {
    background: #888;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    &:hover {
      background: #555;
    }
  }
}

The test screenshot is attached below:

Answer 7

This is the same as @Madan Sapkota and for the exception of border-radius: 10px; in the scrollbar and track classes no inner div needed

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   border-radius: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}