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) :

An

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;
}

  

    

      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test
      
test