20px
20px
20px
20px
结果仅供参考，可能包含错误。请自行核实重要信息。使用本工具风险自负。
这个工具能做什么
边框圆角（Border Radius）生成工具提供四个滑块，可分别设置盒子每个角的圆角，范围 0 到 100 像素，并在实时预览中查看形状。输出是一条 border-radius 声明，可直接粘贴到样式表中。四个角的初始值都是 20px。
数值按 CSS 要求的顺序书写：左上、右上、右下、左下，即从左上角开始顺时针排列。四个值相同得到圆角均匀的卡片；取值不同则可以做出对话气泡、标签页、叶子形状等不对称设计。这种简写在所有现代浏览器中都无需前缀即可使用。
适用场景
- 为卡片、按钮和输入框设置符合设计系统规范的圆角。
- 只给标签页的上方两角或下拉菜单的下方两角加圆角。
- 制作带一个尖角的聊天气泡形状。
- 快速尝试不同的圆角值，而不必反复修改 CSS 并刷新页面。
示例
输入
左上 24，右上 24，右下 4，左下 24输出
border-radius: 24px 24px 4px 24px;关于这个工具的问题
怎样做出正圆？
给正方形元素设置 border-radius: 50%。百分比相对于元素尺寸计算，所以无论宽度多少都保持圆形。胶囊形按钮则应使用较大的像素值，例如 999px。
为什么背景会溢出圆角？
带有自身背景的子元素可能会覆盖圆角区域。给设置了圆角的父元素加上 overflow: hidden，或给子元素设置相同的圆角。
圆角可以是椭圆形的吗？
可以。CSS 允许每个角设置两个半径，中间用斜杠分隔，例如 border-radius: 50px / 25px。本生成工具输出的是常见的正圆角写法，如需第二个值，请在输出中手动添加。
border-radius 会影响阴影吗？
会。box-shadow 沿圆角轮廓绘制，因此阴影的四角与之吻合。可以用 CSS 阴影（Box Shadow）生成工具生成阴影，再将两条声明组合使用。
这个工具免费吗？
是的，完全免费。无需注册或电子邮箱。结果直接显示在本页。
如何获取结果？
在此页面使用工具即可查看结果，无需通过电子邮件接收。