Round corner section title bar : Round « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Round

Round corner section title bar

  
<!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>
<title>HINT of BLUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body { 
margin : 0;
padding : 0;
text-align : center;
font : 73% verdana, tahoma, "Trebuchet MS", arial, sans-serif;
background : #fff url(55_hint_of_blue-images/bg.gif) repeat-y top center;
color : #666;
} 
      /*WRAP*/
#box { 
position : relative;
width : 782px;
margin-right : auto;
margin-left : auto;
text-align : left;
padding : 0px;
margin-top : 0;
}
      /*TITLE BAR*/
#title { 
width : 760px;
margin : 0 0 0 11px;
padding : 0;
height : 30px;
background : #fff;
color : #000;
} 
#title h1 { 
font : 100% georgia, tahoma, verdana, arial, sans-serif;
text-align : right;
letter-spacing : 3px;
margin : 0 10px 0 11px;
padding-top : 10px;
background : inherit;
color : #000;
} 
      /*TOP BANNER*/
#header { 
width : 760px;
height : 150px;
margin : 0 0 20px 11px;
padding : 0 0 0 0;
background : #fff url(55_hint_of_blue-images/header.jpg);
color : #000;
} 
#header h1 { 
font : 140% georgia, tahoma, verdana, arial, sans-serif;
text-align : left;
letter-spacing : 5px;
margin : 0 10px 0 35px;
padding : 10px 0 0 0;
background : transparent;
color : #4A83BA;
} 
      /*TOP NAVIGATION*/
.container { 
width : 760px;
padding-top : 10px;
margin-left : 11px;
}
#navCircle { 
margin : 0;
padding : 0 0 20px 10px;
border-bottom : 1px solid #eee;
} 
#navCircle li { 
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
} 
#navCircle a:link, #navCircle a:visited { 
background : #fff;
float : left;
line-height : 14px;
font-family : georgia, tahoma, verdana, arial, sans-serif;
font-weight : normal;
padding : 0 20px 6px 12px;
text-decoration : none;
color : #4a82ba;
} 
#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover { 
padding-bottom : 6px;
color : #000;
background : transparent url(55_hint_of_blue-images/pointer.gif) no-repeat bottom center;
} 
      /*MAIN CONTENT*/
#main { 
float : left;
width : 532px;
padding : 1px;
margin-top : 10px;
line-height : 1.8em;
} 
#main h1 { 
margin : 10px 30px 0 20px;
padding : 3px;
text-align : left;
letter-spacing : 3px;
font : 150% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #000;
} 
      /*SIDEBAR*/
#sidebar { 
width : 200px;
margin : 10px 0 0 540px;
padding-left : 10px;
border-left : 1px solid #eee;
line-height : 1.8em;
} 
#sidebar h1 { padding : 10px;
margin : 0;
font : 100% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #aaa;
} 
.sideheader { 
margin-bottom : 20px;
text-align : center;
letter-spacing : 5px;
font : 140% georgia, tahoma, verdana, arial, sans-serif;
padding : 3px 0;
color : #fff;
background : #000 url(55_hint_of_blue-images/sideheader.jpg);
} 
      /*SIDE MENU*/
#sidenav {
margin : 0;
padding : 0;
list-style-type : none;
font : 100% georgia, tahoma, verdana, arial, sans-serif;
background : inherit;
color : #c86000;
} 
#sidenav a { 
display : block;
width : 90%;
margin : 15px;
padding-left : 25px;
text-align : left;
text-decoration : none;
background : transparent url(55_hint_of_blue-images/active.gif) no-repeat left center;
color : #aaa;
} 
#sidenav a#current, #sidenav a:hover { 
text-decoration : none;
background : transparent url(55_hint_of_blue-images/hover.gif) no-repeat left center;
color : #4a83ba;
} 
      /*FOOTER*/ 
#footer { 
margin : 40px 0 0 0;
padding : 0;
border-top : 1px solid #ccc;
font-size : 0.8em;
text-align : center;
background : inherit;
color : #aaa;
} 
#footer a:link, #footer a:visited { 
background : inherit;
color : #4a82ba;
} 
#footer a:hover { 
border-bottom : 1px solid #000;
color : #000;
}
      /*CLASS*/
.news { 
font-size : 1em;
background : inherit;
color : #666;
}
.myborder {
float: left; 
border : 1px solid #aaa;
padding : 10px;
margin: 10px;
} 
      /*TYPOGRAPHY*/
p { 
padding-left : 20px;
padding-right : 15px;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
} 
      /*SCROLLBAR*/ 
div.scroll { 
margin : 5px 0 40px 5px;
height : 15em;
width : 170px;
overflow : auto;
border : 0px solid #aaa;
padding : 0.5em;
background : #fff;
color : #666;
} 
      /*LINKS*/ 
a img { 
border : 0;
} 
a:link, a:visited { 
background : inherit;
color : #4a82ba;
text-decoration : none;
} 
a:hover { 
background : inherit;
text-decoration : none;
color : #000;
}

</style>


</head>
<body>
<div id="box">
  <div id="title">
    <h1><a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a></h1>
  </div>
  <div id="header">
    <h1>www.COMPANY NAME.net</h1>
  </div>
  <div class="container">
    <ul id="navCircle">
      <li><a class="active" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
  </div>
  <div id="main">
    <h1>Welcome to <span style="font-weight:bold; color:#4A82BA;">Hint of Blue</span> Template</h1>
    <blockquote> This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 &amp; 1280x1064.<br />
      For more FREE CSS templates visit <a href="http://www.mitchinson.net">my website</a>.</blockquote>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat. Mauris et pede eget elit congue dictum. Etiam auctor, sem eget rhoncus viverra, dolor sem vehicula nisl, ut imperdiet dui purus non dui. In ac tellus. </p>
    <h1>About Our Company</h1>
    <p><img class="myborder" src="55_hint_of_blue-images/sq.gif" alt="icon"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat.</p>
  </div>
  <div id="sidebar">
    <h2 class="sideheader">Links</h2>
    <div id="navcontainer">
      <ul id="sidenav">
        <li><a href="http://www.free-css.com/">Snapp Happy</a></li>
        <li><a href="http://www.free-css.com/">TODC</a></li>
        <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
        <li><a href="http://www.free-css.com/">James Koster</a> </li>
        <li><a href="http://www.free-css.com/">CSS play</a></li>
        <li><a href="http://www.free-css.com/">Listamatic </a> </li>
      </ul>
    </div>
    <h2 class="sideheader">News</h2>
    <div class="scroll">
      <h1>April 09 2007</h1>
      <p class="news">Use this space as a mini weblog maybe .....</p>
      <h1>April 08 2007</h1>
      <p class="news">.... or for news &amp; updates.</p>
      <h1>April 07 2007</h1>
      <p class="news">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. </p>
    </div>
    <h2 class="sideheader">Information</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam vitae purus non nisi ultricies volutpat.</p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
    This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>








Related examples in the same category

1.Round corner sections
2.Round corner for all sections
3.Round corner
4.HTML for borders with rounded corners
5.Shading background border
6.Sliding door round corner