проблема с граничным радиусом CSS

Question

Немного о проблеме с граничным радиусом. Я успешно округлил свой прямоугольник, но у меня возникла проблема с округлением зависания, которое я наложил на него. Вы увидите в верхнем и нижнем углах закругленного прямоугольника сам наклон не закруглен и на самом деле является прямоугольником. Я пробовал округлить его, но он тоже округляет центр. Я знаю, что это, вероятно, не имеет смысла, но вы поймете, посмотрев здесь: http://jsfiddle.net/hCg3J/

Все, что я хочу сделать, - это чтобы каждый выбор выделил всю эту область, а не торчал.

HTML:

<ul class="pageitem"> 
    <li class="list" style="border-top:none;"><a href="iphone4.html";><span class="name">iPhone 4/4S</span><div class="arrow"></div></a></li> 
    <li class="list"><a href="iphone3.html";><span class="name">iPhone 3G/3GS</span><div class="arrow"></div></a></li> 
    <li class="list"><a href="ipod.html";><span class="name">iPod Touch</span><div class="arrow"></div></a></li> 
</ul> 

CSS

.pageitem { 
    -webkit-border-radius: 8px; 
    behavior: url(/border-radius.htc); 
    border-radius: 8px; 
    position:relative; 
    zoom: 1; 
    -moz-border-radius: 8em; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    background-color: #fff; 
    border: #878787 solid 1px; 
    font-size: 12pt; 
    overflow: hidden; 
    padding: 0; 
    height: auto; 
    width: auto; 
    margin: 3px 9px 17px; 
    list-style: none 
} 

Answer 1

Просто добавьте правильное -webkit-border-radius в .list:hover, name:hover и настроить его под свои нужды.

Адрес jsfiddle proof of concept. Что вам нужно сделать, это округлить только верхний левый и верхний правый угол для верхнего элемента и нижний левый, buttom-right для нижнего элемента. Я бы предложил добавить специальный класс для этих элементов.

UPDATE:

На самом деле, как я предложил в комментариях я добавил первый ребенок и последний ребенок селекторы, updated fiddle

.list:hover:first-child, name:hover:first-child { 
    -webkit-border-radius: 8px 8px 0px 0px; 
} 

.list:hover:last-child, name:hover:last-child { 
    -webkit-border-radius: 0px 0px 8px 8px; 
}