Cross-Browser CSS3 Rule

I have a stupid question,

If I want to add round corner for an element in browsers which support some stuff of CSS3, I have to repeat style several time for each browser, because it is different ?

For ex :

         -moz-bor开发者_运维百科der-radius: 12px; /* FF1+ */
         -webkit-border-radius: 12px; /* Saf3+, Chrome */
          border-radius: 12px; /* Opera 10.5, IE 9 */

It means, that I have to add 3 styles for this radius border, doesn't it ?

Disclaimer: hopefully you've found this a year after my writing it and it's now completely wrong, and we have a standard, yay!

For now, yes this is correct...you need all the rules.

Unfortunately, this is a result of a spec being implemented while in flux, but that's how the web has evolved this far, sometimes the spec drives development, more often with the web, browsers do neat stuff and it's a spec later.

Hopefully once the spec is finalized, we'll have only border-radius: 12px;. Since Firefox and Chrome push automatic updates (not sure about Safari?) this is much more likely to happen, as opposed to IE users who may never upgrade.

Compass provides Sass mixins for many CSS3 properties meaning you can write something like:

.foo {
    @include border-radius(4px, 4px);
}

which will generate the following CSS:

.foo {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -o-border-radius: 4px / 4px;
    -ms-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px;
}

This is great because you have to write less code, but it provides rules that target a wide range of browsers.

border-radius is the official CSS3 rule for adding a border radius. However, like Nick points out, this is not supported in all browsers so you need to add the propriety versions to get it to work in as many browsers as possible.

Try this: http://css3please.com/

You only need border-radius for browsers that actually support that part of CSS 3. The other properties are for browsers that have experimental implementations. Newer version of those browsers will replace the vendor prefixed experimental properties with the standard properties when their implementation and the specification stabilise.