Reusable Transparent CSS Rounded Corners

In 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 today, after almost a year of evolution in the ever-changing world of web design. This is absolutely the most simple and efficient way to create rounded corners using strictly CSS and HTML.

Rounded corners are all the rage; they have been for some time now. There are pure CSS approaches to implementing this type of design, but occasionally your clients demand that your user experience be consistent across all browsers. Whether it’s time to stop using HTML and images for rounded corners is still a matter of debate. Nonetheless, I think every designer finds themselves doing this from time to time.

Say No to Images

I’ve found that many designs contain various types of rounded box styles on the same page. In my previous tutorial, this would demand that you create a separate corner image for each style of box. If you have a box with a red background, you’ll need to create a corner image with red corners. That makes sense from a visual perspective. From a data perspective, however, it’s not the best approach. If you think about it, the only thing you’re really “downloading” when you download a corner image is the curvature of your box’s edge. Wouldn’t it be better if we could somehow reuse that data on every box style everywhere else in your design?

Well, you can! How gloriously fantastic! Well…don’t get all excited just yet. There are a few limitations to this. This will only work when your rounded box appears on a solid color. For instance, the text you’re reading right now is on a solid white background. We can easily add rounded boxes to this page because of the solid color. This doesn’t really work if your background is an image or a gradient color.

Meet the Sprite

So, you have a solid background color, and you’re ready to add some rounded corner boxes to your page. The only really important thing here is your corners image. In Photoshop or an image editing software of your choice, create a square image. Basically, your image is all four box corners stuck together, so make it symmetrical. Fill your image with the background color of your page, and then delete a circle out of the middle of the square. It’s that easy! Here’s what it should look like when you’re done:

Transparent Corners Image

In case you’re not Photoshop-savvy, I have created a few templates that you can download and use.

The Markup

Now that we have this nice fancy reusable transparent corner image, it’s time to create the HTML that will be used to house our beautiful box and its contents. Here’s the basic setup:

<div class="box red">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>This is your box content. Lorem ipsum dolor sit amet.</p>
</div>

Pretty simple, right? We have an outer “box” <div/>, a <div/> for each corner, and then our content that will appear inside the box.

The Style

Our HTML doesn’t do much by itself. Most of the work to be done is going to be done in our CSS style sheet. In an attached style sheet, add the following CSS:

.box {
	position: relative;
	padding: 1em;
}
.red {
	background: #cc0000;
	color: #fff;
}
.corner {
	position: absolute;
	width: 10px;
	height: 10px;
	background: url(/path/to/cornerImage.png) no-repeat;
}
.TL {
	top: 0;
	left: 0;
	background-position: 0 0;
}
.TR {
	top: 0;
	right: 0;
	background-position: 100% 0;
}
.BL {
	bottom: 0;
	left: 0;
	background-position: 0 100%;
}
.BR {
	bottom: 0;
	right: 0;
	background-position: 100% 100%;
}

As you can see, we’re really trying to keep this simple. Basically, we have an outer “box” style, a “red” style that sets the box’s background color to red, and finally individual “corner” styles that will automatically position themselves at the edges of our content, regardless of the height/width of that content. Groovy.

The Result

I’ve created a simple “white” background corner image for use on this page. What you get when you put all of this together is a very flexible corner system that requires very little HTML and CSS to implement:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque justo felis, molestie rutrum blandit vitae, pellentesque vitae risus. Nunc hendrerit eleifend lectus. Aenean interdum facilisis sem eget laoreet. Morbi in nisl nec neque auctor volutpat. Nam sodales felis id magna cursus ac pretium libero mollis.

And the coolest part…

It’s Reusable!

The coolest part about using transparent images for our corners is that we can apply these corners to just about anything on our page that we want to. For instance, I could create some additional box styles (other than “red”) by adding a bit of CSS.

.red {
	background: #cc0000;
	color: #fff;
}
.blue {
	background: #00cc00;
	color: #fff;
}
.green {
	background: #0000cc;
	color: #fff;
}
.gray {
	background: #dedede;
	color: #666;
}

After changing our box’s class (class="box blue", class="box green", etc.), we would get:

