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

Re: [css3-background] border-radius color transitions using gradients recommended but undefined

From: fantasai <fantasai.lists@inkedblade.net>
Date: Tue, 26 Jan 2010 12:44:24 -0800
Message-ID: <4B5F5428.1090804@inkedblade.net>
To: Brad Kemper <brad.kemper@gmail.com>
CC: Sylvain Galineau <sylvaing@microsoft.com>, "www-style@w3.org" <www-style@w3.org>, Andrew Fedoniouk <news@terrainformatica.com>, Zachary Weinberg <zweinberg@mozilla.com>, Brian Manthos <brianman@microsoft.com>
On 01/26/2010 09:51 AM, Brad Kemper wrote:
 > On Jan 25, 2010, at 9:39 PM, fantasai wrote:
 >
 >> [1] See, for example, border-top-right-radius: 100%. Pick different
 >> colors for each side and some thick widths so you can see what's going
 >> on. If we take the (fairly reasonable, imho, though unrequired)
 >> invariant that the left and right border colors must never be directly
 >> adjoining, and follow the rule about the center of color transitions
 >> given in the spec, the result is not going to be a simple conic gradient,
 >> whatever it is.
>
> I just tried this, and the best result, IMO, comes from not letting
> any one corner radius exceed the size of the padding box.

You're probably getting weird renderings, is why. Here's a screenshot
from an implementation that worked out the geometric aspects of the
problem. It looks great, except if it's two-tone how do we put a
gradient on it?

You can't tell me author's won't want the curve to extend to the bottom
of the border box. They'll want to do it all the time for things like
tabs. It's a degenerate case when the flat part of the top disappears
like that, but it's an important one.

~fantasai


border-radius-thick.png
(image/png attachment: border-radius-thick.png)

Received on Tuesday, 26 January 2010 20:45:05 GMT

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