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 :)
52 responses to “Perfect Rounded Corners with CSS”
Jeff, you’re the man. I knew about the
-mozbits and am currently rocking them on my site; the others (as well as the [I’m guessing] CSS3 property) were unknown to me.Thanks for rectifying that. I’ll definitely be adding support for other browsers later today.
Wowzer Jeff,
Just the sort of thing I was looking for for my new sites. Certainly going to give this a go quite soon.
And I really have to say hat’s off to the site design, more like a site evolution that has missed a few steps in between.
You are far and away a most talented and gifted creative. Good for you, this really takes stuff to a whole new level.
Graham
@Graham: Great to see you again, Mr. Graham! I am stoked that you find the latest design incarnation to your liking, but it won’t be around for long, I’m afraid: I am currently working secretly behind the scenes on a brand new theme, hopefully to be rolled out at the beginning of 2009. If the current design is a “site evolution,” then the next design would be a “de-evolution!” And that’s certainly enough said about that!
As for the kind words, Graham, you always flatter me! I really don’t know how to respond, other than to say that I am still a novice compared to many in the community. Quite honestly, I have been completely blown away by your intense activity on teh Intarwebz as of late — there is no way I could ever match your sheer and utter velocity within logo design circles and social media in general. It is a pleasure to watch as you rise to the top!
@Rick: Always a pleasure to see you! You have been a busy man lately, from what I gather from your always insightful kingdom feed. What was it, like yesterday my feed reader was cold stuffed with all sorts of fresh Beckman goodness: politics, religion, and even WordPress to boot! An incredible run, to the say the least!
As for the current post, it is an honor to provide useful information that benefit fine people such as yourself. With each passing day, pure CSS borders are becoming a reality for all modern browsers. Of course Internet Exploder hasn’t joined in the reindeer games (yet), but just about every other browser is now supportive of rounded corner styles via CSS.
Hi Jeff – Haven’t talked to you in awhile. A friend and I were just discussing rounded corners – you must have read our minds and provided that code that we needed.
Thanks!
@Kim: Well, it certainly is nice to see you again! Yes, I was floating around on the seventh astral plane earlier and began picking up on some strong CSS rounded-corner vibes! lol — Seriously though, glad I could help out with the article — it is my pleasure to do so! :)
I was browsing using ff3 and came to this article. Curious if it worked on ie6 I openend your site in this browser. I noted that you don’t show any theme at all in ie6.
Actually you are the first site I see that completely gave up the effort to satisfy the ie6 users. This site offcourse attracts a lot of webmasters so little problem.
But for ordinary sites with lots of less technical users these kind of new technicalities remain a problem.
I wish people abandon ie6 very quickly. Nice to see that you take a stand in this respect.
@Erik: Thanks for the comments, Erik! I completely agree that people should drop support for IE6 as soon as possible — it is just a horrible browser, especially by today’s standards.
You observe correctly that the current (Quintessential) theme doesn’t support IE6; after spending a gazillion hours making it work in modern browsers, I just didn’t have the stamina to fix everything that was broken in IE6.
As for CSS rounded-corner support in IE, I don’t worry about it for design enhancements, but would certainly take the time to code up some proper rounded-corner sprites if they were central to the design.
I like the idea of using border-radius as well as the vendor-specific attributes. It’s very likely to become the final css3 spec, so even though I don’t believe there is any browsers supporting it yet, you’ll be future-proof. It doesn’t validate, but neither do the vendor-specific ones so whatever.
Just a note regarding rounded corners in IE, I came across a nifty solution for this that uses VML and HTC files to draw the corners.
I wish I could claim this idea for myself but I found it at: http://www.htmlremix.com/curved-corner-border-radius-cross-browser/
So if you truly want cross-browser rounded corners it is indeed possible for most browsers (without nested div’s and what not).
Great article though and it made me aware of the -khtml css statements I didn’t realise existed.
Also nice to hear you will be redesigning the website, I hope the next incarnation will be a bit more minimalistic.
I love the idea of what you think about rounded corners – it’s an enhancement. Older browsers (like IE6, it’s so 1990s), visitors will not suffer from incorrect/inaccurate display or rendering of elements but simply revert to the blocky styles. The rounded corners are something like a bonus to those who use up-to-date browsers, heh.
The properties for rounded corners are aplenty, but I’m not sure which is CSS3 valid or not. Are all of them CSS3 valid or is just strictly just border-radius? So far -moz-border-radius and etc are not recognised to be valid… but that doesn’t bother me a lot since I’m not exactly a CSS puriest. I just aim to make my layouts XHTML valid – I guess that’s the most important part for designs.
Thanks for sharing again! I find your entries really insightful and more importantly, relevant to what web designers and coders alike need and want to know.
wow, I didn’t know it could be done that simple, however what I really want is a solution that works in all browsers, still using pure css, no javascript and no images, which almost seems like a search for the holy grail heh, I mean I’ve found a bunch of examples how to accomplish this using css only, but most of them either requires images, which is allright except I don’t like it, because I want to be able to change the color of the design, without having to re-do the images. Other examples uses quite a lot of extra markup, which I’d rather be without.
I’ll probably give this a go, and forget about support for browsers which doesn’t understand it for now, since the lack of support for this won’t actually “break” anything, but just appear as square boxes instead.