Scrollbar Styler
Two standards govern scrollbars and neither covers everything. This generates both — the modern properties that work everywhere and the WebKit pseudo-elements that add the details — and tells you which is which.
Preview
Scroll inside the box
Paragraph 1. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 2. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 3. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 4. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 5. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 6. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 7. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 8. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 9. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 10. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 11. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Paragraph 12. Scrollbars are one of the few pieces of chrome the browser still draws for you. Restyling them is a small touch, but the wrong version disappears entirely on the platform you did not test.
Narrower, still visible and usable.
WebKit only
These three have no standard equivalent. Firefox ignores them.
Output
The two blocks are separated by @supports on purpose. Writing scrollbar-width alongside the pseudo-elements makes Chrome ignore the pseudo-elements entirely — you lose the size, radius and inset without any warning.
/* Firefox: no pseudo-element support, so the standard properties apply. */
@supports not selector(::-webkit-scrollbar) {
.scroll-area {
scrollbar-width: thin;
scrollbar-color: #A1A1AA transparent;
}
}
/* Chrome, Edge, Safari: full control.
scrollbar-width is deliberately omitted here: when it is set, these
browsers ignore the pseudo-elements entirely. */
@supports selector(::-webkit-scrollbar) {
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: transparent;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #A1A1AA;
border-radius: 8px;
border: 2px solid transparent;
background-clip: content-box;
}
}Frequently asked
Why are the two blocks wrapped in @supports?
Because they cannot coexist. If scrollbar-width is defined on an element, Chrome ignores that element's ::-webkit-scrollbar rules completely — the size, radius and inset silently stop applying. Plenty of guides still tell you to write both together; the result is that the WebKit half does nothing. Splitting on @supports selector(::-webkit-scrollbar) sends the standard properties to Firefox and the pseudo-elements to everything else, so each browser gets the version it can actually use.
Can I just use the standard properties everywhere?
Yes, and it is the simplest option. You get consistent behaviour in every browser, but only a colour pair and three width keywords — no radius, no inset. Use the 'Standard only' tab if that trade is fine, which it often is.
Why does the scrollbar sometimes not appear at all?
On macOS the system hides scrollbars until you scroll, unless a page styles them with the WebKit pseudo-elements. That is why the preview here uses the same @supports split as the output — otherwise you would be looking at something different from what you copy.
Why is there no radius in the standard properties?
The spec deliberately keeps scrollbars close to the platform's own. scrollbar-color and scrollbar-width are the extent of it — anything more decorative has to come from the WebKit pseudo-elements.
How does the inset work?
Margin does not apply to the scrollbar thumb, so the gap is faked with a transparent border plus background-clip: content-box. The border takes up space, the background stops before it, and the thumb looks inset.
Is hiding the scrollbar a bad idea?
Usually. The scrollbar is often the only signal that an area scrolls at all, and hiding it hurts people who rely on that cue or who drag the thumb rather than use a wheel. It is defensible in a carousel where the content obviously continues, and rarely elsewhere.