Comments on: CSS Rounded Corners Revisited

By: Dave Woods - Freelance Web Designer UK » CSS3: Rounded CSS Corners

Dave Woods - Freelance Web Designer UK » CSS3: Rounded CSS Corners — Fri, 30 Oct 2009 08:58:26 +0000

[...] until recently I’ve been using my Rounded corners with one image method which does cut down on the amount of HTML and images required but when dealing with a lot of [...]

By: Dave

Dave — Tue, 27 Oct 2009 16:34:56 +0000

Hi Jay,

Could you put an example online somewhere or email me a copy or all the files and I’ll take a quick look for you.

By: Jay

Jay — Mon, 26 Oct 2009 15:40:30 +0000

Hi Dave
I keep getting just white boxes in each corner where the circle .gif should be. I am using the correct references to my .gif folder. As if I select another .gif image in same storage folder, for instance, it shows in the position where the circle should appear. Any clues?

By: brad

brad — Sat, 27 Jun 2009 10:12:08 +0000

great job , I was looking for this a long time ago , thanks

By: Scott

Scott — Sat, 27 Jun 2009 05:07:37 +0000

Er, that would be half the radius or so that you’d want to move the corners in to get rid of the padding and leave the background of the corners transparent.

By: Scott

Scott — Sat, 27 Jun 2009 04:57:08 +0000

Actually, come to think of it, there is a way to make round corners over a gradient. It’s just more complicated and would involve creating 9 boxes.

Think of a tic-tac-toe board (noughts and crosses across the pond). Your actual content would go in the middle square. The strategic corner boxes would contain rounded corner images. They could be transparent since they’re not covering up the interior of a colored box. The middle of each side row could be filled with a solid color for a colored box.

This might give you too much padding around the edges, but it would work against a gradient background since you’re not matching the background color.

To get less padding you could do some nasty absolute positioning and move the rounded corner and side boxes in by just under the length of the radius of the circle (so the square corners of the actual content box don’t stick out into the background space you want to keep clear).

It sounds like a nice fun problem. I bet I could write some code (javascript or server-side scripting language) that would do it given a circular image and told the radius or diameter of the circle.

By: Scott

Scott — Sat, 27 Jun 2009 04:36:22 +0000

This is a nice way to do things. This seems a nicer approach than making the 4 images, though you really only need to make one image and then rotate it and save it 3 more times to get your four images. Still, ever bit of work saved helps and it is a lot less cluttery in your images folder.

I’m assuming you could make rounded borders with one image? Or maybe it would take two to be sure the colors of the borders matched exactly since any one pixel of anti-aliased corner border might be a bit different in color than a straight line for the border would be.

As far as Lance’s question about overlaying a gradient. It doesn’t seem easy to do, since you’re just really covering up the square corners of the box with the round corners of your image. It doesn’t seem easy to cover up these box corners since you dont know the exact colors of a background gradient, and it you leave the corners transparent then the original square box shows through.

By: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

Wed, 04 Mar 2009 20:31:35 +0000

[...] CSS Rounded Corners [...]

By: Lance

Lance — Fri, 07 Nov 2008 17:02:35 +0000

Hi Dave,

Great tutorial. Do you know of anyway to be able to make this overlay a gradient, instead of a solid color background?

By: Chris

Chris — Fri, 31 Oct 2008 16:42:01 +0000

Dave,
I have been looking at articles trying to find the best (clean) way to have rounded corner div’s in a hybrid layout that is using em’s for the sidebar div and percentage for the main content.
Your tutorial looks like an awesome way to achieve this, unfortunately, I am not a web guru and I am running into problems getting it right. If you are still monitoring this thread…any advice would be greatly appreciated.
Thx for the great tut!