Border Radius

Yesterday I was up in Seattle attending An Event Apart‘s first one-day workshop, A Day Apart. During the second half of the day Dan Cederholm taught on CSS3’s border-radius. Apparently, once while trying to create a button out of an anchor text with half-circle rounded ends (think of a pill) he had run into a problem where Safari would revert back to square corners if the radius was set too high. I thought that was curious since I’ve not experienced that, so I’ve set up a test scenario to see if we could recreate it. I’d like you to view it in your browser and leave comments on how it displays for you.

A couple weeks ago I got very familiar with border-radius in Firefox when I created an all HTML & CSS burger (best viewed in Firefox, inspired by an illustration by Anthony Dimitre). I was pretty sure Safari wouldn’t break if a given radius value of the border corner was greater than half of the element’s height (if two corners on the same side have radii exactly half of the elements height, then they will form a perfect semi-circle).

Here’s an image of what we’re going for. This is what your browser should show you:

And here it is in HTML / CSS for your browser to render:

The important CSS I’m using to do this is:

-moz-border-radius: 1em;
-webkit-border-radius: 1em;

You should see a pill-like button with complete semi-circle ends. Not four unique rounded or squared corners.

Originally I thought you could just set the radius to some large value that no one would ever zoom their text past (thereby making the element have a larger height and getting rounded corners, not rounded ends). However, while at AEA I tweeted back and forth with @bend_boy and @sgalineau and discovered that using em units makes much more sense, and works better! (note: percentages should work, but don’t)

When I talked with Dan later in the day I mentioned that I hadn’t seen the problem he described. He suggested it may be a difference in Webkit between Windows and Mac OS. So what I wondering is do both buttons display the same for you (IE excluded, of course)? If not, what OS and browser are you running? Leave your results in the comments. Thank you!

Update (minutes after posting):
I decided to see how people saw it if I did use a large pixel value instead of ems. What do you see here?

The CSS:

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

Update 10/April:
Eric asked to see what really large values were like, so that’s what I’ve put below. Also, I’ve gone ahead and added in code for other browsers and those without gradient and border radius support (even though this was originally just to see how Safari handled it).

The CSS:

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

Note: without some form of browser functionality detection I can’t get the rollover background color to set right because of other global site styles. It’s not worth it for me to work all of that out for a post like this ;-)