Transparent custom corners and borders
Have you ever wanted to make a resizable box with rounded (or any shape) corners, custom borders, and a transparent shadow? Did you also want to do that without cluttering your markup with a bunch of non-semantic
div elements? Now you can.
In June last year I wrote about a way of creating a Flexible box with custom corners and borders. While that method works, it needs some extra markup and has a few other limitations. This new technique uses no extra markup, allows the use of transparent images for the corners and borders, and has no restrictions on the background colour and margins of the elements within the main container. Skip right ahead and take a look at the final example if you can't wait.
Wanted: less markup, more transparency
To allow for the use of transparent images for the corners and borders, the CSS had to be changed a bit. It's easier to follow when you can see all the markup, so check the CSS only example for the HTML and CSS, including the markup that is inserted by the script in the final example.
Since an element's background properties also determine the surface colour or image of the element's padding, I had to use margins and relative positioning instead of the padding I originally used to put the images in place. If I were to use padding, the transparency of the images would cause some unwanted overlapping, as demonstrated in the CSS only + padding example.
Just like the old version, this box will expand to contain any amount of content vertically, will handle any text size, and can become very wide before the horizontal borders start breaking up. How much it will stretch horizontally depends on the width of the background image that contains the corners.
The IE Factor
There is of course one caveat to using PNG images with alpha transparency. It's well-known that current versions of Internet Explorer for Windows do not support it. But since IE7, due out in beta later this year, will, I think it's reasonable to start looking at ways that transparency can be used. Obviously you will need to consider older versions of IE/Win for several years to come, but there are ways to send different images to those browsers.
In these examples I've used conditional comments to send GIF images to Internet Explorer browsers with a version number lower than 7, so when IE7 comes along it will use the PNG images, just like other modern browsers. Until then, IE users will get something similar to the CSS only: IE version example. I hope that doesn't count as browser elitism ;-).
Two images are used. First,
box.png contains a complete box and is used for the corners and the horizontal borders. For the sake of this demo I’ve made it 1600 pixels wide. You may be able to get away with a narrower image, though it probably won't save you many bytes. The other image,
borders.png, contains the vertical borders.
Why use a single, large image for the corners instead of several smaller ones? There are several reasons:
- Splitting the image into a bunch (eight in this case – one for each corner plus the top and bottom borders) of smaller images may actually increase the total file size, depending on the look of the corners and borders.
- To minimise the number of HTTP requests sent to the server.
- Convenience. When changing the look of the borders and corners, replacing two files is faster than replacing eight files.
Out with the divs, in with the JS
text/html) and XHTML (served as
I just adapted the scripts as needed and made them work together. Study the comments in the complete script for the full details.
To create a box with custom borders, all you need to do is wrap whatever you want to be in it in a
div element with a class name of
cbb (use multiple classes if you like – the script is made to handle that):
<div class="cbb"> Box content </div>
The script adds the extra
div elements and changes the class name from
cb is the class used to attach the images. If you want to use other class names, just edit the
And we're done
And there you have it, a resizable box with transparent custom corners and borders, no extra markup needed. To customise it, just replace the images with your own. If your custom borders have different dimensions than those used in the demo you will also need to adjust the CSS to account for that.
Got any suggestions for further improvement? Let's hear 'em.
Update: I've made some changes to fix a few of the glitches mentioned in the comments.
Problems fixed include:
- Floating: You can now float the box without breaking it.
- Margins: It is now easier to control the vertical margins of the box. This is especially notable when you have several boxes stacked on top of one another.
To fix this I changed the script a bit. It now inserts one more
div element that wraps the box content. Doing that allowed me to ditch some of the relative positioning and negative margins, which were causing problems in some cases. I had to give one of the
divs a 1px height to make IE happy, but that's something I'm getting pretty used to doing.
Customising instructions: For details on how to make your own graphics, check out Customising custom corners and borders.
This technique has been updated! Check out Transparent custom corners and borders, version 2 for a more recent version that fixes some problems in the version described here.