Custom borders and corners using a single image, CSS and optional Javascript.
That's a mouthfull! But fortunately it is not all that hard either to do or to understand.
So that we have a name to use instead of something long and drawn out, such as the title of this page, I would like to name this technique Sliding L's with the reason hopefully becoming clear during the code discussion portion of this article.
For a quick look, which we will return to later, take a look at a page using Sliding L's in different situations and positioned using a number of different types of CSS position: rules.
One more technique for rounded corners, with or without borders
After finally coming up with this method I am surprised that no one seems to have come up with a similar method before. It is almost in effect of an extension of one of the many different Sliding Doors effect with one of the original examples of the technique published under A list apart's Sliding Doors and what may be an even better adaptation found in tjkdesign's TJKTabs Menu.
It may be that I just haven't found anyone that does it similarly but I have checked about every list I can think of so if anyone knows of a reference to the same technique, I would be very happy to hear about it.
There are already a number of rounded corners techniques that people have come up with so why one more?
First of all, this technique is basically a custom edge technique instead of specifically being about corners and/or borders. I have implemented the walthrough as well as the Sliding L's demo using rounded corners with borders but that is due more so to my limited imagination where graphics are concerned.
Another reason exisitng methods weren't working for me concerns the need for Japvascript. This method does not require Javascript, although it can made use of if desired.
The Javascript only techniques, that obviously don't work without Javascript, also don't work within the design requirements I have, which are to support borders and edges of any shape or style so that was two strikes against the various Javascript techniques instead of just one.
For another reason, I was finding it actually more efficient to serve a single image than it was to serve 4, 6 or even 8 images even if the single image was up to 3 or 4 times the size of all the individual images combined. Requiring a single image solution reduced the available options significantly further.
Yet another reason, those currently available that have made the grade up to this point either rely on hacks or convoluted CSS to the extent that someone with limited experience, me for example, find them hard to use, especially when things don't go exactly as planned.
Another deal breaker for many of the remaining options is that they may do corners but not borders or they do corners with borders but the contained content needs to be totally within the widths of the edge effects on either side and top and bottom.
Maybe the most important reason though, none of those existing at the time I created this method made it possible to have to not worry about what I put inside the rounded/bordered corner box, what I put the rounded/bordered corner box in or how I placed it on a page.
All of the similar techniques either broke depending on what one put in them or broke depending on how one used them on the page, whether they were position:absolute, position:fixed, position:static, position:relative or even float:left/float:right.
In Internet Explorer 6, some of the rounded corner techniques would break depending on what the boxes were placed next to and depending on what positioning method was used and no amount of hacks of Internet Explorer 6 only CSS rules seemed to help.
Although it is a shame to have to design with the limitations of Internet Explorer 6 imposed on one, it is a simple fact that the ratio of IE-6 to IE-7 browsers is still high enough to make doing so a necessary evil.
I should mention that this technique is not as bomb-proof as one might hope regarding positioning on the page but that failing is primarily only in Internet Explorer 6 and to a very limited extent in Internet Explorer 7.
But, as can be seen from the Sliding L's demo page already mentioned, even the failings of either Internet Explorer version are easily overcome and in about as a methodical way as one could hope.
Edge transparency, a primary requirement
The final straw though was that a number of the techniques don't really work all that well with a background image that has a border and even fewer of the single image css only techniques listed will support transparent corners or edges so as to be placed on any type of background.
Oddly enough, one of the best single image rounded/bordered corner techniques is not on Christian Watson's SmileyCat Rounded Corner Roundup, although a predecessor to it is.
The best one is Schillmania's Even More rounded Corners Using CSS which is both where I got the idea that rounded corners could be done with a single image as well as the idea that there might be a better way for some applications.
Better is in the eye of the beholder
Christian's method is pretty slick although maybe a little too slick for me. The CSS was not as straight forward as I would have hoped making it difficult to know what to do when it didn't work exactly as expected.
It may have helped were a walkthrough of how it worked provided but one wasn't and even trying to work through it step by step myself, I found I was getting lost as it seems there are a number of inter-dependancies that unless all were balanced out, would give results one definitely different than what one would expect or hoped.
Also, and the reason for me coming up with my own technique is that Christian's method relies on applying heights and widths to various non-absolute positioned elements which unfortunately triggers hasLayout in Internet Explorer causing it to no longer shrink-to-fit to the container contents.
One area where Christian's method stands out, where the Sliding L's method fails is the case of trying to use background PNG Alpha Transparency for the entire container. PNG Alpha Transparency does work in the Sliding L's methods but only along the actual edges, not in the center of the container itself where the actual will be.
Where is the Javascript?
Like all the other CSS solutions, this one is not much different in that it requires a number of non-semantic divs to be used to achieve the desired effect.
But, using a simple bit of DOM scripting, one can easily combine this technique with Javascript to serve semantically meaningful HTML/XHTML and then on page load, insert the HTML required to achieve the effect.
That is not necessarily effective for improving the semantic markup for accessibility if Javascript is enabled but it at least is a step in the right direction and in any case, the resulting DOM tree is no worse that with the Javascript only methods.
Also, although it may be some distance into the future before there is enough support from browsers to make it useful, CSS-3 supports multiple background images in elements which could effectively replace the need for all of the corner/border effects and using the Javascript method, one would have less markup to change, in fact none, if converting to the use of CSS-3 background images
In any event, if you wish to see Sliding-L's implemented using Javascript, now is your chance, or, continue on to the code walkthrough.
A simple walkthrough by a simple mind
One of the biggest failings of almost all the techniques currently available is that they often give code examples without that much of an explanation as to how they actually work.
There are a number of notable exceptions but in the most part, one either has to memorize a bunch of convoluted code or continually go back and copy, paste and modify the examples to fit.
My goal for the code section of this project is to explain how this technique works so that one doesn't have to memorise it or continually copy, paste and modify but instead, understanding how it works, will be able to easily duplicate the effects with very little effort.
So without further delay, on to the Sliding L's CSS and XHTML walkthrough!
