Easy-as-you-like! Adapt Square Boxes with Hassle-Free Curves

round corners without javascript or images picture

Give your site a design lift with this simple CSS code snippet. Simply choose a radius and drop it in a div for a real easy way to add curves without any images or javascript.

This is super-fast to do and works for all browsers except IE (so there's a surprise). Still, 60% of the market isn't bad for a few seconds work.

I'll write up the IE hack another time, but obviously that will take longer and involve some swearing.

Setup Unmanaged VPS (4 Noobs!) ... with vpsBible
Secure WordPress. Properly. ... with wpCop, the platform's dedicated security website
Olly 'the_guv' Connelly's vpsBible.com site and 'WordPress 3 Ultimate Security' book.

Round Corners CSS Code

Here's the snippet, allowing for all good browsers:-

.. play with those round corner radius values for larger or smaller round corners.

Now open up the stylesheet and append the style to whatever div box, like so:-

And you're good to go.


About the Author:

Olly Connelly (yeah, that's me) blogs at guvnr.com, polices WordPress security at wpCop.com and helps noobs build web servers at vpsBible.com, so if you've got sleeping problems you know where to come.

Add a Comment