Lets learn Web Designing

How to make rounded corner images using CSS3

How make rounded corner images using CSS3

Rounded corners in Website design has been a trend for a long time. Almost every project involves some or the other kind of rounded corner boxes. Designers and developers have used different techniques for developing rounded corner boxes. Many of these techniques involve css, javascript, jQuery plugins, and images.

Now looking at the extensive use of the rounded corners in Web Design, W3C has also come up with a new property in CSS3, which will make the rounded corners much easier to use and implement. This property is the “border-radius” property. Almost all the major browsers (except Internet Explorer) have started using this property, with their vendor specific prefixes (-moz-border-radius, and -webkit-border-radius). This property is very easy to use; And using this property will give a rounded corner to almost any element in the html document.

Problem: “border-radius” property doesnot work on images

With the use of “border-radius” property, the rounded corners are easily achievable on div tags, spans, and other html elements. Now, the problem is when you use the border-radius with an img element, the border of the image gets rounded, and the image is drawn above the border, so it is not rounded (look at the example below).

Car

To the image displayed above (img tag), we have given the following styles:

<style type="text/css">
img{
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}
</style>

Here we observe one thing that by giving the “border-radius” property to the <img> tag the borders get rounded, but the image does not. The image flows out of the border.

Solution: The tricky part!!!

To solve this above discussed issue, we should do the following steps:

  1. Wrap the <img> element with a div tag which should be having the same dimensions (height and weight) as the <img> tag.
  2. To this wrapping div tag, specify the same original image as the background image.
  3. To the original image <img> tag, give the property “opacity: 0“.

Now, after following the steps as mentioned above, we have the following html markup:

<div>                                             /* DIV TAG STARTS HERE WITH SAME DIMENSIONS AS IMAGE */
    <img src="images/test.jpg" alt="testing" />   /* IMAGE TAG */
</div>                                            /* END DIV TAG */

Now, we are going to give the following styles to the img and div tag.

<style type="text/css">
div{
    width: 550px;                                          /* Width same as the image width */
    height: 350px;                                         /* Height same as image height */ 
    background: url("images/test.jpg") no-repeat 0 0;      /* Background Image same as the Original image being wrapped by the div tag */
    border: 4px solid #fff;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    border-radius: 30px;
}

img{
    opacity: 0;                                            /* Hide the original image being wrapped by the div tag */
}
</style>

The Final Result

After giving the above mentioned markup, and the styles, we will achieve that looks something like this:

Car

The rounded corners shown in the examples above will not appear in Internet explorer. The “border-radius” property is not supported by Internet Explorer as of now.
About these ads

7 responses

  1. Way to focus and straight to point, i love it. Keep up the good work.

    December 29, 2010 at 4:34 pm

  2. Nice idea!

    Why you still have a IMG tag? Is it only for SEO purpose I presume?

    Cheers

    January 24, 2011 at 7:24 pm

    • Yes, That is one reason, and with the img tag wrapped inside the div, the image is always available to copy or download.

      January 25, 2011 at 8:59 am

  3. Pingback: Thumbnail Image Rounded Corners w CSS (or any other good method) | SeekPHP.com

  4. Pingback: Thumbnail Image Rounded Corners w CSS (or any other good method) | Q&A System

  5. Anonymous

    Solution: The tricky part!!!

    December 30, 2011 at 2:39 pm

  6. Pingback: HOW TO MAKE A SIMPLEST (IMAGE) SLIDER USING JQUERY IN 10 EASY STEPS How to make a simplest (image) slider using jQuery in 10 easy steps What are we doing here ? 7 Best Tutorials on CSS / HTML 7 Best Tutorials on CSS / HTML CSS3 Gradients for all browse

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.