The humble border-radius
summary
Demo shows modern browsers support border-radius without prefixes and that when adjacent radii exceed box size they are scaled down proportionately, so huge values collapse. Syntax allows a slash to separate horizontal and vertical radii and percentages are relative to dimensions so percentages are relative to width/height, enabling responsive ellipses, semicircles, eggs. Border behavior: outer/inner radii subtract border width, box-shadow follows and spread adds, outline stays rectangular, text wrapping ignores radius (CSS Shapes or overflow hacks required), animatable, and getComputedStyle reports vary by browser.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 11:27Creating a quarter ellipse
- 15:41Recap
- 17:27Why its called borderradius
- 18:58Inner borderradius
- 23:25Outer borderradius
- 31:55Animations
- 34:58Incompatibilities
- 39:09Whats next
- 41:09Gradients
- 42:27Resources
- 45:19Questions
