Why do browsers create vendor prefixes for CSS properties?

Question

Maybe it's an obvious answer, but

Why on earth would browsers decide to create their own vendor prefixes for border-radius and the like?

I mean: Why do I have to type:

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

Is it because each platform thought "We're cool, we'll come up with a better way to do rounded corners?" It seems totally and inexplicably redundant to type three lines for one.

Donica

"Is it because each platform thought 'We're cool, we'll come up with a better way to do rounded corners?'" Precisely. – Godfree

Answer 1

It's because the features were implemented by vendors before the specification reached its final release stage.

The vendor prefixes ensure that there are no clashes with changing functionality etc.

Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations.

Let’s say a W3C working group is discussing a grid declaration (which, incidentally, wouldn’t be such a bad idea). Let’s furthermore say that some people create a draft specification, but others disagree with some of the details. As we know, this process may take ages.

Let’s furthermore say that Microsoft as an experiment decides to implement the proposed grid. At this point in time, Microsoft cannot be certain that the specification will not change. Therefore, instead of adding grid to its CSS, it adds -ms-grid.

The vendor prefix kind of says “this is the Microsoft interpretation of an ongoing proposal.” Thus, if the final definition of grid is different, Microsoft can add a new CSS property grid without breaking pages that depend on -ms-grid

Source.

Worship

Agreed. New ideas take some time to become ratified in the internet world, so you can end up with all sorts of interesting attributes. Some ideas are never ratified, while others are only implemented by a handful of vendors. – Tupungato

Also like to add that while some CSS specifications are by now concluded, we still use them for older browser supports. – Mono

Answer 2

As this post old, it's important to mention that now most vendors do understand that these prefix are just creating unnecessary duplicate code and the situation where you need to specify 3 different CSS rules to get one effect working in all browser is an unwanted one.

As mentioned in this glossary about Mozilla's view on vendor prefixes on May 3, 2016,

Browser vendors are now trying to get rid of vendor prefix for experimental features. They noticed that Web developers were using them on production Web sites, polluting the global space, and making it more difficult for underdogs to perform well.

For example, just a few years ago, to set a rounded corner on a box you had to write:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

But now that browsers have come to fully support this feature, you really only need the standardized version:

border-radius: 10px 5px;

Gardner

The need for vendor prefixes hasn't really changed as the W3C still isn't moving any faster than it ever did for publishing CR specs. Aside from that, your example doesn't really illustrate anything relevant to the claim made in the quote: the fact that you only need to write the standard property instead of it + prefixed ones for a given property today is not brought about by browser vendors 'no longer using the prefixes', but rather by the W3C standardizing the property. In pretty much every case, if a browser supports a prefix, it also has the standard property already. – Advisedly