Transparent custom corners and borders, version 2

It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders.

Well, it’s time for an update. I haven’t added any revolutionary new features to TCCB v2, but there are some bug fixes and a few new features. I’ve gone through the comments posted on my original article and tried to find solutions to the specific problems mentioned. The CSS and JavaScript have also been touched up a bit.

The changes, then:

The default CSS now auto-clears contained floats.
The JavaScript has been modernised and rewritten to use object literal notation, sometimes also referred to as JSON. Read Dustin Diaz’ JSON for the masses for a detailed explanation, and then read Jonathan Snook’s JSON is a subset of the Object Literal to understand the relation between JSON and object literals.

The end result is that you can now plug the script in without worrying about conflicts with other scripts.
It is now possible to attach the script to any element type, not just div elements. Be aware that this could invalidate your markup. The script wraps the elements it finds in a div element, so if you attach it to, say, an a element inside a p element, the rendered HTML will be invalid (though W3C’s HTML Validator won’t notice since it doesn’t execute the script). To stay valid, only attach this script to elements that are allowed to have a div element as their immediate ancestor based on their location in the DOM, such as div, ul, form, and blockquote elements.
If the element the script is attached to has an id attribute, the attribute and its value is moved to the containing div element.
There should be no problems floating customised elements.
Nesting elements, floated or not, works fine except for in iCab, which lets contained floated boxes escape.
The default CSS contains a fix for IE whitespace issues that would appear under certain circumstances.

The TCCB v2 demo page contains several different examples, including one that shows how this technique can be used to create buttons with rounded corners and drop shadows with alpha transparency.

This technique works well in fully CSS-capable browsers, but there is one issue in Internet Explorer for Windows that I haven’t been able to find a perfect solution for. If you float or absolutely position a customised box, its width will not shrinkwrap to the width of its contents. All other browsers do that, but IE (including IE7) needs a specified width. That may be fine in some cases, but it can be very handy to let a float shrinkwrap. The demo page contains examples of both floated and absolutely positioned boxes, so check it out to see what I mean. If you can come up with a better workaround, please let me know.

The steps to use this technique are the same as in the previous version, so take a look at the original Transparent custom corners and borders article for the details. The basic idea is to first add the class name cbb to the elements you want to style:

<div class="cbb">
Box content
</div>
<ul class="cbb">
<li>List item 1</li>
</ul>

Then load the TCCB v2 JavaScript file:

<script type="text/javascript" src="cb.js"></script>

Finally copy and adjust the CSS from the TCCB v2 demo page.

Use and abuse the CSS and JavaScript freely, but please create your own images. If you need some help creating good looking buttons, check out Veerle’s tutorial Creating flexible buttons using Photoshop shapes and styles.

Posted on September 25, 2006 in CSS, JavaScript