不同的圓角設置增加創意，讓設計更生動。

##為什麼要有這功能
border-radius 是一個用來將元素的邊框變成圓角的 CSS 屬性，對於提升頁面設計的柔和度、視覺美感非常有效。它可以讓過於銳利的方形邊框變得更柔和，使設計更具親和力，這種風格特別適合現代化網頁設計、按鈕、卡片等元素。透過控制不同的角度，可以創造出圓形、橢圓形或者更具創意的形狀。

##核心結構
border-radius：單一屬性用來同時控制所有四個角的圓角效果。
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius：分別控制每個角的圓角程度。這些屬性可以靈活調整不同角度的圓角大小。

##主要功能
柔和邊框：將方形的元素轉變為更柔和的圓角外觀。
靈活控制四個角：可以針對每個角分別設置不同的圓角半徑，創造不對稱的設計效果。
適用於多種形狀：當圓角的半徑足夠大時，矩形元素可以變成圓形或橢圓形。

##注意事項
border-radius 設置的值可以是像素 (px)、百分比 (%) 或其他單位。使用百分比時，圓角是相對於元素的尺寸來計算的。
若要創造完整的圓形效果，需將 border-radius 設置為元素寬度的一半。
注意不同瀏覽器對 border-radius 的支援，確保跨瀏覽器兼容性。

##簡單範例應用

<Style>
/* 設置四個角的圓角 */
.box {
    width: 200px;    /* 設置寬度 */
    height: 100px;   /* 設置高度 */
    background-color: lightblue; /* 設置背景顏色 */
    border-radius: 20px; /* 四個角的圓角半徑設置為 20px */
}

/* 針對不同的角設置圓角 */
.custom-box {
    width: 150px;  
    height: 80px;
    background-color: lightgreen;
    border-top-left-radius: 30px;  /* 設置左上角的圓角半徑為 30px */
    border-top-right-radius: 10px; /* 設置右上角的圓角半徑為 10px */
    border-bottom-left-radius: 50px; /* 設置左下角的圓角半徑為 50px */
    border-bottom-right-radius: 0; /* 右下角不設置圓角 */
}

/* 設置一個圓形元素 */
.circle {
    width: 100px;
    height: 100px;
    background-color: coral;
    border-radius: 50%; /* 將元素變成圓形，圓角半徑設為 50% */
}
</Style>