Reputation: 1047

Apply Border-Radius To Scrollbars with CSS

To put it simple, this is what i want (obtained on a Webkit Browser using -webkit-scrollbar) :

And this is what I get on Opera (Firefox doesn't apply the border radius to the scrollbar either, but still applies the border) :

Is there a simple way to make the border not disappear under the scrollbar ?

I dont need the fancy style of -webkit-scrollbar but i would like the page to look clean and symmetric...

Upvotes: 93

Answers (12)

SinGlE BW

Reputation: 1

const MaterialDarkModeMemo = ({ children }) => {
    const isDarkTheme = useAppSelector(settingsSelectors.getDarkModeStatus);
    const theme = useMemo(() => createTheme(commonTheme, isDarkTheme ? getDarkTheme(commonTheme) : getLightTheme(commonTheme)), [isDarkTheme]);

    return (
      <ThemeProvider theme={theme} >
        <ScopedCssBaseline enableColorScheme sx={({palette}) => ({ 
          height: 'inherit',
          '*::-webkit-scrollbar': {
            width: 12,               
            height: 0
          },
          '*::-webkit-scrollbar-thumb': {
            borderRadius: 100,
            background: palette.mode === 'dark' ? indigo[400] : grey[500],
            border: '1px solid rgba(0, 0, 0, 0.1)',
          },
          '@-moz-document url-prefix()': {
            'div': {
              scrollbarColor: '#1515d87c #ffced100 !important',
              scrollbarWidth: 'thin !important'
            }
          }
        })} >
          {children}
        </ScopedCssBaseline>
      </ThemeProvider>
     );
};

export const MaterialDarkMode = React.memo(MaterialDarkModeMemo);

Upvotes: 0

Denys Mytnyk

Reputation: 41

Try using clip-path:
clip-path: inset(0 round 14px);
Just change the 14px to whatever you need.

This will have a similar effect to border-radius: 14px;

Upvotes: 4

mohammadreza hayati

Reputation: 83

You can use this

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <title>scrollbar border</title>
</head>
<body>
<div>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>

Upvotes: 2

Camille

Reputation: 2531

Old topic, but was still accurate for me. Neat and easy those days

::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

Upvotes: 0

Muhammad Bilawal

Reputation: 474

If you need a slim scroller here it is SCSS CODE

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px !important;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
  &::-webkit-scrollbar-track {
    background: #e6e6e6;
    border-left: 1px solid transparent;
    border-radius: 10px !important;
  }
  &::-webkit-scrollbar {
    width: 7px;
    scroll-behavior: smooth !important;
  }
}

plain css code is here

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #e6e6e6;
  border-left: 1px solid transparent;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar {
  width: 7px;
  scroll-behavior: smooth !important;
}

Html code lines

<div class="custom-scroll" style="max-height:300px">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quam vel consectetur enim aliquam unde libero sint, exercitationem voluptate doloribus, quasi veritatis accusantium itaque. In beatae recusandae possimus ea quae.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae quam vel consectetur enim aliquam unde libero sint, exercitationem voluptate doloribus, quasi veritatis accusantium itaque. In beatae recusandae possimus ea quae.</p>
</div>

Out put will look like this on Light and Dark skin

Upvotes: 2

demo7up

Reputation: 578

This is the same as @Madan Sapkota and for the exception of border-radius: 10px; in the scrollbar and track classes no inner div needed

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
   border-radius: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

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

Upvotes: 2

Madan Sapkota

Reputation: 26071

The fancy horizontal scrollbar with a border radius.

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

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

The same in SCSS

::-webkit-scrollbar {
  width: 10px;
  height: 10px;

  &-track {
    background: #f1f1f1;
  }

  &-thumb {
    background: #888;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    &:hover {
      background: #555;
    }
  }
}

The test screenshot is attached below:

Upvotes: 6

bertdida

Reputation: 5288

Google implemented something like this when showing their web apps.

With the help of the inspect element and copy-paste, I came with the codes below.

ul::-webkit-scrollbar-thumb {
  background-color: red;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;  
}

ul::-webkit-scrollbar {
  width: 16px;
}

ul {
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  width: 350px;
  max-height: 300px;
  background-color: #ddd;

  border-radius: 8px;
}

li {
  list-style-type: none;
  padding: 13px;
}

<ul>
  <li>google.com</li>
  <li>facebook.com</li>
  <li>twitter.com</li>
  <li>instagram.com</li>
  <li>linkedin.com</li>
  <li>reddit.com</li>
  <li>whatsapp.com</li>
  <li>tumblr.com</li>
  <li>skype.com</li>
</ul>

I don't consider myself a CSS expert, so hopefully, someone will explain how these things work.

Or you can check the docs on MDN:

Upvotes: 54

WasiF

Reputation: 28847

slim with rounded corners

@-moz-document url-prefix() {
    .scrollbar {
        overflow: auto;
        width: 0.5em !important;
        scroll-behavior: smooth !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        background-color: darkgrey !important;
        outline: 1px solid slategrey !important;
        border-radius: 10px !important;
    }
}

::-webkit-scrollbar {
    width: 0.5em !important;
    scroll-behavior: smooth !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-thumb {
    background-color: darkgrey !important;
    outline: 1px solid slategrey !important;
    border-radius: 10px !important;
}

<div class="scrollbar" style="height: 600px">
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
   <br/>
   <br/>
   <br/>
   <br/>
   <h1>Scrollbar is slim with rounded corners</h1>
</div>

Upvotes: 0

Mark

Reputation: 1126

I've been having the same issue. It's not the most elegant of solutions but, simply put a smaller div inside your outer box so the scroll bar doesn't overlap the outer box.

Like this code copied from this pen:

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>

Upvotes: 54

SimpleDesign

Reputation: 1141

Put the content that needs to be scrolled in a div with overflow: auto. Around that content div put a div with your rounded corners and overflow: hidden.

Now you can see the scroll bar but its outer corners are hidden and are not disturbing the rounded corners of the outer div.

Example:

// Insert placeholder text
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);

.outer {
  width: 150pt;
  border: 1px solid red;
  border-radius: 15pt;
  overflow: hidden;
}

.inner {
  height: 200px;
  overflow-y: auto;
}

<div class="outer">
    <div class="inner">
        <!-- lots of text here -->
    </div>
</div>

Upvotes: 89

alexej_d

Reputation: 448

Would be nice if you could supply a fiddle. Nevertheless, you shoud try changing the box-sizing on the container to border-box (if not already done):

box-sizing: border-box;

Upvotes: -3

Apply Border-Radius To Scrollbars with CSS

Answers (12)

Related Questions