Rounded corners, is this Mozilla specific?

Question

I was looking at how some site implemented rounded corners, and the CSS had these odd tags that I've never really seen before.

-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;

I googled it, and they seem to be Firefox specific tags?

Update

The site I was looking at was twitter, it's wierd how a site like that would alienate their IE users.

Answer 1

I suggest browsing the site from IE or some other browser. I bet you get different markup.

Answer 2

The -moz-* properties are Gecko-only (Firefox, Mozilla, Camino), the -webkit-* properties are WebKit-only (Chrome, Safari, Epiphany). Vendor-specific prefixes are common for implementing CSS capabilities that have not yet been standardized by the W3C.

---

Twitter's not "alienating" their IE users. There's simply adding style for browsers that support it.

Answer 3

The -moz ones are firefox specific, the -webkit ones are for safari, chrome and a few other browsers that use that rendering engine.

These are early implementations of attributes that are defined in CSS3 so they will be coming in the future without the prefixes.

Answer 4

Those are for Firefox (the ones labeled -moz-border) and for Safari (-webkit-border).

Answer 5

Yes, anything with a -moz in front of it will only work in Firefox.

The -webkit ones will only work in webkit-based browsers like Safari, Chrome or Webkit.

See here for many ways to make rounded corners with just normal css tags.

Edit: I don't think that not having rounded corners is exactly alienating, just a slightly different look for IE.

Complete lists of all -moz and -webkit css styles if anyone wants to know

Answer 6

Have you seen this? http://openrico.org/