The Humble Border-Radius
summary
Browsers proportionally scale border-radius when adjacent radii exceed the box size — a 900px radius can end up as 381px while a 90px companion becomes 38px, preserving the 10× ratio. Border-radius accepts horizontal/vertical values with a slash, percentages for flexible half ellipse and quarter-ellipse shapes, and animates smoothly. Computed-value plumbing differs: Firefox returns the actual used pixels, others return the specified values. Future fixes include shape-inside (CSS Shapes Level 2) and border-corner-shape (backgrounds & borders Level 4); today the same effects are emulated with four gradients and they work.
AI-written summary · about
chapters (10)
- 0:00Start
- 0:56specify different radii per corner
- 1:51try to maintain the ratio between the different radii
- 3:01make an ellipse
- 3:15make shapes out of parts of ellipses
- 5:25make a quarter ellipse
- 7:22use padding
- 11:10cut out corners
- 12:12use different corner shapes for each corner
- 13:11use radial gradients in the same fashion
related talks
35mThe Humble Border-radius
47mThe humble border-radius
01h 00mIt Came From The Browser
05mWill You Help Me End Pixelated Images on the Internet
30mCutting-edge CSS features: Gaining control of Web Design
42mBreaking the norm with creative CSS
42mUsing DevTools to Understand Modern CSS Layouts
35mScaling CSS Layout Beyond Pixels