border-radius-shorthand-001.htm (2134B)
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: 'Border-radius' shorthand is used to set all four 'border-[*]-radius' properties.</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="'Border-radius' shorthand sets all four 'border-[*]-radius' properties." /> 8 <style type="text/css"> 9 div 10 { 11 width: 200px; 12 height: 200px; 13 } 14 #reference1 15 { 16 border: 10px solid red; 17 border-top-left-radius: 40px; 18 border-top-right-radius: 40px; 19 border-bottom-right-radius: 40px; 20 border-bottom-left-radius: 40px; 21 } 22 #test1 23 { 24 margin-top: -220px; 25 border: 10px solid black; 26 border-radius : 40px; 27 } 28 #reference2 29 { 30 border: 10px solid red; 31 border-top-left-radius: 2em 0.5em; 32 border-top-right-radius: 1em 3em; 33 border-bottom-right-radius: 4em 0.5em; 34 border-bottom-left-radius: 1em 3em; 35 } 36 #test2 37 { 38 margin-top: -220px; 39 border: 10px solid black; 40 border-radius: 2em 1em 4em / 0.5em 3em; 41 } 42 </style> 43 </head> 44 <body> 45 <p>Test passes if there are two black boxes with rounded corners and red is not visible on the page.</p> 46 <table> 47 <tr> 48 <td> 49 <div id="reference1"></div> 50 <div id="test1"></div> 51 </td> 52 <td> 53 <div id="reference2"></div> 54 <div id="test2"></div> 55 </td> 56 </tr> 57 </table> 58 </body> 59 </html>