Customize the Browser Scrollbar

scrollbar-styling.css

/** BROWSER SCROLLBAR  **/

/* Scrollbar Styling */
::-webkit-scrollbar {
	width: 11px;
}

/* The new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-track {
	background-color: #FFD600;
	border-left: 2px solid #DC0451;
}

/* This will style the thumb, ignoring the track */
::-webkit-scrollbar-thumb {
	background-color: rgba(220, 4, 81, 0.46);
	border-top: 4px solid #DC0451;
	border-bottom: 4px solid #DC0451;
}

/* Optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-button {
	background-color: #DC0451;
	border-left: 2px solid #DC0451;
}

/* If both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
::-webkit-scrollbar-corner {
	background-color: #CACBCE;
}