body::-webkit-scrollbar { width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track { background: orange; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb { background-color: blue; /* color of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */ border: 3px solid orange; /* creates padding around scroll thumb */
}

/* transparent scrollbar */
div::-webkit-scrollbar { width: 12px;
}
div::-webkit-scrollbar-thumb { border: 2px solid #ffffff2f; border-radius: 20px;
}

/* Chrome, safari */
*::-webkit-scrollbar {	width: 8px;
}
*::-webkit-scrollbar-thumb {	background-color: gray;
}
/* Firefox */
.selector {	scrollbar-width: none;	}

 body::-webkit-scrollbar { width: 12px;
}
body::-webkit-scrollbar-thumb { background: #ff9c44; border-radius: 6px;
}
by moheen

::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
::-webkit-scrollbar-track addresses the empty space “below” the progress bar
::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements