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のブラウザ用のセレクタ（すなわちクロム）は次のようになります。

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

Answer 2

私のためのバックラインにWebKitのキックに適用される境界半径の親要素に適用される次

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

もう1つの方法は、2つのボーダー半径の親に要素をラップすることです。

他の解決策を聞くことに興味があり、ダブルラップオプションよりはるかに優れています。