border-radius-clipping-with-transform-001-ref.html (818B)
1 <!DOCTYPE html> 2 <title>CSS Test (Backgrounds): border-radius clipping on overflow:hidden with transforms</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <style> 6 7 #outer { 8 border: 10px solid #000; 9 border-radius: 60px; 10 width: 200px; 11 height: 200px; 12 background: blue; 13 position: absolute; 14 top: 10px; 15 left: 10px; 16 } 17 18 #coverinner, #coverouter { 19 position: absolute; 20 border: 4px solid fuchsia; 21 filter: grayscale(30%); 22 } 23 24 #coverinner { 25 width: 196px; 26 height: 196px; 27 top: 18px; 28 left: 18px; 29 border-radius: 52px; 30 } 31 32 #coverouter { 33 width: 216px; 34 height: 216px; 35 top: 8px; 36 left: 8px; 37 border-radius: 62px; 38 } 39 40 </style> 41 42 <div id="outer"> 43 </div> 44 <div id="coverinner"> 45 </div> 46 <div id="coverouter"> 47 </div>