CSS Scrollbar Customizer

Styling scrollbars has historically been a fragmented experience. WebKit browsers (like Chrome and Safari) introduced a set of proprietary pseudo-elements (::-webkit-scrollbar) years ago, which allow for granular control over the track and thumb. However, Firefox rejected these as non-standard, opting instead for the official W3C CSS Scrollbars Module, which is much more limited (only allowing you to change the color and select a generic width). Developers must combine both approaches to ensure a uniform experience across all browsers.

Firefox uses the standard CSS properties scrollbar-width and scrollbar-color. Unlike WebKit, you cannot set an exact pixel width, add border radii, or create padding in Firefox natively. You can only choose between auto, thin, or none for the width, and define two colors for the thumb and track.

In WebKit browsers, you cannot apply standard padding or margin directly to the scrollbar thumb to make it smaller than the track. The trick is to apply a solid border to the thumb that perfectly matches the background color of the track. This creates the visual illusion of padding, making the thumb look like it is floating inside the track.

Mobile browsers (like Safari on iOS and Chrome on Android) generally use "overlay scrollbars". Those are invisible, floating scrollbars that only appear when the user is actively scrolling. While your custom CSS colors will often apply to these overlay scrollbars, mobile OS designs strongly prioritize their native touch-friendly scrolling interactions, so widths and border radii may be ignored or overridden.