You need a graphics program to produce the corners. The standard Windows 'PAINT' program isn't really suitable. There are some free graphic programs such as 'GIMP' and Google also has a free image program, but I haven't tried these. The popular ones seem to be Paint Shop Pro and Adobe Photoshop. Try Googling for 'Image Editing Software' to see what's available.
The image type depends really on preference. PNG is popular now, but isn't totally supported yet. JPG gives better quality, but corners don't need it, and you can't have a transparency. I've used GIFs in this example as it creates very small files. If corners are to be used on one backgroud color throughout, it's best to use that background color in your image, instead of a transparency.
These are my 12 x 12px images used, cut from a 24px diameter circle:
Click here to see what the example looks like
This type of 3 fluid percentage columns would mainly be used to display columns of text, similar to a newpaper, and not a complete webpage. I've used 3 columns to show that the corner images can be repeated.
The principle is easy. As you can only have one background image within a tag, you use 2 tags. As <div> doesn't contain any margin or padding, so we just use 2 <div>s, one nested inside the other.
If you used the following:-
<div>Hello</div>
<div></div>
<div></div>
<div>Hello</div>
This proves that <div>s are ignored if they don't have content. The only padding you will see is the padding of the font itself. I've shown this as many seem to think there is padding in a <div>.
Consider the following:-
<style type="text/css">
body {margin: 0; padding: 0;}
.spacer {float: left; width: 1%;}
.box {float: left; width: 32%; color: white; background: #369;}
.box .topleft {background: url(top_left.gif) no-repeat top left;}
.box .topright {background: url(top_right.gif) no-repeat top right;}
.box .content {padding: 0 12px;}
.box .botleft {background: url(bot_left.gif) no-repeat bottom left;}
.box .botright {background: url(bot_right.gif) no-repeat bottom right;}
</style>
<div class="spacer"> </div>
<div class="box">
<div class="topleft"><div class="topright"> </div></div>
<div class="content">Your Content Here</div>
<div class="botleft"><div class="botright"> </div></div>
</div>
The main class .box is the holder and contains the width of 32%, background color etc. The class .topleft has the left corner and the .topright has the right corner. At the moment, it needs a non-breaking-space to keep the box open. You now have the top of the box.
As there are still people using IE6, I've used a spacer <div> of 1%. With IE7, a margin of 1% could be added to the width of 32%, but IE6 doesn't play right. So, until IE6 is obsolete, I've found this to be the easiest way around the problem for this particular example.
The class .content only contains padding, but you could include anything else you require. Notice that everything is indexed from the .box class, so the other styles won't clash with these. As they're all classes (and not IDs) the box can be reused. In the example, I've floated 3 to give a 3 column fluid display.
The bottom of the box, class .botleft and .botright is exactly like the top section, but with the bottom corner images.
To finish off, 3 boxes are floated left to give a full page width. The class .box has a width of 32% plus a spacer width of 1%. So that's (32% + 1%) x 3 = 99% which leaves 1% for the right margin. Try the example again, altering the window width. The boxes should adjust accordingly. I've set min-width to 600px in the example to stop the window closing completely. min-width doesn't work in IE6 or less, but it's unlikely that anyone would want a window any smaller than 600px. The example was tested in IE6, IE7, Firefox and Opera, and validates XHTML 1.0 Strict.
Download the example with the images Zipped Corners Example so you can try it locally on your computer.
The example is cut down to the minimum to make it easier to understand. If larger images were used, you'd probably have to use height in the image <div>s. There are also many other ways to achieve a 3 column display, but I've shown the easiest one when using percentages.
