Adding Edge border for navigation bar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Border Style

Description

Adding Edge border for navigation bar

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

nav {<!--from w w  w .j a v a2s . c  o m-->
   width: 100%;
   margin:0 auto;
}
nav ul li {
   width: 16.0%;
   float: left;
   border-bottom: 1px solid #A2A2A2;
   border-right: 1px solid #A2A2A2;
   list-style-type: none;
   display: inline;
}
nav ul li:first-child{border-left: 1px solid #A2A2A2;}
nav ul li a {
   display: block;
   width: 100%;
   text-align: center;
   padding-top: 8px;
   padding-right: 8px;
   padding-bottom: 8px;
   padding-left: 8px;
   color: #202020;
   text-transform: uppercase;
   text-decoration: none;
   font-size: 12pt;
}
nav ul li a:hover {
   color:  #89ccca
}
nav ul{
   width: 80%;
   list-style: none;
   margin: 0;
   padding: 0;


      </style> 
 </head> 
 <body> 
  <nav> 
   <div align="center"> 
    <div id="navigation"> 
     <ul> 
      <li> <a href="/">Home</a> </li> 
      <li> <a href="/">About</a> </li> 
      <li> <a href="/">Products</a> </li> 
      <li> <a href="/">News</a> </li> 
      <li> <a href="/">Careers</a> </li> 
      <li> <a href="contact us">Contact Us</a> </li> 
     </ul> 
    </div> 
   </div> 
   <!--navigation--> 
  </nav>  
 </body>
</html>

Related Tutorials