Antonio Wells. Web & Multimedia Designer

You can find a wealth of methods to place CSS Rounded Corners in your design. This tip will focus on the methods that work for me. The methods mentioned are Pure CSS Liquid or Elastic so they expand with your design. Download the source files for this tip, CSS Tip: Rounded Corners.

4 Images

This one involves 4 images (top left, top right, bottom left and bottom right) used within web page versus background images.

[code lang="css"]

.Container {
 width: 400px;
 background: #000;
 color: #FFFFFF;
 font: 1.0em, Arial, Helvetica, sans-serif;
}

.Content {
 padding: 8px;
}

.Clear {
 display: block; /* This element is the magic in this tip */
 clear: both;
}

.AlignLeft {
 float: left;
}

.AlignRight {
 float: right;
}

[/code]

[code lang="html4strict"]





Title

Content







[/code]

This method basically places images in the web page; 2 for the top and 2 for the bottom. I used CSS to control the alignment, and added a key piece of bloat code to make the right corners behave see SPAN tag with “Clear” CSS class. I also used the ALT tag within the images (insert whatever text you want) without it… it wont validate.

I have also seen this method using the “align” attribute of the IMG tag (left or right) but this wont validate as it is deprecated in XHTML Transitional and Strict, but it works.

4 DIVs

The one I learned from using Community Server, a ASP.NET community software for Forums and Blogs. In contrast, this one involves 4 images (top left, top right, bottom left and bottom right) used as background images of the DIV elements.

[code lang="css"]

.Container {
width: 400px;
background: #000;
color: #FFFFFF;
font: 1.0em, Arial, Helvetica, sans-serif;
}

.TopLeft {
background: url(top-left.gif) no-repeat top left;
}

.TopRight {
background: url(top-right.gif) no-repeat top right;
}

.BottomLeft {
background: url(bottom-left.gif) no-repeat bottom left;
}

.BottomRight {
background: url(bottom-right.gif) no-repeat bottom right;
}

.Content {
padding: 8px;
}

.Clear {
clear: both;
}

[/code]

[code lang="html4strict"]






Title

Content







[/code]

The .Container DIV acts only as a container for the 4 corner DIVS. The other DIVs are nested in a “Z pattern” order: Top Left, Top Right, Bottom Left, and Bottom Right. The last DIV can be for your content, if you wanted to place Padding.

This method has its Cons because it nests DIVs inside each other, otherwise… it works!