::-webkit-scrollbar {
  width: 4px;
  border: 1px solid #d5d5d5;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: blue;
}

 ::-webkit-scrollbar-thumb:horizontal{
        background: red;
        border-radius: 1px;
 }

You can do something like this to style both of them

Basically I wanted to have both horizontal and vertical scrolls in my document but I wanted to have different thicknesses for them. To be specific, I wanted to hide vertical scrollbar but keep it scrollable.
Turns out, if you set width, it will change the thickness of vertical scroll and if you set height, it’ll change the thickness of horizontal scroll.

.scroll-container{
  background: grey;
}
.scroll-container::-webkit-scrollbar{
  width: 5px; /*sets the thickness of vertical scroll  */
  height: 8px; /*sets the thickness of horizontal scroll */
}
.scroll-container::-webkit-scrollbar-thumb{
  background-color: red;
  border-radius: 10px;
}
.scroll-container::-webkit-scrollbar-track{
  background-color: black;
}

<div class="scroll-container" style="width: 200px; height: 180px; overflow: scroll;">
  <div style="width:300px; height:300px;">
    <h1>Hello World</h1>
  </div>
</div>

I’m trying to add two different styles for horizontal an vertical scrollbars.

I want both horizontal and vertical scrolls in my document but with different thicknesses. I want to hide the vertical scrollbar but keep it scrollable.

How do I achieve that?

<div class="scroll-container" style="width: 200px; height: 200px; overflow: scroll;">
     <div style="width:300px; height:300px;">
        <h1>Hello World</h1>
     </div>
    </div>