The CSS Scrollbars Styling Module Level 1 introduced two primary properties that are now the standard for modern browsers like Firefox and newer versions of Chrome and Edge.
Custom scrollbar styling in CSS has transitioned from a fragmented landscape of browser-specific "hacks" to a more standardized approach. While modern browsers now support standard properties, achieving a truly consistent look across all platforms still requires a combination of both new and legacy CSS methods. 1. The Modern Standard (W3C) scrollbar css
For older versions of Chrome, Safari, and Edge (WebKit/Blink engines), developers use pseudo-elements. These offer much deeper customization, such as adding gradients or border-radii, which the standard properties currently lack. : The entire scrollbar area. The CSS Scrollbars Styling Module Level 1 introduced
/* Standard syntax for modern browsers */ .scroller scrollbar-width: thin; scrollbar-color: #3b82f6 #f1f5f9; /* thumb track */ Use code with caution. 2. The Legacy Approach (Webkit) : The entire scrollbar area