Skip to content

Conversation

noamr
Copy link
Collaborator

@noamr noamr commented Oct 2, 2025

The new adjustment makes the radius reduction factor in the minimum radius percentage of the corner, making it less pronounced the closer the corner's border-radius gets to 50%.

Closes #7103
Resolution: #7103 (comment)

The new adjustment makes the radius reduction factor in the
minimum radius percentage of the corner, making it less pronounced
the closer the corner's border-radius gets to 50%.

Closes w3c#7103
Resolution: w3c#7103 (comment)
@noamr noamr requested a review from fantasai October 2, 2025 11:55
@noamr noamr changed the title [css-background-3] Adjust border-radius outset adjustment [css-background-3] Adjust border-radius outset correction Oct 2, 2025
@noamr noamr requested a review from tabatkins October 3, 2025 20:30
To compute the <dfn>adjusted radius dimension</dfn> given numbers |coverage|, |radius|, and |outset|:
1. If |radius| is greater than |spread|, or if |coverage| is greater than 1, then return <code>|radius| + |outset|</code>.
1. Let |ratio| be <code>1 - |radius| / |outset|</code>.
1. Return <code>|radius| + |outset| * (1 - r<sup>3</sup> * (1 - |coverage|<sup>3</sup>))</code>.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. Return <code>|radius| + |outset| * (1 - r<sup>3</sup> * (1 - |coverage|<sup>3</sup>))</code>.
1. Return <code>|radius| + |outset| * (1 - |ratio|<sup>3</sup> * (1 - |coverage|<sup>3</sup>))</code>.

Or actually it's not really a ratio, maybe ratio should just be |radius| / |outset| and here (1 - |ratio|)<sup>3</sup>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[css-backgrounds-3][css-borders-4] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread
2 participants