CODEWITHSUNDEEP
css
Ian Davis
Ian Davis

Reputation: 19413

Chrome - containing div has rounded corners in CSS, but not rendering as rounded

I have this as my rule for rounded:

.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

On my site I'm working on, http://urlme.cc/movies6, if you view it in Chrome, each movie div has the class "rounded", but, the div has straight edges.

In Firefox, it's rounding correctly. Please see image comparison below.

You can view source / inspect elements on the above link, but, the html looks basically like this:

<div class="movie rounded">
  <a href="#"><img src="..." /></a>
  <div class="details">1 hr, 20 min</div>
</div>

Chrome vs. Firefox comparison of rounded corners

Question: any reason why Chrome is not rounding those div.movie corners, while Firefox is? Thanks!

Upvotes: 0

Views: 269

Answers (1)

Drew
Drew

Reputation: 6862

Taking off position:relative on .movie seemed to do it in Chrome Developer Tools.

Upvotes: 5

Related Questions