border-radius-different-width-001.htm (2398B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Adjoining borders with different thicknesses show a smooth transition between the thicker and the thinner borders.</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" /> 7 <meta name="assert" 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." /> 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 <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 </table> 70 </body> 71 </html>