Wednesday, April 25th, 2007

Rounded and Shaded Corners

Category: UI

Jesse Kuhnert was looking at the Google Rounded Corners and decided to implement his own, using the same URL structure.

You can see his demo at work, and you can add corners by doing this:

  1. .detail {
  2.   display:block;
  3.   margin-top:2em;
  4.   padding: 0 1.1em 2em;
  5.   background: url("rounded?bc=white&w=600&h=40&shadow=true&ah=10&aw=10&sw=4&o=.5") left bottom no-repeat;
  6. }

More Rounded Corners

Posted by Dion Almaer at 5:02 am

3.8 rating from 38 votes


Comments feed TrackBack URI

My eyes, my eyes – Why do i keep seeing black dots that don’t exist!!

Comment by Dave Searle — April 25, 2007

Is there no code to look at?
…or am I missing something?

Comment by Christian Storgaard — April 25, 2007

This particular technique involves generating the images on the server – so the code is there it’s just not in js. Anyone can view it to their hearts content though –

Comment by Jesse Kuhnert — April 25, 2007

Nope, no code. Seems like a pretty useless posting. After all, the OP is the first to mention that Google did it first.

Whoop-de-do! A dude named Jesse knows how to copy a good idea! Maybe some code would make this post a little more interesting?

Comment by Ian — April 25, 2007

Has anyone devised a solution that will create transparent images? Primarily, I am concerned with placing a rounded corner on an element that has a background image, as opposed to a solid background color. However, due to the way that IE handles (or does not handle) transparency, I have yet to find a solution that is truly viable.

Comment by Matt625 — April 25, 2007

just use CSS3:

sorry IE is ugly anyway:(

Comment by Lukasz R — April 25, 2007

This seems like it may be a bit fragile, dependent on the users’ cache settings. If the browser is set to rebuild the page every time, that means the image function on the server is invoked every time as well. This might not be scalable on a large website. Having said that it is a nice idea since it works with no javascript and uses plain old CSS in the front-end.

Comment by Mike Ritchie — April 25, 2007

Mike: The image generation logic caches the rendered images as well as setting / responding appropriately to the common browser cache header settings – so I think it should scale fine for most usages. It still has lots of things that need doing (I wimped out and used png at the last minute for instance – not very friendly for ie and also not necessary since the background color is an optional parameter) but overall I think google had a great idea.

Comment by Jesse Kuhnert — April 25, 2007

I’ll just keep using CSS3 for my boarders. They look great in Webkit, OK in Firefox, and who cares about IE.

Comment by Phill Kenoyer — April 25, 2007

Doesnt work in IE6, would have been great if it did though.

Comment by Evin Callahan — April 25, 2007

Phill: Sure, no one is forcing you to use it. ;) That being said, I’m not impressed with the built in rounding provided by most of the browsers. It’s always too pixelated compared to the real thing.

It’s also probably not a good idea to ignore IE, unless of course you aren’t doing anything public facing.

Comment by Jesse Kuhnert — April 25, 2007

Evan: Yeah I’m sure that’s a png thing. I’ll be adding support for regular gifs once I’ve had time to go back and turn the alpha stuff off. Ie6 should work fine then.

Comment by Jesse Kuhnert — April 25, 2007

Leave a comment

You must be logged in to post a comment.