40

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>

6 Answers 6

79

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

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
2
  • 4
    This should be accepted: even if it's 1+ year late, it soved the same problem for me in chrome 43
    – Antoine
    Commented Jun 17, 2015 at 16:27
  • thank you. Even though I abandoned this project, it's still very helpful
    – Joe Pigott
    Commented Dec 1, 2015 at 3:26
2

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

3
  • Yes, this works. But when You scroll down, it shows the #dadae3 against the white. Would I set the background-color to transparent? Edit: No, I wouldn't put the background-color as transparent. This also shows as white corners.
    – Joe Pigott
    Commented Nov 27, 2013 at 2:59
  • It's already transparent (try giving a background color to fiddler's output iframe), but remember: it's a scrollbar. If something goes behind it, it triggers scrolling, so there cannot be something behind it. Commented Nov 27, 2013 at 3:03
  • Ok, I doubt anyone would notice gray corners on a scrollbar. P.S. This is probably going on a live site soon (as soon as I get my server working >:D)
    – Joe Pigott
    Commented Nov 27, 2013 at 3:04
1

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.

1

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>

1
  • I liked it! It was simple and functional.
    – Luis Lobo
    Commented Sep 1 at 17:02
0

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;
}
0
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.