前端Wiki/CSS3/基础/边框与背景增强

border-radius 圆角

border-radius 把直角边框磨圆，是 CSS3 使用率最高的属性之一。它可以接受 1~4 个值，规则与 margin 速记一致（上左、上右、下右、下左的顺时针方向）：

border-radius: 8px; 四角统一。
border-radius: 8px 8px 0 0; 只圆上面两角，做标签页很好用。
圆形：正方形元素设 border-radius: 50%，头像裁圆的标准做法。
胶囊形：长条元素设一个大于高度一半的值或直接 999px，得到两端半圆的按钮。

它还支持斜杠语法 border-radius: 10px / 30px;，前组是水平半径、后组是垂直半径，能做出叶子、贝壳这类椭圆弧形，偶尔用于装饰图形。

两个实用细节：圆角会裁剪背景但不裁剪溢出的子内容（需要配合 overflow:hidden）；图片设 50% 前要确保是正方形，否则会得到椭圆。

本节要点四值顺时针与 margin 同理；50% 造圆形（元素需正方形）、大值造胶囊按钮；圆角裁背景不裁溢出内容，需要时加 overflow:hidden。

CSS

<style>
  .avatar {
    width: 80px; height: 80px;
    border-radius: 50%;        /* 圆形头像 */
    background: #39c5cf;
  }
  .pill {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 999px;      /* 胶囊按钮 */
    background: #39c5cf; color: #fff;
  }
  .tab {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 8px 8px 0 0; /* 只圆上角 */
    background: #b2ebf2;
  }
</style>
<div class="avatar"></div>
<a class="pill">胶囊按钮</a>
<span class="tab">标签页</span>

🔗 相关词条border-radius CSS3 标签元素

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读