Rounded Borders Test/Example

Home | Projects | Photos | Blog | Contact

To demonstrate the ease with which CSS rounded tables can be created, and to (eventually) explain a few of the different ways of creating them, I've created this project page. It's quite simple, and amazingly more simple than trying to do the same thing with <table> tags. My corners are a bit more rounded than they really need to be (and larger than needed as well), but they are like that to show the effect better, you can of course make them as small as you like, they will work correctly.

Make images like this:

Then simply make them the corner images in your CSS (see code below)

You should be able to resize your font (holt ctrl and move your mouse wheel up and down) and the table should resize accordingly (to a point, once it gets too small it will break, but its smaller than anyone would actually use). You can make a table in any shape using this method easily, but it's not the cleanest code to use to do it, but not nearly as complicated as a nested table would be.

This is just showing that the shape of the box can be altered without changing the HTML at all, and only changing a couple attributes in the CSS file.

The XHTML:

<p>
<div class="bl">	
	<div class="br">		
		<div class="tl">			
			<div class="tr"> This is where you input the text.  Lorem ipsum or some junk like that.</div>
		</div>			
	</div>		
</div>
</p>

The CSS:

.bl { 
  background: url(corners2_botleft.gif) 0 100% no-repeat #000000; 
  width: 20em;
}
.br {
  background: url(corners2_botright.gif) 100% 100% no-repeat
}
.tl {
  background: url(corners2_topleft.gif) 0 0 no-repeat
}
.tr {
  background: url(corners2_topright.gif) 100% 0 no-repeat; 
  padding: 10px; 
  color: rgb(235, 80, 80); 
}