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


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=""   class="frame">

and CSS code is:

border-image: url(' 55454.jpg') 80 80 82 84 repeat repeat;
border-width: 60px;
height: 300px; width: 500px; 
Problem courtesy of: Gaurav Pandey


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

Solution courtesy of: Viswanath D


Target the img that is inside your div. For instance

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

You can round the corners of the image with

.container img{


Discussion courtesy of: dingo_d

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