CSS圆角生成器
使用CSS3 border-radius的全部功能创建从轻微圆角按钮到 有机blob 的一切。
100%免费 — 无需注册。
8控制点
99%+浏览器支持
0需要注册
Simple
CSS Output:
border-radius: 20px; Element
Background
常见用例
border-radius在UI设计中影响最大的地方
🔘
按钮和CTA
圆角按钮感觉更可点击、更现代。从微妙的4px到完全圆角的药丸按钮。
👤
头像图片
50%半径的圆形头像是现代UI的标准。方形图片即时变成圆形。
🃏
卡片和容器
圆角卡片感觉更柔和、更友好。标准值：8px、12px或16px。
🫧
Blob背景
用于英雄区域、装饰元素和现代登录页面的有机blob形状。
理解CSS Border Radius
border-radius属性使元素外边框边缘的角变圆。虽然大多数人使用简单的值如10px，但CSS允许使用非常强大的8值语法来创建有机、不对称的形状。
值语法选项
- 1个值:
border-radius: 10px;— 所有四个角相同 - 2个值:
border-radius: 10px 20px;— 左上/右下，右上/左下 - 4个值:
border-radius: 10px 20px 30px 40px;— 从左上顺时针 - 8个值:
border-radius: a b c d / e f g h;— 水平/垂直半径独立
Blob秘密：8值语法
通过用斜杠(/)分隔水平和垂直半径，您可以在每个角创建不对称曲线。这就是现代blob形状的制作方式——无需SVG！
CSS语法和示例
各种border-radius样式的即用代码示例
CSSStandard Corners
/* Uniform rounded corners */
.card {
border-radius: 12px;
}
/* Pill button */
.pill-button {
border-radius: 9999px;
}
/* Perfect circle */
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
}
/* Specific corners (TL, TR, BR, BL) */
.custom {
border-radius: 20px 8px 20px 8px;
}CSSBlob Shapes (8-Value)
/* Basic blob */
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
/* Smooth organic shape */
.organic {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
/* Animated blob */
.animated-blob {
animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
50% {
border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
}
}常见问题
4值和8值语法有什么区别？
4值为每个角设置半径（左上、右上、右下、左下）。8值用斜杠分隔水平和垂直半径，用于不对称的有机形状。
如何创建完美的圆？
在正方形元素（相等的宽高）上设置border-radius: 50%。对于药丸/胶囊形状，使用border-radius: 9999px。
可以使用百分比吗？
可以！百分比相对于元素尺寸计算。水平百分比使用宽度，垂直百分比使用高度。这就是blob形状的工作原理。
Blob形状用于什么？
Blob形状常用于英雄背景、装饰元素、抽象艺术，以及为刚性布局添加有机、友好的感觉。无需SVG或图片！