Your Customers are Mobile, you will be too …

This is more of a tip than an actual tutorial but we will be showing you how to round off the corners of an image using just CSS3. This tip will work for all browsers except for a few older IE versions.

CSS3: Rounding off Corners of Images Tips

Rounding the corners of an image with CSS3 is actually quite simple. Once you have your image embedded in your web page all we need to do is apply the border radius property to a class then apply it to the images you want rounded off. Although you can apply it directly to the IMG tag I advise against it. Otherwise you could end up rounding off images you really don’t want rounded.

So in your CSS file set up a new class.

.imagerounded {   }

Now we need to add a border radius.

.imagerounded { border-radius: 20px; }

This will handle all modern browsers. Older web-kit and FireFox versions however will need an extra line of code each. Older versions of IE have nothing you can do to fix it. So we will now add the code for our older browsers.

.imagerounded { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; }

Now all we need to do is apply this class to any images we wish to have this effect on.

This is the final effect. You can assign a diferent border radius to each corner to acheive whatever effect you are looking for.

border-radius: 20px 15px 10px 5px;

First number is for the top left hand corner, second is top right, third is bottom right and last number is for the bottom left.

Hope you found this helpful and see you again next time.

One Response to CSS3: Rounding off Corners of Images Tips

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: