Apply Border-Radius to Scrollbars with CSS

Apply Border-Radius To Scrollbars with CSS

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>

Clip scrollbar inside rounded div corners CSS

You need to wrap your content like this

.main {  overflow: hidden;  margin: 20px;  width: 100px;  border: 1px solid black;  border-radius: 30px;  display: inline-block;}.test {  height: 200px;  overflow-x: hidden;  overflow-y: scroll;}p {  float: left;  width: 100%;  padding: 10px;}

<div class="main">  <div class="test">    <p>Item 1</p>    <p>Item 2</p>    <p>Item 3</p>    <p>Item 4</p>    <p>Item 5</p>  </div></div>

Apply Border-Radius To Scrollbars With ::-webkit-scrollbar CSS3

Hope this Example helps you: http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

I think you have missed these things:

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

for better understanding you can follow this fiddle: http://jsfiddle.net/Sfy9p/3/

Border Radius Scroll Bar

If the top scrollbar has the id #Scroll1 and the bottom #Scroll2, simply use:

#Scroll1{
   border-bottom-right-radius:0;
}
#Scroll2{
   border-top-right-radius:0;
}

If the bars dont have id attributes like this- you can use nth-of-type or nth-child (or their first- and last- derivations) to target the first (top) and last (bottom) scrollbars.

Given your fiddle provided HERE, you should use:

#canceltable::-webkit-scrollbar-thumb,#canceltable::-webkit-scrollbar-track{
   border-bottom-right-radius:0;
}
#Deletetable::-webkit-scrollbar-thumb,#Deletetable::-webkit-scrollbar-track{
   border-top-right-radius:0;
}

Demo

Custom Firefox Scrollbar - Border Radius

You can't achieve that in Firefox using css.

It will ignore the ::-webkit properties since it doesn't use webkit. Chromium-based browsers accept it, since they use Blink engine which is based on the webkit.

Gecko (which is the rendering engine for Firefox) only accepts two standard properties that you have already listed: scrollbar-width and scrollbar-color.

Your best bet (if this is an absolute requirement) is to use a non-native scrollbar replacement. Personally I think those introduce more issues than they offer gain, but pick your poison. Example could be perfect scrollbar, but I'm sure there's more out there if you search.

DIV with rounded corners and internal scrollbars

You should try a custom scrollbar. On your screenshots you're on a OS X System, but with IE (Windows) it'll be awfull.

Take a look on this stackoverflow question.

Scrollable table with rounded corners

removed table border-radius

Main idea to make wrapper width: fit-content, add to it border-radius and make scrollbar width: 0

.table-wrapper {  height: 400px;  max-height: 400px;  overflow-y: auto;  text-align: left;  width: fit-content;  border-radius: 30px;}
.table-wrapper * { margin: 0; box-sizing: border-box;}
.table-wrapper table { border-collapse: separate; font-size: 13px; background-color: #121212; text-transform: uppercase; border-spacing: 0; table-layout: fixed;  color: #fff;}
table thead tr th { padding: 18px 24px; border-bottom: 1px solid #1c1c1c; position: sticky; top: 0;  background-color: #121212;}
table tbody tr td { padding: 11px 24px; overflow: hidden; text-overflow: ellipsis;}

::-webkit-scrollbar {  width: 0;}

<div class="table-wrapper">  <table>    <thead>      <tr>        <th>Item</th>        <th>Item</th>        <th>Item</th>        <th>Item</th>        <th>Item</th>        <th>Item</th>      </tr>    </thead>    <tbody>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>      <tr>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>        <td>Thingggg</td>      </tr>    </tbody>  </table></div>

Apply Border-Radius to Scrollbars with CSS