CSS Border Radius и проблема с заливкой фона

Question

У меня есть главное меню, как показано на рисунке

Как видите, внешняя серая граница имеет радиус границы. Но выбранное Главное меню заполнило его как квадрат.

То, что я хочу, это меню Home Selected, которое необходимо заполнить.

Вот мои коды CSS

#navigation-wrap{width:100%; border-bottom: 1px solid #CCC;moz-box-shadow: 0px 5px 8px -2px #F5F5F5;-webkit-box-shadow: 0px 5px 8px -2px #F5F5F5;box-shadow: 0px 5px 8px -2px #F5F5F5;}
#navigation{margin:0 auto; border: 3px solid #CCC; border-bottom:none; position:absolute; right:0; top:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 0px 4px #EEE;   -webkit-box-shadow:0px 0px 4px #EEE;  box-shadow:0px 0px 4px #EEE;}
#navigation ul{list-style:none;}
#navigation li{float:left; display:block; letter-spacing:1px; border-bottom: 3px solid #CCC;}
#navigation a{float:left; display:block; height: 30px; line-height:30px; position:relative; padding:0 10px; text-decoration:none; border-bottom: none;}
#navigation a:hover {background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;}
.current-menu-item a{background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;}

Спасибо.

Answer 1

Добавить идентичные border-radius свойства к #navigation a.

Чтобы применить это только к кнопке Home, используйте #navigation a:first-child.И если вы хотите, чтобы только левая сторона элемента имела радиус границы, используйте border-top-left-radius и border-bottom-left-radius.

Answer 2

Если это меню, сгенерированное WordPress, вы можете получить соответствующий идентификатор меню home, проверив элемент с помощью firebug или другого.затем вы можете применить css для радиуса границы непосредственно к одному элементу меню, вызвав его соответствующий идентификатор