border-radius属性可设置元素圆角，支持统一、分角、椭圆及单独控制，用于美化按钮、图片等。
设置元素边框圆角非常简单，使用 border-radius 属性即可。它可以让你的矩形元素变成带圆角的样式，适用于按钮、图片、卡片等常见场景。
border-radius 可以接受一个或多个长度值或百分比，表示四个角的圆角半径大小。
常用单位：px、em、rem、%。示例：
.box {
border-radius: 10px;
}这会让元素的四个角都变成 10px 的圆角。
立即学习“前端免费学习笔记（深入）”；
你也可以为每个角单独设置不同的圆角大小，按顺时针顺序：左上、右上、右下、左下。
示例：
.box {
border-radius: 10px 5px 20px 8px;
}如果想创建椭圆形的圆角，可以用斜杠 / 分隔横向和纵向半径。
示例：
.box {
border-radius: 20px / 10px;
}表示所有角的水平半径为 20px，垂直半径为 10px。
CSS 还提供了四个子属性，用于单独设置每个角：
示例：
.circle-img {
border-top-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px;
}想让一个正方形元素变成圆形？把 border-radius 设为 50% 即可。
示例：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}如果是长方形元素，设为 50% 会变成胶囊形状：
.capsule {
padding: 10px 20px;
border-radius: 50px;
}以上就是如何用css设置元素边框圆角border-radius的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
161
收藏
