Karate Corners: XHTML/CSS Rounded Corners

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

The 20x20 corner image used in this demo.

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

Click on this image to see the demo, where you can resize your browser window to see how the box scales as the height and width changes.

Karate Corners! Click on the image above to see the HTML demo. Happy styling!

79 comments

  1. […] 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 […]

  2. […] Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here. […]

  3. Carl says:

    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.

  4. Sam says:

    Wow you make it so simple! Love the single image. Thanks very much : )

  5. Martin says:

    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…

  6. Martin says:

    ok, got it. The css cascade was the problem…

  7. Jason says:

    You are very clever :). Thanks!

  8. Tor-Ivar says:

    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.

  9. Jurgen says:

    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!

  10. Leonard says:

    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.

  11. Rochelle says:

    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 120x30px image that expands and contracts its width – depending on the size of the button. Any ideas?

  12. Bazala says:

    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 ???

    • Nong says:

      Great blog Seth!Clearly the snowboarding speed and skill has bresihd off on to your blogging perhaps we can coin a new term snowblogging or blogboarding ??Lots of lovely add-ons here!Terrific,Valentina

  13. Kyle says:

    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.

  14. James says:

    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.

  15. 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!

  16. 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.

    • Kyle says:

      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!

  17. Sidhu says:

    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

  18. dave says:

    So what do you do if you want a background image and a border around the box

  19. Kyle says:

    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.

  20. TheRedEvil says:

    In no uncertain terms you are a genius. Great solution!
    Thanksks a lot

  21. nix danish says:

    Thanks for article. Russian version of this article – http://cssclub.ru/blog/104.html

  22. Rafik says:

    Hey, Found your tutorial and just wanted to say Thanks! Helped me alot.

    Rafik

  23. […] 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 […]

  24. Zayar says:

    I really impress that you only use one image to round the corners. really good one. thanks I love this technique.

  25. Waleed Eissa says:

    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.

  26. Waleed Eissa says:

    Please ignore my last comment, I solved the problem. I was using the z-index with the wrong element.

  27. Bryan says:

    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.

  28. Anna says:

    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?

  29. Kyle says:

    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

  30. Anna says:

    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.

  31. Harshit Shah says:

    Keep Stumble upon button so that youor article can reach more users and users can Bookmark it.
    Its really very useful.

  32. Nick C says:

    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

  33. Kyle says:

    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!

  34. Last Chance says:

    Many thanks for an elegant solution – at last, something that meets my criteria! 🙂

  35. matt magi says:

    very cool going to try this tonight

  36. Last Chance says:

    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

  37. Kyle says:

    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.

  38. Last Chance says:

    Thanks Kyle – I had done everything except one small thing – it WAS something so fundamental… great work!

  39. VyMeYou says:

    Very nice…Thanks for this sharing. It is so simple.Just one question. is it possible to use the same effect with iframes window?

  40. VyMeYou says:

    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.

  41. […] 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 […]

  42. Ganry40 says:

    The gas atoms have dimensions in the sub-nanometer range. ,

  43. Justin says:

    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!

  44. 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

  45. Kyle says:

    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!

    • Paul says:

      Here Here! well said Kyle! Keep up the good work
      ps… I’m still even now quite partial to ‘notepad’ plain text webpage creation myself, keep the grey matter ticking ove

    • Paul says:

      Here Here! well said Kyle! Keep up the good work
      ps… I’m still even now quite partial to ‘notepad’ plain text webpage creation myself, keep the grey matter ticking over

  46. Jyotish says:

    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.

  47. Kyle says:

    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!

  48. Skokov Ilja says:

    Спасибо за информацию!

  49. JoKie says:

    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?

  50. Comba says:

    Kyle,

    It seems IE 6 that Im running is not displaying the correct border on Bottom-Left, Bottom-Right and Top-Right. I think it has something to do with background-positioning. It displays the Top-Left corner on all the rest of the corners. Do you think its a syntax problem? What should I look out for?

  51. […] that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here. Share this […]

  52. omkar says:

    Simple gr8 …….

  53. Abhinav says:

    The easiest and shortest way I’ve seen till now.

    Thank you…

  54. colin says:

    Were have you been?! Love this, I hated the other methods of using 4 graphics and tables and whatever else. This image sprite ROCKS and is easy to adapt my image/border/color, just ONE true image. I’d tattoo this url to my arm but it’s a bit long, i’ll just Tweet instead.
    SO SIMPLE, jealous you got it first!

  55. Muhammad Ali FArooq says:

    this is the best and very simple way to create totally scalable boxes with round corners.
    i have not implemented this yet but the idea is very good.

    thanks, you saved my day

  56. Gigabyteguy says:

    Awesome.. Good work mate!

  57. me says:

    very nice..but what should you do if you need a transparent background…it seems that if you use a png instead the gif it’s not working anymore

  58. Jason says:

    Great solution! Since most of my site uses boxes on a white background, I inverted the GIF’s transparency which allows for any background color to be used in the box. That way, I’m changing background color with CSS rather than creating multiple GIF files. Only works if you’re against a solid-color background, but that’s my site. In any case, thanks! Love the simplicity of it all!

  59. Juan Carlos says:

    Thanks for having this wonderful site.I have spent around a year learning css and i already have reached some results,however i have had some troubles about rounded corners with css.I hope , now that i found your site, all my troubles with rounded corners soon be over.please , forgive my english and thanks a lot again.

  60. Shellie Z says:

    So, I tried this with a border to go around the outside. Didn’t work. Suggestions?

  61. Hans Lee says:

    Hi, Kyle

    Very smart technology.

    I tested this technology works well with borders. Thanks!

  62. Angela Law says:

    Amazing solution… Many out there don’t work well but this solution is perfect… The thought of develving into CSS always sucks as a programmer. It has become an entity of it’s own not something to be triafled with. I have come up with my own ways (back in the old days when internet was young) and been searching for a decent way lately to do it better to avoid the popcorn affect or wasting developing separate solutions for each different size and color. This is a fantastic solution and I really appreciate you sharing it to the masses!

  63. Bergtroll says:

    Hi there, I really like your solution. Unfortunately it does not work for me properly in IE 6. There is a 1px line below and right of my round corner box filled in same color than background-color of .cornerBox :-/. Don’t know how to get rid of it yet…

    • Kyle says:

      Most of the time, if I use this method for corners, I add an IE6-only style sheet that contains .corner { display: none; }. That gets rid of the corners completely for IE6 users. Honestly, fancy effects like rounded corners are probably the least of your concerns in the antiquated dinosaur that is IE6.

  64. […] di codice necessaria è sempre tanta, e anche le righe di CSS non sono poche. Guarda ad esempio questa tecnica: 6 div, un paragrafo, un’immagine di sfondo e ben 35 righe di codice […]

  65. […] of code necessary is always a lot and also the CSS lines aren’t a few. For example look at  this technique: 6 div, a paragraph, a background image and 35 lines of  CSS […]

  66. shannon says:

    Great post, trying to use this on my site but the problem IE is sometimes being stubbon, IE8 works but IE7 id displaying this all strange…any suggestions?

  67. Griffen says:

    What I would use is one div and this CSS code
    #div {border-radius:10px 10px 10px 10px;-moz-border-radius:10px;-webkit-border-radius:1opx;background-color:lightgrey;} and you pretty much get the same thing without any images or extra divs. Hope I helped anyone!

  68. Julien says:

    Hi
    Thank you for this great code. Is there a way to add a border to these?
    What do you think?
    Thank you very much!!

  69. Mamun says:

    Really nice. I have been benefited. Thanks for a great post.

  70. […] it, and then use css to chose which part of the image to use where. Here is a link to an example: https://kyleschaeffer.com/tutorials/k…tml-no-script/ __________________ Need a break? EnterCave more than 40000 online games in 15 categories. […]

  71. if i make a new CSS spirte then how i excute CSS code?