[css-borders-4] New `border-radius` value for perfectly matching nested radii
### The Problem: The majority of implementations where nested border radius are used; are asymmetrical and imperfect. The imperfect solution is easy to do, while the perfect solution is harder. ```css .card { border-radius: 24px; } .card picture { border-radius: 24px 24px 0 0; } ``` <img width="377" alt="Screen Shot 2022-09-07 at 9 15 06 AM" src="https://user-images.githubusercontent.com/1134620/188928477-9b462dd7-b5fd-4141-968d-857c6d418db3.png"> <br> ### Proposed Solution: A new `border-radius` value for nested elements, making symmetrical and perfectly matching nested radii easy. The math is handled by the browser when the keyword is used: `parent-radius - parent-padding`. ```css .card { border-radius: 24px; } .card picture { border-radius: match-nearest-parent match-nearest-parent 0 0; } ``` <img width="376" alt="Screen Shot 2022-09-07 at 9 15 11 AM" src="https://user-images.githubusercontent.com/1134620/188928638-edbcdfff-8812-4426-8b5b-69f816065526.png"> ### Corners compared Below is a focused screenshot of the corners for comparison. The border radius on the left has a wobble to it, as the curves don't match. The border radius on the right does match and follows the same curve for a nice perfect finish. Which do you want in your design? <img width="192" alt="Screen Shot 2022-09-07 at 9 11 25 AM" src="https://user-images.githubusercontent.com/1134620/188928131-74bfa790-f31d-49c8-95b9-5567af367b51.png"> ### Conclusion While it's relatively trivial to
Posted by argyleink on Sep 7, 2022, 4:28 PM
Tags
Related issues
- struct's lifetime requirements can be bypassed via covariant field assignment
- Proposal to Reorganize the Moderation Team and Review Moderation Policies
- Progressive FPS degradation appears to be related to dota2.com — blocking the domain prevents the performance loss
- proposal: container/...: generic collection types
- Better Custom Endpoint BYOK
- A concrete policy for backward compatibility until Godot 5.0
Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments
github (Other)
struct's lifetime requirements can be bypassed via covariant field assignment
Proposal to Reorganize the Moderation Team and Review Moderation Policies
Progressive FPS degradation appears to be related to dota2.com — blocking the domain prevents the performance loss
proposal: container/...: generic collection types
Better Custom Endpoint BYOK
A concrete policy for backward compatibility until Godot 5.0
New MTP models not supported
Tracking: 429 / Capacity Issues
[css-borders-4] New `border-radius` value for perfectly matching nested radii
### The Problem: The majority of implementations where nested border radius are used; are asymmetrical and imperfect. The imperfect solution is easy to do, while the perfect solution is harder. ```css .card { border-radius: 24px; } .card picture { border-radius: 24px 24px 0 0; } ``` <img width="377" alt="Screen Shot 2022-09-07 at 9 15 06 AM" src="https://user-images.githubusercontent.com/1134620/188928477-9b462dd7-b5fd-4141-968d-857c6d418db3.png"> <br> ### Proposed Solution: A new `border-radius` value for nested elements, making symmetrical and perfectly matching nested radii easy. The math is handled by the browser when the keyword is used: `parent-radius - parent-padding`. ```css .card { border-radius: 24px; } .card picture { border-radius: match-nearest-parent match-nearest-parent 0 0; } ``` <img width="376" alt="Screen Shot 2022-09-07 at 9 15 11 AM" src="https://user-images.githubusercontent.com/1134620/188928638-edbcdfff-8812-4426-8b5b-69f816065526.png"> ### Corners compared Below is a focused screenshot of the corners for comparison. The border radius on the left has a wobble to it, as the curves don't match. The border radius on the right does match and follows the same curve for a nice perfect finish. Which do you want in your design? <img width="192" alt="Screen Shot 2022-09-07 at 9 11 25 AM" src="https://user-images.githubusercontent.com/1134620/188928131-74bfa790-f31d-49c8-95b9-5567af367b51.png"> ### Conclusion While it's relatively trivial to
Comments (0)
No comments yet. Start the discussion.