Customize the scrollbar of the web like Gmail with only css. [Chrome and Safari]

Scrollbar.css

::-webkit-scrollbar {
background: transparent;
	overflow: visible;
	width: 17px;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border: solid #fff;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.8);
}

::-webkit-scrollbar-thumb:horizontal {
	border-width: 4px 6px;
	min-width: 40px;
}

::-webkit-scrollbar-thumb:vertical {
	border-width: 6px 4px;
	min-height: 40px;
}

::-webkit-scrollbar-track-piece {
	background-color: #fff;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: #ADADAD;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}

::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

Horizontal is not working.

@sayyednoman https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar read this to make it work