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 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
<ul class="cbb">
<li>List item 1</li>

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