Here are FIVE different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be!
Note: I think I got the audio pretty good on this one, finally!
Blog: Subscribe via RSS
Video: Subscribe via RSS
Blog: Subscribe via Email
Video: Subscribe via iTunes
Table-based layouts have 9872 mortal enemies.
Script & Style is a community driven feed of links and exclusive tutorials to help you grow as a designer and developer. Got a great link? Submit it now!
Loading ...
Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.
1
nice screencast Chris! those are some very useful techniques. One question though; could you explain about the “not putting padding on elements with specific widths”. Is it because adding padding to an element with a specific width actually expands the element?
Comment by gen — June 26, 2008 @ 7:29 am
2
@gen: The issue there is IE6 box model handling. If IE6 is out of standards compliant mode, it will render the box at the specificed “width” instead of rendering the box as width+padding+border like standards-compliant browsers do. A bit of backwords logic… I just make it a rule to not use padding on any element where I also use width. I know it’s sad sometimes to sacrifice semantics, but I’m all about making websites that look right.
Comment by Chris Coyier — June 26, 2008 @ 7:53 am
3
a couple things…
do you have a favorite technique for this? I’ve been using browser prefixes (-moz-) but I really like the jquery.corners that you showed, very cool.
I don’t know about the latest version of Safari, but last I saw -webkit-border-radius rendered much like -moz- does in FF3 (very smooth).
Comment by Tim Wright — June 26, 2008 @ 9:46 am
4
Thanks, great techniques!
Yay for Wordpress being next week!
BTW, is there any way in which I can get this working on my Zune. I guess that’d be a hassle, since you’d need mp4 files..
The sound was great this week, no need to turn it up this time
Comment by Thomas Offinga — June 26, 2008 @ 2:28 pm
5
To add to your box-three example, Safari (and other webkit based browsers) also support a css based rounded corner attribute. So you can do:
webkit-border-radius: 12pxalong with
moz-border-radius : 12px;IE 6,7 will just ignore those attributes. Don’t know if IE 8 supports the CSS3 attribute ‘border-radius’ or not.
Comment by Karl — June 26, 2008 @ 2:53 pm
6
Great screencast! This contains the best explanations I’ve heard (or read) on adding rounded corners.
One question though. With example 1 on IE7, I get a line of colored background following the box-one-bottom.png image. It looks like the middle background continues past the bottom image. Any tips on how to fix this? All other examples work fine on IE7 (I haven’t tried IE6).
Comment by Donna — June 26, 2008 @ 8:24 pm
7
@Karl: Great point. Webkit (Safari engine) is doing an awesome job of rendering rounded corners too, if you are going to use -moz-border-radius, you might as well use -webkit-border-radius too.
@Donna: IE 7 like to add that extra line break after the image on the bottom and before the closing div tag. To fix that just format your code so there is no space or line break after that last image tag and before that last closing div tag and that should close the gap.
Comment by Chris Coyier — June 26, 2008 @ 8:38 pm
8
Thanks Chris! That did the trick on IE7 — it now works after deleting the line break. Yet another reason to hate IE! This is real good to know since I tend to like to format everything nicely with a lot of white space.
Comment by Donna — June 26, 2008 @ 8:52 pm
9
Nice webcast there Chris!
I would like to add one really cool technique to the five you already mentioned - rounded corners with generated content. This allows you to leave your markup just as it is, no extra divs or anything.
Unfortunately it won’t work in IE (surprise!) due to the lack of support for the :before and :after pseudo classes. You could probably overcome this through the use of javascript. I actually tried dean edwards IE7 library, and got it working in IE7. Didn’t quite get it right in IE6 though, could probably be fixed with some scripting (jQuery?).
Really like the footer area Chris. Keep up the good work!
Comment by Anders — June 26, 2008 @ 11:59 pm
10
Exelent tutorial. Very helpfull. Thanks alot.
Comment by James Mare — June 27, 2008 @ 3:38 am
11
thanks for the tutorial, it really helped me with the rounded corner problem I was having.
Comment by Ray — June 27, 2008 @ 6:49 am
12
thought you might cover the technique where it looks like they use different
length lines to achieve the rounded effect, I have an example of a calendar
page that uses this method and been trying to figure out why it works.
Al
Comment by Al — June 27, 2008 @ 6:54 am
13
Nice job Chris. This tutorial has helped me a lot.
I’ve bookmarked your website and Im looking forward to your wordpress tutorials. I just recently designed a theme for my dad and I could use the extra tips to make him like it even more!
Alex.
Comment by Alex — June 27, 2008 @ 3:37 pm
14
re comments 7 and 8, what did you do to make it work in IE?
I tried what I thought would work but no go,what specific change
did you make to Chris’ code for box 1 in IE to get rid of the
extraneous bottom line?
Al
Comment by Al — June 28, 2008 @ 7:54 pm
15
@Al: You have to get rid of any line break after the last img element and the closing div tag.
This:
Should become this:
Preposterous? Yes.
Comment by Chris Coyier — June 28, 2008 @ 9:20 pm
16
Donna, Chris, AI
I guess the gap you’re seeing below the bottom image in example #1 has to do with the img’s default vertical-align property being “baseline”. So setting the vertical-align to bottom through css will fix it.
Here’s a good read on the subject. The section called “Some Final Words” deals with this specific “problem”.
Comment by Anders — June 30, 2008 @ 1:44 am
17
You seem to miss the importance of three rules when making layouts, those are accessibility, optimization, and bulletproofing. There are better ways to create rounded corners in a way that would make your markup sensible. Unfortunately, I think none of these five has all three. Cool tutorial though.
Comment by duren — June 30, 2008 @ 10:42 pm
18
Can’t quite see in what way these techniques are inaccessible? Could you show us hands on how to improve on this?
Comment by Anders — July 1, 2008 @ 2:35 pm
19
Tried both vertical-align and display options mentioned in comment 16,
both work but prefer “img {display: block;}” in this case. If you use the
vertical-align option, then you need to align the image to “top” on the
top image, not “bottom”. Did not try the 3rd option, will try it later.
Al
Comment by Al — July 1, 2008 @ 7:35 pm
20
Great screencast. Again!
just like @Karl pointed out.
mozilla moz-border-radius: 12px
webkit webkit-border-radius: 12px
but i really think you also should be adding border-radius: 12px just for the sake of forward compatibility .
Comment by Fouad Masoud — July 9, 2008 @ 2:22 am
21
Dear All -
I am a student taking my first Web development course (”Web Development & Design Foundations…With XHTML”) and am excited to have found such a knowledgeable and fun group to listen to and learn from.
In this first course we learn to use CSS positioning and touch only briefly on Dreamweaver. I am looking for a few basic tricks or techniques that a real novice could try his hand at in order to build my own skill, excitement and enthusiasm for what has proven to be a fascinating, if challenging, learning experience.
Chris Coyier’s piece , “New Screencast: Rounded Corners” (June 26th, 2008) looks like an excellent place I might begin, but how? Do I download the html and css files and then practice? What do you reecommend as a good approach here or would you say this might be too advanced for a novice like me? If that is the case, can you suggest a few other “Tricks” to look at and try?
Many thanks!
Bill
Chicago
bwln82@sbcglobal.net
Comment by Bill W. "ZinZen — July 9, 2008 @ 1:02 pm
22
First off, great tutorial for jquery! My question is for box 5: I’ve got the jquery.corner.js to show the corner images, but I don’t see in your css or html where you are getting the top/bottom/left/right borders to appear. My “box 5″ is just showing the corner images but no boarders. I’ve copied from your source file incase it was a syntax, but even after the copy/paste, i still don’t see a border for my “box 5″. How are you getting the “border” to appear in “box 5″?
Comment by maverick blair — July 17, 2008 @ 9:44 am
23
@maverick: the jQuery plugin doesn’t support borders. If you really need borders you’ll have to use another option.
Comment by Chris Coyier — July 17, 2008 @ 9:48 am
24
@Chris: how did you get the borders to appear on box 5?
Comment by maverick blair — July 17, 2008 @ 9:52 am
25
@maverick: it’s the same exact theory (in CSS) as box #2
Comment by Chris Coyier — July 17, 2008 @ 9:53 am
26
Awesome stuff that jQuery is. Thanks for the video.
Comment by Billy — July 23, 2008 @ 1:18 pm
27
Hey Chris,
Just getting started with jquery and all that fun js stuff. I am trying to use the rounded corners technique using jquery in a wordpress theme I am developing. But for the life of me it won’t work. I have tried everything I can think of to get it to work. Are there any special tips/tricks to get it working with Wordpress that you know of?
Thanks a ton from just down I-5
Comment by Vin Thomas — August 10, 2008 @ 1:54 am
28
Hi Chris,
I wanted to use the box-two method on my wordpress site. I got it to work for posts by styling the ‘.post’ class. and putting a div with the id=’inside’ inside the post div in the markup.
What I want to do is to make each widget element a round cornered box. I found that I can get the background color right by styling the .widget class but I can’t get the corners to show up. I can’t figure out where to put the four corner divs to get them to work.
Any ideas?
Thanks.
p.s. your videos have been a great help to me!
Comment by Cass — August 17, 2008 @ 5:32 pm