Pure CSS method for achieving Right Angle Corners

By now I've seen dozens of articles that help you get rounded corners in your web pages, either using CSS, Javascript, Ajax, automatically-generated graphics on-the-fly, or a combination of all of these techniques.

But for a sharp, professional look -- nothing beats that right angle corner look, which remains popular on many websites.

But how to achieve this crisp effect? And how to guard against cross-browser compatability issues?

For example, it's no good getting 90 degree angles in firefox if opera renders them as 89 degrees, and IE gives you 95 degrees.

The trick is to use the following nice clean pure-CSS solution.

Now let's see it in action!

Of course, this code is not production ready -- a true web designer would use a JSON script injection technique to generate the right angle corners on the fly, using prototype to slowly fade the corners from a standard rounded look and feel, into the high impact square look.

If you do use this code, I'd of course like a link-back, and a cut of any derived profits.

(stuck in sarcasm mode due to sleep deprivation)

My book "Choose Your First Product" is available now.

It gives you 4 easy steps to find and validate a humble product idea.

Learn more.