Border-radius是CSS3中一个很有用的属性，通过它，我们可以快速地制作出漂亮的圆角效果。今天我们就来一起学习如何使用border-radius属性，以制作出各式各样的圆角效果。

1. 圆角边框

首先，我们来看一下如何使用border-radius属性在一个元素的四个角制作出四个一样的圆角。

```css

border-radius: 10px;

```

上面的代码会将某个元素的四个角制作为半径为10px的圆角。如果我们只想将某个角设置成圆角，而不想让其他的角也跟着变为圆角，我们可以使用以下代码：

```css

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-right-radius: 30px;

border-bottom-left-radius: 40px;

```

上面的代码会让某个元素的四个角都变成不一样大小的圆角。

2. 椭圆形

如果我们想要制作一个椭圆形，可以将border-radius的两个值设置为不一样的数值。

```css

border-radius: 20px 40px;

```

上面的代码会让某个元素的左右两个角变成半径为20px和40px的圆角。这样，元素就会变成一个椭圆形。

3. 圆形

如果我们想要制作一个圆形，可以将border-radius的两个值都设置为相同的数值。

```css

border-radius: 50%;

```

上面的代码会将某个元素变成一个半径为当前元素长宽中较小值的一半的圆形。这样，我们就可以轻松地制作出各式各样的圆形了。

4. 特殊形状

有时候，我们想要制作一些特殊形状的元素，如实验室标志等，这时候border-radius属性就显得有些力不从心了。我们可以借助CSS3的伸缩盒模型（flexbox）来实现我们想要的效果。

```html