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