CSS - set scrollbar colors

3 points
Created by:
Dirask Community

In this article we would like to show you how to set scrollbar colors using CSS.

Below we present solution that works in following browsers:

  1. Webkit based: Chrome, Edge and Safari browsers,
  2. Gecko based: Firefox browser.


Runnable example:

// ONLINE-RUNNER:browser;

    .container {
      	height: 100px;
      	width: 100px;
      	overflow: scroll;
      	scrollbar-width: thin;  /* <-------------- required by Firefox */
        scrollbar-color: blue orange;  /* <------- required by Firefox */
    .container::-webkit-scrollbar {   /* <-------- required by Chrome, Edge, and Safari */
      	width: 12px;
    .container::-webkit-scrollbar-track { /* <---- required by Chrome, Edge, and Safari */
      	background: orange;  
    .container::-webkit-scrollbar-thumb {  /* <--- required by Chrome, Edge, and Safari */
        background-color: red;  
        border-radius: 20px;
        border: 3px solid blue;

  <div class="container">


Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé