边框半径出现在图像下方

Question

building a gallery and the border radius around my anchors is not cropping my image. and I can't see why.

this is the html

<div id="Portfolio_page">


<div id="portfolio_wrapper">

<a class="thumb" href="img/image-2.jpg" data-lightbox="image-1" title="My caption"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>
<a class="thumb"  href="img/image-2.jpg" data-lightbox="image-1" title="My caption"><img src="img/image-2.jpg" alt="" height="150px" width="150px"></a>

</div>

</div>

and here's the css

#portfolio_wrapper{

width:100%;
text-align:center;

}



 #portfolio_wrapper a {
 border-style:solid;
 border-radius:50%;
padding:2px;
text-decoration: none;
display:inline-block;
width: 150px;
height: 150px;
margin: 10px;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
 background-image:url('img/image-2.jpg');
 background-color:#cccccc;


}

#portfolio_wrapper a:hover {
opacity: .7;
-webkit-transform: scale(1.05,1.05);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1.05,1.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}

I don't know what else to say but i have to put more details to be able to post this question. any help would be much appreciated.

Answer 1

Try to add overflow:hidden to your anchors:

Fiddle Demo

Now everything outsite the border-radius (the overflowing image) will be hidden.

Answer 2

Set

overflow: hidden;

to the anchor css