CSS 圆角生成器
border-radius 看似简单，直到你想解释清楚：为什么正方形上的 50% 会得到一个圆，而矩形上的 50% 却得到一个椭圆。这款生成器让你为四个角分别输入一个值，在 px、% 和 rem 之间选择，并复制生成的精确简写。非常适合制作按钮形状、卡片圆角、胶囊按钮和非对称圆角。
如何设置 border-radius
-
1
设置每个角
为左上、右上、右下和左下角分别输入一个半径。
-
2
选择单位
像素 px（固定大小）、百分比 %（相对于元素）或 rem（相对于根元素字号）。
-
3
生成 CSS
点击 Generate CSS 按钮生成简写。
-
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 的文档默认快捷键。
Markdown 图片生成器
生成带替代文本、title 属性和可选链接的 Markdown 图片语法。支持内联格式和引用格式输出。
IBAN 验证工具
在本地检查 IBAN 的注册国家长度、国内结构和 MOD 97-10 校验位。不上传数据，也不表示账户真实存在。
Luhn 算法校验工具
验证信用卡号、IMEI、SIN及其他受Luhn校验保护的号码。返回验证结果（通过或失败），并显示每个校验步骤及校验和计算过程。
此工具还提供其他语言版本
- CSS-Border-Radius-Generator [DE]
- Gerador de Raio de Borda CSS [PT]
- Generador de Radio de Borde CSS [ES]
- CSS 角丸ジェネレーター（border-radius） [JA]
- CSS border-radius-generator [NL]
- Trình tạo border-radius CSS [VI]
- เครื่องมือสร้าง border-radius ของ CSS [TH]
- Generator Jari-jari Lingkaran CSS [ID]
- CSS Border Radius 생성기 [KO]
- CSS border-radius-generator [SV]
- مولد نصف قطر الحدود CSS [AR]
- Générateur de rayon de bord CSS [FR]
- Generator border-radius CSS [PL]
- Generatore di Raggio del Bordo CSS [IT]
- Генератор border-radius для CSS [RU]
- CSS border-radius Oluşturucu [TR]
- CSS Border Radius Generator [EN]