Странные закругленные углы в Chrome / Safari

Question

У меня проблема с закругленными углами, с которой мне нужна помощь. Вот сгенерированный HTML (в Wordpress):

<div class="deal_thumbnail clearfix">
<a href="page.html" title="Read More">
<img width="140" height="110" src="image.jpg" alt="read more" title="Read more" /></a>
</div>

Вот CSS:

.deal_thumbnail
{
    float:left;
    width: 150px; 
}
.deal_thumbnail img
{
    float:left;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 48px;    
}

Если я установлю последние 48px на 18px, они будут отображаться нормально в FF, не округляться вообще в Chrome / Safari (квадратные края).

Если я оставлю это как 48px, это сделает огромный плавно закругленный угол (как и должно быть) в FF, вот что я получаю в Chrome / Safari:

Есть какие-нибудь мысли о том, почему я не получаю ничего в 18px и получаю странные углы в 48px в Chrome / Safari, в то время как в FF все хорошо?

Answer 1

Попробуйте это:

.deal_thumbnail
{
    float:left;
    width: 150px; 
}
.deal_thumbnail img
{
    float:left;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;    
}