Thursday, December 14th, 2006

Googles Rounded Corner Generator

Category: Google, UI

Zach has picked up on google’s own corner generator.

Google probably doesn’t want this to be a corner service, but for now you can create your own google-esque corners with URLs such as:

The parameter list:

  • c – the color, as either a name or a CSS-style hex color spec (RGB or RRGGBB) sans #. The color names are taken from the CSS2 spec and are as follows: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow (thanks, anonymous commenter)
  • bc – the background color, same acceptable input as c. One twist: if you leave out the bc parameter entirely, the background is transparent.
  • h – height in pixels. If you leave it out, uses a default of 8.
  • w – width in pixels. If you leave it out, uses a default of 8.
  • a – which corner to generate; tl is top left, tr is top right, bl is bottom left, br is bottom right

Google Rounded Corners

Posted by Dion Almaer at 11:36 am

4 rating from 117 votes


Comments feed TrackBack URI


Comment by mdm-adph — December 14, 2006

apparently, they’re PNG’s, too.

Comment by mdm-adph — December 14, 2006

my bad — of course they are. i’ll stop talking now.

Comment by mdm-adph — December 14, 2006

that’s quite interesting, but makes alot of sense as far as expediting development.

Comment by Shawn — December 14, 2006

That’s so cool!

Comment by Lindsey Simon — December 14, 2006

While this could be helpful in deploying web applications quickly, I strongly urge developers that are considering utilizing this option look into the wealth of options that are available prior to implementing this solution. What happens the day that Google decides to remove this functionality?

Comment by SAMW — December 14, 2006

It would be interesting to see the code behind this.

Comment by shorty114 — December 14, 2006

How to set all corners rounded?

Comment by Colbert Stevev — December 14, 2006

What’s with the fascination in rounded corners?

Comment by Dave b — December 14, 2006

You can generate corners up to 15000x15000px in size. I do not think that is what google planned to do with their cpu power.

Comment by Sharrow — December 15, 2006

Dave b,
Rounded corners are the new black.

Comment by Scott — December 15, 2006

ah, i checked the headers out, it always sends a 200 not even a 304 so images dont get cached… and hence extra traffic and rendering

Comment by mihd — December 15, 2006

@DRX Love the Whale.

Comment by Mark Gremmen — December 16, 2006

C’on, it’s so easy to build this thing up! We are using ImageMagick for “graphic web services” (non-XML) like resizing other webs’ images, generating TrueType text images for titles (of course, with their CSS-hidden accesibility-minded version), captchas generation, graphic buttons (with text) and things like that… with cache control, and we’re doing it on Windows (not Linux!)

I recommend you to look again at what you can do with ImageMagick. It’s a perl!

Comment by Bernardo Riveira — December 18, 2006

(by the way, what I meant with “not linux!” was that it CAN be done in Windows :) ; we use ImageMagick on windows because of better rendering of TrueType fonts…

Comment by Bernardo Riveira — December 18, 2006

For those asking how to go about implementing something like this, here’s the way I do similar, simple things:
.jsp outputs SVG
SVGTranscoderFilter (based on Batik) transcodes SVG to PNG, JPEG, etc.

Alternatively for more complex things:
.jsp or other source outputs XML document
XSLTFilter translates XML to SVG
SVGTranscoderFilter transcodes to PNG, JPEG, etc.

Comment by Jonathan Leech — December 18, 2006

Why not complete your picture with a Google background:
BODY {background-image: url(}

Comment by Hans Peter — December 19, 2006

I know rounded corners are SO web 2.0 and all, but I don’t see the insane fascination with them. It’s a fad. Once the fad is past you’ll have to re-do your site because it’s so dated.

Comment by DigitaLink — December 24, 2006

Thanks, Thanks, Thanks

Comment by Anne — January 21, 2007

Dion — Thanks for the post. Great stuff!

drx — Absolutely love the whale!

To all of those who have posted something along the lines of “what’s with the fascination with rounded corners?”

Well, you either like them or you don’t. A fad? That’s what one of my old bosses said about grey dialog box backgrounds and chiseled dividers back in 1993.

Comment by WebGyver — February 10, 2007

Need a striped background or header for your Web2.0 app? Try out this:

Comment by diagonal stripes background tiles — March 24, 2007

it’s probably php. with the gd library, it’s a cinch to do rounded corners…i think ill make myself one

Comment by Jabapyth — April 25, 2007

…that whale is hilarious. nice work, drx!!! haha

Comment by Mark Holton — April 25, 2007

See at the top box at the site. Rounded box without image.

Comment by shaon — September 4, 2007

I want to get google’s rounded corners sources code.
Help me.

Comment by dolphin — September 11, 2007

Leave a comment

You must be logged in to post a comment.