January 26 Meeting Report: Rounded Corners

At our January meeting, we looked at creating rounded corners on boxes using CSS. We looked at small boxes and then full page layouts, both fixed-width and fluid width.

With table based layouts, we made rounded corners by putting curved images in the cells at the four corners of the table. CSS uses the same concept, but the images are backgrounds to the elements of the HTML. For fixed-width boxes, you just need an image with round edges at the top and one at the bottom. For fluid width, there has to be quarter-circle graphics at the four corners in order to allow expansion horizontally.

There are tons of techniques for creating rounded corners. We used examples from The Art & Science of CSS from Sitepoint, http://www.sitepoint.com/books/cssdesign1/, but a search for “rounded corners CSS” will reveal a lot of examples. Some use JavaScript instead of pure CSS. A couple of sites to look at are:

25 Rounded Corner Techniques,
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Smiley Cat Web Design,
http://www.smileycat.com/miaow/archives/000044.php

CSSplay, http://www.cssplay.co.uk/boxes/three_cornered.html

And if you don’t want to create your own graphics, try the Rounded Corner and Gradient Generator: http://www.roundedcornr.com/

CSS3 will make the use of images unnecessary because it will include the property “border-radius.” Browsers don’t currently support this property, but in Safari and the Mozilla browsers, there are commands that will let you use border-radius. See these sites:

CSS rounded corners without images - Arve Bersvendsen, http://virtuelvis.com/archives/2004/11/imageless-rounded-corners

CSS3.info, http://www.css3.info/preview/rounded-border/