Rounded corner CSS without images

by · August 6, 2009

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;
}

Code language: CSS (css)
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;
}

Code language: CSS (css)
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.

Tags:

You may also like...

38 Comments

  1. Brandon says:
    8 August, 2009, 3:49  

    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.

    Reply
  2. John says:
    10 August, 2009, 21:56  

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

    Reply
  3. John says:
    10 August, 2009, 22:00  

    ok now checked this !

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

    Reply
  4. John says:
    10 August, 2009, 22:18  

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

    Reply
  5. Viral Patel says:
    10 August, 2009, 22:19  

    @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.

    Reply
  6. Jago says:
    12 August, 2009, 1:34  

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

    Reply
  7. Liam Dawe says:
    16 August, 2009, 19:23  

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

    Reply
  8. Viral Patel says:
    16 August, 2009, 19:34  

    @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..

    Reply
  9. sumeet says:
    13 October, 2009, 16:13  

    This script is not working on IE(Internet Explorer)

    Reply
    • Ryan says:
      26 May, 2011, 15:02  

      Yeah – it says that in the article man.

      Reply
  10. bhairab says:
    16 October, 2009, 16:23  

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

    Reply
  11. Peter says:
    14 November, 2009, 19:52  

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

    Reply
  12. Darren says:
    15 November, 2009, 4:45  

    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.

    Reply
  13. randy montanez says:
    17 November, 2009, 21:24  

    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

    Reply
  14. Ashok says:
    30 November, 2009, 10:47  

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

    Reply
  15. Manjeet Singh says:
    2 February, 2010, 17:53  

    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}

    Reply
  16. ds rajawat says:
    29 March, 2010, 17:46  

    .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;
    }

    Reply
  17. shivram says:
    1 April, 2010, 17:54  

    you rounded corners by css is not working ie6

    Reply
  18. jaya says:
    7 May, 2010, 18:36  

    The corner radius issue of IE gonna solve.

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

    Reply
  19. jatin malohotra says:
    26 June, 2010, 17:42  

    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

    Reply
  20. chef says:
    27 September, 2010, 14:12  

    great! thank you.

    Reply
  21. vikasgoel says:
    25 February, 2011, 15:09  

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

    Reply
  22. rakesh says:
    9 April, 2011, 12:11  

    Dear,

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

    Reply
  23. mina says:
    11 May, 2011, 18:38  

    Thank you :)

    Reply
  24. sikander says:
    11 January, 2012, 2:15  

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

    Reply
  25. sikander says:
    11 January, 2012, 2:17  

    not working in ie

    Reply
  26. kerala travel says:
    16 January, 2012, 16:10  

    use htc file for batter result in ie below 9 version

    Reply
  27. Karthikeyan says:
    21 January, 2012, 16:48  

    Thanks a lot…..

    Reply
  28. Udhaya47 says:
    10 February, 2012, 19:04  

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

    Reply
  29. dhanesh mane says:
    9 April, 2012, 17:20  

    hey it works aw some.. love it.

    Reply
  30. ketan says:
    2 May, 2012, 5:22  

    its not work in ASP 2008

    Reply
  31. James says:
    3 June, 2012, 5:29  

    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!

    Reply
  32. Rajesh says:
    27 July, 2012, 14:45  

    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

    Reply
  33. phphunger says:
    27 July, 2012, 16:43  

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

    Reply
  34. santosh says:
    6 November, 2012, 12:35  

    Thankx

    Reply
  35. Rinky Jaiswal says:
    30 March, 2013, 17:01  

    Respectively Thank You

    Reply
  36. Mukesh kumar kushwaha says:
    5 September, 2013, 12:29  

    good website learn for web development

    Reply
  37. tatyaso patil says:
    21 January, 2014, 10:16  

    Thebery good atricle for freshers

    Reply

Leave a Reply

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

Follow: