keep curved borders using css 3 - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border Style

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

Description

keep curved borders using css 3

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">

.menu { padding: 0; clear: both; border-radius:10px;}
.menu li { display: inline; }
.menu li a {
   padding: 6px; float:left;font-family:Gill, Helvetica, sans-serif;  border-right: 1px solid #000; border-bottom: none;
   text-decoration: none; color: #fff; font-weight: bold;
   background-image: linear-gradient(bottom, pink 0%, rgb(34,34,34) 54%, pink 100%);
   background-image: -o-linear-gradient(bottom, pink 0%, rgb(34,34,34) 54%, pink 100%);
   background-image: -moz-linear-gradient(bottom, pink 0%, rgb(34,34,34) 54%, pink 100%);
   background-image: -webkit-linear-gradient(bottom, pink 0%, rgb(34,34,34) 54%, pink 100%);
   background-image: -ms-linear-gradient(bottom, pink 0%, rgb(34,34,34) 54%, pink 100%);
   background-image: -webkit-gradient(
   linear,<!--from   ww  w .j a  v  a2  s  .co m-->
   left bottom,
   left top,
   color-stop(0, pink),
   color-stop(0.54, rgb(34,34,34)),
   color-stop(1, pink)
   );
}
.menu li:first-child a { border-radius: 10px 0 0 10px }
.menu li:last-child a  { border-radius: 0 10px 10px 0 }
.menu li.active a  {
   background-image: linear-gradient(bottom, rgb(138,25,25) 0%, blue 54%, rgb(138,25,25) 100%);
   background-image: -o-linear-gradient(bottom, rgb(138,25,25) 0%, blue 54%, rgb(138,25,25) 100%);
   background-image: -moz-linear-gradient(bottom, rgb(138,25,25) 0%, blue 54%, rgb(138,25,25) 100%);
   background-image: -webkit-linear-gradient(bottom, rgb(138,25,25) 0%, blue 54%, rgb(138,25,25) 100%);
   background-image: -ms-linear-gradient(bottom, rgb(138,25,25) 0%, blue 54%, rgb(138,25,25) 100%);
   background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0, rgb(138,25,25)),
   color-stop(0.54, blue),
   color-stop(1, rgb(138,25,25))
   );
}
.content {
   float: left; clear: both;
   background: #fff; padding: 10px 20px 20px; width: 400px;
}


      </style> 
 </head> 
 <body> 
  <ul id="menu" class="menu"> 
   <li class="active"> 
      <a href="#">One</a> </li> 
   <li> <a href="#">Two</a> </li> 
   <li> <a href="#">Three</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials