This is a quick post concerning the border-radius CSS3 property, and the syntax behind it. After coming across this site earlier today via Twitter I remembered my initial frustrations with lack of uniformity across user agents and their required syntax in order to create round corners; Firefox requiring a different format to Webkit and the CSS3 spec was pretty annoying.
However, it’s not all that bad. As border-radius.com would have you believe, the syntax to create an element with top–left and bottom–right corners with a 50px round, and top–right and bottom–left corners with 10px rounds would be:
-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 50px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius: 50px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;Wrong, you can actually use the border-radius shorthand to nail this in three lines:
-moz-border-radius:50px 10px 50px 10px;
-webkit-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;The sytanx follows the following rule: border-radius:top–left top–right bottom–right bottom–left;. I’ve tested this in Firefox (-moz-border-radius), Webkit (-webkit-border-radius) and Opera (border-radius) and it works just fine.
Addendum
You’d think Webkit would just be Webkit, right? Wrong. This works in Chrome but not Safari. I’ve had reports that Safari 4.0.4 (I guess it’s not found it, get it? Oh never mind.) doesn’t work. Useful…
Still, this version will work, and is still considerably shorter:
-webkit-border-radius: 50px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius:50px 10px 50px 10px;
border-radius:50px 10px 50px 10px;+
Tuesday, March 2nd, 2010 in Web Development.
Alberto Calvo said on 2 March, 2010 at 11:21 am
Chrome uses a newer version of Webkit engine. I bet your latest problem is because of that.
I really hope Apple updates the engine of Safari soon, as the Webkit team added a lot of CSS goodies and Inspector functionality that are great. Still waiting, though…
Jacob Bijani said on 2 March, 2010 at 4:59 pm
My attempt was to make it generate the most concise CSS it could. My impression was actually that the shorthand syntax was rather useless unless you were only setting one value. Each corner can take two values, which allows you to make radii with different curves. I read around and it seemed the safest bet was to not use shorthand syntax, because some implementations of the spec could treat a shorthand with 4 values as just two values for two corners.
Anyway, obviously you can write some code that would be a little better than what the tool makes. Thats not the point. You still are left with 4 lines of code that no one can remember. And anyway, the most likely use cases by far are setting them all to the same value or setting some values and leaving others as zero.
Laz75 said on 10 March, 2010 at 10:19 am
I also just noticed that (dev) Chrome apparently honors the simple “border-radius” (no “-webkit”)… that’s why it works with the short-hand declaration, probabily.
I didn’t know that.
AgustÃn Amenabar said on 18 March, 2010 at 5:47 pm
Indeed Plain Chrome 4.1.249.x honors border-radius, no need for -webkit-
let’s hope Safari updates accordingly in the short term.
Levi Freeman said on 8 May, 2010 at 2:01 am
Internet explorer 9 recognises border-radius, hopefully all browsers will begin to use this…Oh and its finally happening, IE will have css3! in terms of border radius, it kind of does it better than safari, firefox or chrome!
Laz75 said on 28 July, 2010 at 3:30 pm
Just a short note to say that Safari 5 supports the shorthand rule. Or “rules” actually, for it supports the standard one too now, like Chrome.
Samuel Turner said on 29 August, 2010 at 5:08 pm
Seems this is now sorted with Safari 5, must have updated to the new webkit engine. :)