Tamil Codes
Rounded background corners using CSS AND HTML
By TamilCodes
Added on October 09, 2009
Viewed 4838 Times

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.

Demo 

 
CSS ROUND CORNERS
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 maintaing the rounded corner background.
 

 

<!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 class="bodybg">
<div class="topleft"><div class="topright"></div></div>
<div class="heading">CSS ROUND CORNERS</div>
<div class="boxtext">
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 class="bottomleft"><div class="bottomright"></div></div>
</div>
</body>

</html>
 

Download the sample files


Comments
No Comments. Be the first to post comments
   
Name:
Comments:
     
   

© 2008 - 2022. Tamilcodes.com. All rights reserved.
Valid XHTML 1.0 Transitional Valid CSS!