Bug 20127 – Add CSS gradient support for borders

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: CSS

[John Engelhart]

While working with the new CSS gradient support, I found that it would be extremely useful to be able to specify a fill gradient for the borders colors.

This allows you to trivially create relief effects.

For example, a gradient that's white to black with a low alpha allows one to create a good looking button relief effect.  Combined with border-radius, you can create very good looking buttons.

I ended up creating the effect in a canvas by manually drawing what would normally be the border, but it's obviously much better if you can just do it natively with the border without having to resort to such hackery.

Conceptually, the border becomes a mask, and the gradient is used for the fill.  This is slightly different than the more intuitive notion of stroking the border.  By having the border be a mask, you can apply a consistent gradient fill for all of them.  The trivial case where all the borders are the same color is easy, I suspect that 'multi-color/gradient' borders would group borders that share a common gradient specification, and fill those at the same time in one pass.

I found it very useful to use border-radius along with a multi-stop fill.  For a 'white highlight at top, dark highlight at bottom', it looked very good when the top and bottom highlights could taper off over the size of the border radius.  So, at the top, the white highlight transitioned to the side highlight over the length of the border radius, and the side highlight just very slightly darken over the length of the left and right border, and repeat the border radius transition at the bottom.  When the border radius is specified with something like '0.5em', along with the corresponding gradient stops, this allows you to create resolution independent relief effects that scale very cleanly with a uses chosen text size.  In safari, 'Make Text Bigger' and 'Make Text Smaller' causes the effect to scale perfectly.

Oval buttons are essentially just a special case when the sides are only effectively 0.5em high, and the entire edge is bent along the radius, no straight segments.  Same thing, really.

Once I started playing with this, I kept thinking to myself "Now if I could just have a procedural shader!"

[Sam Weinig]

I believe this should be possible using border-image and CSS Gradients.

[Simon Fraser (smfr)]

I don't think you can get the same effect with border image and CSS gradients.

[Erik Arvidsson]

Yeah, border image is not for images in the border but a way to do a nine-grid background images.

I think we need a proposal for the CSS to do this.

[Erik Arvidsson]

I think the problem is that we do not correctly support border-image. To be more specific, border-image-slice seems to be missing completely leading us to always fill the center.

http://dev.w3.org/csswg/css3-background/#the-border-image-slice

It seems like implementing this correctly will break existing usages of -webkit-border-image.

[Simon Fraser (smfr)]

See bug 52736.

[Erik Arvidsson]

This is now doable with border-image

<style>

#a {
  display: inline-block;
  border-width: 2px;
  border-image-source: -webkit-linear-gradient(#aaa, #333);
  border-image-slice: 2;
  background:  -webkit-linear-gradient(#eee, #aaa);
  padding: 2px 5px
}

</style>

<div id=a>Hello World</div>