Styling scrollbars with standard CSS

For years, custom scrollbar styling meant the WebKit pseudo-elements, which worked in Chrome and Safari but were never standardized. CSS now offers two official properties, scrollbar-color and scrollbar-width, defined in the CSS Scrollbars Styling module and supported across all major browsers. They are simpler, cover both thumb and track, and avoid the non-standard workaround entirely.

The standard properties

scrollbar-color sets the colors of the scrollbar thumb and track. It takes two colors: the first paints the thumb, the second the track.

.scroller {
  scrollbar-color: #0b5fff #dfe7ff;
}

scrollbar-width picks the thickness. Its values are auto (the platform default), thin (a thinner variant the platform or browser provides), and none (no visible bar). The element stays scrollable when set to none.

.scroller {
  scrollbar-width: thin;
}

Both properties are inherited and can be combined on the same scroll container. They reached stable cross-browser support: scrollbar-width around end of 2024 and scrollbar-color in late 2025, so you can rely on them in modern browsers with no feature detection. They are safe to pair with the assumption that a platform default color-scheme is honoured when the keyword auto is used.

WebKit pseudo-elements

The old way, ::-webkit-scrollbar and its .thumb and .track pseudo-elements, remains supported in Chromium and Safari but was never part of a W3C spec. Use the standard properties where you can, and keep the WebKit form only as a progressive enhancement for browsers that predate them.

@supports selector(::-webkit-scrollbar) {
  .scroller::-webkit-scrollbar-thumb { background: #0b5fff; }
}

If you target the newest major browsers, the standard pair is enough on its own. If your audience includes slightly older Safari or Chrome, you can emit both via the @supports guard above and CSS custom properties instead of duplicating values by hand. The custom properties article shows how to share the palette across the two paths.

Accessibility and layout

Two cautions make the difference between a nice touch and a usability problem. scrollbar-width: none hides the bar entirely; the content is still scrollable, but on touch-only or keyboard-only setups with no visible affordance, some users cannot tell the box scrolls. Chrome's guidance and the spec both say to use none sparingly and never when it removes the only scroll control.

Second, scrollbars take layout space in some configurations. When a classic scrollbar appears and disappears, the page can shift by the gutter width. Reserve space with the scrollbar-gutter property (stable keeps the gutter allocated even without a bar), which prevents that horizontal jump. This matters most in a layout-shift-sensitive page, so see the layout-shift and performance articles if you are auditing why the page moves when scrollbars toggle. Read the CSS general troubleshooting guide for resolving a "my scrollbar styles do nothing" symptom, which almost always turns out to be a property not applying to the right scroll container rather than a correctness problem with the CSS itself.