Welcome to my 4 Rounded Corners demo page! Two prime examples of the nuvo-cool XHTML + CSS rounded corners.
Four walls makes a house, four corners makes a rounded rectangle. That's all there is in this example.
This trick uses background images, one for each corner. The focus here is getting it to work in the simplest way possible, without trying to hack fixes together for the benefit of specific browsers. It is designed to just work.
<div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <h2>Header</h2> <p>Text here my love.</p> </div> <div class="rbbot"><div></div></div> </div>
That's the HTML, take a look at the source (right click, "View Source" or "View Page Source") to get a feel for the CSS - then have a go at using it in one of your own pages! Remember that you can use any images you like for the corners, look at the example on the right. Draw a rectangle in your image editor, then use the "slice" tool to cut off the corners.
This page has been tested in IE 5 and 6, Firefox 1.0 and Opera 7.5 - all looks dandy! If you want to poke fun at something, feel free to email me and I'll see what I can do!
