邊界半徑

border-radius 屬性允許你更改基本框模型的形狀。

對於該角的垂直和水平半徑，元素的每個角最多可以有兩個值（最多 8 個值）。

第一組值定義水平半徑。可選的第二組值（以“/”開頭）定義垂直半徑。如果僅提供一組值，則它用於垂直和水平半徑。

border-radius: 10px 5% / 20px 25em 30px 35em;

10px 是左上角和右下角的水平半徑。5%是左上角和左下角的水平半徑。 ‘/‘後面的其他四個值是左上角，右上角，右下角和左下角的垂直半徑。

與許多 CSS 屬性一樣，shorthands 可用於任何或所有可能的值。因此，你可以指定從 1 到 8 的任何值。以下簡寫允許你將每個角的水平和垂直半徑設定為相同的值：

HTML：

<div class='box'></div>

CSS：

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Border-radius 最常用於將 box 元素轉換為圓形。通過將 border-radius 設定為方形元素長度的一半，將建立一個圓形元素：

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

由於 border-radius 接受百分比，因此通常使用 50％來避免手動計算 border-radius 值：

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

如果 width 和 height 屬性不相等，則生成的形狀將是橢圓形而不是圓形。

瀏覽器特定的 border-radius 示例：

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;