google's own cornershop

Because of cornershop, I've become a rounded-corner fanatic. Whenever I see pretty rounded corners used in webpage design, I rightclick and view them, or check 'em out in detail in xmag. I want to know if they're javascript, GIFs, PNGs. I want to see how nice the antialiasing is. I want to see if someone made them by hand or if they look auto generated.

That should explain how I stumbled across Google's rounded corner generator. I was looking at the Google Groups beta interface, and I had to see how they made their pretty rounded corners. Lo and behold, the URLs look like this:

http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr

The URL above produces this:

A little small and boring, sure, but a bit of URL surgery later, and I was getting stuff like this:

Parameters:

  • 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

I love it. I didn't immediately find an upper limit on height & width.

It doesn't seem like the hostname matters much; I used www.google.com, groups.google.com, and finance.google.com and they all worked.

I was pleased to see these are almost pixel-for-pixel identical with corners produced by cornershop:

One difference: the Google graphics aren't symmetrical! If you rotate and flip them, the colors don't match up exactly. I'm guessing that's because the graphics may have independent height and width.

Reminds me of Amazon's image generation on a smaller scale.

Tags: ,

Comments

(Anonymous)

Awesome

found this on digg.
I can't imagine what google would say if people start linking to images like this: http://groups-beta.google.com/groups/roundedcorners?c=555555&bc=green&w=9999&h=9999&a=tl
They once blocked my college from accessing the main google page, so who knows :)
awesome stuff :)

(Anonymous)

Re: Awesome

Might be a good idea to generate them into the browser and then just right click and save the file locally. then you don't have to worry about google blocking access.

(Anonymous)

Other Colors

Found colors:
navy, aqua, silver, maroon, lime

Failed colors:
crimson, scarlet, vermillion, gold, golden, copper, steel, tan, beige, vanilla, salmon, azure, cream, pumpkin, brown, violet, eggplant, turquoise, tangerine, seagreen, rust, lavender, khaki, jade, magenta, hotpink, hot%20pink, fuchsia, and chartreuse

Accurate as of December 13, 2006. They may implement these colors in the future...

(Anonymous)

Re: Other Colors

41232f

(Anonymous)

so....

so how exactly to put this to use ?

how about a quick demo writeup ?

(Anonymous)

Colors

It looks like all CSS 2 color names are support. I don't notice any additional CSS3/X11 color names supported.

Re: Colors

Good catch!

(Anonymous)

Maximum Height And Width...

...appear to be 32767 - the maximum positive value for a signed 16-bit integer.
Although, why you'd want corners that big is beyond me.
Also, you get a 400 response if you ask for a height or width less than 0, and it echoes the request back at you if either height or width are 0 (which is a bit naughty, as it still sends back "Content-Type: image/png" )

(Anonymous)

transparency?

It would be nice if you could have transparent backgrounds here, since PNG supports it.

Re: transparency?

I dunno why that isn't a feature of google's thing. Unfortunately, in 2006, you still cannot rely on IE to display PNGs properly without resorting to IE-only CSS/JS tricks; maybe that has something to do with it.

Re: transparency?

Note that as far as transparency goes, you can get simple transparent/not-transparent style transparency (i.e. what can be gotten with gif images) reliably in indexed PNG images in internet explorer 5.0 and higher. Those conditions - transparency is only on or off, and an indexed PNG - should apply here.

Alpha-level transparency (blended stuff) and transparency in non-indexed images still generally requires strange internet explorer-specific tag soup.

Re: transparency?

Hey, I was wrong. If you omit the bc parameter, the image is transparent. (Thanks to someone at blog.outer-court.com for the info.)

(Anonymous)

roundedcornr.com is even better

hey, you should check out roundedcornr.com. it generates a lot more variety of rounded corners, and the site itself has plenty of rounded corners =)

Re: roundedcornr.com is even better

Aliased edges? In 2006?

(Anonymous)

The transparent background is not compatible to IE 6. Can Google generate a gif format?

(Anonymous)

Look what i made with it!
A nice picture of only rounded corners. (http://drx.a-blast.org/~drx/projects/round/whale.html)
Loaded directly from the Google server, so i do not know how long it will work.
Best greetings,
drx
That is all kinds of awesome.

(Anonymous)

Implementation in Rails

I whipped up an implementation in Ruby on Rails that works nearly the same as Google's. Check it out: http://furui.org/blog/2006/12/18/rounded-corners-in-rails/

-furui

(Anonymous)

Re: Implementation in Rails

it seems that google already have implemented a protection for use this tool, now if you want to use it you have to check that you are human!

ch

Thanks for inspiration

You can try simple rounded-corner generator: http://sw.dev20.info/google/corners/index.php

(Anonymous)

transparency

i am using these corners to place on rectangle images to produce rounded corner images.

I'm using imagemagick to do this and can get it all exactly how i want it except for the parts between the new rounded edges and the old square edges. they come out as black.

any ideas on how to make them transparent? i dont want to see the image i'm placing the corners on but whatever background i place these images on.

as done here: http://www.ibm.com/developerworks/library/l-graf2/?ca=dgr-lnxw15GraphicsLine

thanks

(Anonymous)

outdated?

It looks like Google has stopped using these corner images in favor of using a single round image and then changing the positioning.