CssHow-ToBeginner · 3 min read

How to Customize Scrollbar in CSS: Simple Guide

You can customize scrollbars in CSS using the scrollbar-width and scrollbar-color properties for Firefox, and the ::-webkit-scrollbar pseudo-elements for Chrome, Edge, and Safari. These let you change scrollbar size, colors, and style to match your design.

📐

Syntax

To customize scrollbars, use these CSS parts:

scrollbar-width: controls the thickness of the scrollbar (Firefox only).
scrollbar-color: sets the thumb and track colors (Firefox only).
::-webkit-scrollbar: the whole scrollbar container (Chrome, Edge, Safari).
::-webkit-scrollbar-thumb: the draggable part of the scrollbar.
::-webkit-scrollbar-track: the track behind the thumb.

css

/* Firefox */
selector {
  scrollbar-width: thin; /* auto, thin, none */
  scrollbar-color: blue orange; /* thumb color, track color */
}

/* Chrome, Edge, Safari */
selector::-webkit-scrollbar {
  width: 12px;
}
selector::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 6px;
}
selector::-webkit-scrollbar-track {
  background-color: orange;
}

💻

Example

This example shows a scrollable box with a customized scrollbar: a thin blue thumb on an orange track.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

.scroll-box {
  width: 300px;
  height: 150px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* WebKit scrollbar */
.scroll-box::-webkit-scrollbar {
  width: 12px;
}
.scroll-box::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 6px;
}
.scroll-box::-webkit-scrollbar-track {
  background-color: orange;
}

Output

<div style="width:300px; height:150px; overflow-y:scroll; border:1px solid #ccc; padding:10px; scrollbar-width:thin; scrollbar-color:blue orange;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </div>

⚠️

Common Pitfalls

Many developers forget that scrollbar styling is not fully standardized and behaves differently across browsers. For example, scrollbar-width and scrollbar-color only work in Firefox, while ::-webkit-scrollbar pseudo-elements work only in WebKit-based browsers like Chrome and Safari.

Also, setting scrollbar styles on the body may not work as expected; apply styles to the scrollable container instead.

css

/* Wrong: styling scrollbar on body may not work in all browsers */
body {
  scrollbar-width: thin;
  scrollbar-color: red yellow;
}

/* Right: style the scrollable element */
.scrollable {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: red yellow;
}

📊

Quick Reference

Property / Selector	Description	Browser Support
scrollbar-width	Sets scrollbar thickness (auto, thin, none)	Firefox
scrollbar-color	Sets thumb and track colors	Firefox
::-webkit-scrollbar	Entire scrollbar container	Chrome, Edge, Safari
::-webkit-scrollbar-thumb	Draggable scrollbar thumb	Chrome, Edge, Safari
::-webkit-scrollbar-track	Scrollbar track behind thumb	Chrome, Edge, Safari

✅

Key Takeaways

Use scrollbar-width and scrollbar-color for Firefox scrollbar styling.

Use ::-webkit-scrollbar pseudo-elements to style scrollbars in Chrome, Edge, and Safari.

Apply scrollbar styles to the scrollable container, not the body tag.

Scrollbar styling is not fully standardized; test across browsers for consistent look.

Keep scrollbar colors and sizes accessible and easy to see for all users.