On creating a double scroll with custom css style there is a little white square on the corner. How-CodePudding

As you can see in the image below I have a web component that has a scroll in x and other scroll in y direction, so when I give them a custom css style there is this white square in the bottom-right corner that looks bad and my question is: How can I make it disappear? Thanks!

Fun fact: As I was adding the code snippet I realized that stackoverflow or my web browser is overwriting my scroll style and making it look better. That would be it, but idk how to reproduce it on my project.

.box {
  border: 1px solid black;
  width: 5em;
  height: 5em;
  overflow: scroll;
  background: pink;
}


/* width */

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}


/* Track */

::-webkit-scrollbar-track {
  background: red;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
  border-radius: 5em;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<div >
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
</div>

CodePudding user response：

See ::-webkit-scrollbar-corner.

.box {
  border: 1px solid black;
  width: 5em;
  height: 5em;
  overflow: scroll;
  background: pink;
}


/* width */

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}


/* Track */

::-webkit-scrollbar-track {
  background: red;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
  border-radius: 5em;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

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

<div >
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
  <div>aaaaaaaaaaaaaaaa</div>
</div>