Rounded corner CSS without images

rounded-corner-cssLot of webdesigners uses rounded corner tables and divs to display information on the webpage. Not only it looks sleek but also eye appealing.

The problem with coding such DIVs is that there is no standard way of rounding off the corners available in CSS (till now). Designers overcome this problem by using corner images to display around a DIV to make it look rounded. But this approach is not always advisable as it makes the code tedious.

There are lot of code snippets around to create rounded corner DIVs using images. But here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

Add following CSS attributes to your element to make its corner round.

selector {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid;
}

all-corner-rounded-css

To make only Top Left corner rounded, use following CSS.

selector {
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border: 1px solid;
}

top-left-corner-rounded-css

Similarly use topleft, top-left, bottom-right, bottomright etc for rounding off the corners of the DIV.

Online Demo

Click here to view Demo

Get our Articles via Email. Enter your email address.

You may also like...

38 Comments

  1. Brandon says:

    So it looks like your examples are images, instead of rendering the actual rounded corners. What does this look like when rendered in IE. You should put a link to an example page so users can quickly view in different browsers.

  2. John says:

    Yep it does exactly seem encouraging when your examples are ALL images

  3. John says:

    ok now checked this !

    works exactly as expected !
    that is it DOES NOT work in IE

  4. John says:

    ok just checked it out
    as suspected does not work in IE

  5. Viral Patel says:

    @Brandon: Thanks for the comment. I have added the Demo link at the end.

    @John: I have already mentioned that this technique will works only in CSS3-compatible browser and will not work in Internet Explorer. Also have added Demo page link so that you can check this in different browser.

  6. Jago says:

    Guys do you know when gonna decide Microsoft that IE will use CSS3?

  7. Liam Dawe says:

    A great tutorial, i would deffinately use this if IE accepted it as well, IE is so frustrating to work with!

  8. Viral Patel says:

    @Liam, Although being most used browser, IE some how is frustrating for web developers :).. I have always a hard time keeping things compatible with IE..

  9. sumeet says:

    This script is not working on IE(Internet Explorer)

    • Ryan says:

      Yeah – it says that in the article man.

  10. bhairab says:

    This script is not working on IE(Internet Explorer). Plz keep a script for IE.

  11. Peter says:

    @ all : Claims IE compatibility : http://code.google.com/p/curved-corner/

  12. Darren says:

    These scripts aren’t supposed to work for IE. They’re using CSS extensions specific to Webkit and Gecko. They aren’t official CSS standards.

  13. randy montanez says:

    hey can you help me about the javascript .. coz im realy suck to understand about java..help me guys.. i dont know how to perform all the codes and how to execute some codes

  14. Ashok says:

    .. for browser compatible rounded corner visit this page : http://ashko.blogspot.com/2008/05/just-simple-css-code-of-7-lines-for.html

  15. Manjeet Singh says:

    Try this! with transparent gif for rounded corners effect.

    Corner without images

     
    body{padding: 20px;background-color:#00CC00;}
    b.r1 img{width: 3px; height:1px; background-color:#00CC00; float:left; position:relative; top: 0px; left:0px;}
    b.r2 img{width: 2px; height:1px; background-color:#00CC00; float:left; position:relative; top: 1px; left:-3px;}
    b.r3 img{width: 1px; height:1px; background-color:#00CC00; float:left; position:relative; top: 2px; left:-5px;}
    b.r33 img{width: 1px; height:1px; background-color:#00CC00; float:left; position:relative; top: 3px; left:-6px;}
    b.r4 img{width: 3px; height:1px; background-color:#00CC00; float:right; position:relative; top: 0px; right:0px}
    b.r5 img{width: 2px; height:1px; background-color:#00CC00; float:right;  position:relative; top: 1px; right:-3px}
    b.r6 img{width: 1px; height:1px; background-color:#00CC00; float:right;  position:relative; top: 2px; right:-5px}
    b.r66 img{width: 1px; height:1px; background-color:#00CC00; float:right;  position:relative; top: 3px; right:-6px}
    
  16. ds rajawat says:

    .round-corner {
    width:430px;
    height:155px;
    border:1px solid red;
    margin:5px 0 10px 0;
    padding:10px;
    float:left;
    /*-moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    -o-border-radius:8px;
    }

  17. shivram says:

    you rounded corners by css is not working ie6

  18. jaya says:

    The corner radius issue of IE gonna solve.

    http://kbala.com/ie-9-supports-corner-radius/

  19. hey can you help me about the javascript .. coz im realy suck to understand about java..help me i dont know how to perform all the codes and how to execute some codes

  20. chef says:

    great! thank you.

  21. vikasgoel says:

    #box-round{
    -moz-border-radius:8px;
    -o-border-radius:8px;
    -khtml-border-radius:8px;
    webkit-border-radius:8px;
    border:#FF0000 1px solid;
    }

  22. rakesh says:

    Dear,

    I test it but it is not working in IE9. Can you please give me help for IE9.

  23. mina says:

    Thank you :)

  24. sikander says:

    thanks a lot , very easy and effective. mostly people do it with images that is not good thanks again

  25. sikander says:

    not working in ie

  26. use htc file for batter result in ie below 9 version

  27. Karthikeyan says:

    Thanks a lot…..

  28. Udhaya47 says:

    Thank you…It’s working in both IE and Firefox

  29. dhanesh mane says:

    hey it works aw some.. love it.

  30. ketan says:

    its not work in ASP 2008

  31. James says:

    Hi there everyone,

    I’m just getting into webdev and was wondering if you could give me some help when it comes to css3 border radius. I just can’t seem to find any material online that addresses the look I’m after.

    Basically I have 2 sections which form an L shape. My question is how could I make the inner bottom left corner of the L curved? I know how to make corners curve inwards as it were but in this problem I’d like one to curve outwards to smoothly meet the adjoining egde .. best way for you to visualise this is look at the way your thumb meets the side of your hand with a webbed effect …. I hope you can understand what I’m on about.

    Any advice is much appreciated – Thanks!

  32. Rajesh says:

    I came accross below link and the solution works in all browsers including IE.
    supports FF, Chrome, Safari, IE6, IE7, IE8 (Os doesn’t matter)..
    http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
    add below lines to your style and place “border-radius.htc” in root directory.(download from above link)
    { border: 1px solid #d7d7d7;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    behavior: url(border-radius.htc);
    }

    I have used this in my website http://www.lic-bangalore.com
    -Rajesh A

  33. phphunger says:

    nice tip..but problem with ie7 and ie8..

  34. santosh says:

    Thankx

  35. Respectively Thank You

  36. good website learn for web development

  37. Thebery good atricle for freshers

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>