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!

This box has the modern 'right-angle-cornersTM' look and feel!

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)


I'm currently writing a book about how to build your first product. If you want to build your first product, please sign up to be notified when the book is available.

(By the way, I read every comment and often respond.)

Your comment, please?

Your Name
Your Url (optional)
Note: I may edit, reuse or delete your comment. Don't be mean.