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



38 Comments

  • Brandon 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.

  • John 10 August, 2009, 21:56

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

  • John 10 August, 2009, 22:00

    ok now checked this !

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

  • John 10 August, 2009, 22:18

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

  • Viral Patel 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.

  • Jago 12 August, 2009, 1:34

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

  • Liam Dawe 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!

  • Viral Patel 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..

  • sumeet 13 October, 2009, 16:13

    This script is not working on IE(Internet Explorer)

    • Ryan 26 May, 2011, 15:02

      Yeah – it says that in the article man.

  • bhairab 16 October, 2009, 16:23

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

  • Peter 14 November, 2009, 19:52

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

  • Darren 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.

  • randy montanez 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

  • Ashok 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

  • Manjeet Singh 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}
    
  • ds rajawat 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;
    }

  • shivram 1 April, 2010, 17:54

    you rounded corners by css is not working ie6

  • jaya 7 May, 2010, 18:36

    The corner radius issue of IE gonna solve.

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

  • jatin malohotra 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

  • chef 27 September, 2010, 14:12

    great! thank you.

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

  • rakesh 9 April, 2011, 12:11

    Dear,

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

  • mina 11 May, 2011, 18:38

    Thank you :)

  • sikander 11 January, 2012, 2:15

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

  • sikander 11 January, 2012, 2:17

    not working in ie

  • kerala travel 16 January, 2012, 16:10

    use htc file for batter result in ie below 9 version

  • Karthikeyan 21 January, 2012, 16:48

    Thanks a lot…..

  • Udhaya47 10 February, 2012, 19:04

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

  • dhanesh mane 9 April, 2012, 17:20

    hey it works aw some.. love it.

  • ketan 2 May, 2012, 5:22

    its not work in ASP 2008

  • James 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!

  • Rajesh 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

  • phphunger 27 July, 2012, 16:43

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

  • santosh 6 November, 2012, 12:35

    Thankx

  • Rinky Jaiswal 30 March, 2013, 17:01

    Respectively Thank You

  • Mukesh kumar kushwaha 5 September, 2013, 12:29

    good website learn for web development

  • tatyaso patil 21 January, 2014, 10:16

    Thebery good atricle for freshers

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current day month ye@r *