CODEWITHSUNDEEP
htmlcsswebkit
Joe Pigott
Joe Pigott

Reputation: 8459

How can I color the white corner with webkit-scrollbar?

Fiddle

I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:

It's kinda hard to see

Sorry, it's kinda hard to see since it's a scrollbar.

I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?

CSS (entire):

body {
  padding: 0;
  margin: 0
}
::-webkit-scrollbar {
  width: 13px;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
  background: #dadae3;
  border-radius: 10px;
  border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
  background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
  background: #aeaeb5
}

HTML:

<div style='background: #dadae3; width: 100%; height: 30px;'></div>
<div style='width: 100%; height: 1000px'></div>

Upvotes: 40

Views: 26239

Answers (6)

Petr Šebesta
Petr Šebesta

Reputation: 230

I had to customize webkit-scrollbar-corner as colored triangle instead of square.

Here is the result how to do it. With border trick.

enter image description here

Example 

div {
    width: 300px;
    height: 150px;
    background-color: #ccffcc;
    overflow: scroll;
}

div > div {
  width: 200%;
  height: 200%;
  overflow: hidden;
}

div::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

div::-webkit-scrollbar-track {
  background: #333;
}

div::-webkit-scrollbar-thumb {
  background: #cc0000;
}

div::-webkit-scrollbar-thumb:hover {
  background: #dd0000;
}

div::-webkit-scrollbar-thumb:active {
  background: #ff0000;
}

div::-webkit-scrollbar-corner {
    background: transparent;
    width: 0;
    height: 0;
    border-left: 16px solid #333;
    border-top: 16px solid #333;
    border-bottom: 16px solid white;
    border-right: 16px solid white;
}
<div>
  <div></div>
</div>

Upvotes: 1

Robert Yeomans
Robert Yeomans

Reputation: 376

None of the above worked for me. Hidden in the dev tools, I found pseudo: ::-webkit-scrollbar-track. If set, make sure it's set to the colour you need. If not, set it to the colour that you need to match the background of the modal or container etc. which it services.

Upvotes: 0

Omar
Omar

Reputation: 1

Try with this

::-webkit-scrollbar-corner {
    background: transparent;
    width: 0;
    height: 0;
    border-left: 16px solid #8B7E79;
    border-top: 16px solid #8B7E79;
    border-bottom: 16px solid transparent;
    border-right: 16px solid transparent;
}

Upvotes: 0

Alonad
Alonad

Reputation: 2246

I was fighting this scrollbar-corner today, which takes space and creates unneeded gap. If I use overflow: auto on container this scrollbar corner completely disappears while scrollbar itself remains visible.

Upvotes: 1

Jasdeep Khalsa
Jasdeep Khalsa

Reputation: 6949

You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

Upvotes: 81

Carlo Cannas
Carlo Cannas

Reputation: 3262

You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".

Upvotes: 2

Related Questions