-
200719 Jun
Posted in CSS3 Previews, Declarations, Modules, W3C
With the release of Safari 3, there are now two browsers with (browser-specific) implementations of
border-radius; unfortunately, the two implementations are different. The problem is that there is an unresolved ambiguity in the CSS 3 working draft.The draft proposes four declarations, which describe the four corners of a block:
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Each of them should accept two values, which
define the radii of a quarter ellipse that defines the shape of the corner
; this allows for irregular curves (take a look at the diagram in the draft if you need clarification, or see this example of a box withborder-radius: 5px 20px, horribly rendered in Safari for Windows).Safari, with the prefix
-webkit-, accepts these. Mozilla, with the prefix-moz-(and differing declarations), accepts only a single value and, therefore, only regular curves.At first glance, it would appear that Mozilla are in the wrong; however, their implementation is due to the ambiguity I mentioned earlier.
This ambiguity comes about in the
border-radiusshorthand property; if you enter a double value in this you’d expect to apply the irregular curves to all four corners:border-radius: 5px 10px;
If you wanted to have four different irregular curves on the box, you’d have to provide eight values to the declaration:
border-radius: 5px 20px 10px 5px 10px 20px 20px 5px;
But what if you wanted to have two corners with one value, and two corners with a different value?
border-radius: 5px 10px 10px 20px;
The problem is that this could be confused for four corners with regular curves. In order to get around this, you’d still have to provide eight values:
border-radius: 5px 5px 10px 10px 10px 10px 20px 20px;
In fact, from the brief testing I’ve done (and I can’t find any documentation), it seems you can’t do any of that; unless I’m missing something, the shorthand declaration in Safari accepts only 1 or 2 values, to provide either regular or irregular curves which are applied to all four corners. If you want different irregular corners, you have to supply values to all four declarations:
border-top-left-radius: 5px 20px; border-top-right-radius: 10px 5px; border-bottom-right-radius: 10px 20px; border-bottom-left-radius: 20px 5px;
Mozilla avoid this by going against the spec and allowing only regular curves; so you can provide 1, 2, 3 or 4 values and it’s all perfectly clear.
This problem is down to interpretation of the draft. I personally think Mozilla’s non-standard solution is better – it’s less flexible, but easier to understand – but can’t blame the Safari team for following the standard in their implementation.
It will be interesting to see which comes out on top; in the meantime, if you want to use
border-radiusin your code the only way to get them to appear the same on both browsers is with a single value for four regular corners:-moz-border-radius: 10px; -webkit-border-radius: 10px;
You can skip to the end and leave a response.
-
Comments
-
01.
Good piece Peter :) have you, by any chance, tested how Konqueror behaves with this as well?
-
02.
I’ve read that Konqueror supports -khtml-border-radius, but can’t find any official confirmation, and can’t get it to work.
-
03.
leksó says:Comment » June 19th, 2007 at 11:44 am
Could you attach a screenshot of such a irregular curve ?
-
04.
I’ve added an example of -webkit-border-radius: 5px 20px to the post; I have to say, the rendering is horrible. I’m not sure if that’s because it’s Safari for Windows, perhaps someone with an OS X version could try?
-
05.
Maybe it’s an idea to add a character like / to the value, like in
font. So what’s before the character is the X radius, and after the character is the Y radius. If the character isn’t used, the value will be for both the X and Y radius. So now you can have something like this:border-radius: 5px/20px 10px/5px 10px/20px 20px/5px; -
06.
Good idea, Arjan; a slash or a comma, like font-family uses:
border-radius: 5px 20px, 20px, 10px 20px, 20px;
I wonder if irregular curves are the way to go, however; the current implementation in Safari is horrible, whereas regular curves come out looking really nice.
-
07.
Just to clarify, you *can* get identical rendering on WebKit and Gecko with a different radius on each corner. You just have to use the individual properties like
-webkit-border-top-left-radiusand-moz-border-radius-topleft. I’ve been using that technique to create tabs with rounded corners since I started playing with WebKit nightlies a few months ago. -
08.
And after messing around with that irregular-corner code, I think the reason it looks bad is that the smaller radius of 5px is the same width as the border. If you use a narrower border, like 1px or 2px, or if you use the 5px border with 20px and 40px for the radius, it looks fine.
-
09.
CSS3 gathering speed……
over at CSS3, Paul Gasston has been diligently track the adoption and implementation of all things CSS3. His latest post concerning rounding corners highlights the frustration……
-
10.
Diferencias entre el uso de border-radius en safari 3 y mozilla…
Un artículo acerca del diferente tratamiento que se ha dado a la propiedad border-radius en Safari 3 y Mozilla. Por lo visto viene de una mala intepretación de la especificación…
-
11.
[...] Originally posted on CSS3.info. [...]
-
12.
Geoffrey says:Comment » June 24th, 2007 at 4:10 am
Safari on Mac OS X renders exactly the same. But I do agree with Kelson, if the border size isn’t the same as the minor size, it looks much better.
-
13.
Hmm, confusing. Though, I don’t see a problem with forcing the shorthand declaration to only take 4 values (one for each corner, regular only) whilst allowing non-regular corners with the individual declarations; it wouldn’t be the first shorthand property to not allow every aspect to be specified at once.
How can you say that screenshot from Safari is horribly rendered? It’s not as good as it should be, sure, but Firefox makes border-radius look like ass… It’s much better to avoid it at the moment, if you’re targetting FF, as it looks really pixellated and awful. See my work in progress (link below) and compare the beautiful rendering in Safari to FF’s piss-poor attempt.
I say stick with images till this stuff gets sorted out.
-
14.
I think the inside of that border IS rendered horribly, but I’m sure if you matched the internal colour to the border it would look great.
Firefox 3′s corner rendering is better than FF2′s, judging by the preview I’ve been playing with.
It probably is safer to stick to images until this gets sorted out, I agree; although, it would be better if we could have multiple background images!
-
15.
eisa01 says:Comment » July 3rd, 2007 at 11:15 pm
There’s another difference between the two that you haven’t brought up. If you apply a background picture to e.g. add some depth to what you’re making, Mozilla won’t clip it, so you’ll end up with square corners. Safari does the logical thing and applies the border radius to the background image as well.
It’s acknowledged in their bug database, but if it’s time to fix it for FF3 is another matter.
-
16.
Peter: I believe you’re right on that one, the outside is better than the inside, but it’s still not perfect. I don’t test against/use FF3 at all, so that’s cool if it is indeed better.
I suppose this kind of thing is the peril of playing with pre-spec stuff, but it does rather take the p**s that in 2007 we still can’t make a box with pretty rounded corners programmatically.
Meanwhile, Safari has apparently supported multiple background images since the dawn of time (well, for ages, anyway) – although I only found out a few weeks ago.
-
17.
you *can* get identical rendering on WebKit and Gecko with a different radius on each corner. You just have to use the individual properties like -webkit-border-top-left-radius and -moz-border-radius-topleft.
Kelson – what do you do for Opera ?
-
18.
@Anjanesh: You don’t. Opera has no border-radius implementation at the moment.
-
19.
-
20.
Interesting article and certainly shows that CSS3 could become unnecessarily complicated and I’d tend to agree with Mozilla’s interpretation of the spec.
There’d also be the option of using border-image once this has been more widely adopted for any complicated irregular borders.
-
21.
[...] border-radius: Safari vs Mozilla July 17th, 2007 — mozienigma border-radius: Safari vs Mozilla [...]
-
22.
For what it’s worth, Mozilla has implemented -moz-border-radius since before it was in any css3 draft (see cvs history; note revisions 3.59 and 3.98). The first W3C draft I could find with border-radius was much later. I don’t recall if the differences between them are simply the editor’s preference or whether the working group has actually discussed which is preferable.
-
23.
I’d just like to note that thanks to this discussion the CSSWG has adopted Mozilla’s shorthand syntax. :)
-
24.
[...] our discussion of the inherent ambiguity in the border-radius declaration, it has been decided that the simpler syntax used by Mozilla will used for the shorthand; that is, [...]
-
25.
Αυτόματη προσθήκη -webkit-border-radius όπου έχετε -moz-border-radius « My little web design & development tips says:Comment » June 20th, 2008 at 8:22 am
[...] κάποιο τρόπο να τα αντικαθιστά και τα 2 με ένα query λόγω ασυμβατότητας μεταξύ των implementations του κάθε browser. Για να ξεπεραστεί αυτή η ασυμβατότητα το πρώτο [...]
-
26.
CSS 3. border-radius | webmasters, recursos webmasters, recursos gratuitos, scripts, web says:Comment » July 9th, 2008 at 11:33 pm
[...] Podeis obtener más información sobre la propiedad border-radius, y como la interpretan los navegadores que la soportan en este artículo: border-radius. Apple vs Mozilla. [...]
-
27.
-
28.
[...] in the same way that you specify multiple border thicknesses, margins or paddings. As describe by Peter Gasson on CSS3.info, in the Mozilla specification they allow only regularly rounded corners and thus you can specify a [...]
-
29.
It would also seem that Mozilla isn’t following the Border radius naming guidelines.
I cannot get
-moz-border-radius-bottom-left: 10px;
-moz-border-radius-bottom-right: 10px;to work, but I can get this
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;to work
-
30.
Lensco.be | Blog | Border-radius: a tale of two browsers says:Comment » September 6th, 2008 at 3:08 pm
[...] topic has been described in detail on the css3.info website. It boils down to the fact that although the Firefox shorthand syntax of border-radius looks [...]
-
31.
applying background-clip (border) to border-radius elements will make it more smooth.
-
32.
Spices for modern browsers: border-radius, box-shadow and text-shadow | Isaac Keyet says:Comment » December 4th, 2008 at 4:24 pm
[...] CSS3.info – “All you ever needed to know about CSS3″ [...]
-
33.
[...] as it could, sacrifycing clarity but allowing for more flexibility. To cut a long story short, Webkit supports irregular curves instead of just circle quarters on each corner, so if you try to add 2 values, the result will be [...]
-
34.
[...] have developed proprietary extensions to CSS that should stand in for border-radius until certain ambiguities in the spec can be resolved, and the property is implented according to the standard. So if you [...]
-
35.
i want to know that how i give the rounded curve in IE 6,7,8
if any body have the code so plz help me or mail me : -
36.
[...] que nunca me rendeu proventos significativos. Alm disso, essa verso usa os recursos sombra e borda do css 3, algum dia presente em todos os [...]
-
37.
[...] It’s as easy as that! You could make things a bit simpler with some shorthand CSS, but it seems that browsers haven’t agreed on that matter yet. [...]
-
38.
We’ve recently done a few sites utilising border-radius as a key feature of the design, among other things such as RGBA background values, text-shadows, etc. Images were used for some of the “major” corners so that IE users would see them as well, while we decided that they could deal without rounding on other elements.
http://www.cssmelbourne.com/ – Melbourne University Commerce Students’ Society
http://www.emrapee.com/ – Emergency Medicine Educators’ Podcast
Feedback welcome! -
39.
Ya I’ve been doing this for awhile, however it doesn’t validate properly, even as CSS3…yet. For that reason I try to leave it out of my designs because employers enjoy things that validate.
also its border-radius-bottomleft with no hypen between sides
-
40.
I Love You, border-radius. You Too, box-shadow. No, I Didn’t Forget About You, rgba Color! » HTML + CSS + JavaScript » Blog Archive says:Comment » September 24th, 2009 at 9:59 pm
[...] The property can actually take two arguments, the horizontal radius and vertical-radius. Thankfully the design didn’t call for anything like that, because apparently the implementations are different. [...]
-
41.
about
border-radius: 5px 10px;Two years later, the dust seems to be clearing, and although Safari and Firefox don’t agree now, developmental builds of WebKit follow the same shorthand rules as Mozilla. You didn’t mention the / character in the shorthand, but now it is becoming relevant.
I’ve read the CSS3 spec a bazillion (OK, maybe ten) times, and while it’s not written well, the spec says (I’m pretty sure) that in the absence of a slash all corners are circular. So to get four matching elliptical corners you would use the shorthand
border-radius:5px /10px;The shorthand allows you to specify from one to four horizontal radii, then one to four vertical radii. The two sets of values are applied with rules similar to
margin, starting at the top left and going clockwise.I made a little table that compares the spec to current browsers at my blog, if that will help anyone. I mark the parts I’m not sure about. When looking at the table, note that WebKit’s development builds follow Mozilla exactly (except they do the corner designations like the CSS3 spec.)
-
42.
The earlier mentioned -khtml-border-radius [b]does[/b] work in konqueror and I recommend it’s use in addition to [b]-moz[/b] and [b]-webkit[/b]. (simply copy over the webkit lines in your css and replace the [b]-webkit prefix[/b] with [b]-khtml[/b].
[i]However![/i] last time I tried, the windows version of Konqueror did not round the border, on linux it does work.
-
43.
I know I’m going to get crucified for this one (Lord only knows), but I would almost be willing to wager that Microsoft will be the first 100% CSS-3-compatible client for the web. Why do I say that? Well, Microsoft has proven their affinity for going above and beyond in technologies (when they get the proper inspiration to do so). Now that they’ve professed to instill a level of standards compliance, I’m sure they’re going to go to every extent and make every effort to do so. Why? They don’t want to lose their clientel to better, FREE software. They want (need) to keep their monopoly on operating systems; they won’t risk losing users to *nix systems because they come fully equipped with standards-compliant browsers. General Web surfers need not to download a special browser so they can enjoy their sites; they’d rather it just come with the OS. *nix systems have that; Windows does not. So, I don’t think that Microsoft is going to allow that to come to pass.
What a glorious day it would be, indeed, if Microsoft once again reclaimed IE’s place as the de-facto Web browser. That will make it easier for us Web guys, anyway.
-
44.
[...] The WebKit code is slightly different. For some reason i couldn’t get the webkitBorderRadius to work without doing each corner individually. For more info on the differences read this [...]
-
45.
[...] The WebKit pre is slightly different. For some reason i couldn’t get the webkitBorderRadius to work without doing each corner individually. For more info on the differences read this [...]
-
46.
I can’t get “-webkit-border-radius” working with 2 different corner sizes with Safari 4… it works fine with one value anyway…
Chrome is working well with “border-radius”
-
47.
Konqueror does support -khtml- in the non standard webkit way
-khtml-border-top-left-radius: 10px;
opera joined on now with border-radius
with their own way…Border-topleft-radius: 10px;@PaulDE
you have to have a different command for each corner, for webkit its
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px; -
48.
This is a messy situation. The W3C have declared border-radius as the way to do this and only Opera (so far as I know) supports this. Why are FF, Saf, et al not ditching their proprietory methods and going with the standard here? So far, I’m using *3* seperate methods to apply round corners? This is not progress! Well done Opera though for applying sense to CSS3 in a way none of the other browsers seem to be willing to do.
-
49.
Apologies to Google Chrome, which appears to render webkit and W3C methods! Hats off :)
-
50.
Here’s the css to get your corners working with FF, Chrome and Safari.
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;I added this to get my blog roll to look cleaner and works most browsers… have yet to try IE?
visit the site to see the working example: http://www.frylowcaribbean.com:)
- 51.
-
52.
Benu Gupta says:Comment » April 28th, 2010 at 8:08 am
title
#menu ul li {
list-style:none;
display:inline;
}
#menu ul li a {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;/* Border Shadow */
-webkit-box-shadow: 1px 2px 2px #737373;
-moz-box-shadow: 1px 2px 2px #737373;
box-shadow: 1px 2px 2px #737373;color: #ffffff;
background:#cccccc;
display: inline-block;
padding: 5px 15px;
outline: none;
text-decoration: none;
}
#menu ul li a:hover {
background: #7F7F7F;
padding: 5px 25px;
}
#menu ul li a:active {
background: rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px #737373;;
-moz-box-shadow: 1px 1px 1px #737373;;
box-shadow: 1px 1px 1px #737373;
}#menu ul li a {
/* Animation (Webkit, Gecko & Mozilla) */
-webkit-transition-duration: 0.90s;
-webkit-transition-timing-function: ease-out;
-moz-transition-duration: 0.20s;
-moz-transition-timing-function: ease-out;
}You can use this code its working prefect on safari with animation.
-
53.
this work for safari:
-webkit-border-radius: 20px 4px; -
54.
oh sorry, it was mistake. safari work with only one property in broder-radius like this:
-webkit-border-radius: 20px; -
55.
Just a note to say that Chrome 5 and Safari 5 both support the W3C recommendation _without_ the -webkit- prefix. There are still a few holes (no percentages for lengths, for instance), but for the basic use you’re covered.
-
56.
Thanks for sharing this.. I really wonder why on earth it would be so hard to agree on one syntax??
-
57.
Alex says:Comment » September 16th, 2010 at 12:37 pm
Firefox now supports the new syntax and it’s dropped the prefix requirement (still implements parsing for it though for lazy authors who never did it properly)
-
58.
Awesome post ,All the given information is so informative for us ,I really appreciated from your information.
I will bookmark it,and sharing it with my friends.Thanks
-
59.
Border-radius: create rounded corners with CSS! | Jarimong.com says:Comment » October 20th, 2010 at 5:44 pm
[...] from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
60.
I am a newbie to website coding, so this has been a great helps, thanks!
-
61.
Border-radius: create rounded corners with CSS! by Freedom is Limitless says:Comment » December 4th, 2010 at 6:51 pm
[...] from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
62.
Marta says:Comment » December 17th, 2010 at 9:04 pm
You just saved my life, seriously. I was about to kill someone with this non-rounded corners in %^&* firefox.
-
63.
abdel says:Comment » March 30th, 2011 at 3:33 pm
merci pour c tuto je vous souhaite une bonne continuation. mais c type de border ne pas compatible avec IE alors svp c koi la solution
-
64.
Web Designers Journal » Border-radius: create rounded corners with CSS! says:Comment » June 17th, 2011 at 3:10 pm
[...] from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
65.
This is working correctly now, although it rendered differently in 3.68 and firefox 5…it appears good to go now.
-
66.
It seems it does not work with IE8… Perhaps, one day someone intelligent will do something in order to arrange all that stupid differences… till then keep on trying! :P
-
67.
I think mozilla is much better than Safari especially if you have low speed processor. But now i am using Google Chrome as My Browser.
-
68.
Border-radius: create rounded corners with CSS! « Mishil Patel says:Comment » November 28th, 2011 at 8:24 am
[...] from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
69.
its not working ie8,9 there is any solution for it
-
70.
Thank you for posting this :). It helped a lot.
I have to sound off on this though, the browser wars which is never ending is making our jobs a mess. Do not be shocked if IE comes out with its own syntax ie-curve:100billion;
I would not be shocked if there will come a day when we will be forced to create style sheets dedicated to each individual browser once CSS3 picks up speed.
-
71.
I dream of the day that every browser follows the same web standard and we won’t have to work on work arounds for misbehaving browsers. (I’m looking at you IE!)
-
72.
[...] onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
73.
border-radius: Safari vs Mozilla – CSS3 . Info » Web Design says:Comment » March 14th, 2012 at 5:05 am
[...] border-radius: Safari vs Mozilla – CSS3 . Info [...]
-
74.
Superb blog! Do you have any suggestions for aspiring writers? I’m hoping to start my own website soon but I’m a little lost on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m completely overwhelmed .. Any recommendations? Thanks!
-
75.
-
76.
Border-radius: create rounded corners with CSS! | OWLLAB says:Comment » August 30th, 2012 at 1:52 am
[...] from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
77.
I’m really loving the theme/design of your web site. Do you ever run into any browser compatibility problems? A handful of my blog audience have complained about my blog not working correctly in Explorer but looks great in Safari. Do you have any advice to help fix this problem?
-
78.
-
79.
Create Rounded Corners « Dale Arthur | Graphic & Web Designer says:Comment » May 10th, 2013 at 8:31 pm
[...] from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle [...]
-
01.
TAG CLOUD
acid3
advanced layout
advanced layout module
Animations
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
flexible box layout
fonts
generated content
grid positioning
HSLA
HTML5
ie6
jina bolton
jquery
media player
Multicolumn Layout
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows
Hosting by:
Leave a Comment