Latest TweetsAbout the “Warning! WordPress Encrypts User Cookies” Error digwp.com/2018/11/warning-word… #WordPress
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. Hm, just noticed that using these properties prevents the CSS from being properly validated – it doesn’t really matter, except if you’re clinically insane about a clean validation :)

  2. This is the answer to life!

  3. Great write up… A very timely post for me, as I just started using progressive enhancement techniques on the sites I currently maintain and the results are well worth it.

    One question… can’t you simplify your code by combining all the radius sides into one statement. For Firefox for example, I’m pretty sure instead of this…

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

    you could do this

    -moz-border-radius: 10px 10px 10px 10px;

    or even more simply

    -moz-border-radius: 10px;

    This seems to work on all my tests and makes for cleaner code. Same applies for -webkit-border-radius but I’m not sure about khtml.

    Again… great write up!

  4. Jeff Starr

    @Phoat: Absolutely — check the first chunk of code in the article for this exact technique. Completely cleaner, faster, and more efficient. Thanks for the comment and best of luck with your site!

  5. It shows sometimes right and sometimes it doesn’t show right. But when i zoom in or out it will show right but an other border won’t anymore.

    From my iPod 2nd generation

  6. Jonathan Ellse March 17, 2009 @ 10:31 am

    What are -webkit, -moz and -ktml doing? I realise that they are for specific browsers, but which.

    Love the coding, works a dream in every browser I can throw at it, exculding IE of course, but anyone using IE is unworthy of seeing these beatiful rounded corners.

    Great Work!

  7. Thomas Levy March 20, 2009 @ 12:24 pm

    Never knew about these little tidbits before, soooo much easier than placing rounded corner images

    thanks!

  8. I am impressed that the round boxes on this site are transparent. How is that done?

  9. Jeff Starr

    @EricB: The background boxes for the dark/colorful Quintessential theme are made with CSS and background-image sprites. I am planning a tutorial on the topic just as soon as I can find the time.

  10. Hi,

    Hey this code is not working with me… is there anything i must download or refer to any file??

    border-radius: 10px; this statement is showing some error in css, that its not a recognized element.

    And what is that webkit or khtml or moz…

    i was totally confused about how to use this…

    please give me some sample page using the same..

    please explain me..

    Thanks & Regards,
    Shubha K.S.

  11. Seriously man.. you have changed my life with this code LOL.

    Worked instantly. I always thought this cannot be done without creating curved images or by using javasacript. Undoubtedly, your CSS solution for the purpose is THE BEST I had seen so far.

  12. hey man its working fine in mozilla… that looks really great..

    but dont know why its not working in IE 7.. windows XP SP2… VS 2005

    ..

    so is there any technique that i can make this work in IE7 also… help would greatly appreciated…

[ Comments are closed for this post ]