W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: Interaction between border-image and background gradients

From: Simon Fraser <smfr@me.com>
Date: Wed, 18 Aug 2010 19:55:39 -0700
Cc: www-style@w3.org
Message-id: <AE697E03-CEEE-4EDA-808A-9D94D89F6332@me.com>
To: David Chambers <david.chambers.05@gmail.com>
On Aug 18, 2010, at 9:13 AM, David Chambers wrote:

> Given…
> 
> /* both */
> margin: 20px;
> width: 400px;
> height: 200px;
> border-width: 20px;
> -webkit-border-image: url(transparent.png) 0; /* transparent image to avoid confusion */
> 
> /* top */
> background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
> 
> /* bottom */
> background: -webkit-gradient(linear, left top, right top, from(red), to(blue));
> 
> 
> Safari renders…
> 
> <gradients.png>
> 
> As does Firefox, with the equivalent rules.
> 
> Is this correct behaviour? Why does the gradient extend to the border edge in one direction only? Why the opposing stripes in the other direction?

The gradient is being rendered in the padding box, and then repeats to fill the border box. If you turn off repeating, you won't see the red/blue slices on the edges.

Simon
Received on Thursday, 19 August 2010 02:56:34 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT