css layout with html5

Rounded Corners

index6.html and css/style6.css

Getting tired of looking at all of those square corners? Let's smooth out the design a bit by giving the outer rectangle a border and slightly rounded corners. In the bad old days, we resorted to all kinds of tricks to achieve this effect, including making tiny rounded curves in Photoshop and setting them as table cell backgrounds. Yikes! But with CSS3, we get rounded corners almost for free. This won't work in older browsers, but that's OK - they can live with the rectangular design, no harm done (browsers simply ignore rules and tags they don't understand). Since you want a border to go all the way around your design, you'll need a new declaration on your div#container:

If the border-radius declaration were universally recognized, all you'd need to add would be this:

Cool, right? But wait - what's with the corner of the header image poking out beyond the border? Unfortunately, that's a bug. The best way to avoid it is to not use border-radius for boxes that contain image backgrounds. If you absolutely must, here's a workaround that works in most browsers:

... but it's not perfect, as you can see. More advanced workarounds for this problem exist, if you're feeling intrepid - Google for more info.

At this time, recent versions of Chrome, Firefox, Safari and Explorer all support "border-radius" as shown above. If you want to make sure your design works in earlier versions of Firefox, duplicate your radius rules with a "-moz" prefix, e.g. use both of these:

You can also specify radii on a per-corner basis with:

Don't want simple radii? You can specify different horizontal and vertical numbers to get some interesting effects, such as this:

Which will get you this:

Asym Radii

All kinds of weird and wonderful shapes are possible. For more, see CSS: border-radius and -moz-border-radius