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>