CSS 圆角生成器

功能特性

四个圆角独立调节

统一 / 独立两种模式

滑块与数值输入并用

实时预览并输出 CSS

使用方法

1. 拖动半径滑块 —— 台面上的中性卡片以真实尺寸预览圆角。

2. 切换到「分角设置」可单独调整每个角。

3. 复制 CSS —— 输出采用最简写法。

关于这个工具

圆角只需一行 CSS，但能看见效果时更容易选出合适的值。这个生成器在中性卡片上按真实尺寸预览 border-radius，你可以拖动一个滑块统一调整，也可以单独调整每个角。它会写出最简短的有效声明：四个角相同时只用一个值，不同时用两个、三个或四个值，顺序为左上、右上、右下、左下。4–8px 的小圆角适合按钮和输入框，12–24px 用在卡片上显得亲切，很大的值会把较矮的元素变成胶囊形。复制 CSS 之前，可以切换舞台背景，看看形状在浅色和深色背景上的效果。

常见问题

border-radius 的四个值按什么顺序排列？

从左上角开始顺时针：左上、右上、右下、左下。只写两个值时，第一个作用于左上和右下，第二个作用于右上和左下。

怎么做胶囊形按钮或圆形？

胶囊形：圆角至少设为元素高度的一半，或者直接写一个很大的值，如 9999px。圆形：让元素宽高相等，并把 border-radius 设为 50%。

为什么圆角处被截掉或露出了背景？

子元素可能溢出了圆角区域。给容器加上 overflow: hidden，或者给子元素设置相同的圆角，图片和背景就会沿着弧线显示。

能做椭圆形的圆角吗？

CSS 允许用斜杠分别设置水平和垂直半径，例如 border-radius: 50% / 20%。本生成器专注于以像素为单位的正圆角，足以覆盖大多数界面需求；特殊形状可以手动加上斜杠语法。

border-radius 会影响布局或点击区域吗？

不会。它只改变元素的绘制和裁切方式。元素在布局中仍是矩形，点击透明的圆角区域依然会落在该元素上。

功能特性

使用方法

关于这个工具

常见问题

相关工具