Search code examples
csswebkitscrollbar

Is it possible to have different styles for top and bottom WebKit scrollbar buttons?

I want to make a WebKit scrollbar that has different border-radius for top and bottom buttons, like this:

scrollbar

This is the CSS at the moment for the buttons:

::-webkit-scrollbar-button
{
  border-bottom-left-radius: 8.5px;
  border-bottom-right-radius: 8.5px;
}

but this makes both buttons have curved bottom corners.

Is there a way to do this (preferrably with CSS only)?

Solution

  • You can differentiate the top and bottom buttons using

    ::-webkit-scrollbar-button:vertical:decrement

    and

    ::-webkit-scrollbar-button:vertical:increment

    CSS:

    ::-webkit-scrollbar-button:vertical:decrement {
  border-bottom-left-radius: 8.5px;
  border-bottom-right-radius: 8.5px;
} 

::-webkit-scrollbar-button:vertical:increment {
  border-top-left-radius: 8.5px;
  border-top-right-radius: 8.5px;
}

    Fiddle