CSS圆角边框设置全攻略

CSS 的 `border-radius` 属性是前端开发中实现元素圆角效果的核心工具，不仅支持统一设置四角、分角独立控制、椭圆圆角（通过斜杠分隔横纵半径），还能借助四个子属性精准调整单个角落，轻松打造按钮、图片、卡片等组件的现代圆润外观；从基础的 `10px` 圆角到 `50%` 的完美圆形或胶囊形，灵活多变的语法让界面美化既简单又高效。

设置元素边框圆角非常简单，使用 border-radius 属性即可。它可以让你的矩形元素变成带圆角的样式，适用于按钮、图片、卡片等常见场景。

基本语法

border-radius 可以接受一个或多个长度值或百分比，表示四个角的圆角半径大小。

示例：

.box {
  border-radius: 10px;
}

这会让元素的四个角都变成 10px 的圆角。

分别设置四个角

你也可以为每个角单独设置不同的圆角大小，按顺时针顺序：左上、右上、右下、左下。

示例：

.box {
  border-radius: 10px 5px 20px 8px;
}

• 左上角：10px
• 右上角：5px
• 右下角：20px
• 左下角：8px

水平和垂直半径（椭圆圆角）

如果想创建椭圆形的圆角，可以用斜杠 / 分隔横向和纵向半径。

示例：

.box {
  border-radius: 20px / 10px;
}

表示所有角的水平半径为 20px，垂直半径为 10px。

单独控制某一个角

CSS 还提供了四个子属性，用于单独设置每个角：

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-right-radius：右下角
• border-bottom-left-radius：左下角

示例：

.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;
}

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~