Gradient borders

css gradient
Mark picture Mark · Apr 26, 2010 · Viewed 604.2k times · Source

I'm trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);

But this does not work.

Does anyone know what is the correct way to do border gradients?

Answer

Tony picture Tony · Jun 22, 2011

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image

Related questions

How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More
CSS3 Transparency + Gradient

RGBA is extremely fun, and so is -webkit-gradient, -moz-gradient, and uh... progid:DXImageTransform.Microsoft.gradient... yeah. :) Is there a way to combine the two, RGBA and gradients, so that there's gradient of alpha transparency using the current/latest CSS specs.

Read More
CSS3 gradient background set on body doesn't stretch but instead repeats?

ok say the content inside the <body> totals 300px high. If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient Then I maximize my window (or just make it taller than 300px) the gradient …

Read More