W3C home > Mailing lists > Public > www-style@w3.org > October 2005

Re: [css3-background] border-radius questions

From: Bert Bos <bert@w3.org>
Date: Fri, 14 Oct 2005 21:08:13 +0200
Cc: www-style@w3.org
To: "Undisclosed.Recipients": ;
Message-Id: <200510142108.13353.bert@w3.org>

On Thursday 13 October 2005 07:10, Ben Stucki wrote:
> I've been working on a test implementation of the border-radius
> property and believe that the section should better define how the
> corners are to be drawn. A few questions come up when a given border
> has width, yet shares a quarter ellipses with a border that has no
> width. So, to hopefully stay consistent and clear in my questions,
> I'm going to be focusing on only the top right corners of the
> following examples.
>
>
>
> #example1 {
>
>             border-width: 3px 1px;
>
>             border-color: #0F0 #F00;
>
>             border-radius: 8px;
>
> }
>
>
>
> #example2 {
>
>             border-width: 2px 0px;
>
>             border-color: #0F0 #F00;
>
>             border-radius: 8px;
>
> }
>
>
>
> I think it's reasonable for me to assume that in example1 the line
> width would gracefully diminish from 3 at the top of the ellipse to 1
> at the right, meaning that the inside curve of the border would have
> a different arc from the outside curve. Following that logic, should
> we diminish example2 from a width of 2 at the top of the ellipse to a
> width of 0 at the right (90 degrees)? It sounds like an easy
> question, but from a design standpoint it allows the top border to
> impede past the half arc (45 degrees in this case), which may be
> thought of as being the right border. Should we then instead draw
> only to the half arc?

Interesting question. I would have been happy if implementations did 
just the easy cases: a border of constant width or no border at all. 
For more fancy borders, the designer could always draw the desired 
shape himself and use it as an image. But if it is possible to do 
better, that is great to hear.

I think a corner that gradually gets thinner between top and right would 
look great, much better than two arcs of different thickness that meet 
in the middle.

For the case that one of the two borders has a zero thickness, I think 
using the same algorithm is fine. The corner would end in a sharp 
point.

>
>
>
> Also, I've found that using a gradient to transition border colors in
> the arc is preferred. I understand why this may not be a requirement,
> but should it be a suggestion that this method is used when possible?
> Specifically, I think browser interpretations of this should be the
> same.

>
> Finally, I think designers may at times prefer a diagonal line at
> corners, making the box 'clipped' instead of 'rounded'. Perhaps there
> is justification for a property to define how each corner is drawn:
> clipped or rounded. I think there is a use case for setting these in
> combination. Any thoughts are appreciated. Thank you.

Good points, both the color gradients and the cut-off corner. All I can 
do for now is mark them as issues to discuss...



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France
Received on Friday, 14 October 2005 19:08:31 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:41 GMT