/* Apply to the whole page */ html scrollbar-color: #4a90e2 #f1f1f1; /* thumb track */ scrollbar-width: thin; Use code with caution. 2. Advanced Customization for WebKit Browsers
As of 2025, the W3C standard properties are the preferred way to style scrollbars because they are more accessible and easier to implement than old WebKit-based methods.
While the standard properties are great for basic colors, they don't allow for borders, shadows, or rounded corners. For deeper control in , you still need the ::-webkit-scrollbar family of pseudo-elements. Scrollbar styling | CSS and UI - Chrome for Developers css scrollbar style
Whether you're building a sleek dark-mode interface or a highly branded web application, here is how to master scrollbar styling using modern CSS. 1. The Modern Standard: scrollbar-color and scrollbar-width
Mastering CSS Scrollbar Style: A Complete Guide to Modern Customization /* Apply to the whole page */ html
: This controls the thickness. It accepts keywords like auto , thin , or none . Example Implementation:
: This property takes two values: the color of the thumb (the draggable part) and the color of the track (the background). While the standard properties are great for basic
Customizing the browser scrollbar was once a dark art of vendor prefixes and inconsistent hacks. In 2026, has reached a new level of maturity, with standard properties finally becoming "Baseline" across major engines.