[html5] CSS Border-radius and New Elements
malterisio777 at gmail.com
Fri Mar 18 21:27:34 PDT 2011
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:
> This can be seen in the example that i posted on Brugbart,
That's the expected behavior, not a bug.
border-radius: <value for all corners>;
border-radius: <value for top-left and bottom-right> <value for top-right
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...
More information about the Help