在 box model 大家應該對於 box-sizing 的用法應該都有概念了吧，前篇提到的：

• box-sinzing
  • content-box：所設定的數值 ＋ border ＋ padding
  • border-box：所設定的數值 ( 已包含 border 和 padding )

以及昨天提到的box shadow用來製造陰影效果。

結合以上，想跟大家聊聊，我想要將邊框做成圓角，可以怎麼做？圓角的比例能否調整大小？

P{
 border-raious: 4px;
}

讓我們來看看他在瀏覽器的畫面

那單位的大小該怎麼看，設定值其實就是圓角的半徑值，例如：border-radius:5px 意思為圓角半徑為5px。

若是用 %，可以記得一個特別的用法。
如果你用 50% 就會出現標準的圓型

圖片也可以做出一樣的效果唷

如果想要做四個角都不一樣的話
分別設定四個角的圓角角度，依左上、右上、右下及左下的順序來設定：

{
 border-radius: 10px 20px 30px 40px;
}

四個角就會產生不同的變化