Perfect Rounded Corners with CSS

Updated July 2, 2018 • 52 comments

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

camino firefox ie opera safari tips tricks ux

About the Author

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

52 responses to “Perfect Rounded Corners with CSS”

Jeff Starr 2009/04/06 1:01 pm • Post Author

@shubha: Not sure.. The CSS styles presented here will only work in supportive browsers. You could always use a bit of JavaScript or even background images to serve browsers that just don’t “get it”.

@Vinayak: Thank you kind Sir — your generous feedback just made my day! Cheers!

Vinayak 2009/04/07 11:26 am

ah Thanks to YOU Jeff, you’re the Starr :)

btw, I have few browser related questions please.

1. I have already gone through the whole blog posts and comments, but just wanted to confirm if there is simply NO WAY to get this work in IE. I find it really surprising that even IE 8 is not supporting it. May I know whats SO SPECIAL in this code that even latest browser fail to recognize it!

2. It also does not work in Opera. Gives a bit cluttered curved edges in Chrome. Works great on Safari though.

3. Works great on latest Firefox BUT this CSS code has slowed down the site browsing ONLY on FF (which is my primary browser). I mean scrolling the page has become quite rough, feels heavy. I hope you understood what I mean. Can you please browse my site for a moment and see what i mean. Btw, I experience the same behaviour on this site.

Thanks again.

Jeff Starr 2009/04/08 5:33 pm • Post Author

@Vinayak: You are too kind!

I wouldn’t say that there is absolutely positively without a doubt “NO WAY” to get CSS rounded-corner functionality in IE. A way may indeed exist, but I sure haven’t found it yet. And for the record, I am not surprised that IE8 isn’t supporting it either; frankly, I wish IE had never existed!

Also, your pages seems to scroll relatively smoothly on my home machine, but I haven’t tested it on my (slower) laptop. For this site (current Quintessential theme), there are actually two contributing factors to the slow scrolling: rounded corners and transparent background images. This sort of heavy design implementation requires a significant amount of processing power to render the page. It has more to do with the amount of memory available to the browser than anything else. For sure, my next design will be less resource-intensive. ;)

Michael B 2009/05/06 7:53 pm

awesome article! I love how using this technique doesn’t break internet explorer at all, but instead gives them a crappy straight border.
I hate IE and I hate the fact that people use IE, so I say if they want to use that browser which doesn’t support (within reason) the standards or trends of web design, then let them have a crappy experience.

I know, not exactly good for business, but what they don’t know can’t hurt ’em.

Jeff Starr 2009/05/11 11:47 am • Post Author

@Michael B: Amen, brother! Death to IE! :)

dugfresh 2009/06/30 1:17 pm

Does the fact that it’s not working in some modern browsers (i.e., the latest Safari, the latest Chrome, the latest Opera) have anything to do with the DTD not being “strict”? Just curious. I have to build my pages through a CMS editor, as the pages are portions of the overall website, which is already governed by several stylesheets. This requires me to insert an inline stylesheet at the top of my page…for every page I create. Anyway, the rounded corners CSS works flawlessly in FF.

Oh, and great article, btw. Very simple (which I like), and who cares if IE can’t pick it up? M$ is trying to create their own set of web standards, a feat at which they have succeeded. Unfortunately, their web standards suck, and make developing web sites that work in their browsers a migraine-inducing exercise in futility.

Ejiofor Akonam 2009/07/03 10:32 pm

Shame on IE!

Nathan Rosquist 2009/08/25 6:05 pm

Awesomely useful!

Thanks!

Nathan

Ourobo 2009/11/03 10:25 pm

If I wish to create rounded tabs, where do I paste this? Can the code be pasted within openhooks?

And, of course, what code do I need to embed the above code within to have it apply to my navigation bar?

Thanks for any assistance!

Jeff Starr 2009/11/07 9:04 pm • Post Author

Hi Ourobo, sorry not too familiar with openhooks. But you should be able to apply the styles to any navigation markup by adding the code to your CSS stylesheet and targeting the elements that you want to round. I hope that helps! :)

Ourobo 2009/11/08 8:40 am

Thank you Jeff. I was able to get it working (learning a bit more about CSS in the process). I’ve also played with your piece to create transparencies. It looks like it makes the text fade as well. So I must be targeting the wrong element?

For e.g. using it on ContentArea

Jeff Starr 2009/11/08 9:04 am • Post Author

Hi Ourobo, you have stumbled onto one of the shortcomings of CSS (as it currently exists). As far as I know, there is no way to prevent the child element from applying the same transparency as its parent, which seems to be the case in your situation. One of the best workarounds that I have seen can be found here. If you discover anything else, please let me know. Good luck!

