General CSS Questions

here is my current css

.coach {width:310px; padding:5px; height:120px; float:left;  text-align:center; background:#eee; /*border-radius:8px;*/ border:1px solid #ccc; margin:0 8px 8px 0;}

.coach img {float:left; height:118px; width:90px; border-radius:8px; box-shadow:0px 2px 3px #888888; margin-right:5px}

.coach img a {float:left; border:none; padding:0;}

so the code above displays a business card style listing for all coaches on the coach page. When a user clicks the image, they are taken to the coach’s bio page. On the bio page, I want to maintain just the img class with rounded corners. What is the best method to do this?

I found this explanation on stackoverflow:

a .someclass
Selects any (descendant of an 'a' tag) that has a class of 'someclass'

<a href="#example">
    <span class="someclass">...</span>
</a>
While

.someclass a
Selects any (descendant of a tag with a class of 'someclass') that is an 'a' tag.

<div class="someclass">
    <a href="...">...</a>
</div>
And

a.someclass /* Note absence of spaces */
Selects any 'a' tag with a class of 'someclass'.

<a href="..." class="someclass">...</a>

When I use my current code, the image on the bio page strips the rounded corners.