Border Radius Scroll Bar - overflow

Question

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:
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/

Answer 1

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