<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title></title>
</head>
<body text="#006600" bgcolor="#ffffff">
On 3/19/2011 12:27 AM, Martin Alterisio wrote:
<blockquote
cite="mid:AANLkTina2zFW0fKf4rpcEUkoeXFSUfizEU1VMpJMyi_M@mail.gmail.com"
type="cite">
<div class="gmail_quote">On Sat, Mar 19, 2011 at 12:01 AM, Jacob
Kristensen <span dir="ltr"><<a moz-do-not-send="true"
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> </div>
<div><font face="Calibri">-X--Y-</font></div>
<div><font face="Calibri">-Y--X-</font></div>
<div> </div>
<div><font face="Calibri">This can be seen in the example
that i posted on Brugbart, <a moz-do-not-send="true"
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 moz-do-not-send="true"
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>
</blockquote>
Works as expected for the <article> on FireFox 3.6.15
<pre class="moz-signature" cols="65">--
Bill Drescher
william {at} TechServSys {dot} com</pre>
</body>
</html>