<!DOCTYPE HTML> <title>Test for clipping of border-radius</title> <style> #contain { width: 200px; height: 100px; position: relative; } #contain > div { overflow: hidden; width: 200px; height: 100px; border-radius: 50px / 20px; } #contain > div > img { border-radius: 20px / 40px; width: 200px; height: 100px; } #contain > div.spot { position: absolute; height: 1px; width: 1px; } </style> <div id="contain"> <div><img src="../pixel-rounding/lime-25x25.png" alt=""></div> <!-- This is just like the test, except we'll add a bunch of spots in various places that should match the background of what they're on. --> <div class="spot" style="top: 1px; left: 15px; background: white"></div> <div class="spot" style="top: 14px; left: 2px; background: white"></div> <div class="spot" style="top: 18px; left: 0px; background: white"></div> <div class="spot" style="top: 82px; left: 198px; background: white"></div> <div class="spot" style="top: 97px; left: 180px; background: white"></div> <div class="spot" style="top: 2px; left: 180px; background: white"></div> <div class="spot" style="top: 17px; left: 198px; background: white"></div> <div class="spot" style="top: 97px; left: 19px; background: white"></div> <div class="spot" style="top: 82px; left: 1px; background: white"></div> <div class="spot" style="top: 10px; left: 8px; background: lime"></div> <div class="spot" style="top: 89px; left: 8px; background: lime"></div> <div class="spot" style="top: 10px; left: 191px; background: lime"></div> <div class="spot" style="top: 89px; left: 191px; background: lime"></div> </div>