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. [CSSWG] Minutes Seattle F2F 2017-01-12 Part I: FX Breakout - Transforms [css-transforms] (from daelcss@gmail.com on 2017-02-13)
2. [CSSWG] Minutes Seattle F2F 2017-01-11 Part I: FX Breakout - Transforms, Whitespace in a custom property in a variable reference, Geometry Interfaces (from daelcss@gmail.com on 2017-02-13)
3. [csswg] Agenda conf call 20-Apr-2016 (from stearns@adobe.com on 2016-04-20)
4. Call for agenda items (from stearns@adobe.com on 2016-04-19)
5. [csswg] Agenda conf call 13-Apr-2016 (from Rossen.Atanassov@microsoft.com on 2016-04-13)
6. Re: Call for agenda items (from kojiishi@gmail.com on 2016-04-12)
7. Call for agenda items (from Rossen.Atanassov@microsoft.com on 2016-04-12)
8. Agenda+ Grid and Flexbox Issues (from fantasai@inkedblade.net on 2016-04-11)
9. Re: [css3-ui] prose improvement to directional nav- (issue 29) (from tantek@cs.stanford.edu on 2014-11-19)
10. [css3-ui] prose improvement to directional nav- (issue 29) (from florian@rivoal.net on 2014-11-17)
11. [CSSWG] Minutes and Resolutions 2012-07-04 (from fantasai.lists@inkedblade.net on 2012-07-04)
12. [css3-values] Disposition of Comments, remaining issues, and moving to CR (from fantasai.lists@inkedblade.net on 2012-06-28)
13. [css3-background] Issues and Proposed Resolutions (from fantasai.lists@inkedblade.net on 2008-05-13)
14. 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