Custom Scrollbar Selectors

In our example below, .scrollbar-container could be any element within your page where you intend to display a scrollbar. The visibility also depends on the overflow properly. If you are testing it out when the content isn’t too big to fit into an area, I’d suggest using overflow: scroll for testing the following changes.

:root {
  --custom-scrollbar-track: #d49ad0;
  --custom-scrollbar-thumb: #7585e0;
  --custom-scrollbar-size: 10px;
  --custom-scrollbar-borderRadius: 5px;

.scrollbar-container {
  scrollbar-color: var(--custom-scrollbar-thumb) var(--custom-scrollbar-track);

.scrollbar-container::-webkit-scrollbar {
  width: var(--custom-scrollbar-size);
  height: var(--custom-scrollbar-size);

.scrollbar-container::-webkit-scrollbar-track {
  background: var(--custom-scrollbar-track);
  border-radius: var(--custom-scrollbar-borderRadius);

.scrollbar-container::-webkit-scrollbar-thumb {
  background: var(--custom-scrollbar-thumb);
  border-radius: var(--custom-scrollbar-borderRadius);

Table of Contents


This selector represents the whole scrollbar system. I am setting height as well for horizontal scrolling. Adjust as needed.


This is the part of the scrollbar that lets you grab and drag.


This selector pertains to the background track against which the thumb moves.