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>