How to use border-radius property with border-image to curve the corners.?

Problem

I am trying to curve the corners of the image inside the frame but I am unable to do it. I am using basic border-image property and using border-radius property to curve the corners. I do not know what I am doing wrong here. Please check the syntax:

<img src="http://blog.queensland.com/files/2013/08/Damien-Leze_WIDE_ANGLE_1.jpg"   class="frame">

and CSS code is:

img.frame{
border-image: url('http://thumbs.dreamstime.com/x/het-ionen-frame-van-het-water- 55454.jpg') 80 80 82 84 repeat repeat;
border-width: 60px;
height: 300px; width: 500px; 
}
Problem courtesy of: Gaurav Pandey

Solution

You need to set overflow:hidden to your frame. And add border-radius to your image. That's it

Solution courtesy of: Viswanath D

Discussion

Target the img that is inside your div. For instance

<div class="container">
     <img src="imageurl.jpg" />
</div>

You can round the corners of the image with

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

Fiddle

Discussion courtesy of: dingo_d

This recipe can be found in it's original form on Stack Over Flow.