⭐⭐⭐⭐ 4星

CSS corner-shape: 突破border-radius的下一代圆角方案

来源: Smashing Magazine | 日期: 2026-03-12

作者: Brecht De Ruyte

原文: Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI

摘要

CSS corner-shape 属性是 border-radius 的配套属性，它不替换 border-radius，而是修饰由 border-radius 创建的曲线形状。多年以来，开发者只能通过 clip-path、SVG masks 和脆弱的变通方案来绕过 border-radius 的限制，只能获得圆角。现在，corner-shape 属性终于改变了这一现状，为斜切(scooped)、倒角(beveled)、squircle 等高级圆角形状打开了大门。边框、阴影、背景都能跟随形状，而不再被 clip-path 切断。

💡 关键洞察： corner-shape 需要配合 border-radius 使用，单独使用无效。它们是一对强大的组合。

核心概念

1. companion 关系

corner-shape 是 border-radius 的 companion（配套）属性，不是替代品。没有 border-radius，corner-shape 什么都不做。

2. 渐进增强策略

文章推荐使用 CSS @layer 实现渐进增强：

@layer base, presentation, demo;

/* base 层：标准 border-radius，所有浏览器支持 */
.presentation 层包含完整的使用传统技术的 UI。
.demo 层用 @supports 包裹，增强 corner-shape 支持。

支持的形状值

round — 默认值，与传统 border-radius 相同
squircle — 超椭圆(superellipse)，Apple 风格的圆角正方形
bevel — 直线连接两个半径端点（斜切角）
scoop — 反向曲线，创建凹角
notch — sharp 向内切割
square — 移除圆角，覆盖 border-radius

每角独立设置

可以像 border-radius 一样，每角设置不同值：

corner-shape: bevel round scoop squircle; /* top-left, top-right, bottom-right, bottom-left */

精细控制：superellipse()

使用 superellipse() 函数提供数值参数进行精细控制：

.element {
    border-radius: 25px;
    corner-shape: superellipse(0); /* 等同于 'bevel' */
}

浏览器支持

⚠️ 截至 2026年3月： 仅 Chrome 139+ 和基于 Chromium 的浏览器支持。需要 Firefox 和 Safari 支持才能广泛应用。

实用 Demo 示例

Demo 1: 产品卡片 Ribbon 徽章

传统做法需要 clip-path 或旋转的伪元素。baseline 用普通圆角标签，增强后用 corner-shape: round bevel bevel round 创建方向感 ribbon。

Demo 2: 按钮与标签

Primary button: corner-shape: bevel → hover 时变为 squircle
Secondary button: superellipse(0.5) 创建独特的药丸形状
状态标签: corner-shape: notch 打造机械感外观

Demo 3: 推荐卡片

corner-shape: scoop 配合衬线字体和暖色调，创建有机的、几乎是手工制作的感觉。

Demo 4: 定价卡片

形状层级映射内容层级：重点计划用 scoop，徽章用 bevel（宝石般切割感），其他用 squircle。形状成为视觉强调的工具。

Demo 5: 音乐播放器

展示 corner-shape 在单一设计中跨多个元素类型的应用。

为何这很重要

边框跟随形状：之前 clip-path 会切断边框和阴影，现在不会了
减少变通代码：从 5 个背景图片 → border-radius → corner-shape
形状即工具：形状成为视觉层次和强调的工具，而不仅仅是装饰
平滑过渡：corner-shape 值之间可以通过 superellipse() 等价物平滑过渡动画

分类标签

CSS UI Web Design Progressive Enhancement