1 <!DOCTYPE html>
2 <html><head>
3 <title>Border radius clipping</title>
4 <link href="mailto:liz@oupeng.com" rel="author" title="zhouli">
5 <link href="http://www.w3.org/TR/css3-background/#corner-clipping" rel="help">
6 <link href="reference/border-radius-clipping-ref.htm" rel="match">
7 <meta content="When set with 'overflow: hidden', outer container should clip background of an element insides at the corners. " name="assert">
8 <style>
9 #parent{
10 border-radius: 15px;
11 border: 1px solid blue;
12 overflow: hidden;
13 width: 300px;
14 height: 30px;
15 }
16 #son{
17 background-color: green;
18 width: 300px;
19 height: 30px;
20 }
21 #dummy {
22 border-radius: 5000em;
23 height: 10000em;
24 overflow: hidden;
25 width: 10000em;
26 }
27 </style>
28 </head>
29 <body>
30 <div id="parent">
31 <div id="son"></div>
32 </div>
33 <div id="dummy">
34 This should not appear if browser supports border-radius
35 </div>
36 <script>
37 </script>
38
39 </body></html>