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
2010-10-28 03:12:50
IE9 supports this as well. Man I hate the `-moz-` and `-webkit-` vendor extensions.
BoltClock
2010-10-28 03:15:48
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
2010-10-28 03:19:48
@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
2010-10-28 17:03:39
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
2010-10-28 03:25:33
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
2010-10-28 03:28:09
But yeah, dosen't solve firefox. this is my biggest fear of css3! having huge code chunks for new techniques. webkit,mozilla etc.
etoxin
2010-10-28 03:32:05
@etoxin Chrome might auto-update but Safari doesn't, and neither do many of the other WebKit based browsers
robertc
2010-10-28 17:04:57
etoxin
2010-10-28 22:15:14
@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
2010-10-28 22:32:53