Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I use CSS to create custom scrollbar styles across different browsers?
Asked on May 13, 2026
Answer
To create custom scrollbar styles using CSS, you can use the `::-webkit-scrollbar` pseudo-elements for WebKit browsers and the `scrollbar-color` and `scrollbar-width` properties for Firefox. Here's a simple example to demonstrate this.
<!-- BEGIN COPY / PASTE -->
<style>
/* WebKit Browsers */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Firefox */
body {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- WebKit browsers like Chrome and Safari use `::-webkit-scrollbar` pseudo-elements to customize scrollbars.
- Firefox uses `scrollbar-color` and `scrollbar-width` properties for scrollbar styling.
- Ensure to test across different browsers as support may vary, especially with older versions.
- Consider accessibility and usability when customizing scrollbars, ensuring sufficient contrast and size.
Recommended Links:
