Unlocking Corner-Shapes in CSS: A New Era for UI Design
The new corner-shape property in CSS is a game-changer for UI design, allowing for beveled, scooped, and squircle corners without the need for hacks or workarounds. In this article, we’ll explore what corner-shape is, how it works, and how to use it to enhance your UI designs.
What is Corner-Shape?
The corner-shape property is a companion to border-radius, modifying the shape of the curve that border-radius creates. It accepts values such as round, squircle, bevel, scoop, notch, and square, and can be set differently for each corner.
For example, you can use the superellipse() function with a numeric parameter for fine-grained control: .element { border-radius: 25px; corner-shape: superellipse(0); }
Why Progressive Enhancement Matters
At the time of writing, corner-shape is only supported in Chrome 139+ and other Chromium-based browsers. However, this doesn’t mean we should ignore the property or wait until it’s widely supported. Instead, we can use progressive enhancement to provide a better experience for users with supported browsers.
We can achieve this by using the @supports rule to apply corner-shape styles only to browsers that support the property. For example: @layer demo { @supports (corner-shape: bevel) { /* upgrade styles here */ } }
Demo 1: Product Cards with Ribbon Badges
In this demo, we’ll create a product card with a ribbon badge using corner-shape. We’ll start with a simple badge with slightly rounded corners, and then enhance it with corner-shape for supported browsers.
The baseline style is a small, clean label sitting flush against the left edge of the card: .product__badge { border-radius: 0 4px 4px 0; background-color: var(--badge-bg); }
For browsers that support corner-shape, we enhance the style: @layer demo { @supports (corner-shape: bevel) { .product { border-radius: 40px; corner-shape: squircle; } .product__badge { padding: 0.35rem 1.4rem 0.35rem 1rem; border-radius: 0 16px 16px 0; corner-shape: round bevel bevel round; } } }
Demo 2: Buttons, Tags, and Components
In this demo, we’ll showcase the practical uses of corner-shape in everyday UI components such as buttons, tags, and notification badges.
We’ll start with a clean and professional baseline style, and then enhance it with corner-shape for supported browsers.
Conclusion
The corner-shape property is a powerful tool for UI design, allowing for more flexibility and creativity in our designs. By using progressive enhancement, we can provide a better experience for users with supported browsers while still maintaining a professional and clean design for all users.
So, what are you waiting for? Start exploring the possibilities of corner-shape today and take your UI designs to the next level!
Frequently Asked Questions
- What is the corner-shape property in CSS? The corner-shape property is a companion to border-radius, modifying the shape of the curve that border-radius creates.
- How do I use the corner-shape property? You can use the corner-shape property by applying it to an element and specifying the desired shape, such as round, squircle, or bevel.
- What are the benefits of using the corner-shape property? The corner-shape property allows for more flexibility and creativity in UI design, and can be used to create unique and engaging visual effects.
- Is the corner-shape property supported in all browsers? No, the corner-shape property is currently only supported in Chrome 139+ and other Chromium-based browsers.
- How can I use the corner-shape property with progressive enhancement? You can use the @supports rule to apply corner-shape styles only to browsers that support the property, providing a better experience for users with supported browsers.
