border-radius-shorthand-002

Borders Radius Shorthand.

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
The shorthand border radius property can be used to specify all four eliptical corners of a box.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3         <title>CSS Test: Borders Radius Shorthand. </title>
 4         <link href="mailto:arno@arno.org" rel="author" title="Arno">
 5         <link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help">
 6         <link href="reference/border-radius-shorthand-002-ref.htm" rel="match">
 7         <meta content="" name="flags">
 8         <meta content="The shorthand border radius property can be used to specify all four eliptical corners of a box." name="assert">
 9         <style type="text/css">
10         /* <![CDATA[ */
11         	div
12             {
13 				border-radius: 29px  43px 19px 13px / 5px 11px 23px 17px;
14 
15         		background:	#dddddd;
16         		width:		200px;
17         		height: 	100px;
18         	}
19         /* ]]> */
20         </style>
21 
22     </head>
23     <body>
24     	<p>
25 			There should be one box, with four rounded corners, each corner a different radius.
26 		</p>
27 		<ul>
28 			<li>PASS if the box below has four rounded corners.</li>
29 			<li>FAIL if the corners are not rounded.</li>
30 		</ul>
31 
32     	<div></div>
33 
34     
35 
36 
37 </body></html>