border-radius 屬性是 CSS 用來將矩形盒模型的每個圓角打圓的機制；而線上 border-radius 產生器是一個小型視覺化工具，讓你可以分別設定四個圓角、即時查看結果，並複製回一段精簡的宣告，例如 border-radius: 12px 0 24px 8px;。這個工具會以順時針順序接受每個圓角的數值半徑，可在固定像素單位與相對尺寸的百分比之間切換，依據實際所在的盒模型尺寸繪製即時預覽，並輸出 CSS 規範所定義的最短正確簡寫。將「逐角控制、單位選擇、真實尺寸預覽、精簡輸出」結合在一起，就是你在製作按鈕、卡片、輸入框、大頭貼或對話氣泡時真正需要的工具，因為靠手感猜半徑、或是在樣式表中反覆編輯同一個值四次，是導致圓角不一致與宣告膨脹的常見作法。
大多數設計任務並不需要四個不同的半徑，而這正是產生器回傳簡寫的價值所在：當三個圓角共用同一個值時，宣告會自動收合；若四個圓角都相同，更會進一步收合成單一 token。CSS 規範允許每個軸設定一到四個半徑值，順序為左上、右上、右下、左下，並可使用斜線形式來區分水平與垂直半徑以製作橢圓圓角。產生器在這裡特別好用，因為它會自動套用這些規則，讓你不用思考順序就能直接貼上宣告。
簡寫實際的運作方式
因為簡寫正是產生器比手打更快的原因，值得先釐清驅動每個精簡結果的四種行為。MDN 上這個屬性的參考資料是簡寫的權威規範，而產生器會完全遵循它：
- 單一值套用至全部四個圓角，例如 border-radius: 8px;。
- 兩個值分別套用至對角線上的兩組對角圓角：第一個為左上與右下，第二個為右上與左下。
- 三個值分別設定左上、對角線那一組（右上與左下）、以及右下。
- 四個值以順時針方向從左上開始填滿每個圓角。
當需要橢圓圓角時，斜線用來分隔水平與垂直半徑：border-radius: 12px / 24px; 表示每個圓角都是水平 12 像素、垂直 24 像素的橢圓。一個只複製你所設定內容的產生器，會在某些位置與前一位置相同時自動略過，這就是為什麼四個圓角的視覺輸入，最後在輸出框中會收合成兩個甚至一個 token。
像素或百分比：選擇正確的單位
你選擇的單位會決定當盒模型本身改變形狀時，圓弧曲線如何變化。兩者並不能互換，這個決定應該在設計階段就確定，而不是在複製程式碼時才決定。
| 單位 | 曲線行為 | 最適合用途 |
|---|---|---|
| px（像素） | 不論盒模型大小，曲線固定不變 | UI 控制項、按鈕、輸入框、徽章 |
| %（百分比） | 依元素盒模型尺寸等比例縮放 | 大頭貼、主視覺形狀、滿版面板 |
| 混用 | 相同百分比下，每個圓角的實際弧度不同 | 以單一值產生不對稱形狀 |
一個實用的小知識：在正方形盒模型上設定 border-radius: 50%; 會產生圓形，而在矩形上則會產生橢圓。這就是為什麼百分比是圖片大頭貼與裝飾形狀的正確單位，而像素值則能讓與文字並排的按鈕保持一致的視覺表現。
線上產生 Border Radius 的四個步驟
從空白樣式表到完成圓角設定，最快的路徑是使用一個能處理單位切換、即時預覽與簡寫壓縮的產生器。每個步驟對應 CSS Border Radius 產生器 上的一個控制項：
- 以順時針方向輸入四個圓角的半徑。分別在左上、右上、右下、左下輸入數字。如果想讓簡寫自動壓縮，可以將欄位留空或與其他圓角相同。
- 為每個圓角選擇單位。在像素（固定曲線）與百分比（相對尺寸曲線）之間切換。在調整預覽的盒模型寬高之前，切換單位並不會改變視覺上的曲線。
- 以實際盒模型尺寸檢視預覽。將預覽盒模型設定為元件在頁面上的真實寬高，這樣橢圓與內側圓角的平整度就能在貼上程式碼之前先看出來。
- 複製精簡後的宣告並在實際元件上測試。使用複製按鈕，貼到你的樣式表中，重新載入以確認曲線與你在預覽中看到的一致。
最後一個步驟不可省略：在 200px × 80px 的藥丸形狀上設定的百分比圓角，與在 400px × 80px 的藥丸上設定的相同百分比，會產生明顯不同的曲線，因此預覽必須以實際生產尺寸執行，才能作為可靠的測試依據。
解讀壓縮後的輸出
規範中的壓縮規則直接對應到工具輸出的結果，因此你可以在按下複製之前就預測輸出的樣貌。四個圓角皆為 12px 時，輸出為 border-radius: 12px;。左上與右下相同、右上與左下相同時，輸出為 border-radius: 12px 24px;。三個相異的圓角輸出為 border-radius: 12px 24px 32px;，四個相異的圓角輸出為 border-radius: 12px 24px 32px 8px;。橢圓圓角會出現在斜線之後，例如 border-radius: 12px / 6px;。
當工具將輸出收合時，你並沒有失去控制力——你獲得的是更好的可讀性，以及在線上 CSS 中更小的位元組數量。相同的收合也是壓縮工具（minifier）會做的事，但在編輯階段就套用，代表你讀到的簡寫就是生產環境中呈現的樣子。
常見模式與使用時機
一組少量的反覆出現形狀就能涵蓋真實介面中大部分的圓角工作，辨識它們能同時加快輸入與解讀生產 CSS 的速度。卡片表面、面板與列表列通常使用四個圓角皆相同的單一值，因此輸出會收合成一個 token。藥丸與標籤透過設定為元素高度一半或接近一半的值來維持弧度。不對稱的 UI 形狀——例如頂端平整、底部圓角的特色卡片，或被切去一個角的橫幅——會使用三到四個相異值，這正是產生器最能省下打字的場景。
- 四個圓角皆相同：一個 token，用於大多數卡片、輸入框與表面。
- 上方兩圓角相同、下方兩圓角相同：兩個 token，用於主視覺區塊或固定式面板。
- 一個直角：三個 token，用於緊貼容器邊緣的分頁標籤。
- 對角線切角：四個 token，用於特色卡片與裝飾形狀。
- 藥丸與圓形：藥丸使用單一值，設定為高度的一半或以上；圓形則在正方形上使用單一百分比。
當以上模式都不適用時，產生器仍然有用——輸入你想要的數值、複製輸出、繼續往下做。
常見形狀的實作範例
三個具體的宣告展示了如何以「逐角控制」加上「單位選擇」涵蓋大部分按鈕、卡片與大頭貼的需求。實際的視覺結果取決於元素所在的盒模型，而預覽是貼上程式碼前唯一能看出這些差異的地方。
| 形狀 | 圓角數值 | 單位 | 壓縮後的宣告 |
|---|---|---|---|
| 柔和卡片 | 四個圓角皆相同 | px | border-radius: 12px; |
| 藥丸按鈕 | 四個圓角皆相同 | px | border-radius: 999px; |
| 圓形大頭貼 | 四個圓角皆相同 | % | border-radius: 50%; |
| 緊貼頁首的分頁 | 三個相異圓角 | px | border-radius: 12px 12px 0 0; |
| 不對稱的特色卡片 | 四個相異圓角 | px | border-radius: 16px 4px 16px 4px; |
每個宣告都符合規範的壓縮規則，且都能直接貼到任何 CSS 規則中。只有大頭貼那一格需要盒模型為正方形：在矩形上使用相同的 50% 宣告會產生橢圓，這對於填滿容器的響應式圖片來說正是預期行為。
複製輸出時的訣竅與陷阱
圓角相關的問題大多來自三個地方：單位選擇、預覽尺寸，或是在不夠用時硬是把多個效果塞進同一個屬性。以下清單整理出在 CSS 送到瀏覽器之前能抓出錯誤的檢查項目。
- 以實際生產尺寸預覽。百分比圓角在一個盒模型尺寸下看起來正確，在另一個尺寸下卻會失準；而像素圓角套用於非常小的元素時，可能會吃掉細節。
- 保持簡寫的可讀性。如果需要靠註解才能記住四個 token 中哪個圓角是哪個，就保留註解；壓縮所省下的位元組不值得犧牲維護成本。
- 不要堆疊不相關的屬性。在同一個元素上同時使用 border-radius 與 border-image，在某些引擎中可能會裁切掉圓角；與其假設沒事，應該實際測試。
- 注意內側圓角。當圓角逼近盒模型高度時，內側邊緣的弧線會相交，盒模型就會變成藥丸形；這通常是有意為之，但仍值得在預覽中確認。
- 乾淨地複製逗號。壓縮輸出對每組軸向只使用一個宣告；不要從使用已棄用四屬性形式的舊片段中貼到多餘的逗號。
對任何新形狀的一個快速健全性測試，是將宣告貼到一行規則中並重新載入頁面；如果曲線與預覽中看到的一致，就完成了。如果不一致，最常見的原因是實際盒模型尺寸與預覽中使用的不同，此時應該以實際尺寸重新測試，而不是用肉眼去微調半徑。
邊框圓角產生器在 CSS 工作流程中的定位
圓角雖小，卻幾乎出現在使用者觸碰的每個互動介面上。產生器介於視覺 mock-up 與樣式表之間，是一個簡潔的中繼步驟：它會固定各個角落的數值、套用規範中的壓縮規則，並回傳一段會與實際出貨內容一致的宣告式語法。一旦這段宣告式就定位，負責處理 CSS flexbox 版面配置以及三乘三 CSS grid 版面配置的相同工具，就能用來定位具有圓角的元素，而不會失去弧度，因為 border-radius 是在繪製階段裁切框線，並不會與版面配置演算法互動。
除了 CSS 本身之外，在您打造小型 UI 元件時保持開啟產生器分頁，會比手動猜測來得快速，而且它會產生可直接複製貼上的輸出，無需再進行第二次清理。對於會在瀏覽器中格式化 JSON、編寫目錄樹以及產生 cron 排程的開發者來說，邊框圓角產生器屬於同類型的快速工具：小巧、單一用途、即時可用。
如果您正在權衡各種方案，如何透過視覺化產生器在 CSS 中取得 box-shadow對此有詳細介紹。
如果您正在權衡各種方案，透過視覺化產生器在 CSS 中製作 3D 按鈕對此有詳細介紹。