要创建好看的圆角效果，可以使用CSS的`border-radius`属性。以下是一些常用的方法和示例：
基本用法
`border-radius: 20px；`：设置四个相同的圆角半径为20px。
`border-radius: 10px 20px 15px 30px；`：分别设置左上角、右上角、右下角和左下角的圆角半径为10px、20px、15px和30px。
简化写法
如果四个圆角半径相同，可以简写为：`border-radius: 10px；`。
如果对角线上的圆角半径相同，可以简写为：`border-radius: 10px 20px；`。
单个圆角
可以单独设置每个角的圆角半径，例如：
`-moz-border-radius-topleft: 20px；`：仅设置左上角的圆角半径为20px。
`-webkit-border-radius-topright: 10px；`：仅设置右上角的圆角半径为10px。
使用百分比
可以使用百分比作为单位，例如：`border-radius: 50%；`，这会将元素变成一个圆形。
兼容性
为了确保在不同浏览器中都能有良好的显示效果，可以添加浏览器特定的前缀，例如：
`-moz-border-radius: 20px；`
`-webkit-border-radius: 20px；`
`-ms-border-radius: 20px；`
`-o-border-radius: 20px；`
```css
/* 基本用法 */
div {
border-radius: 20px；
background-color: f0f0f0；
padding: 20px；
text-align: center；
}
/* 分别设置四个角的圆角半径 */
div {
border-top-left-radius: 10px；
border-top-right-radius: 20px；
border-bottom-right-radius: 15px；
border-bottom-left-radius: 30px；
background-color: ffcc00；
}
/* 简化写法 */
div {
border-radius: 10px；
background-color: ff9900；
}
/* 单个圆角 */
div {
border-top-left-radius: 20px；
background-color: 0099ff；
}
/* 使用百分比 */
div {
border-radius: 50%；
width: 100px；
height: 100px；
background-color: 00ffff；
}
/* 兼容性 */
div {
-moz-border-radius: 20px；
-webkit-border-radius: 20px；
-ms-border-radius: 20px；
-o-border-radius: 20px；
background-color: cc00cc；
}
```
通过这些方法，你可以轻松实现不同风格和需求的圆角效果。根据具体项目需求和浏览器兼容性要求，选择合适的方法进行调整和优化。