研发工具 · 盒子圆角

CSS 椭圆圆角核对

半径写160px，实际圆角不一定也是160px。输入盒子和四角横纵半径，查看重叠缩放规则。

1. 设置盒子和半径

盒子宽度 px盒子高度 px

半径单位

左上角

左上水平半径左上垂直半径

右上角

右上水平半径右上垂直半径

右下角

右下水平半径右下垂直半径

左下角

左下水平半径左下垂直半径

盒子宽高40–1000 px；半径0–1000 px或0–100%，均为整数。切换单位保留数字，不自动换算，超限时须修正。

圆角预览

统一缩放系数 0.375。任一边的相邻半径之和超出边长时，所有横纵半径一同比例缩小。

.rounded-box {
  box-sizing: border-box;
  width: 200px;
  height: 120px;
  border-radius: 160px 160px 160px 160px / 160px 160px 160px 160px;
}

斜杠前是四角水平半径，斜杠后是垂直半径，顺序均为左上、右上、右下、左下。百分比的水平值参照盒子宽度，垂直值参照高度。仅核对无边框的盒子外轮廓；不处理图片、不裁剪子元素、不推算内边框曲线。大盒子仅在预览框内滚动，导出固定像素尺寸。输入只在本页内存计算，无上传或自动保存。