"Can we give this button angled, chamfered corners instead of rounded ones?" In client web development, translating nuanced corner expressions from designer mockups into code is a recurring challenge. border-radius only supports rounded corners. In the past, recreating chamfered corners, concave scoops, or star-like notched corners required resorting to background images, SVGs, or complex clip-path rules. Consequently, modifying corner styling meant swapping image assets, responsive resizing caused corners to blur, and changing button colors forced image redesigns—turning corner shapes into a recurring maintenance cost.
The CSS corner-shape property lifts this long-standing limitation. As detailed in Smashing Magazine's March 2026 article Beyond border-radius: corner-shape (Smashing Magazine), corner-shape introduces a mechanism to reshape corner areas defined by border-radius into contours other than rounded arcs. In this article, we examine how to use corner-shape from a production perspective as a tool for lightweight, resilient brand styling without relying on images, as well as the caveats to watch out for.
Why styling corners with images or clip-path creates technical debt
The conventional techniques teams have used to reproduce mockup corners all carry technical debt that complicates future maintenance.
One approach is relying on background images. Using images for chamfered containers causes images to stretch and distort whenever button widths change, and they blur on high-DPI displays. Expanding color variations multiplies image assets, and design tweaks necessitate rebuilding graphic assets from scratch.
A second approach is clipping with clip-path. While clip-path: polygon(...) can cut corners at angles, coordinates must be calculated manually against element dimensions, frequently breaking in responsive layouts. Furthermore, because clip-path slices through the element itself, effects like box-shadow and outline are clipped away, demanding cumbersome workarounds to restore drop shadows.
A third issue is maintenance silos. When corner geometry is locked inside images or convoluted coordinate math, the next developer must overhaul the entire implementation just to tweak a corner slightly. In client web development, these fragile decorative elements directly inflate maintenance estimates.
corner-shape alleviates all three pain points. By defining corner geometry as CSS declarations, corners adapt fluidly to element sizing and color changes without image replacements, while naturally coexisting with box-shadow and borders. Leveraging new CSS capabilities to shift behavior into declarative rules builds directly on the philosophy explored in our article on building motion without JS using CSS offset-path.
corner-shape basics — thinking in corner areas and fill methods
The key to understanding corner-shape lies in the division of roles between border-radius and corner-shape. border-radius determines "how much area from the corner becomes the rounded region (the radius)," while corner-shape determines "what shape is used to cut into that reserved area." In other words, where border-radius alone was fixed to "cutting into a round shape," it is easiest to think of this as adding a wider variety of cutting shapes.
For example, if you want to chamfer the corners of a button diagonally, you write it like this:
.btn-bevel {
/* 角から12pxの範囲を「角の領域」として確保する */
border-radius: 12px;
/* その領域を丸ではなく直線で削ぐ（面取り） */
corner-shape: bevel;
}The key point is that the shape itself can be switched simply by changing the value of corner-shape. While leaving the value of border-radius (corner size) intact, you can change the expression of the corners by swapping declarations to options like bevel (bevel/chamfer), scoop (scoop inward), notch (notch into a notch/bracket shape), or squircle (a squircle-like curve closer to a natural rectangle than standard rounded corners). Even if the element size changes, the corner area follows the specification of border-radius, so it will not break in responsive layouts.
You can also specify different shapes for each corner. For instance, if you want to "chamfer only the top two corners," you can use individual corner properties just like with border-radius.
.card {
border-radius: 16px;
/* 左上・右上・右下・左下の順。上だけ面取り、下は通常の丸 */
corner-shape: bevel bevel round round;
}How to create the "three corners" commonly requested in client projects
Corner expressions that come up as requirements in actual projects can generally be grouped into the following three types. Here is an overview of which corner-shape values can be used to produce each.
| Frequently requested corner | corner-shape value | Details |
|---|---|---|
| Coupon/ticket-style notch | notch / scoop | Frequent in e-commerce campaign containers |
| Sharp, modern bevel | bevel | Brand expression for buttons and badges |
| Natural iOS-style rounded corner | squircle | For app-like UI texture |
For example, the request to "give a campaign coupon frame notched sides like a ticket" has traditionally been built using background images. With corner-shape: scoop, the notches follow along even if the border color or width changes, allowing you to achieve the exact same look without using any images at all. Even if variations (different colors or sizes) increase, all you add is a few lines of CSS.
Just like automated control of brand colors, shifting this "visual texture" to CSS declarations allows you to make future tone adjustments in a single place. When combined with the concepts covered in our article on auto-adjusting color schemes with CSS contrast-color, you can maintain both color and shape as a "hard-to-break design system."
Pitfalls When Integrating Agents in Custom Development
On an apparel brand's campaign site whose production we took over (company name withheld), the product cards lined up on the top page all featured a design with "beveled, diagonal corners." The previous web agency had created each of these one by one using background images. There were eight color variations of the cards, each with its own image, creating a situation where additional image requests occurred every time a new color was added for a sale.
We replaced these cards with an implementation that standardized the corner size using border-radius and unified the bevel using corner-shape: bevel. Handling color variations became as simple as changing CSS variables for the background color, reducing the eight corner images to zero. All we did was bring the "corner shapes" that had been locked inside images out into CSS declarations. As a result, adding a new color only requires a designer to add a single variable, completely eliminating requests to remake images.
What worked best in this project was determining the fallback upfront. corner-shape is a relatively new property and will be ignored by older, unsupported browsers. When ignored, the border-radius declaration still takes effect, resulting in a gentle degradation where "what should be beveled is simply displayed with rounded corners." For most decorative purposes, this is an acceptable behavior.
.btn-bevel {
border-radius: 12px; /* 非対応ブラウザではこの角丸が見える */
corner-shape: bevel; /* 対応ブラウザでは面取りになる */
}However, when using expressions like notch (notch)—where "falling back to rounded corners changes the meaning"—as part of a functional component, you need to check Baseline support status and determine whether you can assume supported browsers for critical areas. To draw the line on how far to adopt new CSS features in production, you can directly apply the approach covered in our article on modern CSS native features: "deciding whether to adopt based on Baseline." It is safe to separate adoption: aggressively for decoration, and cautiously when it concerns core functionality.
Where to begin
Sites start becoming lighter the moment you stop assuming that corner styling in design mockups "can only be made with images." Diagonal bevels, inward scoops, and ticket-style notches—in many cases, these can now be written with just a few lines of border-radius + corner-shape. Writing them in CSS eliminates images, and corners automatically follow changes in color or size, leaving no confusion for the next maintainer.
As a first step, we recommend choosing one "corner decoration" currently made with an image or clip-path and trying to replace it with corner-shape. After that, simply confirming that it gracefully degrades to border-radius rounded corners in unsupported browsers is enough to achieve production-ready quality.
If you are dealing with challenges such as corners from design mockups being heavy due to reliance on images, decorations having to be remade every time the design changes, or wanting to balance detailed brand expression with maintainability, please consult us via GleamHub's contact page. We will examine the decorative implementation of your current site, separate what can be shifted from images to native CSS from what cannot, and rebuild it into a lightweight, easily maintainable format.
