所有工具
Border Radius Generator
Generate border radius
Generate border radius 在您的浏览器中本地运行
CSS
border-radius: 12px;
About the
边框半径生成器独立设置盒子的四个角，并提供实时预览，并为您提供 CSS。简写的顺序是大家都忘记的：左上、右上、右下、左下，从左上顺时针方向。一个值适用于所有四个角，两个值适用于对角线对，四个值依次处理每个角。当所有四个都匹配时，该工具会发出单值形式，这是您大多数时候真正想要的形式。
Where people use the
- 将半径与设计规范相匹配，而无需猜测像素值。
- 仅将卡片或模态框的顶角舍入。
- 塑造一个药丸按钮，其半径为元素高度的一半。
- 求出将方形头像变成圆形的半径。
How to use the
- 1
拖动角滑块
每个角都有自己的滑块，范围从 0 到 150 像素。当您移动预览框时，预览框会变圆。
- 2
保持角点链接或取消链接
打开“链接”后，移动任何滑块都会将所有四个滑块一起移动。将其关闭以塑造各个角，这就是制作语音气泡尾巴或叶子形状的方法。
- 3
阅读 CSS
如果所有四个都匹配，您将获得单值简写。如果它们不同，您将获得按顺时针顺序排列的完整四值形式。
- 4
考虑用百分比代替
方形元素上 50% 的半径给出一个圆形。如果您需要的话，请将样式表中的 px 单位替换为百分比。
提示和最佳实践
- 当元素调整大小时使用百分比，不调整大小时使用像素。
- 药丸按钮的半径不是固定的；它是高度的一半，所以 9999px 是一个懒惰但稳健的答案。
- 保持整个组件集的半径一致；混合 4px、6px 和 8px 看起来很意外。
常见问题
这四个值的顺序是什么？
从左上角开始顺时针：左上、右上、右下、左下。一个有用的助记符是，它从您开始阅读的地方开始，并像钟面一样旋转。
两个或三个值意味着什么？
有两个值设置对角线：第一个是左上角和右下角，第二个是右上角和左下角。三个值设置为左上角，然后是右上角和左下角，然后是右下角。
我如何画一个圆圈？
对已经是正方形的元素使用 50%。如果半径碰巧等于宽度的一半，则使用像素只会给出一个圆，这会在元素调整大小时中断。
我可以在水平和垂直方向上以不同的方式圆角吗？
完整的语法允许将椭圆半径写为水平值、斜线，然后是垂直值。该工具发出更简单的统一形式，因此如果您需要该形状，请手动添加斜线版本。
为什么我的圆角被剪掉了？
因为子内容没有被剪切到圆角框。将溢出隐藏添加到元素中，否则其中的图像或背景仍将显示方角。