Rounded background corners using CSS AND HTML

HTML and CSS Comments Off on Rounded background corners using CSS AND HTML

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″]



Author

Search

Back to Top