Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
Web Dev + WordPress + Security

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 = Designer. Developer. Producer. Writer. Editor. Etc.
Digging Into WordPress: Take your WordPress skills to the next level.

52 responses to “Perfect Rounded Corners with CSS”

  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 2009/03/01 4:16 pm

    @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 2009/03/17 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 2009/03/20 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 2009/03/29 8:09 am

    @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. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
W3C.org has a very thorough list of accessibility tools.
The more you wake up, the more you realize you are still asleep.
7G Firewall v1.4 now available!
I would pay twice as much for a shorter/smaller/lighter phone.
Taking a much needed break in August :)
The Web was better before social media.
WP 5.8 Gutenberg/Block Widgets is breaking many sites. Fortunately Disable Gutenberg makes it easy to restore Classic Widgets with a click.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.