After you've got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

The corner-shape CSS property allows developers to change rounded corners created by border-radius into different shapes like bevel, scoop, notch, and squircle. By combining corner-shape with strategic border-radius values, you can create complex geometric shapes like hexagons, triangles, rhombuses, and octagons. This approach offers advantages over clip-path methods, particularly the ability to add borders and box-shadows to custom shapes. The property is currently available in Chrome 139+ but has limited browser support.

Drawing CSS Shapes using corner-shape – Frontend Masters Blog