Suspendisse potenti. Morbi eget turpis urna. Fusce tincidunt sem mollis lacus euismod rhoncus sagittis est placerat.

 

Suspendisse potenti. Morbi eget turpis urna. Fusce tincidunt sem mollis lacus euismod rhoncus sagittis est placerat.

 

Suspendisse potenti. Morbi eget turpis urna. Fusce tincidunt sem mollis lacus euismod rhoncus sagittis est placerat.

 

Gray is the new “red”. Vestibulum iaculis varius laoreet. Ut et condimentum nunc. Suspendisse eleifend congue dolor, non consequat ante tristique sit amet.

That’s really cool, but this doesn’t even touch the limits of how you can apply this. In addition to solid color boxes, we could also apply this to photos and gradients (which would be much harder in a more traditional corner system). Our corners really don’t care what type of content they’re applied on, they only really care about the background color. Let’s try it out on some different page elements (accompanying HTML and CSS are included for each style):

The Mini Profile

HTML:

<div class="box photo">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<h3>My Profile</h3>
	<img src="kyle.jpg" alt="Me" />
</div>

CSS:

.photo {
	width: 200px;
	padding: 0;
}
.photo h3 {
	background: #000;
	color: #fff;
	padding: 10px 20px;
	margin: 0;
	font-size: 1em;
}

My Profile

Me

The Gradient

HTML:

<div class="box blueGradient">
	<div class="corner TL"></div>
	<div class="corner TR"></div>
	<div class="corner BL"></div>
	<div class="corner BR"></div>
	<p>Notice the gradient background image!</p>
</div>

CSS:

.blueGradient {
	background: url(gradient-image.png) repeat-x;
	color: #fff;
}

Notice the gradient background image! Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis posuere purus, vitae sagittis enim sodales at. Proin in purus et metus vestibulum cursus. Vivamus volutpat dolor quis lectus cursus et lobortis felis iaculis. Aenean ut enim magna, sit amet convallis mi. In hac habitasse platea dictumst. In hac habitasse platea dictumst.

We’ve accomplished all of the styles you see above using a single image and some fancy CSS footwork. This really minimizes the impact of your corners on page download times, especially if you’re using a number of different styles on a single background color. No scripts, no confusing HTML, simple markup, and a single image. Happy styling.

