DEV Community

Piyush Acharya
Piyush Acharya

Posted on • Updated on

Get the Apple Look: How to Implement a Rounded Scrollbar in Your Website

Are you wondering how you can have a modern, rounded scrollbar for any other website you're designing? Read on to learn about how you can implement a scrollbar similar to one on Stack Overflow, Outlook.com, and DNAnalyzer.live.

::-webkit-scrollbar is a pseudo-element in CSS employed to modify the look of a browser’s scrollbar. Chrome, Edge, and Safari support this standard, while Firefox doesn't.

The code:

CSS:


/* width */

/* set the width of the scrollbar */

::-webkit-scrollbar {

 width: 10px;

}

/* Handle */

/* set the color of the scrollbar and the radius of its corners */

::-webkit-scrollbar-thumb {

 background: rgb(150, 150, 150);

 border-bottom-left-radius: 5px;

 border-top-left-radius: 5px;

 border-bottom-right-radius: 5px;

 border-top-right-radius: 5px;

}

/* Handle on hover */

/* set the color of the scrollbar when hovered over */

::-webkit-scrollbar-thumb:hover {

 background: rgb(131, 131, 131);

}

/* Handle on active */

/* set the color of the scrollbar when clicked */

::-webkit-scrollbar-thumb:active {

 background: rgb(104, 104, 104);

}

Enter fullscreen mode Exit fullscreen mode

Template HTML:


<!DOCTYPE html>

<html>
 <head>
  <title>Page Title</title>
 </head>
 <body>
  <h1>Rounded Scrollbar Example</h1>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
  <p>Filler text</p>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

GitHub repository: https://github.com/Verisimilitude11/RoundedScrollbar

Feel free to comment below if you have any questions or want to share your website with a modern scrollbar!

Top comments (8)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Chrome, Edge, and Safari support this standard, while Firefox doesn't.

It's not a standard, and isn't on track to become one at the moment. I wouldn't suggest using it (unless you know for a fact it will work for your audience).
::-webkit-scrollbar

Having said that, I do actually using it because I'm UI lead for a popular driving game where the UI is implemented with an in-game browser engine that I know supports it.

Collapse
 
stephanie profile image
Stephanie Handsteiner • Edited

It's not on standard track for good reason, it's not good UX, at least not if you apply it to the main scroll bar to the right, though for content scrollable areas (like embedded code blocks) it's debatable.

For example using that CSS leads to scrollbars being permanently visible on macOS, despite the user having checked β€œonly show scroll bars on scrollβ€œΒ in their system settings, which annoys me personally – as you, as the website developer, are essentially overriding a decision I made consciously beforehand.

Collapse
 
verisimilitudex profile image
Piyush Acharya

I agree with what you're saying. However, I feel like new and aspiring web developers should know that a feature like this exists so they can choose whether to implement it on their website. Thanks for providing your thoughts.

Thread Thread
 
stephanie profile image
Stephanie Handsteiner

Of course! Wasn't a criticism on you sharing this at all. ;) I guess, that's what comment sections are good for, to provide more insight into a topic through discussion. :)

As I said, there are definitely valid use cases for this, where absolutely makes sense to do so to enhance UX too, inline scrollable areas are one thing (as stated with them being debatable) or (I don't know what he's working on exactly) @jonrandy's work project that he mentioned in his comment.

Collapse
 
verisimilitudex profile image
Piyush Acharya

Got it, thanks for sharing @jonrandy! After looking at current browser statistics, around 75% of users would still be able to view the new scrollbar, while the other 25% would presumably see the default browser scrollbar.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

View it right now, yes, but other point is that the implementation may change considerably over time - resulting in multiple updates to your site to keep it working.

Thread Thread
 
verisimilitudex profile image
Piyush Acharya • Edited

That's a fair point. Although it's only 15 lines of CSS - reasonably easy to replace/discard.

Collapse
 
verisimilitudex profile image
Piyush Acharya

Example implementation: dnanalyzer.live/