CSS scrollbar-color Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f7f8fa;
  padding: 32px;
  color: #111;
}

.container {
  max-width: 640px;
  margin: 0 auto;
}

.scroll-box {
  height: 200px;
  overflow: auto;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e6e9ee;
  border-radius: 8px;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #ff6b6b #f1f1f1;
}

/* WebKit-based browsers (Chrome, Edge, Safari) */
.scroll-box::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background-color: #ff6b6b;
  border-radius: 8px;
  border: 2px solid #f1f1f1;
}

.scroll-box::-webkit-scrollbar-thumb:hover {
  background-color: #ff5252;
}</style></head><body><div class="container">
  <h2>Example: scrollbar-color</h2>
  <p>Scrollbar color is supported in Firefox. This example also includes WebKit rules for other browsers.</p>
  <div class="scroll-box" tabindex="0">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
    <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
    <p>Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.</p>
  </div>
</div></body></html>