border-radius属性可设置元素圆角，支持统一、分角、椭圆及单独控制，用于美化按钮、图片等。

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

基本语法

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

常用单位：px、em、rem、%。

示例：

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

107

查看详情

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

基本上就这些。border-radius 使用灵活，掌握好单位和写法，能快速美化页面元素外观。

以上就是如何用