<!DOCTYPE html> <title>Box Shadow Border Radius (Outset)</title> <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#shadow-shape"> <link rel="match" href="box-shadow-radius-000-ref.html"> <!-- Allow differences of antialised pixels along rounded edges --> <meta name="fuzzy" content="0-25;0-90"> <style> body > div { /* Isolate tests from each other */ position: relative; width: 100px; height: 100px; float: left; } div > div { position: absolute; box-sizing: border-box; /* opacity: 0.7; /* uncomment this line for debugging */ } .floor > .test { color: silver; } .trap > .test { color: red; } .floor > .ref { border: solid red; width: 58px; height: 58px; top: 21px; left: 21px; } .trap > .ref { border: solid silver; width: 62px; height: 62px; top: 19px; left: 19px; } /* Keep tests centered by (top|left)*2 + (width|height) = 100. Keep tests consistent spread + (width|height) = 60 Floor = spread - 2px Trap = spread + 2px */ .once > .test { border-radius: 10px; box-shadow: 0 0 0 10px; /* shadow radius = 20px */ top: 30px; left: 30px; width: 40px; height: 40px; } .once > .ref { border-radius: 20px; } .once.floor > .ref { border-width: 8px; } .once.trap > .ref { border-width: 12px; } .twice > .test { border-radius: 10px; box-shadow: 0 0 0 5px; /* shadow radius = 15px */ top: 25px; left: 25px; width: 50px; height: 50px; } .twice > .ref { border-radius: 15px; } .twice.floor > .ref { border-width: 3px; } .twice.trap > .ref { border-width: 7px; } .half > .test { border-radius: 8px; box-shadow: 0 0 0 16px; /* shadow radius = 21px */ top: 36px; left: 36px; width: 28px; height: 28px; } .half > .ref { border-radius: 21px; } .half.floor > .ref { border-width: 14px; } .half.trap > .ref { border-width: 20px; } .fourth > .test { border-radius: 5px; box-shadow: 0 0 0 20px; /* shadow radius = 14.45px */ top: 40px; left: 40px; width: 20px; height: 20px; } .fourth > .ref { border-radius: 15px; } .fourth.floor > .ref { border-width: 18px; } .fourth.trap > .ref { border-width: 23px; } .eighth > .test { border-radius: 2px; box-shadow: 0 0 0 16px; /* shadow radius = 5.28 */ top: 36px; left: 36px; width: 28px; height: 28px; } .eighth > .ref { border-radius: 5.28px; } .eighth.floor > .ref { border-width: 14px; } .eighth.trap > .ref { border-width: 18px; } </style> <p>Test passes if there is no red. <div class="once floor"> <div class="ref"></div> <div class="test"></div> </div> <div class="once trap"> <div class="test"></div> <div class="ref"></div> </div> <div class="twice floor"> <div class="ref"></div> <div class="test"></div> </div> <div class="twice trap"> <div class="test"></div> <div class="ref"></div> </div> <div class="half floor"> <div class="ref"></div> <div class="test"></div> </div> <div class="half trap"> <div class="test"></div> <div class="ref"></div> </div> <div class="fourth floor"> <div class="ref"></div> <div class="test"></div> </div> <div class="fourth trap"> <div class="test"></div> <div class="ref"></div> </div> <div class="eighth floor"> <div class="ref"></div> <div class="test"></div> </div> <div class="eighth trap"> <div class="test"></div> <div class="ref"></div> </div>