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 :)

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.