scrollbar-clamping-1.html (834B)
1 <!DOCTYPE HTML> 2 <title>Test of reduction of border-radius for scrollbars (border drawing)</title> 3 <style> 4 5 .contain { height: 130px; position: relative } 6 7 .test { 8 position: absolute; 9 top: 0; 10 left: 0; 11 border: medium solid blue; 12 border-width: 2px 4px 8px 10px; 13 height: 100px; 14 width: 200px; 15 border-radius: 12px / 15px; 16 } 17 18 .cover { 19 position: absolute; 20 width: 200px; 21 height: 100px; 22 top: 2px; 23 left: 10px; 24 background: blue; 25 } 26 27 #x, #xy { overflow-x: scroll } 28 #y, #xy { overflow-y: scroll } 29 30 </style> 31 32 <div class="contain"> 33 <div class="test" id="x"></div> 34 <div class="cover" style="border-top-right-radius: 5px"></div> 35 </div> 36 37 <div class="contain"> 38 <div class="test" id="y"></div> 39 <div class="cover"></div> 40 </div> 41 42 <div class="contain"> 43 <div class="test" id="xy"></div> 44 <div class="cover"></div> 45 </div>