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

Interaction between border-image and background gradients

From: David Chambers <david.chambers.05@gmail.com>
Date: Thu, 19 Aug 2010 04:13:08 +1200
Message-ID: <AANLkTikArVyOQ9Af5CGbwq-y9UySFjb1O8VZ8=UTRq=Q@mail.gmail.com>
To: www-style@w3.org
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…

[image: 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?


David


gradients.png
(image/png attachment: gradients.png)

Received on Wednesday, 18 August 2010 16:13:44 GMT

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