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.

Using JavaScript to insert the div elements necessary to put the background images in place is seen by some as a cop-out, and others have commented that JavaScript should be used for behaviour, not for presentation. And I agree. So I removed the JavaScript and most of the extraneous markup.

What? Removed the JavaScript and the extra markup? But… then how do you apply the custom corners and borders?

CSS.

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 :before and :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:

  1. .cbb {
  2. background-image:url(top-no-trans.gif), url(bottom-no-trans.gif), url(borders-no-trans.gif), url(borders-no-trans.gif);
  3. background-position:100% 0, 100% 100%, 0 0, 100% 0;
  4. background-repeat:no-repeat, no-repeat, repeat-y, repeat-y;
  5. }

The background-image property can take a comma-separated list of as many background images as you wish. The background-position and 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.

Posted on September 12, 2005 in CSS