Mark Mark - 1 year ago 157
CSS Question

CSS3 Gradient Borders

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);

This does not work, does anyone know what the correct way to do border gradients is.

Answer Source

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 --
Browser support:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download