clip-rounded-corner.html (758B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Filled Background with Rounded Corner</title> 4 <link rel="match" href="clip-rounded-corner-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping"> 6 <style> 7 #b { 8 width: 100px; 9 height: 80px; 10 border: 20px blue solid; 11 border-top-right-radius: 20px; 12 background-color: green; 13 background-clip: content-box; 14 } 15 #shield { 16 position: absolute; 17 width: 30px; 18 height: 30px; 19 left: 120px; 20 top: 5px; 21 background-color: black; 22 } 23 </style> 24 <body> 25 <div id="b"></div> 26 <!-- Hide the curved outside border to deal with imprecise rendering. --> 27 <div id="shield"></div> 28 </body>