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

Zack Weinberg wrote:
> Andrew Fedoniouk <news@terrainformatica.com> wrote:
>> div.case10
>>        {
>>          width:10%;
>>          height:60px;
>>          border:30px solid;
>>          border-radius: 60px/20px;
>>        }
>> ?
>>
>> I am getting this (content updated):
>> http://www.terrainformatica.com/w3/round-corners-sciter.png
>>
>> Cool of course but is the right way of doing this?
> 
> What we want to be saying, for the inner-edge-is-a-sharp-corner case,
> is something like this: draw lines outward from the inner corner,
> continuing the line segments of the inner edge, until they intersect
> the outer edge.  The gradient must be inside the region so defined.
> I think this is what the current wording means, but it *is* confusing,
> and my revision isn't the right fix -- as this example shows, the
> transition might *not* be supposed to cover all of the area with a
> curved outer border.
> 
> I've added another case to my diagram.

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.

We just need to choose one of cases define it.

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:

<html>
   <head>
     <style>
       div
       {
         border:30px solid;
         border-color: red blue green gold;
         border-radius: 60px/20px;
            -moz-border-radius: 60px/20px;
            -webkit-border-radius: 20px;
         width:100px;
         height:100px;
       }
     </style>
   </head>
<body>
   <div>case 10</div>
</body>
</html>

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Sunday, 23 August 2009 18:15:26 UTC