Latest TweetsWordPress and the Blank Target Vulnerability (aka rel noopener + noreferrer): perishablepress.com/wordpress-… #WordPress #security #html
Perishable Press

Perfect Rounded Corners with CSS

A great way to enhance the visual appearance of various block-level elements is to use a “rounded-corner” effect. For example, throughout the current design for this site, I am using rounded corners on several different types of elements, including image borders, content panels, and even pre-formatted code blocks. Some of these rounded-corner effects are accomplished via multiple <div>s and a few background images, while others are created strictly with CSS.

Of these two different methods, extra images and markup are used whenever I need the rounded corners to appear in all browsers, or in other words, whenever the effect is an essential aspect of the design. And then, on the other hand, when using rounding corners for visual enhancement, I prefer the strict-CSS method because it is much easier to implement. Rounding the corners on image borders or <pre> elements, for example, is an excellent way to progressively enhance the visual presentation of a design (generally speaking).

The good news about using CSS to create rounded-border effects is that it is possible to apply the effect to many different browsers. Sure, Internet Explorer can’t deal with it, but that’s the whole idea behind progressive enhancement, right? Browsers that “get it” enjoy the benefits, while those that don’t continue to function perfectly well without the enhancements. So, for those of you looking for a complete collection of quick copy-&-paste code snippets for easy rounded corners with CSS, here you go:

CSS Rounded corners for all four corners

This CSS rounded-corner recipe applies a 10px-radius rounded corner effect to all four corners of any block-level element:

/* 4 rounded corners */
.all-four-rounded-corners {
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

CSS Rounded corners for top-left corner

This CSS rounded-corner recipe applies a 10px-radius rounded corner effect to the top-left corner of any supportive block-level element:

/* top-left rounded corner */
.top-left-rounded-corner {
	-webkit-border-top-left-radius: 10px;
	-khtml-border-radius-topleft: 10px;	
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	}

CSS Rounded corners for top-right corner

This CSS rounded-corner recipe applies a 10px-radius rounded corner effect to the top-right corner of any supportive block-level element:

/* top-right rounded corner */
.top-right-rounded-corner {
	-webkit-border-top-right-radius: 10px;
	-khtml-border-radius-topright: 10px;	
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	}

CSS Rounded corners for bottom-left corner

This CSS rounded-corner recipe applies a 10px-radius rounded corner effect to the bottom-left corner of any supportive block-level element:

/* bottom-left rounded corner */
.bottom-left-rounded-corner {
	-webkit-border-bottom-left-radius: 10px;
	-khtml-border-radius-bottomleft: 10px;	
	-moz-border-radius-bottomleft: 10px;
	border-bottom-left-radius: 10px;
	}

CSS Rounded corners for bottom-right corner

This CSS rounded-corner recipe applies a 10px-radius rounded corner effect to the bottom-right corner of any supportive block-level element:

/* bottom-right rounded corner */
.bottom-right-rounded-corner {
	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-radius-bottomright: 10px;	
	-moz-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	}

The Full Meal Deal — Non-symmetrical CSS Rounded corners

This CSS recipe applies non-symmetrical rounded corners to all four corners of any supportive block-level element. This technique is basically writes the various border rules individually, thereby enabling differing values for each rounded-corner radius. Confused? Don’t be; just check out the following code and everything will be perfectly clear:

/* exploded rounded corners */
.exploded-rounded-corners {
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	-khtml-border-radius-bottomright: 10px;
	-khtml-border-radius-bottomleft: 10px;
	-khtml-border-radius-topright: 10px;
	-khtml-border-radius-topleft: 10px;

	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;

	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	}

Round ‘em!

Let me know if I missed anything here.. I want to provide an easy, complete and accurate copy-&-paste reference for creating rounded corners with CSS. So if you know of any related tricks or techniques, please share them in the comments section. Otherwise, see you next post! Thanks for reading :)

Jeff Starr
About the Author Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Archives
52 responses
  1. Extend Studio November 10, 2009 @ 1:22 am

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

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

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

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

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

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