Rounded Corner Boxes With Outset Borders
Absolutely NO Graphics have been used to create the rounded corners on this page. The CSS code is complicated, but if you go through the style sheet you will soon learn how this works.
This Template is available for you to use to build a very different looking website that loads quickly, because it doesn't use any graphics or table tags to make the rounded corners.
The banner at the top has the image source defined in the "header id" within the style sheet. The "penguin" graphic has been added within the source code of the <body>. But, it is a .gif image and has been optimized to a very small file size.
Colors
- #e5a162 - for the #wrapper borders, and the #footer, #menu a:hover, .raised .boxcontent and .inset .boxcontent backgrounds
- #000 - for the body and #menu a background, and the default <p> font and #menu a:hover font color
- #ccc - for the #wrapper, #header .maincol and .rightcol backgrounds
- #fff - for the .raised, .inset, #header h1 and #menu a font colors
To change any of these colors go through the style sheet and change to another color, in every instance where those colors are defined.
HINT: In order for the inset and outside borders to display, make the background of your content areas something other than white or black. Otherwise, the raised or indented areas won't show up.
Rounded Corner Rules
When using this rounded corner Style Sheet, you must end the bottom of your rounded corner box with a paragraph or an empty paragraph tag - like this <p></p>. If you don't, you will get an empty background color line between the bottom of the last line of text and the bottom rounded corners.
I have tested this page. It doesn't matter if people enlarge the text size in their browser. Nothing breaks out of the boxes, not even the menu links. That is because I have used percentages to define the sizes, rather than pixels or em's.
