: Properties like scrollbar-color and scrollbar-width are now the standard for modern browsers.

: Sets the colors for the thumb (the draggable part) and the track (the background).

: Use non-standard pseudo-elements like ::-webkit-scrollbar for finer control in Chromium-based browsers (Chrome, Edge) and Safari. 1. The Standard Approach (Modern Browsers)

/* Syntax: thumb-color track-color */ .container scrollbar-color: #3498db #f1f1f1; Use code with caution.

: Controls the thickness of the bar. It accepts values like auto , thin , or none (to hide it). Use code with caution. 2. The WebKit Approach (Chrome, Edge, Safari)

For more granular design—such as adding gradients, borders, or specific pixel widths—you must use vendor-prefixed pseudo-elements.

Customizing scrollbars with CSS allows you to align the browser's default UI with your brand’s aesthetic, transforming a utilitarian element into a polished design feature. As of 2026, styling scrollbars is more streamlined than ever thanks to modern CSS properties, though a hybrid approach is still necessary for full browser compatibility. Modern vs. Legacy Methods There are two primary ways to style scrollbars today:

The standardized properties are the preferred method because they are less intrusive and follow W3C specifications.