CSS中的`border-radius`属性是CSS3引入的一个强大的特性，用于创建圆角边框效果，使得元素的四个角可以平滑地过渡到边框边缘，而不是直角显示。这一属性在现代浏览器中得到了广泛支持，但早期版本的浏览器，如Mozilla Firefox和Safari 3，需要使用特定的前缀来实现兼容性。
`-webkit-border-radius`是针对基于Webkit内核的浏览器（如Chrome和Safari）的私有属性，允许开发者在这些浏览器中实现圆角效果。而`-moz-border-radius`则是为Firefox浏览器专门设计的私有属性。当这两个属性同时存在时，它们分别影响对应内核的浏览器。如果某个属性值为空或被移除，那么相应内核的浏览器将无法显示圆角效果。然而，对于不支持这些前缀的浏览器（如IE和360浏览器），即使保留这些属性，也不会产生任何负面影响，因为它们遵循CSS3的标准属性`border-radius`。
`border-radius`属性可以接受一个到四个值，分别代表左上角、右上角、右下角和左下角的圆角半径。例如，`border-radius: 5px`会使所有角落都成为半径为5像素的圆角。如果只提供两个值，如`border-radius: 5px 3px`，则第一个值适用于左上角和右下角，第二个值适用于右上角和左下角。提供三个值（`border-radius: 5px 3px 2px`）时，未指定的左下角会与左上角相同，未指定的右下角会与右上角相同。
在更复杂的场景下，可以通过单独设置`-webkit-border-top-left-radius`, `-webkit-border-top-right-radius`, `-webkit-border-bottom-left-radius`, 和 `-webkit-border-bottom-right-radius`等属性来控制每个角的圆角大小。同样，`-moz-`前缀的属性也有对应的独立设置方式。
除了创建圆形和普通的圆角，`border-radius`还可以用来创建半圆和四分之一圆。例如，要创建一个实心圆，可以设置元素的宽度和高度相等，并将`border-radius`设为宽高的一半。以下是一些示例：
```css
/* 实心圆 */
.round {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* 空心圆 */
.circle {
width: 200px;
height: 200px;
background-color: transparent;
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
border-radius: 100px;
}
/* 虚线圆 */
.dashed-circle {
width: 200px;
height: 200px;
background-color: transparent;
border: 3px dashed #a72525;
-webkit-border-radius: 100px;
border-radius: 100px;
}
```
在Internet Explorer中，早期版本不支持`border-radius`，但可以通过其他技术，如使用图片、JavaScript库（如jQuery UI）或特定的IE滤镜来模拟圆角效果。然而，随着浏览器的更新换代，如今大多数现代浏览器已经不再需要这些补救措施。
`border-radius`是CSS3中一个非常实用且富有表现力的特性，它极大地提升了网页设计的灵活性和美观度，同时也需要注意不同浏览器的兼容性问题。通过结合使用标准属性和浏览器私有属性，开发者可以确保在多种浏览器环境中实现一致的圆角效果。