Comments are closed for this post. Something to add? Let me know.

Jeff Starr 2009/04/06 1:01 pm • Post Author

@shubha: Not sure.. The CSS styles presented here will only work in supportive browsers. You could always use a bit of JavaScript or even background images to serve browsers that just don’t “get it”.

@Vinayak: Thank you kind Sir — your generous feedback just made my day! Cheers!
Vinayak 2009/04/07 11:26 am

ah Thanks to YOU Jeff, you’re the Starr :)

btw, I have few browser related questions please.

1. I have already gone through the whole blog posts and comments, but just wanted to confirm if there is simply NO WAY to get this work in IE. I find it really surprising that even IE 8 is not supporting it. May I know whats SO SPECIAL in this code that even latest browser fail to recognize it!

2. It also does not work in Opera. Gives a bit cluttered curved edges in Chrome. Works great on Safari though.

3. Works great on latest Firefox BUT this CSS code has slowed down the site browsing ONLY on FF (which is my primary browser). I mean scrolling the page has become quite rough, feels heavy. I hope you understood what I mean. Can you please browse my site for a moment and see what i mean. Btw, I experience the same behaviour on this site.

Thanks again.
Jeff Starr 2009/04/08 5:33 pm • Post Author

@Vinayak: You are too kind!

I wouldn’t say that there is absolutely positively without a doubt “NO WAY” to get CSS rounded-corner functionality in IE. A way may indeed exist, but I sure haven’t found it yet. And for the record, I am not surprised that IE8 isn’t supporting it either; frankly, I wish IE had never existed!

Also, your pages seems to scroll relatively smoothly on my home machine, but I haven’t tested it on my (slower) laptop. For this site (current Quintessential theme), there are actually two contributing factors to the slow scrolling: rounded corners and transparent background images. This sort of heavy design implementation requires a significant amount of processing power to render the page. It has more to do with the amount of memory available to the browser than anything else. For sure, my next design will be less resource-intensive. ;)
Michael B 2009/05/06 7:53 pm

awesome article! I love how using this technique doesn’t break internet explorer at all, but instead gives them a crappy straight border.
I hate IE and I hate the fact that people use IE, so I say if they want to use that browser which doesn’t support (within reason) the standards or trends of web design, then let them have a crappy experience.

I know, not exactly good for business, but what they don’t know can’t hurt ’em.
Jeff Starr 2009/05/11 11:47 am • Post Author

@Michael B: Amen, brother! Death to IE! :)
dugfresh 2009/06/30 1:17 pm

Does the fact that it’s not working in some modern browsers (i.e., the latest Safari, the latest Chrome, the latest Opera) have anything to do with the DTD not being “strict”? Just curious. I have to build my pages through a CMS editor, as the pages are portions of the overall website, which is already governed by several stylesheets. This requires me to insert an inline stylesheet at the top of my page…for every page I create. Anyway, the rounded corners CSS works flawlessly in FF.

Oh, and great article, btw. Very simple (which I like), and who cares if IE can’t pick it up? M$ is trying to create their own set of web standards, a feat at which they have succeeded. Unfortunately, their web standards suck, and make developing web sites that work in their browsers a migraine-inducing exercise in futility.
Ejiofor Akonam 2009/07/03 10:32 pm

Shame on IE!
Nathan Rosquist 2009/08/25 6:05 pm

Awesomely useful!

Thanks!

Nathan
Ourobo 2009/11/03 10:25 pm

If I wish to create rounded tabs, where do I paste this? Can the code be pasted within openhooks?

And, of course, what code do I need to embed the above code within to have it apply to my navigation bar?

Thanks for any assistance!
Jeff Starr 2009/11/07 9:04 pm • Post Author

Hi Ourobo, sorry not too familiar with openhooks. But you should be able to apply the styles to any navigation markup by adding the code to your CSS stylesheet and targeting the elements that you want to round. I hope that helps! :)
Ourobo 2009/11/08 8:40 am

Thank you Jeff. I was able to get it working (learning a bit more about CSS in the process). I’ve also played with your piece to create transparencies. It looks like it makes the text fade as well. So I must be targeting the wrong element?

For e.g. using it on ContentArea
Jeff Starr 2009/11/08 9:04 am • Post Author

Hi Ourobo, you have stumbled onto one of the shortcomings of CSS (as it currently exists). As far as I know, there is no way to prevent the child element from applying the same transparency as its parent, which seems to be the case in your situation. One of the best workarounds that I have seen can be found here. If you discover anything else, please let me know. Good luck!

« Previous Comments • 12345 • Newer Comments »