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 = Creative thinker. Passionate about free and open Web.
WP Themes In Depth: Deep dive into WP theme development.

52 responses to “Perfect Rounded Corners with CSS”

  1. Thanks for posting the original article Jeff, and my fellow commentators. The code I used also works okay in iPhone’s browser.

  2. James Smith Jo₤o Pessoa, Brazil 2010/02/28 7:13 am

    Too bad you’re not using a spell-checker, too. “rounded-corder”

  3. Fixed! Thanks :)

  4. umarfaruk m 2010/03/26 5:54 am

    excellent tuts… thanks a lot…..

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 »
Blackhole Pro: Trap bad bots in a virtual black hole.
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.