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

Comments

  1. Very nice! Great work, Roger.

  2. Awesome! I was waiting for you to do something on this!

  3. I wrote an article about this: Multiple Backgrounds CSS3

  4. While its a shame that this isn’t useful in the real world yet, I just wanted to thank you for your original technique again. I have used it on several sites, I absolutly love it!

  5. Yeah, the future looks bright.

    I had a great moment a few weeks ago, hvaing read about Safari’s support of multiple background images.

    I had recently finished building a rather complicated little page, containing independant inner and outer borders, all with rounded corners, and flexible height and width. It took me a good day to actually get my head around the concept and figure the best way of doing it. Only a few weeks later, I learnt of Safari’s multiple background image support, dug out all the images, and built the new CSS rules in about 20 minutes.

    It was great. Unusable of course, but it raised a few smiles around here.

  6. September 13, 2005 by Maarten

    “JavaScript should be used for behaviour, not for presentation”? Why? I think it’s unnecessarily restrictive to only use JavaScript for behaviour when it is clearly also well suited for these kinds of neat presentational features. As long as the JavaScript and markup are clean, and the solutions are neat and serve a usefull purpose (be it transparent borders or ie-bug workarounds), what’s the problem?

    Laying this kind of artificial restriction on an extremely useful tool is, in my opinion, sacrificing too much to an unnecessarily haughty principle.

  7. I too wrote an article on multiple background images in CSS3. It is a desired propery, but since the lack of support is almost complete the examples you give are more or less useless. I guess we’ll just have to live with the fact that we need some extra markup to make theese styles with CSS2.

  8. Yeah, there are many neat things coming along our way when CSS 3 finally is broadly implemented (this implies a stable specification, of course).

  9. What about putting a screenshot for those, who don’t have Mac?!

  10. September 13, 2005 by Roger Johansson (Author comment)

    dusoft: I didn’t make any screenshots because it looks the same as the top-most box in the JavaScript demo. :-)

  11. Maybe this is a dumb question, but… how come no one ever uses the MS AlphaImageLoader filter to allow for PNG alpha transparency in IE?

    It’s not a great solution, but… it’s the only solution. Some people have an aversion to creating a seperate “IE Hacks” CSS doc and sniffing for browser, but I’m not even sure that’s needed.

    myDiv {

      background: url(transImg.png) no-repeat;

      _background: 0;

      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’transImg.png’) }

  12. September 16, 2005 by Roger Johansson (Author comment)

    Jason: As far as I can tell that doesn’t work very well with CSS background images. If it did I’d be happy to use it in an IE-specific stylesheet.

  13. Does this AlphaImageLoader filter validate?

  14. hi all where can i download the AlphaImageLoader. bstrg toreuse

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.