Perfect Rounded Corners with CSS

52 responses to “Perfect Rounded Corners with CSS”

1. 

   Extend Studio 2009/11/10 1:22 am

   You could try FlexiPanels CSS, Dreamweaver extension that generates rounded corners css boxes from an easy to use interface.

2. 

   Nicolas 2009/11/12 2:38 am

   Thanks for the tip.

   I had some corners that would ideally have been round, but I had a dynamic change-color script that would have forced me to make the corners in Photoshop in multiple colors or something.

   I had left them square, but having them round painlessly on some browsers is an ideal solution.

3. 

   CM 2010/01/22 5:47 pm

   Rounded corners works fine in Firefox but shows square in Safai and iPhone. What am I doing wrong?

   #masthead{padding-top:1px;background-color:#c00;opacity:.85;color:#fff;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;-khtml-border-radius:9px 9px 0 0;border-radius:9px 9px 0 0;}

   and

   #footer{background-color:#c00;color:#fff;text-align:center;padding:4px 0;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;-khtml-border-radius:0 0 9px 9px;border-radius:0 0 9px 9px;}

   and the html is:

   <!-- masthead content begin -->

   <!-- masthead content end -->

   and

   <!-- footer content begin -->

   <!-- footer content end -->

4. 

   CM 2010/01/25 2:39 pm

   Just the <div id="masthead"> and <div id="footer"> Inside the comments brackets above.

   Any ideas why round corners don’t work in Safari and iPhone?

5. 

   Jeff Starr 2010/01/26 9:32 am • Post Author

   @CM: are you explicitly declaring a border property for those elements? Try adding something like this so the rounded-corner properties have something to work with:

   border: 1px solid #000

6. 

   CM 2010/01/26 5:42 pm

   Many thanks Jeff!

   The pagewrapper element above the masthead element already does have the border specified thus:

   #pageWrapper{border:solid 1px #c00;border-width:0 1px;}
#masthead{padding-top:1px;background-color:#c00;opacity:.85;color:#fff;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;-khtml-border-radius:9px 9px 0 0;border-radius:9px 9px 0 0;border:solid 1px #c00;}

   When I tried adding the border-width:0 1px; to the masthead element as well I still see square corners in Safari. So I don’t think that is it.

   I checked my browser detection js script, and it uses the term AppleWebkit (and applewebkit) rather than just webkit (used in the css), I wonder if that is related?

7. 

   CM 2010/01/26 5:44 pm

   Correction:

   When I tried adding the border:solid 1px #c00; to the masthead element as well I still see square corners in Safari. So I don’t think that is it.

8. 

   Jeff Starr 2010/01/27 5:49 pm • Post Author

   @CM: I’m pretty sure that Safari supports rounded corners:

   http://www.the-art-of-web.com/css/border-radius/

   The only browser that seems to fail is IE, which requires some JavaScript treatment for rounded corners.

   Unless I’m totally spacing out again and missing something obvious, I would recommend coding up a simple HTML test case to verify rounded corners in Safari et al. Begin with something like this:

   .all-four-rounded-corners {
       border: 1px solid black;
       -webkit-border-radius: 10px;
       -khtml-border-radius: 10px;
       -moz-border-radius: 10px;
       border-radius: 10px;
       }

   ..and then just build it up or integrate it from there.

9. 

   CM 2010/01/28 3:00 pm

   Thanks Jeff, good idea.

   I assumed you guys had actually tested it on Safari already.

   I’ll do the tests and post the result here when I’ve pedalled 80km to also test it on the iPhone.

10. 

    Jeff Starr 2010/01/28 4:15 pm • Post Author

    @CM: lol – actually the test case is only for your benefit, to enable you to then integrate the working code into your project. The idea is that, in the process of doing so, you will discover the source of your issue.

    As discussed in that article I suggested, rounded corners are well-known to be supported in Safari, as well as other browsers mentioned in the article. Additionally, I have been implementing rounded corners in Safari et al for quite some time. I wouldn’t have posted otherwise.

11. 

    CM 2010/01/29 2:42 pm

    Thanks Jeff :)

    I’ve got it working in Safari (but haven’t had chance to look in iPhone yet).

    Here’s the key.

    For rounded corners Safari ignores the abbreviated coding format 9px 9px 0 0; but does recognize the very long format:

    -webkit-border-top-left-radius:9px;-webkit-border-top-right-radius:9px;

    So this works in FF and Safari:
    (Note I deleted the khtml and repeat border-radius lines for code brevity)

    #masthead{padding-top:1px;background-color:#c00;opacity:.85;color:#fff;-moz-border-radius:9px 9px 0 0;-webkit-border-top-left-radius:9px;-webkit-border-top-right-radius:9px;}

    #footer{background-color:#c00;color:#fff;text-align:center;padding:4px 0;-moz-border-radius:0 0 9px 9px;-webkit-border-bottom-left-radius:9px;-webkit-border-bottom-right-radius:9px;}

    In the footer form, you must include some text in the footer for the bottom round corners to show, otherwise the top square corners cover the bottom rounded.

    I also discovered it works without any added browser detection script, and it also works if you designate -applewebkit- instead of -webkit-.

12. 

    Jeff Starr 2010/02/01 9:43 am • Post Author

    @CM: Awesome, thanks for sharing your findings. Good to know about Safari not recognizing the shorthand syntax. I didn’t actually advocate such methodology in the article, but it is certainly a logical progression of the technique. Really great information. Thanks again :)

Comments are closed for this post. Something to add? Let me know.