This page demonstrates different uses of the technique described in the article Transparent custom corners and borders, version 2. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!
To create your own corners and borders, follow the instructions in Customising custom corners and borders. For an example of how easy doing stuff like this will be once all browser vendors get with the times and update their CSS support, check out Custom borders with advanced CSS.
The CSS and JavaScript are free to use, but please create your own graphics. Thanks!
This is the most basic type of custom box. It uses the default styling and is not positioned or floated, and does not contain other custom boxes.
There used to be a problem with this.
But now you can put custom boxes inside other custom boxes with no problems.
It will shrinkwrap to fit its content in all browsers but IE.
You can also use this technique to turn links into buttons. These are floated left and shrinkwrap to fit their content:
Unfortunately you need to specify a width for Internet Explorer since it doesn't shrinkwrap.
It is also styled the same way all boxes will be styled in IE 6 and below. IE 7 supports PNG images with alpha transparency and will display the same images as other browsers.
As you can see, floats can now contain floats.
The CSS used to float this box is applied with an id selector to show that if an id attribute exists, the script moves it to the new container.
