ISSUE-29: Is there a maximum 'border-radius' and what happens then?

too-large border-radius

Is there a maximum 'border-radius' and what happens then?

State:
CLOSED
Product:
CSS3 Backgrounds and Borders
Raised by:
Bert Bos
Opened on:
2008-04-04
Description:
What happens when the combined border radius of two adjoining corners exceeds the size of the box? It doesn't look good if a corner is not a complete quarter circle or quarter ellipse, so the radii must be reduced in some way. There are various ways to do that, which one looks best?

This may be difficult to decide without images to look at...

1) If any horizontal radius is larger than half the width of the box, it is reduced to that value. If any vertical radius is larger than half the height of the box, it is reduced to that value. (There are four horizontal and four vertical radii.) This is an easy algorithm, because it looks at each radius independently of all others, but it disallows possibly useful borders that combine large and small radii and it may turn quarter circles into quarter ellipses.

2) For each corner, if the horizontal radius h is more than half the width of the box, or the vertical radius v more than half the height of the box, then both are multiplied by 2 * min(h/width, v/height). This formula ensures that quarter circles remain quarter circles, but it may make corners the same that originally were of different size.

3) The sum of two adjoining radii may not be more than the width or height (whichever is relevant) of the box. If any sum exceeds that value, all radii are reduced according to the following formula: Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f. This formula ensures that quarter circles remain quarter circles and large radii remain larger than smaller ones, but it may reduce corners that were already small enough, which may make borders of nearby elements that should look the same look different.

4) For each side i for which Si > Li, the two radii on that side are multiplied by Li/Si. This turns quarter circles into quarter ellipses, but avoids to reduce corners that are already small enough.

Any other candidates?
Related Actions Items:
No related actions
Related emails:
  1. Re: [css3-ui] prose improvement to directional nav- (issue 29) (from tantek@cs.stanford.edu on 2014-11-19)
  2. [css3-ui] prose improvement to directional nav- (issue 29) (from florian@rivoal.net on 2014-11-17)
  3. [CSSWG] Minutes and Resolutions 2012-07-04 (from fantasai.lists@inkedblade.net on 2012-07-04)
  4. [css3-values] Disposition of Comments, remaining issues, and moving to CR (from fantasai.lists@inkedblade.net on 2012-06-28)
  5. [css3-background] Issues and Proposed Resolutions (from fantasai.lists@inkedblade.net on 2008-05-13)
  6. ISSUE-29 (too-large border-radius): Is there a maximum 'border-radius' and what happens then? [CSS3 Backgrounds and Borders] (from sysbot+tracker@w3.org on 2008-04-04)

Related notes:

No additional notes.

Display change log ATOM feed


Peter Linss <peter.linss@hp.com>, Daniel Glazman <daniel.glazman@disruptive-innovations.com>, Chairs, Chris Lilley <chris@w3.org>, Bert Bos <bert@w3.org>, Staff Contacts
Tracker: documentation, (configuration for this group), originally developed by Dean Jackson, is developed and maintained by the Systems Team <w3t-sys@w3.org>.
$Id: index.php,v 1.325 2014-09-10 21:42:02 ted Exp $