---
# System prepended metadata

title: DAY15 - CSS3 圓弧效果
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / CSS3']

---

# DAY15 - CSS3 圓弧效果

### 圓弧效果 / border-radius:



```
// HTML

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

```
// CSS

.box {
  border: 3px solid blue;
  background-color: aquamarine;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

```

- 設定 border-radius 50％，基本可以製作出一個圓。

![](https://i.imgur.com/DtWhath.png)



###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / CSS3`