HTML CSS examples for CSS Widget:Menu
Set border-radius for menu panel
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #main-menu li.first{ border-left:1px solid #feb800; border-top-left-radius: 5px 5px; -moz-border-top-left-radius: 5px 5px; -webkit-border-top-left-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -moz-border-bottom-left-radius: 5px 5px; -webkit-border-bottom-left-radius: 5px 5px; padding-left:10px; } #main-menu li a{ color:white; text-decoration:none;<!--from www.jav a2s.c o m--> font-weight:bold; border:none; font-variant:normal; } #main-menu li.last{ border-right:1px solid #feb800; border-top-right-radius: 5px; -moz-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px; border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; padding-right:310px; } #main-menu li{ display:block; float:left; width:auto; background: #fe9900; background: -moz-linear-gradient(top, #fe9900 0%, #ff7c00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe9900), color-stop(100%,#ff7c00)); background: -webkit-linear-gradient(top, #fe9900 0%,#ff7c00 100%); background: -o-linear-gradient(top, #fe9900 0%,#ff7c00 100%); background: -ms-linear-gradient(top, #fe9900 0%,#ff7c00 100%); background: linear-gradient(top, #fe9900 0%,#ff7c00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe9900', endColorstr='#ff7c00',GradientType=0 ); border-top:1px solid #feb800; border-bottom:1px solid #feb800; overflow:hidden; text-align:center; } #main-menu{ position:relative; left:150px; } </style> </head> <body> <ul class="links inline clearfix main-menu" id="main-menu"> <li class="first active"> <a class="active" title="" href="/">Home</a> </li> <li class=""> <a title="Automotive Industry News" href="/">Auto</a> </li> <li class=""> <a title="Fashion News!" href="">Fashion</a> </li> <li class="last"> <a title="All the News" href="/news">News</a> </li> </ul> </body> </html>