|
|
|
|
Rounded background corners using CSS AND HTML
By TamilCodes
Added on October 09, 2009
Viewed 1453 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
|
|