使用 border-radius 屬性可以輕松實現網頁元素的圓角邊框。1. 基本寫法是直接設置 border-radius 值，如 border-radius: 10px; 可使四角均呈現圓角；2. 使用百分比值（如 border-radius: 50%）可靈活創建圓形或橢圓形狀；3. 可通過 border-top-left-radius、border-top-right-radius 等屬性單獨設置某一角的圓角；4. 實際應用中可用 border-radius: 999px; 創建膠囊按鈕，并配合 overflow: hidden 顯示圖片圓角效果。掌握這些方法能讓頁面設計更美觀。
設置圓角邊框在網頁設計中很常見，用 html 和 css 實現其實很簡單。核心就是使用 border-radius 這個屬性。
一、border-radius 的基本寫法
想給一個元素加上圓角，最直接的方式是設置 border-radius 的值。比如：
.box { border-radius: 10px; }
這樣四個角都會變成 10px 的圓角。你可以把它加在一個 div、按鈕或者圖片上，效果都很直觀。
立即學習“前端免費學習筆記（深入）”；
如果你希望每個角的圓角不一樣，也可以分別指定：
border-radius: 10px 20px 30px 40px;
順序對應的是：上左、上右、下右、下左，順時針一圈。
二、用百分比設置更靈活的圓角
除了像素，你還可以用百分比來設置 border-radius，這時候圓角的大小會根據元素自身的寬度和高度進行比例計算。
比如一個圓形頭像就很適合用百分比實現：
.circle { width: 100px; height: 100px; border-radius: 50%; }
不管這個元素多大，只要寬高一樣，設為 50% 就能變成一個完美的圓形。如果是橢圓，寬高不同也照樣適用。
三、單獨設置某一個角的圓角
有時候你只想讓某個角是圓角，其他保持直角。CSS 提供了單獨設置每個角的寫法：
border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 5px;
這種寫法更適合對細節要求比較高的布局，比如自定義對話框或卡片樣式。
四、實際應用中的一些小技巧
-
如果你想做一個膠囊形狀的按鈕，可以這樣寫：
.btn { padding: 10px 20px; border-radius: 999px; /* 看起來像完全圓角 */ }這樣無論按鈕多長，兩邊都會是半圓形。
-
圖片加圓角時，注意 overflow: hidden 要配合使用，否則可能顯示不全。
基本上就這些。border-radius 不復雜，但用得好能讓頁面看起來更精致。
