1px rounded corners
Rounded corners are css hell, and even though they've been around for a while it's still quite hard to find a neat solution to implement them. You could use wrapper divs (excessive html) or the css3 border-radius property (hardly perfect either), but whatever you do, they always end up making your job harder than it should be. This article will focus on a little trick to make the implementation of one particular kind of rounded corner a tad easier.
When a rounded corner is implemented using html wrappers (and css images) people easily forget that the background color of the rounding (the color outside of the box) is actually crucial to the whole process. Since the background image used for the rounding needs to overlap the background color of the box itself, it cannot be transparent. Therefor you have to add the background color of the outer element into the image. This becomes quite messy when you're dealing with gradients or a whole range of possible background colors. Something to keep in mind for later.
1px rounded corners
The technique we'll be discussing today is suited for a specific kind of rounded corner. By cutting out the 1px corners a designer can give the impression of a rounding without actually designing some elaborate rounded corners. It's an easy technique with good visual effect.
To implement this we could stick to our regular patterns, creating four wrapper divs and applying a 1px background image (correct color) in each corner. This works fine, but means a lot of hassle for such a simple visual effect. And remembering the problem described earlier, cutting several 1px images in different colors and providing all the right classes could become a tedious job. There has to be a better way to do this.
css'ing outside the box
/* example 1 */ .example1 .outer {background:#0cc; margin:0px 1px; padding:1px 0px;} .example1 .inner {background:#0cc; margin:0 -1px;} /* example 2 */ .example2 .outer {margin:0px 1px; border:1px solid #0cc; border-left-width:0; border-right-width:0;} .example2 .inner {background:#cc0; margin:0 -1px; border:1px solid #0cc; border-top-width:0; border-bottom-width:0;} /* combination */ .example2 .outer {background:#0cc; margin:0px 1px; padding:1px 0px;} .example2 .inner {background:#cc0; margin:0 -1px; border:1px solid #0cc; border-top-width:0; border-bottom-width:0;} The solution is simple and only involves two html (block) elements. The outer element will set a simple base color, the inner element will be pulled 1px outside the outer element on the left and right side. By making sure the inner element is 1px away from the top and bottom of the outer element the wanted effect will be created somewhat out of the blue. It's really as simple as that.
Example 1 shows this technique using a top and bottom padding on the outer element. The inner element contains the core of this technique, the 1px left and right negative margin. Example 2 is more or less the same but uses borders. This way the padding is not needed. A combination of both techniques (padding on outer and borders on inner) could also be used. The extra left and right margin placed the outer element is to keep the box within the correct vertical flow of the document.
I prefer the first example for situations where the background color is singular since it doesn't need as many color definitions. If the border color differs from the background color you could either pick example 2 or the combination of both methods. There's no real theoretical preference there, though I myself would probably pick the combination method (hate those border-x-width statements).
Whatever method you choose, since we are using the negative margins the color of the 1px corners will automatically take on the right background color as these pixels are not actually part of the box we are building. And there is more ... this technique works in all IE clients without extra hassle. Yay for that!
Want to see this in action? Check out the test page demonstrating example 1 and 2.
conclusions
You often see this type of rounded corners used with buttons layouts. Rather than start wrapping them like over-sized Christmas presents you now have a better way of handling these little design critters. This technique won't help you with other cases of rounded corners, but every little bit helps.
The technique works well cross-browser, requires only one extra wrapper and supports alternate border colors. And you don't have to worry about the visual context of your box. If only all css tricks were this easy.