26 comments

  1. Ryan Roberts says:

    I’ve been using a technique similar to this for a wee while now, but you’re article made me think… why not insert the 4 round corner divs using Javascript and style with CSS as normal? jQuery could easily and unobtrusively do this, that way you keep the HTML much cleaner moving the largely non-essential styling into Javascript. Also Firefox and Safari already handle border radius through CSS so you could put the Javascript into a conditional comment so only IE get’s this approach.

  2. ailaic says:

    That’s good for very simple boxes.

    There’s a great Dreamweaver extension called FlexiPanelsCSS that handles complex graphic css boxes and it’s quite easy to use (don’t want you to think I’m making them publicity, but the app is very very good :) ).

  3. Alfredo says:

    Exelent article!

    there is too a little javascript library that promise to round your corners called curvicorners (http://www.curvycorners.net/) that round ie and opera corners. while in browser that suppor rounded corner this library use border-radius property.

  4. thank for the trick, but to use it for ie6 you have to fix the css whit this properties:

    .box{
    *display:inline-block;
    clear:both;
    }
    .corner{
    overflow: hidden;
    }

    and use pixel for the background-position of the corners.

  5. Kyle says:

    Stefano, thanks for that great CSS tip to fix the corners for IE6. Generally, I’ll add a script that creates these corners for IE7+ users only (other browsers can use the much more performant “border-radius” property), and IE6 users will simply see the sharp edges of the box, but your fix is a good option as well!

  6. […] but my script will handle inserting the HTML and CSS in the right place. If you create the images a little like this, then you’ll find that your IE corners will be in place in no time at […]

  7. […] Update: Read a even more advanced version of this technique in an even newer tutorial! […]

  8. Brad Parks says:

    Hey… nice technique! thanks a ton for sharing it…. i love how the color/bg can bleed through…. i guess it always helps to *flip* the thinking on things, eh? Great work!

  9. Shellie Z says:

    Outlined?

  10. I just came from searching for a good site on Google and came to this site. I have to say these templates are good. Thank you for providing them in your blog. I will be sure to pass this link to others.

  11. Thank you!
    These tutorials were very helpfull. I’ve made my own template according to the Karate tutorials. :)
    Thanks again. I’m sure I’ll read this blog regularly.

  12. shanshan says:

    thanks for the post. But if the background color is not solid and the background is an image. How can we use the rounder corner button?

  13. shanshan, if your background is an image (like a gradient color), you’ll have to take a different approach. If the size of your box is fixed, you can create a corners image (the same width as the box) for both the top and bottom edges of the box. I hope this helps!

  14. Darrel says:

    Hello. Looks like your corner images may have been moved or deleted as none of the rounded corners on this page are working for me today (Aug 18).
    Very clever and useful idea though. Thanks for sharing it.

  15. Si says:

    Your PSD links are broken :’-(

  16. holodoc says:

    Hey Kyle, the examples on this page are not working because you are missing the “/wp-content/uploads/2009/09/cornerWhite.png” file.

  17. Kyle says:

    Oops! Sorry about the problems on this post — the Photoshop templates are back, and the corners now display correctly in my examples!

  18. Lucio says:

    Hi Kyle,

    What if the background image is a gradient and the content of the div is overflowing (overflow:auto)? The look of the corner image breaks because of the behavior inside and around the div changes.

    Any resolution about this? Thanks.

  19. Kyle says:

    Hi, Lucio. In that case, I will generally force the content to be fixed width, and use a header/background/footer image sprite that contains the corners and background for my box content. It’s less flexible, but displays well on top of images, gradients, and any other content.

  20. RobD says:

    OK, I’m going to admit to a bit of ignorance here and I’m hoping you can explain.. I understand exactly how you’re positioning your image to create the round corners…what I don’t understand is how the other corners don’t show.

    Example
    If I position the image in the upper left, I have 3 other portions of the sprite that aren’t transparent (the other 3 corners).. If I have a background color in my box of red, and my sprite has a background of white (as your’s does), why do I not see the 3 other “white” corners. My guess is that the image, because it’s in teh background, is overwritten by the rest of the box (kinda of a “z” order thing).

    Can you help clarify for me?

  21. Kyle says:

    Hi, Rob – great question about the corner images. Essentially what I’m doing in the examples above is “clipping” each corner image so that only 1/4th of the entire image is shown. Even though the image appears to be a single circle, it’s actually four separate images that are joined into a single image “sprite.”

    For example, if my corners image is a 20×20 circle, I make my corners 10×10. By shifting around the position of the background image, only one section of the image is shown at any given time.

    Hope this helps clear things up for you. Best of luck!

  22. RobD says:

    Kyle, thanks… I see in your CSS where you’re doing that now and that makes perfect sense
    width: 10px;
    height: 10px;

    Those two lines on the background image tag are clipping it in a 10×10 pixel. Since you’re using positioning to place the image, it’s only showing the 10×10 section you want.

    Very nice, and very elegant! Thanks for the explanation :)

  23. Nicola Giosmin says:

    Excellent tutorial! Many thanks.

  24. moonkat says:

    Put a border on your “cutout” circle, adjust the corner div positionings a bit, put a matching border on your box div, and voilà! You have a rounded corner box with a border!

    Out of all the solutions I’ve examined, although this still requires at least one image and 4 extra divs, it’s STILL the most elegant solution I’ve found! The image solutions are rigid, because I need to be able to change the color of a box according to client branding at the drop of a hat; the javascript ones are inelegant because of the tons of messy markup they generate.

    Thanks for this!

  25. moonkat says:

    Realized when implementing this, for the corners to render properly in Internet Explorer 6:

    1. “.box,” or whatever the containing element is, HAS to have height and width. Otherwise IE6 doesn’t recognize the relative positioning on the containing element, and the corners go all over the place.
    2. “.corner” has to have “font-size: 0; line-height: 0;.” IE6 puts extra spacing in the corners so that more of the background circle sprite shows than should.

  26. David B says:

    CSS3 has finally solved this problem with the border-radius attribute!

    http://www.css3.info/preview/rounded-border/