- 圓角按鈕：在網頁設計中，常常會見到圓角按鈕，這是使用border-radius屬性創建的一個經典案例。通過設置按鈕的border-radius屬性，可以使按鈕的邊角變得圓滑，使整個按鈕看起來更加美觀和現代。
.button {
border-radius: 5px;
}
- 圓形頭像：在社交媒體網站或個人資料頁面中，常常會見到圓形頭像。通過將圖片設置為圓形，并設置border-radius屬性，可以輕松地創建一個圓形頭像。
.avatar {
border-radius: 50%;
}
- 卡片效果：在卡片設計中，常常會使用圓角邊框來增加卡片的視覺吸引力。通過使用border-radius屬性，可以創建圓角邊框，使卡片看起來更加柔和和富有層次感。
.card {
border-radius: 10px;
}
- 懸浮效果：在交互設計中，常常會使用懸浮效果來增強用戶體驗。通過設置元素的hover偽類和border-radius屬性，可以創建一個在懸浮時變為圓角的效果。
.button {
border-radius: 5px;
}
.button:hover {
border-radius: 50%;
}
這些是border-radius屬性的一些最佳實踐案例，通過合理地運用border-radius屬性，可以為網頁設計和用戶體驗增添更多的創意和視覺吸引力。
