# 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:
- [CSSWG] Minutes and Resolutions 2012-07-04 (from fantasai.lists@inkedblade.net on 2012-07-04)
- [css3-values] Disposition of Comments, remaining issues, and moving to CR (from fantasai.lists@inkedblade.net on 2012-06-28)
- [css3-background] Issues and Proposed Resolutions (from fantasai.lists@inkedblade.net on 2008-05-13)
- 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.

## Changelog:

Created issue 'Is there a maximum 'border-radius' and what happens then?' nickname too-large border-radius owned by Bert Bos on product CSS3 Backgrounds and Borders, 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?' non-public

Status changed to 'open'

4 Apr 2008, 18:42:08Status changed to 'closed'

Elika Etemad, 11 Aug 2008, 13:49:51