Border Gradient

[diracleo]

I know that it is possible to create a border gradient that spans across the width of the border, but how would I create a border gradient that goes along the length of the border like the attached image?

I don't care if it's a CSS3 method that isn't compatible with older browsers - I just want to know if it's possible with the latest release of Webkit and/or Firefox.

[dresden_phoenix]

Welcome to SitePoint, diracleo.

perhaps , for the example that you have given, what you want to use is the border-image property , set to "stretch" ... you can use borderexample.gif to slice from, tho you may or may not find it easier to make the area inside the border transparent, depending on what you want to do. (and yes, that will require CSS3 compatible ,modern-browsers; so a good tip is to write a fall back rule for older browsers and IE )

Hope that helps you out.

[deathshadow60]

There is a trick I used once that may be able to do that all the way back to IE5... one moment.

Yeah, the trick is to put a image in the markup as a sibling to the content element, with a parent wrapping div...

Gimme a couple minutes and I'll toss together a demo.

Actually, I'll give it to you three ways. First will work in all browsers, second is CSS3 using an image, third is CSS3 without an image.

[diracleo]

I'm thinking that I could just have a parent div that is 2 pixels wider on each side than its vertically and horizontally centered child div. The parent div would have a background image of a horizontally repeating gradient. The child div would have a black background.

You can stretch a background image to fit the entire height of a div using CSS right? And then have it repeat horizontally.

[deathshadow60]

... and here are the three demo's.

CSS 2 Gradient image stretch to height demo
CSS 3 Gradient image stretch to height demo
CSS 3 Background gradient as border demo

The first one uses a img tag (boo! hiss!) strategically placed behind the content. It's sloppy, but has the best compatibility AND performance.

The second one uses the same background-image with CSS 3's background-size, and as such will not resize the background on legacy browsers.

The third one uses linear-gradient to generate the background, so no images are needed. It actually has the best support even working all the way back to IE 5.5 thanks to the use of a filter, but also has some performance issues if the content ends up particularly large. In general though I consider this the best of the approaches -- while all the blasted different browser implementations can drive you batty code-wise, it's 670 bytes with comments to avoid an extra file handshake to the server -- so even though the code is larger than the .png, it may in fact load faster.

Hope this helps -- figured I'd give you a bunch of choices as depending on the content these may or may not meet your needs; there are advantages and disadvantages to each of them.

Oh, I gave it 8px of border to make it clearer what's going on... and used EM's on everything else so it's clear what's margins/padding for layout and what's the border.

[diracleo]

deathshadow60, thanks for those demos. I ended up using your second one - the parent div with the background-image using background-size to scale it to fit 100% of the height and width, and then a 2px padding. Its child div has 100% width and height and a black background.

[deathshadow60]

deathshadow60, thanks for those demos. I ended up using your second one - the parent div with the background-image using background-size to scale it to fit 100% of the height and width, and then a 2px padding. Its child div has 100% width and height and a black background.

That one is the least code -- and the degradation when background-size is unavailable is entirely acceptable since the only thing "messed up" on older browsers is that the image doesn't scale.

Sometimes the simplest solution is best.

I did goof on that one though -- I forgot to add -moz and -webkit versions of the CSS3 property, so it's not working in FF or Safari/Webkit since they don't use the 'real' one yet. Works great in Opera and IE9 though.

You should add:
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;

to .borderStretch to get those working. (though it appears the latest versions of Saffy and chrome do in fact support it 'regular' -- leaving FF the odd man out... oh wait, 5 supports it, 4 and lower doesn't... but adding the above fixes older versions of each so might as well toss it in.

[diracleo]

That one is the least code -- and the degradation when background-size is unavailable is entirely acceptable since the only thing "messed up" on older browsers is that the image doesn't scale.

Sometimes the simplest solution is best.

I did goof on that one though -- I forgot to add -moz and -webkit versions of the CSS3 property, so it's not working in FF or Safari/Webkit since they don't use the 'real' one yet. Works great in Opera and IE9 though.

You should add:
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;

to .borderStretch to get those working. (though it appears the latest versions of Saffy and chrome do in fact support it 'regular' -- leaving FF the odd man out... oh wait, 5 supports it, 4 and lower doesn't... but adding the above fixes older versions of each so might as well toss it in.

Yep - degradation in terms of the background image not scaling is perfectly acceptable since the fading border edges are just aesthetic touches. With an older browser, the user would just see a solid border since I made the background images pretty large.

I did not use the browser-specific tags and I don't see any problems in Firefox or Safari (both latest versions), but I might as well add them to be safe.