title: Border Radius Scroll Bar
body: <p>I have two scroll bars and I've set a border radius for it with </p>
  
  <pre><code>::-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); 
  }
  </code></pre>
  
  <p>I have assigned the Div's each unique ID's and a class for both: #Scroll1 &amp; #Scroll2 &amp; .Overflow</p>
  
  <p>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.</p>
  
  <p>here is an example:</p>
  
  <p><img src="https://i.stack.imgur.com/bLANS.png" alt="enter image description here"></p>
  
  <p>I will position it better later but what I want is the bottom scroll bar to abandon its 
  <code>border-top-right-radius</code> and the top scroll bar to drop the <code>border-bottom-right-radius</code></p>
  
  <p>Any help will be kindly appreciated.</p>
  
  <p>here should be a friendly JSfiddle with the same issue:
  <a href="http://jsfiddle.net/z98Kq/" rel="nofollow noreferrer">http://jsfiddle.net/z98Kq/</a></p>