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