magnific popup: Why doesn't border radius work on the image and how can i make it work?

Question

I have the magnific popup plugin and i want the images in it to have a border radius but i can't seem to get it working.

le CSS

img.mfp-img {
    border-radius: 5px;
}

le HTML

<div class="top">
                                <a class="overlay mgp-img" href="images/image-standard-1-lg.jpg">
                                    <i class="fa fa-search md"></i>
                                </a>
                                <a href="#"><img class="img-responsive" src="images/image-standard-1.jpg" alt="a"></a>
                            </div>

This is my code. I also tried to use overflow:hidden but i still got no results.

I noticed some of you mentioned using vendor prefixes. That doesn't work either, i think it has something to do with the plugin itself and not the css.

Answer 1

Remove the padding from the img.mfp-img selector:

img.mfp-img {
    padding: 0;
    margin: 40px auto;
      border-radius: 10px;
}

It's a good idea to put the 40px value on the margin, or you caption will stay on top of the image.

By default .mfp-figure::after has a background-color and a box-shadow , so you should remove it or apply the border-radius here too.

.mfp-figure::after {
    background: transparent;
    border-radius: 10px;
}

Hope that helps.

Answer 2

Here is an example of border radius in action: http://jsfiddle.net/CdES2/

HTML: (using random image from google)

<img src="http://fullwallpaper.tk/wp-content/uploads/kitten-3.jpg" style="width: 50%; height: 50%;"/>

CSS:

img {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

Output:

Answer 3

Try adding adding vendor prefix before the border-radius.

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