Cooking with Webstandards! Taste the full flavour of the Web

CSS: border-color: transparent

Wow, I really wasn't aware that transparent was a valid border-color value. But according to the CSS Level 2 Errata, it is. This really solves some problems you might have, for example when styling hovered links with a border. The problem was, that while hovering, you changed the width and height (or the line-box) of those links, which caused distracting movement of content.

Even my fix for positioning with containing blocks might benefit from that.

Obviously, at time of this writing, the W3C's CSS Validator has some problems with transparent when used within a shorthand property, but I haven't tested that.

I really don't know how this has slipped past my attention...but it really made my day today!

Posted by Minz Meyer at October 15, 2004, 02:36 PM | To Top

Other ingredients

Unfortunately, in Explorer, border-color: transparent is rendered as black.

Posted by: Aleksandar at October 15, 2004 06:32 PM | Let Cool (this ingredient)

Yes Aleksandar, you are right.
When I tested it, I had the Mozilla Preview turned on in TopStyle and didn't realize it. So....forget that paragraph about fixing the containing blocks problem in IE.

Posted by: Minz Meyer at October 15, 2004 07:32 PM | Let Cool (this ingredient)

i usualy get around the border on hover displacement of content by adjusting the margin/padding at the same time.

so if the margin/padding before hover was 4px for instance, on hover it would be 4px minus width of border. that way you don't get that twitchy shift...

Posted by: spook at October 16, 2004 01:18 PM | Let Cool (this ingredient)

Yeah, spook, that's correct...and that's my usual approach either. Thanks for pointing it out!

Posted by: Minz Meyer at October 16, 2004 01:28 PM | Let Cool (this ingredient)

Once again, IE delights us with it's antiquated css fudgery.

Posted by: Jim Amos at October 18, 2004 12:12 AM | Let Cool (this ingredient)

Don't forget the outline property as well. I suspect (haven't tested) that IE, and probably many other browsers will simply ignore this property. It has the useful distinction of not forming part of the box model sizing.

Posted by: Mark Tranchant at October 19, 2004 11:19 AM | Let Cool (this ingredient)

the last time I checked, the border-outline property was only supported by Opera 7.x
I was with Mozilla 1.6 back then, and I doubt anything has changed, but I am not sure, though.
If I remember correctly there exists a -moz -property doing something similar, but I don't use proprietar properties.

Posted by: Minz Meyer at October 19, 2004 03:52 PM | Let Cool (this ingredient)

Okay, I checked it, and the results are quite surprising.
The only browser supporting the outline property correctly is:
Internet Explorer 5.2/Mac
Opera 7.5 on both Win and Mac support it only partially (color and style, but you can't adjust the width).
Safari 1.2 supports it, but the outline is only drawn around the inline content, even if the element is set to display:block.
Mozilla/Firefox doesn't support it on both platforms.
Internet Explorer 5 and 6 on Win do not support this property.

See the test file:

Soooo....I guess, this isn't an option either, but thanks for bringing it up, Mark.

Posted by: Minz Meyer at October 19, 2004 04:14 PM | Let Cool (this ingredient)