CSS圆角border-radius在线生成工具

单位设置
像素(px): 固定大小，适用于精确控制
百分比(%): 相对大小，适用于响应式设计
统一设置
独立设置
预设样式
基础圆角：
特殊效果：
效果预览
预览效果
TL
TR
BL
BR
实时预览圆角效果 (TL=左上 TR=右上 BL=左下 BR=右下)
生成的CSS代码
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
使用说明

单位说明：

  • px: 固定像素值，精确控制
  • %: 相对父元素宽高的百分比

属性值顺序：

  • 1个值：四个角相同
  • 2个值：左上右下 / 右上左下
  • 4个值：左上 / 右上 / 右下 / 左下

提示：百分比单位时，50%可实现完美圆形或椭圆效果。

您最近使用了：

收藏 菜单 QQ