[html5] CSS Border-radius and New Elements

[Jukka K. Korpela]

Martin Alterisio wrote:

>> 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,

Well, the scope of HTML5 is not crystal clear, and CSS3 might be included in 
some people's opinion, but other lists (like css-discuss) are more suitable 
for discussing CSS issues, as a rule.

>> and it works just fine in HTML5 new elements

On browsers that recognize the new elements, yes, I guess.

>> (just remember to use display:block where appropiate,
>> some browsers have no default styling for those new elements), you
>> must be using it wrong.

According to the current HTML5 drafts, the article element is "expected" to 
have display: block as the default.

For IE 8 and earlier, you need to set the display property for article, but 
this alone doesn't help, since those browsers don't recognize the article 
element at all, even in the sense of applying CSS rules to it. You need to 
"teach" it to them using Javascript code like
document.createElement("article");
This won't make the borders rounded on those browsers, as they don't support 
border-radius, but at least they will honor your normal CSS settings like 
display: block, border settings in general, etc.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/