border-radius 是设置元素边框圆角的一个属性，它接收以下的取值：

• 长度
• 百分比：水平半轴相对于盒模型的宽度，垂直半轴相对于盒模型的高度。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/BamGzgO?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

与许多样式一样，border-radius 是 border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）、border-bottom-left-radius（左下角）的缩写。

因此下面代码就通过设置border-top-left-radius（左上角）为 100% 创造了一个半圆。

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/qBVQNeR?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

圆形

当把一个正方形的border-radius 设置为 50% 便可以创建一个圆形。

<div class="box"></div>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        border-radius: 50%;
    }
</style>

$$demo

<div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: pink; border-radius: 50%; } </style>

$$

---

练习

1. 用圆角创建以下这个图形。

$$demo

<div class="box"></div>

<style>

.box {

width: 100px;

height: 100px;

background-color: teal;

border-bottom-left-radius: 100%;

border-top-right-radius: 100%;

}

</style>

$$

$$answer

<div class="box"></div>

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: teal;
        border-bottom-left-radius: 100%;
        border-top-right-radius: 100%;
    }
</style>

$$