CODEWITHSUNDEEP
htmlcss
dangerChihuahua007
dangerChihuahua007

Reputation: 20915

How do I make the border of my image along the curve?

I made a JS Fiddle in which I embed an image with rounded corners.

http://jsfiddle.net/JDRSc/

Here is the CSS for the img tag.

img {
  -webkit-border-radius: 20px;
  border: 20px solid #000;
  border-radius: 20px;
}​

How do I make the border of the image follow the curve of the rounded corners? Right now, the image itself still has sharp corners.

Upvotes: 2

Views: 1371

Answers (2)

abhshkdz
abhshkdz

Reputation: 6365

Here, http://jsfiddle.net/JDRSc/7/

HTML

<div id="wrapper">
    <img src="http://kittens-for-sale.net/wp-content/uploads/2011/11/kittens-for-sale-5.jpg" alt="" />
</div>

​CSS

#wrapper {
    display:inline-block;
    border: 10px solid black;
    -moz-border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
    -webkit-border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
    border-radius: 30px; /*Sum of #wrapper border + img border-radius*/
}    

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

Upvotes: 2

Alaa Badran
Alaa Badran

Reputation: 1858

To manage the border radius to take effect inside and outside, you should give a value of border-radius to be more than the border-size.

This will fix it.

Try:

border-size:10px;
border-radius:15px;

it will work.

Upvotes: 1

Related Questions