<div class="gmail_quote">On Sat, Mar 19, 2011 at 12:01 AM, Jacob Kristensen <span dir="ltr"><<a href="mailto:admin@blueboden.com">admin@blueboden.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;">





<div style="padding-left: 10px; padding-right: 10px; padding-top: 15px;" name="Compose message area">
<div><font face="Calibri">Any reason why border-radius doesn't work on article 
elements?</font></div>
<div> </div>
<div><font face="Calibri">I tested this earlier today, and i can't seem to get it 
to work in IE9. On top of that, i actually expected it would work in Firefox, 
using -moz-border-radius, but it didn't.<br>I tried the exact same code on a div 
element, and this worked fine.</font></div></div></blockquote><div><br>border-radius is not HTML5, is CSS3, and it works just fine in HTML5 new
 elements (just remember to use display:block where appropiate, some 
browsers have no default styling for those new elements), you must be 
using it wrong.<br><br></div><blockquote class="gmail_quote" style="margin: 0pt 0pt 0pt 0.8ex; border-left: 1px solid rgb(204, 204, 204); padding-left: 1ex;"><div style="padding-left: 10px; padding-right: 10px; padding-top: 15px;" name="Compose message area">


<div> </div>
<div><font face="Calibri">There also seem to be a bug, where the second value gets 
applied a bit odd, also in both browsers.</font></div>
<div> </div>
<div><font face="Calibri">As i understand border-radius, the first value should 
represent the radius of the horizontal plane, while the second value should 
represent the vertical plane radius.<br>This should then allow web designers to 
sort of "squeeze" the bend of the corners. But what this in reality seem to do, 
is to apply two different values like below:</font></div>
<div><font face="Calibri"></font> </div>
<div><font face="Calibri">-X--Y-</font></div>
<div><font face="Calibri">-Y--X-</font></div>
<div><font face="Calibri"></font> </div>
<div><font face="Calibri">This can be seen in the example that i posted on 
Brugbart, <a title="http://brugbart.com/Visions/css-border-radius
Hold Ctrl nede, og klik for at følge link" href="http://brugbart.com/Visions/css-border-radius" target="_blank">http://brugbart.com/Visions/css-border-radius</a></font></div></div></blockquote><div><br>That's the expected behavior, not a bug.<br>

<br><a href="http://www.w3.org/TR/css3-background/#the-border-radius">http://www.w3.org/TR/css3-background/#the-border-radius</a><br><br>border-radius: <value for all corners>;<br>
border-radius: <value for top-left and bottom-right> <value for top-right and bottom-left>;<br>

border-radius: <value for top-left> <value for top-right and bottom-left> <value for bottom-right>;<br>

border-radius: <value for top-left> <value for top-right> <value for bottom-right> <value for bottom-left>;<br>

<br>If you want to have different radius for the x axis and y axis you have to specify first the values for the x-axis then the values for the y-axis separated by a / character, for example:<br><br>border-radius: 5px 10px;<br>

</div></div><br>