Chrome игнорирует закругленные углы моего меню при наведении

Question

У меня проблема с Chrome, игнорирующим закругленные углы моего меню при наведении курсора.Это работает в Firefox так же, как закругление углов (в хром) перед наведением, однако при наведении мои углы сужаются.Я что-то пропустил?Мой HTML состоит из стандартного ul.

#nav > ul > li:first-child a:hover {
-moz-border-radius-bottomleft: 4px;
-webkit-border-radius-bottomleft: 4px !important;
-border-bottom-left-radius: 4px !important;
-moz-border-radius-topleft: 4px;
-webkit-border-radius-topleft: 4px !important;
-border-top-left-radius: 4px !important;
background: url(../images/menu-back-hover.png) repeat-x;
}

Answer 1

Селектор для браузеров WebKit (например, Chrome) должен быть:

-webkit-border-top-left-radius:  4px;
-webkit-border-bottom-left-radius:  4px;

Answer 2

Следующее применяется к родительскому элементу с радиусом границы, примененным для запуска Webkit обратно в строку для меня:

-webkit-mask-image: -webkit-radial-gradient(white, black);

Другой вариант - обернуть элемент в двух родительских радиусах.

Мне это кажется хакерским, но гораздо лучше, чем вариант с двойной упаковкой - интересно услышать другие решения.