When I first began exploring coding, creating rounded corners required multiple background images or an image sprite often made in Photoshop. So when border-radius was introduced, it was considered revolutionary. Websites were quite boxy back then, so border-radius was a welcome change, saving us significant time.
Chris’ border-radius article from 2009, now 16 years old, even included vendor prefixes for older browsers like “old Konqueror browsers” (-khtml-border-radius). Those were exciting times!
Today, rounded corners aren’t as thrilling. Sharp corners are back in style, along with squircles (square-ish circles or circle-y squares), which the corner-shape CSS property helps us create, along with other cool UI effects I’ll guide you through.
Currently, only Chrome 139 and above supports corner-shape, which must be used with border-radius or related properties like border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius:
