All i want to do is apply a border-radius to an image. Here is the css for it (i have very similar css in another project that works absolutely fine).
.testimonial-pic img {
width:48px;
height:48px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
I thought, maybe there was something inherit in the html that was causing it to fail, but can’t spot anything immediately obvious there either.
<blockquote class="testimonial">
<p>You don’t need to see his identification.
These aren’t the droids you’re looking for.
He can go about his business. Move along.</p>
</blockquote>
<div class="arrow-down"></div>
<img class="testimonial-pic" src="carmen_villadar_thumb.jpg" />
<p class="testimonial-author">Obi-Wan Kenobi | <span>Jedi Master</span></p>
I’ve tried to change the order in which the css is applied. I have also inspected my surrounding css and can’t see anything that should conflict, especially considering the fact that i’m not applying any css to any other image properties, i’ve also named an independent class, so can’t see why this isn’t or shouldn’t work.
Here is a link to the live page, just in case: https://dl.dropbox.com/u/3417415/testimonials/carmen_villadar.html
Your rule should be applied to
img.testimonial-pic. You are currently applying the rule to images inside an element with class.testimonial-pic.