CSS 圆角生成器：带实时预览的四角圆角

使用方法

border-radius 属性可接受一到四个水平半径，顺序为左上、右上、右下、左下。给出的值较少时会重复已有的值：只有两个值时，第一个用于左上和右下角，第二个用于右上和左下角。垂直半径写在斜杠之后，顺序相同。

语法见CSS 背景与边框规范（英文）。每个半径都是长度或盒子尺寸的百分比；半径为零时无需单位。

border-radius: top-left top-right bottom-right bottom-left / vertical top-left vertical top-right vertical bottom-right vertical bottom-left

本工具会省去简写本来就会重复的值。若左下角与右上角相同，则不写；若右下角与左上角相同，则第三个值也省去。四个角相同时写成一个值，因此12px 12px 12px 12px 写作12px。

只有当垂直半径与水平半径不同时才写斜杠。若未使用椭圆角，每个垂直半径都与其水平半径相等，因此不出现斜杠。

将左上角设为40 px × 20 px，右上角设为20 px × 10 px，右下角设为40 px × 20 px，左下角设为20 px × 10 px。水平半径为40、20、40、20，简写为40px 20px；垂直半径为20、10、20、10，简写为20px 10px。

声明为 border-radius: 40px 20px / 20px 10px;，预览中可见宽度大于高度的圆角。

为什么有两组用斜杠隔开的数字？

第一组给出各角的水平半径，斜杠之后的一组给出垂直半径。没有斜杠时，每个角是两个方向半径相同的圆弧。

百分比半径有什么作用？

百分比水平半径取盒子宽度的百分比，垂直半径取其高度的百分比。每个角都设为50% 时，正方形盒子得到圆形，非正方形盒子得到椭圆。

为什么顺序是左上、右上、右下、左下？

简写遵循其他盒模型属性所用的顺时针顺序，从左上角开始。知道了这个顺序，只有两三个值的简写就容易读懂。

工具会根据盒子的大小检查半径吗？

不会。工具只检查每个半径是否为零或更大的数，并且是否在1000 px 或100% 的限制之内。若相邻两个半径之和超过盒子的边长，浏览器会按比例缩小它们。

我输入的内容会被保存或发送到服务器吗？

不会。预览和 CSS 都在您的浏览器中生成。内容既不会保存，也不会发送到我们的服务器，因此离开页面前请先复制声明。

数据和文字最近核对于2026年11月10日星期二。