跳至正文

CSS圆角生成器

可视化创建CSS border-radius并复制代码的免费在线工具。

Preview

模式

圆角

px

CSS 代码

border-radius: 20px;

预设

主要功能​

  • 2种模式: 全部模式、单独角模式
  • 实时预览: 立即查看更改
  • 精细控制: 0-200px范围
  • 9个预设: 常用圆角样式
  • 一键复制: 立即复制CSS代码

什么是Border Radius？​

border-radius是使元素角变圆的CSS属性。

基本语法​

/* 所有角相同 */
border-radius: 10px;

/* 各角单独指定 */
border-radius: 10px 20px 30px 40px;
/* 顺序: 左上、右上、右下、左下 */

预设样式​

Square (方形)​

border-radius: 0px;

锐角，经典设计

Slightly Rounded (微圆)​

border-radius: 4px;

细微圆角，精致感

Rounded (圆角)​

border-radius: 8px;

适度圆角，最通用

Very Rounded (很圆)​

border-radius: 16px;

柔和感，亲切设计

Pill (药丸形)​

border-radius: 50px;

适合按钮和标签

Circle (圆形)​

border-radius: 9999px; /* 或50% */

头像、图标

Top Only (仅顶部)​

border-radius: 12px 12px 0 0;

模态框头部，卡片顶部

Bottom Only (仅底部)​

border-radius: 0 0 12px 12px;

模态框底部，下拉菜单

Blob (不规则)​

border-radius: 30px 60px 30px 60px;

有机形状，独特设计

浏览器兼容性​

  • ✅ Chrome 5+
  • ✅ Firefox 4+
  • ✅ Safari 5+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ 所有移动浏览器

相关工具​