← 返回工具箱

设计 / CSS

CSS 圆角生成器

可视化调节 border-radius，支持四角独立、椭圆圆角、胶囊按钮和不规则图形，适合快速生成卡片、头像、按钮和装饰块 CSS。

基础设置

预设

border-radius

28px

CSS 输出

复制到按钮、卡片、头像、封面图或装饰块上即可使用。

.radius-box {
  width: 330px;
  height: 220px;
  border-radius: 28px;
  background: #f8d56b;
  border: 2px solid #171717;
}

四值顺序

CSS 顺序是左上、右上、右下、左下。

椭圆语法

斜杠前控制横向半径，斜杠后控制纵向半径。

胶囊按钮

按钮高度不固定时，常用 999px 或 50% 做满圆角。

USE & REVIEW

CSS 圆角生成器常见问题

查看全部工具指南 →

「CSS 圆角生成器」主要解决什么问题？

可视化生成 CSS border-radius，支持四角独立、椭圆圆角、胶囊按钮和不规则圆角预览。 适合先完成计算、转换或检查，再根据实际使用场景复核输出。

使用「CSS 圆角生成器」前，输入内容要怎样准备？

先确定目标容器尺寸、品牌色、字体和交互状态。只看单一桌面尺寸容易遗漏移动端、键盘操作、对比度和长文本问题。

使用「CSS 圆角生成器」时，数据会被保存或上传吗？

CSS 圆角生成器不会把输入内容自动发布成公开页面。标明“本地处理”的步骤只在浏览器内运行；涉及实时数据、IP、外部网址或在线查询时可能需要联网，因此不要输入与任务无关的敏感资料。

「CSS 圆角生成器」的结果应该怎样核对？

在目标屏幕尺寸和浏览器中预览，并检查对比度、可读性和响应式变化。复制出的样式适合作为起点，仍要结合现有设计系统调整。

什么情况下不应该只依赖「CSS 圆角生成器」？

它适合快速试验和生成基础样式，不会自动符合你的完整设计系统、品牌规范或所有无障碍要求。