[html5] CSS Border-radius and New Elements

[bill]

On 3/19/2011 12:27 AM, Martin Alterisio wrote:
> On Sat, Mar 19, 2011 at 12:01 AM, Jacob Kristensen 
> <admin at blueboden.com <mailto:admin at blueboden.com>> wrote:
>
>     Any reason why border-radius doesn't work on article elements?
>     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.
>     I tried the exact same code on a div element, and this
>     worked fine.
>
>
> 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.
>
>     There also seem to be a bug, where the second value gets
>     applied a bit odd, also in both browsers.
>     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.
>     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:
>     -X--Y-
>     -Y--X-
>     This can be seen in the example that i posted on Brugbart,
>     http://brugbart.com/Visions/css-border-radius
>
>
> That's the expected behavior, not a bug.
>
> http://www.w3.org/TR/css3-background/#the-border-radius
>
> border-radius: <value for all corners>;
> border-radius: <value for top-left and bottom-right> <value for 
> top-right and bottom-left>;
> border-radius: <value for top-left> <value for top-right and 
> bottom-left> <value for bottom-right>;
> border-radius: <value for top-left> <value for top-right> 
> <value for bottom-right> <value for bottom-left>;
>
> 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:
>
> border-radius: 5px 10px;
>
Works as expected for the <article> on FireFox 3.6.15

-- 
Bill Drescher
william {at} TechServSys {dot} com

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20110319/5d82c388/attachment-0003.htm>