I’ve seen a lot of different ways to create round corners and boxes in web sites, and quite frankly I haven’t exactly fallen in love with any of them. A lot of the methods that I’ve seen use either (1) a table structure which I try to avoid at all costs, (2) too many nested <div> tags, (3) complex CSS, or (4) too many different images that have to be loaded all at once.
Update: Read my subsequent post for a more advanced example of this technique!
Update: Read a even more advanced version of this technique in an even newer tutorial!
Update: Find out how to automatically generate the HTML and CSS for this technique using jQuery.
I took the best of the best and came up with a very simple way to create totally scalable boxes with round corners. I’ve tested this on Internet Explorer 6, IE 7, Mozilla FireFox 2, Firefox 3, Opera 9, and Safari 3.
The Code
The HTML code is relatively simple. You have an outer <div> tag with four “corner” <div>s inside of it. Each of these corner <div>s are positioned with CSS so that they always appear at each corner of the outer <div> box.
HTML:
<div class="cornerBox">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="cornerBoxInner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
CSS:
.cornerBox {
position: relative;
background: #cfcfcf;
width: 100%;
}
.corner {
position: absolute;
width: 10px;
height: 10px;
background: url('corners.gif') no-repeat;
font-size: 0%;
}
.cornerBoxInner {
padding: 10px;
}
.TL {
top: 0;
left: 0;
background-position: 0 0;
}
.TR {
top: 0;
right: 0;
background-position: -10px 0;
}
.BL {
bottom: 0;
left: 0;
background-position: 0 -10px;
}
.BR {
bottom: 0;
right: 0;
background-position: -10px -10px;
}
The Image
Only one image is used for this box (shown above). In my example, I created a 20×20 circle, which is comprised of four 10×10 corners. By shifting the background image around, you can eliminate the need to download four separate GIF files on each of your boxes.
The Result
Karate Corners! Click on the image above to see the HTML demo. Happy styling!
[...] wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work [...]
[...] Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here. [...]
Personally, I think you could do without 2 of those divs, but I can see the sense in using them to keep the technique consistent wherever you use it.
I like how you use a single image of a circle to use for all four corners. Doing that saves a lot more load time than people think.
Wow you make it so simple! Love the single image. Thanks very much : )
Thanks for that, saved a lot of work. A very smart solution.
But i can not change the font size for the div cornerBoxInner. Any Idea?
i already took the font-size: 0%; from the parent div but nothing happens. The box shall have a smaller font than the main content…
ok, got it. The css cascade was the problem…
You are very clever
. Thanks!
I love the simple code you’re using. It makes it so easy. It’s neat, byte-saving and clever. I hope you’ll allow me to use your idea for my own website.
WOW, this is absolutely the best and most elegant solution. I have tried scores of them, and just when I was about to give up my search for a SIMPLE and reliable solution, I found your trick. Very nice, thanks alot!
I agree this is a great way to put some shape on a page!
Using Win XP and IE6 (archaic, I know…), the bottom corners have faint squared-off lines around them. After tryng several things, found that adding a bottom margin to the last paragraph in the box took care of it, and looked fine in Firefox 2, too.
.bottom { margin-bottom: 20px; }
Normal paragraph tag.
Chop, chop! Fixed the corners.
Kyle — great tip! Thank you for this. I was actually searching for a way to create rounded corners on [input] buttons without touching the HTML itself. I have a million buttons on a million different pages and was hoping there would be a fast and simple solution to this.
Ideally, the button’s background image would be a 120×30px image that expands and contracts its width – depending on the size of the button. Any ideas?
Thank you for this good technique. It has ran well on IE7 but not in firefox3.0.9
It show nothing in FF browser… why ???
Bazala,
I’ve tested this in Firefox, and just to be sure, I just checked again in FF 3.0.9, and everything works fine.
Hi Kyle,
I’ve looked at a lot of ways to do this and keep things scalable (other methods I’ve tried did not scale well). This is definitely the most elegant I’ve seen. Can’t wait to try it out!!
Cheers.
About to embark on a project or two which requires rounded corners, and this appears to be the most elegant solution to the problem. Thanks for posting this!
This is a great technique with a small footprint, but is ineffective when the containers of the rounded boxes have non-flat background colours/images. Example: if the background is a gradient or an image the above technique will not work. If you change the corner image to a transparent gif, the background colour of the “cornerBox” holder will fill all the corners transparency, thus destroying the rounded box look. For most other situations, this is a pretty good solution.
Hi, Stephen. You’re absolutely right. Placing a rounded corner box on top of a gradient or an image is a more difficult technique (one that I usually try to avoid in the design phase rather than the implementation phase). That situation requires a completely different set of HTML markup, where the corner images are not displayed on top of the box’s background color, to allow lower layers to display through the transparent portion of the corner images.
Thanks for the heads-up!
Wow you make it so simple! Love the single image. Thanks very much : )
But i want rounded corner for input and dorpdown also…does this method work for those things?????? pls help
So what do you do if you want a background image and a border around the box
Dave, great question! The tricky thing about borders is that your borders will be drawn OUTSIDE of your corner images. To fix this, just change the positioning values of the corner images (i.e. “top: 0; left: 0;”) to “-1px” instead of 0 (i.e. “top: -1px; left: -1px;”), where “1px” is the same width as your border effect. This bumps your corners out 1 pixel in order to cover up the border.
In no uncertain terms you are a genius. Great solution!
Thanksks a lot
Thanks for article. Russian version of this article – http://cssclub.ru/blog/104.html
Hey, Found your tutorial and just wanted to say Thanks! Helped me alot.
Rafik
[...] not saying we should do away with rounded corner techniques entirely. In fact, I use my own Karate Corners all the time, but I do it when it’s necessary and appropriate. If I’m working on my [...]
I really impress that you only use one image to round the corners. really good one. thanks I love this technique.
Thanks a lot for this great post. I used your technique in a couple of places on a website I’m working on with no problems. Recently though I used it on a webpage that also contains a suckerfish menu, the menu is placed above a div with a rounded corner (using your technique), now the problem is that when the menu shows it’s clipped by the div, in other words the div with rounded corners always show above the menu. I tried to mess with the z-index (add a z-index: 100 to the suckerfish drop down) but that didn’t work. Any suggestions would be really appreciated, and thanks again for the great article.
Please ignore my last comment, I solved the problem. I was using the z-index with the wrong element.
What I did to add a stroke around the box was put a stroke around the circular image (unfortunately, the background of the image — that is, the area outside the circle must be a solid color, so no PNG24), and for the stroke of the text area, add something like border:1px solid #000 on .cornerBoxInner. Works in IE6/7/8, Firefox, and Safari.
I’m fairly new to css, but I still don’t see what I’m doing wrong. I have four corners, but instead of being attached to the corner of my box, they are in the four corners of my browser window! What am I doing wrong? Why aren’t they attaching to the div box?
Anna, it sounds like you’re missing the “position: relative” property on the cornerBox div. The corners are positioned relatively to the box in which they’re placed — if you leave out the “position: relative” on the parent div, then they’ll be positioned at the corners of the browser window (as you’ve already seen). Hope this helps.
Kyle
Thanks!
Actually, my problem seemed to be that the parent div was not assigned a class, only an id. Once I assigned a class, the corners snapped right into place.
Although, through the process, I managed to learn a lot about css and layout!
By the way, this technique is awesome. I’ve read several rounded corners techniques, and this one is the easiest/most flexible.
Keep Stumble upon button so that youor article can reach more users and users can Bookmark it.
Its really very useful.
Hi Kyle,
I don’t see an example involving a drop shadow. Is it just a matter of extending the corner w/h?
Thanks,
Nick
Nick,
Shadows are a little more complex because the image needs to wrap around the entire box, not just on the corners. Generally, if I know the height of the content on my “shadow box” is not going to be over X pixels tall, I create a single image of the entire box (including shadows) that is X pixels tall. I use that as the background image for the content — you can set up your HTML and CSS in such a way that the box can always shrink to accommodate for the content, but you can’t extend beyond the height of your image. Perhaps I will create a new post that shows you how to do just that!
Many thanks for an elegant solution – at last, something that meets my criteria!
very cool going to try this tonight
Hi Kyle,
I have been trying to set up two different rounded boxes on the same page. I duplicated the CSS, but used a different name for each style, and created a new image circle. However, although the code is created properly, with the new boxes and larger radius divs, it keeps using the original, smaller image! The link to the background image is correct.
It must be something so fundamental that I’ve missed entirely, but any help would be much appreciated!
David
Hi, David. Whenever I use multiple corner styles in one design, I’ll generally use a base “corner” class and then extend that for any alternative corner styles/sizes that I use. For instance, you could have the corner class much like I have set up in my blog post above, and then you could add a “corner blue” class.
<div class=”corner blue TL”></div>
In your style sheet, you would have to add new CSS that looks something like this:
.corner.blue { background-image: newImage.gif; width: x; height: y; }
.corner.blue .TL { background-position: 0 0; }
…etc.
If you’re changing the size of your corner, you’ll have to set a new WIDTH and HEIGHT on your “.corner” class, and you’ll have to set a new “background-position” on your “TL”, “TR”, etc. classes.
Hope this helps.
Thanks Kyle – I had done everything except one small thing – it WAS something so fundamental… great work!
Very nice…Thanks for this sharing. It is so simple.Just one question. is it possible to use the same effect with iframes window?
Sorry for “false alarm”. I managed to understand why I wasn’t so clever yesterday but at this moment looking at very rounded iframes.Thanks once again for this very simple and cool trick.
[...] retrospective, there are definitely some areas where I could have improved on my Karate Corners design. I decided to take a second look and write a quick post that details how I create corners [...]
The gas atoms have dimensions in the sub-nanometer range. ,
What program did you use to make the border.gif graphic?? How did you do it? I want to make one too… I would appreciate greatly, your help!
You could try FlexiPanels CSS, Dreamweaver extension that generates rounded corners css boxes from an easy to use interface.
http://www.extendstudio.com/product/flexipanels_css.html
I could just delete your comment because you’re advertising on my blog without contributing any thoughtful or meaningful discussion, but what the heck…let’s debate. I’m feeling argumentative this morning.
FlexiPanels looks like it’s very easy to use, but it also seems like it uses at least three PNG images for each style of box, which are hard-coded in “style” attributes on each DIV element. These images are fixed-width, meaning if you want two different size boxes, you’ll need six images, so on and so forth. Wow, that’s a lot of data to force users to download for something as simple as rounding the corners on your boxes.
If you’re not interested in the HTML or CSS that goes on behind the scenes of your website presentation, FlexiPanels may be a viable option, but this post (and all of my blog posts, for that matter) is really about making an efficient and lightweight solution that is as flexible and as easy to use as possible. FlexiPanels doesn’t even utilize Firefox/Safari’s built-in “border-radius” attribute! Why? Imagine eliminating the need for users to download images AT ALL for your corner boxes! This is a no-brainer in modern web design, and I think you should really consider updating your solution to include this fantastic CSS3 specification.
I think that most people who read my blog aren’t necessarily interested in a solution where they can click a button and get an instant fancy-box. We’re interested in the nitty-gritty that goes on behind the scenes. We’re the guys who started out in web design by opening notepad and typing our HTML in directly. We hate those WYSIWYG tools, and all the nasty things they do to our nicely formatted XHTML documents. I certainly hope that there’s still other people out there like me, at least.
That’s my rant. Happy styling!
This is a very cool technique. I was wondering how do i extend this technique to create rounded border(for example, blue rounded border. ). essentially simulating something like this. Is it possible to do that using this technique?
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
I tried to create a circle without any fill color and only stoke color of 1 px, but however when i try to add border to the div, the square corners stick out.
Jyotish,
That’s a great question! To use this technique with a border, first you’ll have to create a corner image with the correct border color on your corners. Essentially, you’ll create a circle with a “stroke” around it that is the same color as your border color.
Next, because the corner images will actually be displayed INSIDE the box’s border, you’ll have to adjust your corner DIV positioning to compensate. For instance:
.TL { top: -1px; left: -1px; }
In the above example, I would bump the top-left corner DIV out by 1 pixel, assuming the width of your border is 1 pixel. I hope this helps!
Спасибо за информацию!
Kyle,
I set the top and left attributes to -3px, but now i have the problem that the images get drawn behind the border :S
Is there a solution to this problem?