round corners in a image

Question

I want to display my images with rounded corners in a web page. i want to bring the below effect on my image in a page see the image

Answer 1

You can use the jQuery Curvy Corners plugin that does its job in cross-browser fashion.

Answer 2

For a CSS solution try this

<img src="yourimg.jpg" style="border:1px #000 solid;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;"/>

Note: border-radius is a CSS3 tag so it will not work in old browsers

Answer 3

i use a pure html+css solution, guaranteed crossbrowser. An overlay.

Get a picture with your border in it. With the area where you want to show the picture transparent. Then position it on top of a normal image. Like so:

.overlayable         { position:relative; display:block; }
.overlayable span    { position:absolute; top:0px; left:0px; }

    <a href="http://link.com" class="overlayable">
      <img src="imageToShow.png" alt="awsome picture" />
      <span>
        <img src="overlayImageWithRoundedCorners.png" alt="" />
      </span>
    </a>

But you can do it with a <div> aswell if you like.