Perfect Rounded Corners With CSS

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:

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;
}

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;
}