Why are so many different properties required to use a CSS3 property across browsers?

Question

Why when I want to use border-radius do i need 3 seperate browsers?

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Why can't they all just understand border-radius ?

Answer 1

Because each browser or to be specific their rendering engines have different implementations for that.

Here is the breakdown of that:

 border-radius: 10px;          /* standard CSS3 */
-moz-border-radius: 10px;     /* For Mozilla */
-webkit-border-radius: 10px;  /* For Safari/Chrome */

Note that not all CSS3 properties are different across browsers but yes we aspire them all to be same and standard-compliant stuff for us. IE is far from that :(

Answer 2

The CSS3 spec is still not finalized. Browser vendors usually keep it as (vendor)-* until they think the spec is stable enough.

Chrome, for instance, has started migrating to the standard and removed the webkit- extensions for various properties.