dcsimg

What is your dream?

What do you do?

That's right: You

This is about you, your goals, your passions.

Figure that out and we'll help you take it to the world, shouting it from the rooftops. We create the websites that enable you to achieve this dream.

Border Radius

Thursday, April 08, 2010 09:21 PM

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:
screenshot of a button

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

Awesome button!

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?

Awesome button!

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).

Awesome button!

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 ;-)

Comments

Eric Meyer said

In Camino 2, I see no background at all, just the text.  In Safari 4/OS X, I see the button just the same.  I wonder if it would be any different at, say, 3000px or 30000px.

On 04/09 at 12:51 PM

Bryan said

All buttons look the same on Mac in Safari 4.0.5, Firefox 3.6.3 and Chrome 5.0.342.7 beta.

No background for either button in Opera 10.10 or Camino 1.5. Also, text color in Camino 1.5 was lighter green.

On 04/09 at 06:03 PM

Eric Meyer said

Okay, weird, now I see the rounded corners in both the 300px and 3000px versions in Camino 2.0.2/OS X 10.5.8.  I wonder if I happened to have the mouse pointer over the button the last time, since hovering in Camino makes the background go away.  (I also don’t see the gradient background.)

On 04/12 at 12:45 AM

Philip said

@Eric, I added in the standard, non-vendor prefixed rules. That’s why Camino is picking them up. However, on :hover my standard site CSS adds a background color to links. I had to overwrite those and then add in the gradient, which Camino isn’t picking up. Without using something like Modernizr I can’t work around that. For this post I didn’t see the point in making the effort ;-) I’m planning on adding Modernizr site-wide soon.

On 04/12 at 06:49 PM

Commenting is not available in this channel entry.

Sorry, for spam reasons I've had to remove the contact form. Why don't you hit me up on Twitter instead?