什么是CSS 边框圆角生成器？
免费在线 CSS 边框圆角生成器。通过可视化控件调整四个角的圆角半径。
CSS 的 border-radius 属性用于控制元素边角的圆润程度，它的灵活性远不止简单的圆角矩形。通过独立调节每个角，您可以创造出胶囊形、圆形、不对称形状以及复杂的有机形态——全部只需一条 CSS 属性。CSS 圆角生成器为四个角分别提供独立的滑块控制，并配有即时更新的实时预览。
每个角——左上、右上、右下、左下——都有各自的滑块，让您能创造出完全不对称的形状。像素（px）与百分比（%）之间的单位切换会显著改变行为。像素值创建固定半径的圆角，无论元素尺寸如何变化都保持不变。百分比值将半径与元素尺寸关联起来，这正是创造完美圆形的方法（正方形上的 border-radius: 50%）。
四个预设覆盖了最常见的应用场景。圆形（Circle）生成 border-radius: 50%，创造完美的圆形（在非正方形元素上则为椭圆）。胶囊（Pill）生成完全圆润的两端（border-radius: 9999px），适用于按钮徽标和标签。卡片（Card）应用适度的 8px 圆角，适合卡片组件和容器。圆角（Rounded）在四个角上应用 8px 圆角，适合按钮和表单输入框。
生成的 CSS 代码采用简写语法。如果四个角的值相同，则输出单个值（例如 border-radius: 8px）。如果各角不同，则按顺时针顺序输出四个值（左上、右上、右下、左下）。代码可直接复制到您的样式表中使用。