www.webdeveloper.com
Results 1 to 4 of 4

Thread: block header with rounded corners

  1. #1
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174

    block header with rounded corners

    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>
    
    It's pretty close, but i'm struggling with the rounded corners.

    help
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  2. #2
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174
    edit:

    Resolved, see: http://www.css3.info/preview/rounded-border/

    for an interesting link.
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208

  4. #4
    Join Date
    Jul 2009
    Location
    UK
    Posts
    174
    Quote Originally Posted by Major Payne View Post
    Some others, too:
    neat, ta.
    Success is the ablility to go from one failure to another without loss of enthusiasm.
    -- Sir Winston Churchill.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles