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

Re: [CSS3, Backgrounds and Borders Module] some questions about border-radius

From: Zack Weinberg <zweinberg@mozilla.com>
Date: Sun, 23 Aug 2009 11:55:11 -0700
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: W3C Emailing list for WWW Style <www-style@w3.org>
Message-ID: <20090823115511.5544748f@trurl>
Andrew Fedoniouk <news@terrainformatica.com> wrote:
> Here are three possible cases of the location of the transition area:
> http://www.terrainformatica.com/w3/border-radius-transition-areas.png
> plus I've added for the reference example of Xara way of doing corner
> transitions on wide borders. Algorithm is close to case (1) as far as
> I can tell. At least it matches case #9 here 
> http://www.terrainformatica.com/w3/round-corners-sciter.png
> I suspect that current spec is trying to define case (1) also.
> Zack, your case is (3) and is different from what spec is saying
> about tangents.

I don't see how you can possibly read the spec as calling for case (1). 
The transition boundaries in case (1) are defined by the *outer* curve,
but the existing spec language speaks only of the *inner* curve (or
sharp inner corner).  Case (2) is not consistent with the spec language
either, for the same reason.

I think (3) is the only thing that can reasonably have been meant, and
the only thing we need is editorial improvements, clarifying the text
and/or adding diagrams to illustrate.

> For the note: FF appears to use case (2) and Google Chrome appears
> as having bug in such cases. Didn't test it in Safari. Document for
> testing:

Neither Gecko nor Webkit implements gradient transitions, so they
cannot be said to use *any* of these cases.  However, both of them draw
their sharp transition line outward from the corner point.

>             border-radius: 60px/20px;
>             -moz-border-radius: 60px/20px;
>             -webkit-border-radius: 20px;

I know webkit doesn't implement the full border-radius shorthand, but
you're not testing the same thing on all browsers if you give up and
just say 20px.  You can get rendering matching Gecko by spelling it out

  -webkit-border-top-left-radius: 60px 20px;
  -webkit-border-top-right-radius: 60px 20px;
  -webkit-border-bottom-right-radius: 60px 20px;
  -webkit-border-bottom-left-radius: 60px 20px;

Received on Sunday, 23 August 2009 18:56:05 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:38 UTC