Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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.

Problem courtesy of: David Faux

Solution

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

HTML

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;
}​
Solution courtesy of: abhshkdz

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×