<!DOCTYPE HTML> <html dir="ltr"> <title>Test of reduction of border-radius for scrollbars (border drawing)</title> <style> .contain { height: 130px; position: relative } .test { position: absolute; top: 0; left: 0; /* border-width: 2px 4px 8px 10px; */ height: 100px; width: 200px; /* border-radius: 12px / 15px; */ border: medium solid blue; border-width: 2px 4px 8px 10px; } .cover { position: absolute; width: 200px; height: 100px; top: 2px; left: 10px; background: blue; } </style> <div class="contain"> <!-- scrollbar along bottom --> <div class="test" id="x" style="border-radius: 12px 12px 6.4px 10px / 15px 15px 8px 12.5px"></div> <div class="cover" style="border-top-right-radius: 5px"></div> </div> <div class="contain"> <!-- scrollbar along right --> <div class="test" id="y" style="border-radius: 12px 4px 6.4px 12px / 15px 5px 8px 15px"></div> <div class="cover"></div> </div> <div class="contain"> <!-- scrollbar along bottom and right --> <div class="test" id="xy" style="border-radius: 12px 4px 6.4px 10px / 15px 5px 8px 12.5px"></div> <div class="cover"></div> </div>