1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
3 <title>CSS Test: Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.</title>
4 <link href="http://www.microsoft.com/" rel="author" title="Microsoft">
5 <link href="http://www.w3.org/TR/css3-background/#border-radius" rel="help">
6 <meta content="" name="flags">
7 <meta content="When 'border-radius' is applied to two adjoining sides with different thicknesses the border shows a smooth transition between the thicker and the thinner sides." name="assert">
8 <style type="text/css">
9 div
10 {
11 width:200px;
12 height:100px;
13 border-style:solid;
14 border-radius: 40px;
15 margin: 10px;
16 }
17 #test1
18 {
19 border-width:10px 15px 20px 30px;
20 }
21 #test2
22 {
23 border-width:10px 25px 40px;
24 }
25 #test3
26 {
27 border-width:10px 25px;
28 }
29 #test4
30 {
31 border-width:thin medium thick thin;
32 }
33 #test5
34 {
35 border-width:thin medium thick;
36 }
37 #test6
38 {
39 border-width:thin thick;
40 }
41 #test7
42 {
43 border-style:solid;
44 border-width:4px 16px 32px 100px;
45 border-radius:80px;
46 height:264px;
47 width:50px;
48 }
49 </style>
50 </head>
51 <body>
52 <p>Test passes if the boxes have rounded corners and show a smooth transition between the thicker and the thinner sides.</p>
53 <table>
54 <tbody><tr>
55 <td>
56 <div id="test1"></div>
57 <div id="test2"></div>
58 <div id="test3"></div>
59 </td>
60 <td>
61 <div id="test4"></div>
62 <div id="test5"></div>
63 <div id="test6"></div>
64 </td>
65 <td>
66 <div id="test7"></div>
67 </td>
68 </tr>
69 </tbody></table>
70
71 </body></html>