Comments on: Reusable Transparent CSS Rounded Corners

By: moonkat

moonkat — Tue, 12 Jul 2011 15:33:06 +0000

Realized when implementing this, for the corners to render properly in Internet Explorer 6:

1. “.box,” or whatever the containing element is, HAS to have height and width. Otherwise IE6 doesn’t recognize the relative positioning on the containing element, and the corners go all over the place.
2. “.corner” has to have “font-size: 0; line-height: 0;.” IE6 puts extra spacing in the corners so that more of the background circle sprite shows than should.

By: moonkat

moonkat — Fri, 08 Jul 2011 22:36:37 +0000

Put a border on your “cutout” circle, adjust the corner div positionings a bit, put a matching border on your box div, and voilà! You have a rounded corner box with a border!

Out of all the solutions I’ve examined, although this still requires at least one image and 4 extra divs, it’s STILL the most elegant solution I’ve found! The image solutions are rigid, because I need to be able to change the color of a box according to client branding at the drop of a hat; the javascript ones are inelegant because of the tons of messy markup they generate.

Thanks for this!

By: Nicola Giosmin

Nicola Giosmin — Sun, 27 Mar 2011 11:41:31 +0000

Excellent tutorial! Many thanks.

By: RobD

RobD — Fri, 03 Dec 2010 13:53:17 +0000

Kyle, thanks… I see in your CSS where you’re doing that now and that makes perfect sense
width: 10px;
height: 10px;

Those two lines on the background image tag are clipping it in a 10×10 pixel. Since you’re using positioning to place the image, it’s only showing the 10×10 section you want.

Very nice, and very elegant! Thanks for the explanation :)

By: Kyle

Kyle — Thu, 02 Dec 2010 20:44:46 +0000

Hi, Rob – great question about the corner images. Essentially what I’m doing in the examples above is “clipping” each corner image so that only 1/4th of the entire image is shown. Even though the image appears to be a single circle, it’s actually four separate images that are joined into a single image “sprite.”

For example, if my corners image is a 20×20 circle, I make my corners 10×10. By shifting around the position of the background image, only one section of the image is shown at any given time.

Hope this helps clear things up for you. Best of luck!

By: RobD

RobD — Thu, 02 Dec 2010 16:36:43 +0000

OK, I’m going to admit to a bit of ignorance here and I’m hoping you can explain.. I understand exactly how you’re positioning your image to create the round corners…what I don’t understand is how the other corners don’t show.

Example
If I position the image in the upper left, I have 3 other portions of the sprite that aren’t transparent (the other 3 corners).. If I have a background color in my box of red, and my sprite has a background of white (as your’s does), why do I not see the 3 other “white” corners. My guess is that the image, because it’s in teh background, is overwritten by the rest of the box (kinda of a “z” order thing).

Can you help clarify for me?

By: Kyle

Kyle — Fri, 29 Oct 2010 13:07:25 +0000

Hi, Lucio. In that case, I will generally force the content to be fixed width, and use a header/background/footer image sprite that contains the corners and background for my box content. It’s less flexible, but displays well on top of images, gradients, and any other content.

By: Lucio

Lucio — Fri, 29 Oct 2010 08:00:17 +0000

Hi Kyle,

What if the background image is a gradient and the content of the div is overflowing (overflow:auto)? The look of the corner image breaks because of the behavior inside and around the div changes.

Any resolution about this? Thanks.

By: Kyle

Kyle — Sun, 12 Sep 2010 23:24:09 +0000

Oops! Sorry about the problems on this post — the Photoshop templates are back, and the corners now display correctly in my examples!

By: holodoc

holodoc — Thu, 02 Sep 2010 20:42:58 +0000

Hey Kyle, the examples on this page are not working because you are missing the “/wp-content/uploads/2009/09/cornerWhite.png” file.