block header with rounded corners

**1cookie** · 07-29-2010 09:21 AM

hi

I'm trying to make a block with rounded corners using CSS; see http://webtechnologies.me.uk/img/Screenshot.png for a picture of all the components.

My code is:

HTML Code:

 <html>
 
 <head>
 <style type="text/css">
 h3 {margin:0;}
 #wrapper {width:200px;height:400px;}
 #left-corner-img {width:20px;float:left;background:url(left-corner.gif) no-repeat;}
 #right-corner-img {width:20px;float:right;background:url(right-corner.gif) no-repeat;}
 #header-wrapper {width:200px;margin:0;text-align:center;}
 #center {width:160px;background-color:#efefef;}
 #content {border:1px solid #efefef;}
 #margins {margin:100px 200px;}
 </style>
 
 </head>
 <body>
 
<div id="margins">
   <div id="wrapper">
       <div id="header-wrapper">
          <div id="left-corner-img"></div><div id="center"><h3>header</h3></div><div id="right-corner-img"></div>
       </div>
      
          <div id="content">
          some text here
      </div>
   </div>
</div>
 
 
 </body>
 </html>