Softonic

CSS 圆角生成器

步 1 / 2 生成 CSS
结果

border-radius 看似简单，直到你想解释清楚：为什么正方形上的 50% 会得到一个圆，而矩形上的 50% 却得到一个椭圆。这款生成器让你为四个角分别输入一个值，在 px、% 和 rem 之间选择，并复制生成的精确简写。非常适合制作按钮形状、卡片圆角、胶囊按钮和非对称圆角。

如何设置 border-radius

  1. 1

    设置每个角

    为左上、右上、右下和左下角分别输入一个半径。

  2. 2

    选择单位

    像素 px（固定大小）、百分比 %（相对于元素）或 rem（相对于根元素字号）。

  3. 3

    生成 CSS

    点击 Generate CSS 按钮生成简写。

  4. 4

    复制规则

    复制 `border-radius` 简写并粘贴到你的样式表中。

简写顺序

border-radius: top-left top-right bottom-right bottom-left;

与 margin / padding 一样：从左上角开始，按顺时针方向。省略的值会镜像对角的圆角。因此 border-radius: 10px 20px; 表示左上角和右下角为 10px，右上角和左下角为 20px。

这款生成器不能做什么

它每个角只设置一个半径，因此不会生成椭圆圆角（带斜杠的双值形式，如 border-radius: 20px 10px / 5px 15px;），也不会生成 border-top-left-radius 之类的展开写法。如果需要，请手写 CSS。

百分比与像素

单位 行为
px 固定值，不随元素大小缩放
% 元素宽度（水平方向）和高度（垂直方向）的百分比
em 随元素字号缩放
rem 随根元素字号缩放

正方形元素上的 50% 等于一个圆。在 200×100 的矩形上，50% 表示水平半径 100px、垂直半径 50px，得到的是椭圆。

常见形状

形状 CSS
圆形（正方形） border-radius: 50%;
胶囊 border-radius: 9999px;（任意 ≥ 高度一半的值）
圆角卡片 border-radius: 8px; 或 12px
聊天气泡 border-radius: 18px 18px 0 18px;（尾巴在右下角）
轻微圆角 border-radius: 2px; 或 4px

胶囊按钮的「高度一半」法则

胶囊按钮是一个两端为完美半圆的矩形。要可靠地实现这种效果，请把 border-radius 设为至少为元素高度的一半。使用 9999px（或任何很大的值）都是安全的，因为浏览器会自动把半径裁剪到实际几何尺寸。

与 overflow 的关系

默认情况下，border-radius 只会裁剪背景、边框和盒子阴影。要把子元素（图片、嵌套元素）也裁剪成圆角形状，请添加：

overflow: hidden;

或使用 isolation: isolate + overflow: hidden，同时把层叠上下文也包含进来。

无障碍提示

border-radius 本身不存在无障碍问题，但交互元素（胶囊按钮、标签芯片）上过度的圆角不应缩小可点击区域。无论圆角如何，按钮都应保持至少 44×44px（WCAG 推荐）。

常见问题

因为百分比形式的 border-radius 在水平方向按「宽度的百分比」计算，在垂直方向按「高度的百分比」计算，在非正方形元素上就会得到椭圆。要得到圆形，元素本身必须是正方形，或使用与元素尺寸相匹配的像素值。

默认只裁剪背景、边框和盒子阴影。除非你在父元素上同时添加 overflow: hidden，否则子元素不会被裁剪。

它可以在数值之间做动画：transition: border-radius 200ms; 对像素和百分比都有效。在复杂的椭圆简写与简单半径之间做动画，可能产生意外的中间帧；如果看起来不对，请测试并简化起始与结束状态。

规范没有设定上限，但浏览器会把有效半径裁剪到元素较短边的一半。在高度为 40px 的按钮上使用 border-radius: 9999px 会得到一个胶囊形，浏览器会悄悄地裁剪到 20px。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

随机颜色生成器

生成 1 到 50 个随机 HEX 颜色，查看色块，复制代码，并用于 CSS、测试或配色探索。

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片和链接。