Curvy Corners Border radius explanation

Buon giorno from 2 degrees pitch black wetherby UK :slight_smile:

I have just added curved corners to my tutorial website http://tutorial.davidclick.com/curvy.html but i would like please an explanation to why I need to reference moz & web kit border radius as in:

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

So my question is please why does webkit & moz really do or put another way why does just border-radius do the job?

Grazie tanto
David

If you’re just using basic border-radius with a single measurement then they all work the same way. But at the time they were implemented in the browsers, the draft spec was very rough and ready and there were some details that were implemented differently in different browsers. There’s a lot more details at http://www.the-art-of-web.com/css/border-radius/, but it comes down to specifying multiple radii and whether that gives you different circular arcs on different corners or the same elliptical arc on all corners.

When something in CSS is still experimental and not an official CSS property yet, browser makers (“vendors”) are asked to use these “vendor prefixes” for testing purposes. However, a few CSS3 properties are so well established now that the vendor prefixes are not needed, and that’s the case for border-radius. (More on that here: http://generatedcontent.org/post/37949105556/updateyourcss3)

All you need to use is border-radius.

Thanks again :slight_smile: