views:

38

answers:

2

i understand how to create CSS3 round corners in FF & webkit however how would one create them in opera purely with CSS3.

+3  A: 

Just use

border-radius: 5px; 

/* or if you need to specify individual corners */
border-radius: 1px 2px 3px 4px;
Marko
IE9 supports this as well. Man I hate the `-moz-` and `-webkit-` vendor extensions.
BoltClock
Tell me about it @BoltClock! - they annoy me as well especially because only `some` properties need the prefix. Eventually, the vendor-specific prefixes will dissapear and they'll just follow the spec. And there will be 1000's of stylesheets with redundant attributes. Booo
Marko
@Marko eventually the spec will be agreed, then all the browsers will be able to follow it, in the meantime the vendor extensions are for your own good.
robertc
A: 

Cheers, Turns out that Webkit(Chrome) beta now uses

border-radius:5px;

as well no need to use

-webkit-border-radius:5px;

neat. Mozilla will soon support this is guess.

etoxin
If a product is in beta, how does that constitute "no need to use". Current (and older) Chrome browsers will `FAIL`, leaving you with an ugly UI.
Marko
Chrome Auto Updates. Genius!
etoxin
But yeah, dosen't solve firefox. this is my biggest fear of css3! having huge code chunks for new techniques. webkit,mozilla etc.
etoxin
@etoxin Chrome might auto-update but Safari doesn't, and neither do many of the other WebKit based browsers
robertc
etoxin
@etoxin because the standard isn't yet finalised so any current implementation is, by definition, non-standard. It's only really become an issue because CSS rounded corners i such a popular feature, even while still in 'beta'. There are quite a number of edge cases where the different browsers have markedly different results, try setting one or two border-widths to zero an an element with border-radius applied and compare the results in a few different browsers. Here's some examples: http://www.boogdesign.com/examples/css3/borders.html
robertc