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