attila2452 Posted April 6, 2011 Share Posted April 6, 2011 Is it possible to give an Image Rounded Corners with css like this: roundedCornerImage{border: inside 30px solid #FFFFFF;border-radius:30px;-webkit-border-radius:30px;} something like that? Link to comment Share on other sites More sharing options...
Spunky Posted April 6, 2011 Share Posted April 6, 2011 Is it possible to give an Image Rounded Corners with css like this:roundedCornerImage{border: inside 30px solid #FFFFFF;border-radius:30px;-webkit-border-radius:30px;} something like that? Thats pretty much exactly how it is done. It's using CSS3.http://www.w3schools.com/css3/css3_borders.aspOnly, I found that even though it doesn't say it on that site, you will need to do -moz-border-radius if you are using Mozilla. Link to comment Share on other sites More sharing options...
Spunky Posted April 6, 2011 Share Posted April 6, 2011 Im sorry, I just realized you asked about giving an image rounded corners, my bad. Im not sure, but its worth a shot. Link to comment Share on other sites More sharing options...
Ingolme Posted April 6, 2011 Share Posted April 6, 2011 If CSS won't give the <img> element round corners then you have two other options: Make an empty <div> with the width and height of the image, use the image as a background and give the <div> a border radius. Open the image in an image editor and cut the corrners, then saving it as PNG.In photoshop you can use a rectangular selection with round borders, inverting that selection and pressing "delete" to get rid of the corners. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 6, 2011 Share Posted April 6, 2011 Make an empty <div> with the width and height of the image, use the image as a background and give the <div> a border radius.You'll probably also have to give the div overflow: hidden; if I remember correctly. Link to comment Share on other sites More sharing options...
Ingolme Posted April 6, 2011 Share Posted April 6, 2011 The div doesn't need a hidden overflow because a background-image never gets outside the element. It would need overflow if you were trying to use the div to cut a portion of an image element inside it. Link to comment Share on other sites More sharing options...
ShadowMage Posted April 6, 2011 Share Posted April 6, 2011 The div doesn't need a hidden overflow because a background-image never gets outside the element. It would need overflow if you were trying to use the div to cut a portion of an image element inside it.Ah, yes. You are right. I missed the part where you said to use the image as the background... Link to comment Share on other sites More sharing options...
Spunky Posted April 7, 2011 Share Posted April 7, 2011 If CSS won't give the <img> element round corners then you have two other options:Make an empty <div> with the width and height of the image, use the image as a background and give the <div> a border radius. Open the image in an image editor and cut the corrners, then saving it as PNG.In photoshop you can use a rectangular selection with round borders, inverting that selection and pressing "delete" to get rid of the corners. Try the empty div one first. The great thing about this CSS3 technique is that it no longer requires the use of images in order to achieve this effect. The downside being stupid browsers like IE doesn't support it. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 7, 2011 Share Posted April 7, 2011 Try the empty div one first. The great thing about this CSS3 technique is that it no longer requires the use of images in order to achieve this effect. The downside being stupid browsers like IE doesn't support it.UNLESS you download ie-css3.htc (google) and use it likeroundedCornerImage{border: inside 30px solid #FFFFFF;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius: 30px;behavior: url(ie-css3.htc);} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.