CSS for Rounded Box Style

Tips for implementing how to create a round html box

CSS for Rounded Box Style
Tips for implementing how to create a round html box with CSS.

style code:

<style type="text/css">
#boxDiv
{
	margin:0px;
	padding:0px;
	position:absolute;
	width:197px;
	float:left;
}
#boxDiv h2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background:url("images/kopi-hari-ini_01.gif") 0 0 no-repeat;
	width:117px;
	height:26px;
	padding-left:80px;
	padding-top:16px;
	margin:0px;
}
#boxDiv .content
{
	background:url("images/kopi-hari-ini_02.gif") 0 0 repeat-y #000000;
	width:177px;
	padding:10px;
	margin:0px;
}
#boxDiv p
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	margin:0px;
	padding:0px;
}
#boxDiv .bottom
{
	background:url("images/kopi-hari-ini_04.gif") 0 0 no-repeat;
	width:197px;
	height:15px;
}
body {
	margin:5px;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
a:link {
	color: #0099FF;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
	color: #009900;
}
a:active {
	text-decoration: underline;
	color: #0099FF;
}
.spacer { margin-bottom:20px; }
</style>

dan ini implementasi pada body html na:
<!--just to cover all size box-->
<div id="boxDiv">
<!--start the title-->
<h2>Todays Cofee</h2>
<!--start the content-->
<div class="content">
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
</div>
<!--start the bottom-->
<div class="bottom"></div>
</div>

Thanks, dr.emi
Share on Facebook