Collapse border and change the color of the border on hover using border radius - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Collapse border and change the color of the border on hover using border radius

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

ul {<!--from ww w. j a v a2  s .  c o m-->
   margin: 0;
   padding: 0;
}
li {
   padding: 10px;
   display: block;
   float: left;
   background: #ccc;
   border: 2px solid #666;
   border-right-width: 0;
}
li:first-of-type {
   border-radius: 4px 0 0 4px;
}
li:last-of-type {
   border-right-width: 2px;
   border-radius: 0 4px 4px 0;
}
li:hover {
   border-color: #009;
   border-right-width: 2px;
}
li:hover + li {
   border-left-width: 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <ul> 
   <li>One</li> 
   <li>Two</li> 
   <li>Three</li> 
  </ul>  
 </body>
</html>

Related Tutorials