Borders and backgrounds with CSS3 - HTML5 and CSS3 - page 387

top, #0ae, #fff 50%, #6c0 50%, #fff);
background: -moz-linear-gradient(
to bottom, #0ae, #fff 50%, #6c0 50%, #fff);
background: -o-linear-gradient(
to bottom, #0ae, #fff 50%, #6c0 50%, #fff);
background: linear-gradient(
to bottom,#0ae,#fff 50%,#6c0 50%,#fff);

Firefox
support

Opera
support

Support for
current draft
implementations
(at the time of
writing, just IE10)

This will produce a two-tone gradient like
the following in all browsers that support
CSS3 gradients.

You can see this example in ch10/gradient-
15.html. Browsers that don't support gradi-
ents display a green background; every-
thing else shows the gradient.

Cross-browser backgrounds and border-image
border-image has changed significantly since it was first introduced. All
the original implementations follow the shorthand property from the
September 2008 Working Draft. Following that draft, significant
changes were made that added specific properties for each component,
such as border-image-source , border-image-slice , and the fill keyword.
Before, border-image was like a subproperty of border ; now it's a stand-
alone property with subproperties of its own.
It's likely that vendors will move toward the new syntax when the spec
reaches the Proposed Recommendation status. In the meantime, you
can use it in a cross-browser way while still being compatible with the
current spec:

Legacy Firefox
support

-moz-border-image: url('border1.png') 80;

Legacy WebKit
support

-webkit-border-image: url('border1.png') 80;

Legacy Opera
support

-o-border-image: url('border1.png') 80;

Support for 2008 draft
implementations

border-image: url('border1.png') 80;

Support for current
draft implementations

border-image: url('border1.png') 80 fill;