Custom borders with advanced CSS
The technique for creating transparent custom corners and borders that I first wrote about in May 2005 has been appreciated by many, but it has also received some fair criticism.
I have seen people blaming CSS for the extra markup needed to achieve an effect like this, saying that CSS doesn’t meet their needs. In my opinion, that kind of criticism is misdirected.
There are features in CSS that make creating a flexible box like this easy, with little or no need for extraneous markup. The problem is that most browsers don’t yet have support for those features. So blame browser vendors, not CSS.
I’ve made a couple of examples that demonstrate how lean the markup could be if all browsers supported multiple background images and the
:after pseudo-elements. Some time in the distant future, perhaps. In the meantime, launch Safari (version 1.3+ or 2.0+).
Note: these examples currently only work properly in Safari. As far as I know, no other browser supports multiple background images. If you’re not on a Mac, sorry. I’m sure Firefox or Opera will support this in a not-too-distant future.
There are two examples. The first, Custom borders with advanced CSS - transparent, looks exactly the same as the box in the Transparent Custom Corners and Borders demo. PNG images with alpha channel transparency are used for the shadows.
The box contains two
div elements that are not structural. One is necessary to keep the shadows from overlapping. The other
div element is not strictly necessary, but very convenient since it leaves you free to fill the box with any content you like without worrying about vertical margins pushing parts of the top and bottom borders away.
The second example, Custom borders with advanced CSS - opaque, does not use alpha transparency for the shadows. This will obviously work best if the page has a solid background colour.
Since alpha transparency is no longer used it is possible to get away with a single non-structural
div element used to apply the background colour and contain any margins. Even that can be removed if you know exactly which element types the box will contain.
Let’s take a look at a rule from the second example that applies multiple background images to an element:
background-image:url(top-no-trans.gif), url(bottom-no-trans.gif), url(borders-no-trans.gif), url(borders-no-trans.gif);
background-position:100% 0, 100% 100%, 0 0, 100% 0;
background-repeat:no-repeat, no-repeat, repeat-y, repeat-y;
background-image property can take a comma-separated list of as many background images as you wish. The
background-repeat properties are then used to specify positioning and repeat modes for each image. Neat.
I am fully aware that a technique that only works in Safari is not ready for the real world just yet. My point is that you shouldn’t blame the CSS specification when the problem is inadequate browser support.