[html5] CSS Border-radius and New Elements

[Martin Alterisio]

On Sat, Mar 19, 2011 at 12:01 AM, Jacob Kristensen <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;
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20110319/44fbf7ac/attachment-0003.htm>