CODEWITHSUNDEEP
imageimage-processingrounded-cornerscss
tim peterson
tim peterson

Reputation: 24305

How to round corners of images?

what's the best way to programatically (using HTML, CSS, JavaScript, and/or PHP) round the corners of images?

I'm been playing with this CSS-only method: http://maxvoltar.com/archive/rounded-corners-on-images-css-only

The key features of this method are:

  1. wrapping the image into an element where you can round the borders and where you can set the wrapper element background as the desired image.
  2. setting the actual image opacity to 0
  3. floating the wrapper left so the image and wrapper line up.

here's the HTML: 

<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>​

here's the CSS:

img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}

p { 
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}

Unfortunately, this code fails when you re-size the images. Please compare the following 2 fiddles to see what I mean:

image NOT manually sized: http://jsfiddle.net/trpeters1/wxXAn/1/

image set to 50px wide/50px height: http://jsfiddle.net/trpeters1/wxXAn/2/

Is there a way to rescue this method if you want to preserve the ability to re-size the image width/height? Are there better ways than this method?

UPDATE thanks to Tom (see below), this question is solved. The key to enabling re-sizing is to set BOTH the image and wrapper heights and widths to the same size. Please see this fiddle and compare with the one's above to see what I mean: http://jsfiddle.net/trpeters1/wxXAn/13/

Please note in this fiddle that the <p> AND <img> tags height and widths are BOTH set to 50px.

Upvotes: 1

Views: 4984

Answers (1)

TomP89
TomP89

Reputation: 1460

I managed to get it to work by using the following code

p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}

I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.

Hope this is what you are after.

Thanks

Upvotes: 1

Related Questions