CSS 圆角生成器

在线设置圆角参数,快速生成CSS border-radius代码。

工具资源加载中...

CSS 圆角生成器

CSS 圆角生成器分别设置左上、右上、右下和左下圆角,实时预览形状并生成 border-radius 代码。

四角独立

每个角都可以单独设置。

效果预览

实时查看矩形圆角变化。

标准 CSS

生成可复制的圆角属性。

使用方法与常见问题

  1. 输入四个角的像素值。
  2. 观察预览区域的圆角效果。
  3. 复制 border-radius 代码到 CSS。

常见问题:圆角过大时浏览器会根据元素尺寸进行限制,椭圆圆角还可以使用两个半径组。

适用场景

适合按钮、卡片、头像、图片容器和网页组件样式设计。

工具说明

在线设置圆角参数,快速生成CSS border-radius代码。

使用CSS圆角生成器在线调整四角圆角值,快速生成可复制的border-radius代码。