HTML CSS examples for CSS Widget:Border Style
Use borders to create highlight effect
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #library_category_wrapper ul { list-style: none; float: right; position: relative; top:5px; margin: auto; } #library_category_wrapper ul li { display: inline; margin-left:8px; padding : 4px; border : 1px solid rgba(0, 0, 0, 0); } #library_category_wrapper li:hover { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border : 1px solid rgba(0, 0, 0, 0.25); border-radius : 4px 4px 4px 4px; box-shadow : 0 0 5px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1); text-shadow : 0 -1px 0 rgba(0, 0, 0, 0.796), 0 0 10px rgba(255, 255, 255, 0.298); padding : 4px; } </style> </head> <!-- w w w . j a v a2 s . c om--> <body> <div id="library_category_wrapper"> <ul> <li> <a href="#">Item1</a> </li> <li> <a href="#">Item1</a> </li> <li> <a href="#">Item1</a> </li> <li> <a href="#">Item1</a> </li> </ul> </div> </body> </html>