圆角外观

把元素的直角拐角变成圆弧，以及这段圆弧有多大。

四个角变圆
不那么方的框
卡片角上的弧度
圆角
圆角半径
倒角

示例

Webborder-radius原生支持点选数值，样本实时变化

border-radius: 12px;

Web / iOS / Android 对照

Web原生支持

平台通用范围

border-radius

也叫圆角

CSS: border-radius

iOS原生支持

平台通用范围

RoundedRectangle

也叫 cornerRadius

SwiftUI: .clipShape(RoundedRectangle(cornerRadius:))

圆角由形状表达：RoundedRectangle 是「带圆角的矩形，对齐到所在视图的框内」。早期的 .cornerRadius(_:antialiased:) 自 iOS 27.0 起标记废弃，官方说明是「Use clipShape(_:style:) or fill(style:) instead」。

Android原生支持

平台通用范围

RoundedCornerShape

也叫 clip

Compose: Modifier.clip(RoundedCornerShape(...))

圆角由形状表达：clip 的官方描述是「把内容裁剪到 shape」，圆角是其中一种 shape。

使用规范

什么时候用

需要让方块看起来更柔和时
需要与平台既有控件的外观保持一致时

什么时候别用

圆角大到让人误以为是按钮或标签时
容器与其内部元素圆角不匹配、导致出现缝隙时

容易混淆

边框

圆角只决定拐角形状，边框决定是否真的画出一条线。

跨端框架实现

FlutterBorderRadius
BoxDecoration(borderRadius: BorderRadius…)
常用于 BoxDecoration.borderRadius。
Flutter — BorderRadius class · Flutter

给 AI 的提示词

这条词条还没有经过验证的实现提示词。