This example utilizes the HTML and CSS to create a rounded corners as the background. The width is constant and the height varies according to the text but still maintaining the rounded corner background. The height and width can be expanding depending upon the text inserted and if the width of the .bodybg class is set to auto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS ROUND CORNERS BACKGROUND</title>
<style type="text/css">
<!--
.topleft{background:url(topleft.jpg) top left no-repeat; height:15px;}
.topright{background:url(topright.jpg) top right no-repeat;height:15px;}
.bottomleft{background:url(bottomleft.jpg) bottom left no-repeat;height:15px;}
.bottomright{background:url(bottomright.jpg) bottom right no-repeat;height:15px;}
.bodybg{ background:url(bodybg.jpg) repeat; width:250px;}
.heading{
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF; font-weight:bold; font-size:14px;
margin: 0px 5px 5px 15px;
}
.boxtext{
font-family: sans-serif;
color: #fff; font-size:12px;
margin: 5px 5px 5px 20px;
}
-->
</style>
</head>
<body>
<div>
<div><div></div></div>
<div>CSS ROUND CORNERS</div>
<div>
This example utilizes the HTML and CSS<br />
to create a rounded corners as the background. The width is
constant and the height varies according to the text but still
maintaing the rounded corner background.</div>
<div><div></div></div>
</div>
</body>
</html>
[download id=”2″]