Skip to main content

Rounded Corners

There are many different methods for achieving rounded corners. Below are a few selected techniques making use of various technologies. Choose a method that's right for your users.

CSS2

This method was inspired by Mike Cherim's Smart Corners. However, instead of using 4 separate images, we're only using one very small image. A few IE 6 issues have also been corrected in this version.

HTML

<div class="rnd">
    <span class="tr"></span>

        <!-- Content of div here -->
        
    <span class="bl"></span>
    <span class="br"></span>
</div>

CSS

.rnd {
    background: #189034 url(img/rnd4.gif) no-repeat -9px -9px;
    width: 30em;             /* must have a width for IE6 (not necessarily fixed, but not "auto") */
    height: auto;
    position: relative;
    padding: 20px;
    overflow: hidden;        /* fix for ie 6 */
}

.tr, .bl, .br {
    position : absolute;
    width: 9px;
    height: 9px;
    display: block;
    background: transparent url(img/rnd4.gif) no-repeat;
    overflow: hidden;        /* fix for ie 6 */
}

/* fix for IE 6 - alternatively this can be placed in an IE6 conditional comment/css */
* html .bl, * html .br, * html .tr { margin: 0 -1px -1px 0; } 

.tr { background-position: 0 -9px; top: 0; right: 0; }
.bl { background-position: -9px 0; bottom: 0; left: 0; }
.br { right: 0; bottom: 0; }

Image

Rounded Corner Image - Method 1

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis mattis nisl at pharetra. Morbi dictum, metus in interdum pellentesque, massa nunc lacinia felis, id dictum sem eros eu urna. Curabitur nisi felis, faucibus vitae tincidunt non, euismod eget lectus.

How does it work? We are using CSS Sprites and a clever layout for our image. A <span> is absolutely positioned in three of the corners with the exact dimensions to hold a quarter of our image (in our demo above, the dimensions of a single corner are 9px by 9px).

The image is applied as a background-image to each <span>. background-position is then used to position the image so the portion that contains our corner fits perfectly in the <span> - the rest of the image is hidden. (This is essentially how CSS Sprites work).

The same technique is applied to the <div> to display our fourth corner and save us an additional <span>. Your corners may not be exactly 9px by 9px, so remember to replace every "9px" in the CSS with the dimensions of your corner.

How do you create the image?

  1. Using your image editing software (eg: Photoshop) first create the rounded box.
  2. Cut out one of the corners as small as you can without losing too much aliasing. Note the dimensions of this corner.
  3. Rotate this image 90 degrees to get your next corner (rather than cut out each corner, they may not be identical). Repeat this to create all 4 corners.
  4. Create a new image file to hold these 4 corners.
  5. Place the top-left corner at the bottom-right of the image, and the bottom-right at the top-left.
  6. Place the top-right corner at the bottom-left of the image, and the bottom-left at the top-right.
  7. It should look a little like a star (see our example above). Save.

Note: For corners with a large radius, it is recommended a transparent PNG/GIF is used to avoid having corners overlapping content.

Pure CSS3

This is the future of rounded corners - a few lines of CSS with no additional images or markup. Unfortunately, only Mozilla (Firefox) and Webkit (Safari 3 & Chrome) browsers support this, so no IE just yet.

HTML

<div class="rnd">
    
    <!-- Content of div here -->
        
</div>

CSS

.rnd { 
    -moz-border-radius: 10px; /* Mozilla */
    -webkit-border-radius: 10px; /* Webkit */
    border-radius: 10px;
}

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis mattis nisl at pharetra. Morbi dictum, metus in interdum pellentesque, massa nunc lacinia felis, id dictum sem eros eu urna. Curabitur nisi felis, faucibus vitae tincidunt non, euismod eget lectus.

CSS3 with IE fallback

We can allow Firefox/Webkit users to render pure CSS3 rounded borders, while providing a fallback to the CSS2 method for IE users. Unfortunately, this method won't work at all in pre Opera 10.5.

HTML (same as above)

<div class="rnd">
    <span class="tr"></span>

        <!-- Content here -->
        
    <span class="bl"></span>
    <span class="br"></span>
</div>

CSS

.rnd {
    background: #189034;
    padding: 20px;
    width: 30em;                   /* must have a width for IE6 (not necessarily         */
                                   /* fixed, but not "auto")                             */
    height: auto;
    position: relative;            /* not necessary for Firefox/Webkit, but will be used */
                                   /* in IE, so best to leave for consistency            */

    -webkit-border-radius: 9px;    /* CSS3 rounded borders for Safari                    */
    -moz-border-radius: 9px;       /* CSS3 rounded borders for Firefox                   */
    border-radius: 9px;
}

/* hide the spans completely in case "span" is styled else where */
.rnd .tr, .rnd .bl, .rnd .br { display: none; }

Conditional Comments

