The corner-shape CSS property enables creating various UI effects beyond traditional rounded corners, including snipped corners, slanted sections, sale tags, tooltips, and squircles. Currently supported only in Chrome 139+, it works alongside border-radius to create beveled, scooped, notched, and squircle corner shapes.
Table of contents
Snipped corners using corner-shape: bevelSlanted sections using corner-shape: bevelSale tags using corner-shape: round bevel bevel roundArrow crumbs using the same methodTooltips using corner-shape: scoopRealistic highlighting using corner-shape: squircle bevelHand-drawn boxes using the same methodClip a background with corner-shape: notchConclusion1 Comment
Sort: