Rounded content Box

Posted under » CSS on 22 June 2010

I was using this purely CSS method but I don't like it. The curve is too large and it doesn't appear consistent across browsers. I prefer my rounded edges to be using graphics. You can't go wrong with graphics.

Lets get to work. Put this on the CSS.


.con_topleft, .con_bottomleft { float:left; } 
.con_topright, .con_bottomright { float:right; } 

.con_topleft {
  background-image: url("../images/con_topleft.jpg");
  background-position:top;
  background-position:left;
  }
  
.con_topright {
  background-image: url("../images/con_topright.jpg");
  background-position:top;
  background-position:right;
  }
  
.con_bottomleft {
  background-image: url("../images/con_bottomleft.jpg");
  background-position:bottom;
  background-position:left;
  }

.con_bottomright {
  background-image: url("../images/con_bottomright.jpg");
  background-position:bottom;
  background-position:right;
  }
  
.con_topleft, .con_bottomleft, .con_topright, .con_bottomright  { 
	margin:auto;
	background-repeat:no-repeat; 
    } 

#bottom { height:10px;}

Then put this on the body.





$kontent

You will note that I have to create id=bottom which is not necessary for ie or firefox. However Safari needs this because otherwise the height will be taller at the bottom.

There will be times when it just doesn't look straight, so you have to go back to the old days where you put images instead of css. Works with fixed width pages.