Two separate syntaxes for two separate browser engines
A 10px scrollbar with a slate thumb (#64748B) and light track (#E2E8F0) generates two distinct blocks: ::-webkit-scrollbar rules for Chromium and Safari, plus scrollbar-color and scrollbar-width for Firefox -- both needed together because no single CSS syntax works across all major browser engines.
The ::-webkit-scrollbar pseudo-elements let you style the track and thumb independently in Chromium/Safari, including details like border-radius on the thumb (5px here, half the 10px width, which rounds it into a pill shape) -- a level of visual control Firefox's simpler scrollbar-color property doesn't offer.
Firefox's scrollbar-color property takes just two color values (thumb, then track) and a separate scrollbar-width keyword (thin here) -- a much simpler, less customizable API by design, which is why the Firefox output block is shorter and can't replicate details like the thumb's rounded corners.
Why both blocks need to be included together
::-webkit-scrollbar is Chromium and Safari. Firefox uses scrollbar-color and scrollbar-width. Neither syntax is universally supported on its own -- a browser that doesn't recognize ::-webkit-scrollbar simply ignores those rules (no error, no fallback triggered automatically), and the same is true in reverse for scrollbar-color in a Chromium browser, which is exactly why including both blocks together is the standard, necessary approach for cross-browser custom scrollbar styling.
This produces global styling (applied to html, affecting scrollbars site-wide) -- scoping custom scrollbar styles to just one specific scrollable container instead would require applying these same rules to that container's selector rather than the html element.
Custom scrollbar styling is a visual-only change -- it doesn't affect actual scroll behavior, keyboard scroll accessibility, or touch scrolling, all of which continue to function normally underneath whatever visual skin is applied to the scrollbar.
Related CSS component and UI-styling tools
For a related loading indicator that often appears alongside custom-styled scroll containers, the CSS Loader/Spinner Builder covers that separate UI element.
Frequently Asked Questions (FAQ)
Why does this generate two separate blocks of CSS instead of one?
::-webkit-scrollbar is Chromium and Safari. Firefox uses scrollbar-color and scrollbar-width. Because Chromium/Safari and Firefox use entirely different, non-interoperable syntaxes for custom scrollbar styling. Including both blocks together ensures the styling applies correctly regardless of which browser engine renders the page.
What happens if a browser doesn't recognize one of the two syntax blocks?
::-webkit-scrollbar is Chromium and Safari. Firefox uses scrollbar-color and scrollbar-width. It simply ignores those specific rules with no error and no automatic fallback -- which is exactly why both blocks need to be present together for the styling to work across different browsers.
Why does the thumb's border-radius work in the Chromium version but not the Firefox one?
Firefox's simpler scrollbar-color and scrollbar-width properties only accept color and width values -- they don't offer a way to set corner rounding on the thumb the way Chromium's more detailed ::-webkit-scrollbar-thumb pseudo-element does.
Does this styling apply to the whole page or just one scrollable element?
As generated, it targets the html element, applying the styling site-wide. To scope custom scrollbar styling to just one specific scrollable container, apply these same rules to that container's own CSS selector instead of html.
Does custom scrollbar styling affect scroll functionality or accessibility?
No, it's a purely visual change. Keyboard scrolling, touch scrolling, and standard scroll behavior all continue working normally underneath whatever custom visual appearance is applied to the scrollbar itself.
