CODEWITHSUNDEEP
overflowcss
ByronMcGrath
ByronMcGrath

Reputation: 375

Border Radius Scroll Bar

I have two scroll bars and I've set a border radius for it with 

::-webkit-scrollbar {
   width: 17px;
}

::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   border-radius: 10px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

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

I have assigned the Div's each unique ID's and a class for both: #Scroll1 & #Scroll2 & .Overflow

My issue is that the overflow is for scrolling through my table of data but both tables are in one big div and I wanted to match the border radius's to the main div.

here is an example:

enter image description here

I will position it better later but what I want is the bottom scroll bar to abandon its border-top-right-radius and the top scroll bar to drop the border-bottom-right-radius

Any help will be kindly appreciated.

here should be a friendly JSfiddle with the same issue: http://jsfiddle.net/z98Kq/

Upvotes: 5

Views: 16310

Answers (1)

SW4
SW4

Reputation: 71150

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

Upvotes: 1

Related Questions