CSS 花式圆角生成器
8点控制 CSS 圆角，生成不规则有机形状（Blob）
预览
300 x 300
自定义尺寸
宽度300px
高度300px
水平半径
左上30%
右上70%
右下70%
左下30%
垂直半径
左上30%
右上30%
右下70%
左下70%
CSS 代码
CSS
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;Tailwind
Tailwind:
rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]提示：预览框边缘的标记点显示了圆角在水平和垂直方向的分割位置。
关于此工具
传统的 CSS border-radius 通常只设置4个圆角，但其实它支持8个值（水平与垂直半径分别设置），从而可以创造出各种有趣的不规则形状。这款工具允许您分别控制每个角的水平和垂直半径，实时预览并生成 CSS 代码。它非常适合用来制作有机形状（Blob）、创意头像框或独特的背景容器。支持一键复制标准 CSS 和 Tailwind CSS 代码。
功能特点
- 🎨 8点控制：分别控制4个角的水平与垂直半径
- 💧 Blob生成：轻松制作流行的流体/有机形状
- 👁️ 实时预览：所见即所得的形状调整
- 📦 Tailwind支持：一键生成 Tailwind CSS 任意值类名
- 📋 快速复制：支持 CSS 和 Tailwind 代码一键复制