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

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: #ffffd;

  border-radius: 8px;
}

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

  
google.com
  
facebook.com
  
twitter.com
  
instagram.com
  
linkedin.com
  
reddit.com
  
whatsapp.com
  
tumblr.com
  
skype.com

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