<!--[if IE]>
<style type="text/css">

    .rnd {
        background: #189034 url(img/rnd4.gif) no-repeat -9px -9px;
        overflow: hidden; /* fix for ie 6 */
    }

    .rnd .tr, .rnd .bl, .rnd .br {
        position : absolute;
        width: 9px;
        height: 9px;
        display: block;
        background: transparent url(img/rnd4.gif) no-repeat;
        overflow: hidden; /* fix for ie 6 */
    }
    
    /* fix for IE 6 - alternatively this can be placed in an IE6 conditional comment/css */
    * html .rnd .bl, * html .rnd .br, * html .rnd .tr { margin: 0 -1px -1px 0; } 

    .rnd .tr { background-position: 0 -9px; top: 0; right: 0; }
    .rnd .bl { background-position: -9px 0; bottom: 0; left: 0; }
    .rnd .br { right: 0; bottom: 0; }
    
</style>
<![endif]-->

How does it work? The CSS3 properties will be implemented by capable browsers (Firefox/Safari) and ignored by others (IE/Opera). Using Conditional Comments, we can instruct all versions of IE to implement the CSS2 method above, while all non-IE browsers will ignore the styling inside the Conditionals.

Semantic CSS3 with IE fallback

This method allows us to remove those 3 <span> tags from the HTML and insert them dynamically in Internet Explorer only. This means we are able to provide perfectly semantic CSS3 markup to all non IE browsers.

HTML

<div class="rnd">
    
    <!-- Content of div here -->
        
</div>

CSS

.rnd {
    background: #189034;
    padding: 20px;
    width: 30em;                   /* must have a width for IE6 (not necessarily         */
                                   /* fixed, but not "auto")                             */
    height: auto;
    position: relative;            /* not necessary for Firefox/Webkit, but will be used */
                                   /* in IE, so best to leave for consistency            */

    -webkit-border-radius: 9px;    /* CSS3 rounded borders for Safari                    */
    -moz-border-radius: 9px;       /* CSS3 rounded borders for Firefox                   */
    border-radius: 9px;
}

Conditional Comments

<!--[if IE]>
<style type="text/css">

    .rnd {
        background: #189034 url(img/rnd4.gif) no-repeat -9px -9px;
        overflow: hidden; /* fix for ie 6 */
    }

    .rnd .tr, .rnd .bl, .rnd .br {
        position : absolute;
        width: 9px;
        height: 9px;
        display: block;
        background: transparent url(img/rnd4.gif) no-repeat;
        overflow: hidden; /* fix for ie 6 */
    }
    
    /* fix for IE 6 - alternatively this can be placed in an IE6 conditional comment/css */
    * html .rnd .bl, * html .rnd .br, * html .rnd .tr { margin: 0 -1px -1px 0; } 

    .rnd .tr { background-position: 0 -9px; top: 0; right: 0; }
    .rnd .bl { background-position: -9px 0; bottom: 0; left: 0; }
    .rnd .br { right: 0; bottom: 0; }
    
</style>
<script type="text/javascript">
    function addCorners(classname)  {
        var a = []; var re = new RegExp('\\b' + classname + '\\b');
        var els = document.getElementsByTagName("body")[0].getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++)
            if(re.test(els[i].className))a.push(els[i]);
        for (var i=0; i<a.length; i++) {
            var tr = document.createElement('span');tr.className="tr";
            var bl = document.createElement('span');bl.className="bl";
            var br = document.createElement('span');br.className="br";
            a[i].insertBefore(tr, a[i].firstChild);
            a[i].appendChild(bl); a[i].appendChild(br);
        }
    }
    window.onload = function(){addCorners("rnd");} /* Change "rnd" to the name of your your class */
</script>
<![endif]-->

How does it work? This works the same as the method before except now we no longer need to include additional markup in the HTML (which is unnecessary for CSS3 capable browsers anyway). Instead, Internet Explorer (and only Internet Explorer) will execute a Javascript function that dynamically inserts the additional markup for the CSS2 rounded corners.

Can we tidy this up a bit? Sure. Create two new files - one to hold the CSS for IE users (the CSS in the Conditional Comments above) and one to hold the Javascript (again, in the Conditional Comments). You can now replace that long Conditional Comment above with this:

Conditional Comments

<!--[if IE]>
    <link href="ie_corners.css" type="text/css" rel="stylesheet">
    <script type="text/Javascript" src="ie.js"></script>
<![endif]-->

DEMO - Semantic CSS3 Rounded Corners with IE fallback

Javascript

Some frameworks provide plugins that allow you to achieve rounded corners. This is a good method to use if you're already using a Javascript framework, but remember that it won't provide CSS3 rounded corners to any browsers as the above method does.

Rounded Corner Generators

A number of websites provide an online generator that will create the rounded corner images, HTML and CSS for you. Keep in mind that they appear to implement lesser techniques than those above.

Further Reading

Back to top