Jump to content

Round corners in Image.


attila2452
 Share

Recommended Posts

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?

Edited by Attila2452
Link to comment
Share on other sites

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

If CSS won't give the <img> element round corners then you have two other options:

  1. 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.
  2. 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

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

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

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

If CSS won't give the <img> element round corners then you have two other options:
  1. 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.
  2. 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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...