css border 圆角通常由border与border-radius配合实现。border负责边框宽度、线型和颜色，border-radius负责圆角半径，两者既可以独立使用，也可以组合使用。掌握基础示例、常见造型和排查方法后，处理按钮、卡片、图片和内容容器会更直接。

基础写法

border用于设置边框，border-radius用于控制圆角半径，二者可以单独使用，也可以组合使用。例如只设置圆角但不加边框，可以写成 .box { background: #f5f5f5; border-radius: 8px; }；同时设置边框和圆角，可以写成 .box { border: 1px solid #ccc; border-radius: 8px; background: #fff; }。如果只想保留普通直角边框，也可以单独写 .box { border: 1px solid #ccc; }。这样可以明确区分边框线条和圆角形状分别由哪个属性控制。

分别控制四个圆角

需要不同形状时，可以按照左上、右上、右下、左下的顺序设置四个圆角值。例如 .panel { border: 1px solid #dcdcdc; border-radius: 12px 12px 0 0; } 可以只保留顶部圆角；若四个角都不同，可写成 .card { border: 1px solid #ccc; border-radius: 16px 12px 8px 4px; }。也可以使用单角属性精确控制，例如 .tag { border: 1px solid #bbb; border-top-left-radius: 10px; border-bottom-right-radius: 10px; }，适合标签页、提示框和组合面板。

制作圆形和胶囊形状

正方形元素将圆角半径设为百分之五十，可以形成圆形，前提是宽度与高度相等。例如 .avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; }。如果宽高不相等，得到的通常是椭圆而不是正圆。长方形按钮采用较大的圆角值，通常可以得到胶囊外观，例如 .btn { padding: 10px 20px; border: 1px solid #1677ff; border-radius: 999px; background: #1677ff; color: #fff; }。使用固定大值或 999px 往往比猜测具体半径更稳定。

处理图片与内容溢出

元素自身的背景色或背景图通常会跟随border-radius一起裁切，因此普通背景一般不必额外依赖overflow: hidden。真正容易越界的对象，更多是内部图片、子元素或伪元素。比如图片裁切可写成 .thumb { width: 240px; border-radius: 12px; overflow: hidden; } .thumb img { display: block; width: 100%; }；如果不想裁切整个容器，也可以直接给图片本身设置圆角，例如 .thumb img { border-radius: 12px; }。当组件还需要保留外层阴影时，可让外层负责box-shadow，内层负责border-radius与overflow: hidden，避免阴影被一起裁掉。

常见问题与调试方法

圆角不生效时，可以按症状排查。第一，确认border-radius写在正确元素上，有时真正可见的是内部图片或子层，而不是外层容器。第二，若子图片、伪元素或彩色子块冲出圆角边界，需要补充overflow: hidden，或分别给这些子元素设置相同圆角。第三，制作圆形时要保证宽高相等，否则border-radius: 50%通常只会得到椭圆。第四，圆角不明显时，检查元素尺寸是否过小，以及边框颜色、背景色是否缺少对比。第五，边框粗细不一致时，要确认是否同时设置了border-top之类的单边属性，或被优先级更高的规则覆盖。最后可使用开发者工具查看最终计算样式，确认border、border-radius、overflow是否实际生效，并定位层叠冲突或选错元素的问题。

合理组合border、border-radius与overflow，可以满足大多数网页圆角边框需求。实际开发时可先区分边框线条、圆角形状和子内容裁切分别由哪些属性负责，再根据按钮、卡片、图片或头像等具体场景做局部调整。

《夸克》非常好用的免费AI浏览器

下载APP查看