CSS 的 border-radius 簡寫依順時針方向讀取圓角 —— 左上、右上、右下，然後左下 —— 而一個明確標示每個圓角的產生器，就免去了死背這個對應表的麻煩。設定四個值時，你會依序看到那四個對應的圓角；三個值時，中間那個值同時套用於右上和左下；兩個值時，第一個套用於左上與右下，第二個則套用於右上與左下；一個值時，四個圓角全部相同。這個產生器也會把重複的圓角壓縮成最短的等效宣告，所以四個圓角相同的設定會變成 `border-radius: 12px`，而不是 `border-radius: 12px 12px 12px 12px`。這種壓縮讓輸出保持易讀，並忠實反映實際的 CSS 引擎規則，這代表預覽所顯示的內容，正是把宣告貼進真實樣式表後瀏覽器所呈現的結果。把這些值視為一句順時針的句子 —— 四個圓角依序排列、兩組對角的配對、共享的對角線，或全部相同 —— 就能避免最常見的圓角順序錯誤，也就是誤以為這個簡寫的行為類似 padding 或 margin 那樣以左右劃分。
簡寫數值的實際意義
簡寫確實能省下位元組，但前提是你必須記住每個值對應的圓角。一旦內化了順時針規則，一個、兩個、三個與四個值的寫法就會像一個序列般容易閱讀，而不是查表：
| 數值 | 套用對象 | 範例 |
|---|---|---|
| 1 | 全部四個圓角 | border-radius: 12px |
| 2 | 左上 + 右下，然後右上 + 左下 | border-radius: 8px 24px |
| 3 | 左上、右上 + 左下、右下 | border-radius: 4px 8px 12px |
| 4 | 左上、右上、右下、左下 | border-radius: 4px 8px 12px 16px |
順時針規則定義於 CSS Backgrounds and Borders Level 3 規範，而 MDN 的 border-radius 參考資料中的範例也遵循相同的順序。兩個值的情況最容易誤讀，因為它配對的是對角的圓角，而不是視覺上相鄰的圓角 —— `8px 24px` 會在左上與右下產生較緊的弧線，在右上與左下產生較寬的弧線，並不是左右對半劃分。一旦掌握這個對角線的規律，簡寫的其餘組合就會變得直覺。快速內化這個規則的方法：撰寫時把數值唸出來，並把四個屬性的展開宣告轉換成簡寫時，在紙上依順時針列出圓角，直到這個對應不再需要刻意思考為止。
像素與百分比並列比較
兩種單位都能產生有效的弧線；它們回答的是不同的設計問題。當弧線應在各種螢幕寬度與中斷點間保持固定大小時，選擇像素。當弧線應隨著方塊等比例縮放時，選擇百分比 —— 這正是製造藥丸形、橢圓形、葉片形和不對稱有機形狀的方式。
| 面向 | 像素 (px) | 百分比 (%) |
|---|---|---|
| 錨定對象 | 與方塊無關的絕對 CSS 長度 | 元素的 border-box 尺寸 |
| 當方塊變大時 | 弧線大小保持不變 | 弧線等比例放大 |
| 藥丸形按鈕 | 使用較大的像素半徑 | 使用 50% |
| 不對稱斑塊 | 難以在不同中斷點間混搭四種不同的弧線 | 可輕鬆在圓角間混用 0%、50% 與 100% 以上 |
| 邊框重疊 | 瀏覽器會限制呈現的弧線，使相鄰弧線得以容納 | 行為相同，在較大數值時通常更為明顯 |
一個實用的錨點就能涵蓋大部分情境：正方形元素上的 50% 會產生圓形，而同樣的 50% 在寬矩形上則會在短軸產生橢圓狀的弧線。這一個事實就能解釋大多數「為什麼我的藥丸形不夠圓？」的除錯過程，而一個能讓你在不重寫表單的情況下切換單位的產生器，就能毫不費力地讓這點一目了然。
如何使用 CSS Border Radius 產生器
- 依順時針順序 —— 左上、右上、右下、左下 —— 為每個圓角輸入半徑。
- 固定弧線選擇像素，相對於尺寸的弧線選擇百分比。
- 在顯示的方塊尺寸下檢視預覽，確認弧線符合你的預期後再複製任何內容。
- 複製壓縮後的宣告並貼入你的實際元件，然後在實際的寬度、高度、邊框、padding、焦點外框與響應式中斷點下測試該元素。
每個輸入框只接受非負數值，因此不小心輸入負數或非有限值時，會在驗證步驟就會失敗，而不會產生隱而不顯的錯誤。預覽使用的是該工具輸出的相同簡寫，因此在宣告離開瀏覽器之前，序列化錯誤就會在螢幕上顯而易見。按照上述順序操作，通常一分鐘內即可完成；相較之下，較常見的形狀導向做法 —— 在影像編輯器中拖曳視覺控制點 —— 經常讓開發人員感到困惑，因為視覺直覺無法乾淨地對應到 CSS 的圓角順序。
解讀壓縮後的輸出
壓縮是多數產生器忽略的部分。CSS Border Radius 產生器採用與瀏覽器引擎相同的簡寫規則，因此你看到的輸出與樣式表最終呈現的結果完全一致：
- 四個圓角皆相等 → 一個值：border-radius: 16px。
- 對角的圓角交替相等 → 兩個值：border-radius: 16px 32px。
- 右上與左下相等，其餘不同 → 三個值：border-radius: 8px 16px 24px。
- 四個圓角皆不同 → 四個值：border-radius: 4px 8px 12px 16px。
同一種壓縮也揭露了一個值得了解的瀏覽器細微行為：當相鄰弧線會重疊時，瀏覽器會按比例縮小呈現的弧線，使其容納於邊框方塊內。因此，一個非常大的指定值實際呈現可能會小於其數字所代表的。這種標準化屬於 CSS 規範的一部分，並非工具瑕疵，而預覽忠實反映了這點，因為預覽本身就是在呈現產生的簡寫結果。
複製之後：在實際元件中驗證
這個產生器是輔助工具，無法取代元件層級的測試。壓縮後的宣告在你貼入樣式表之前，已經通過圓角順序與壓縮規則的檢驗；它尚未完成的是與元素實際佈局的互動，包括其 padding、邊框、焦點外框、hover 狀態，以及任何尺寸改變的響應式中斷點。
三項檢查能抓住最常溜過乾淨宣告的疏漏。
- 觸控目標。非常大的圓角會縮減可點擊的角落區域。互動控制項仍應符合適當的觸控目標尺寸，而圓角形狀不應成為傳達意義的唯一訊號。
- 焦點與對比。可見的鍵盤焦點外框在圓角控制項上必須保持清晰。顏色與形狀不應單獨承擔為視覺鍵盤使用者提供區辨的全部責任。
- Padding 與 overflow。較小的 padding 值會讓文字擠向弧線，而 overflow: hidden 會沿著圓角內邊緣裁切 —— 通常正確，但在內容較長而圓角裁切變得明顯時，仍值得確認。
三個可靠的起點能涵蓋大部分實際設計：介於 12px 與 24px 之間的卡片、使用較大像素半徑的藥丸形按鈕（或 50%，前提是元素有足夠的水平 padding），以及四個百分比皆不同的有機形面板。每一個都能用產生器快速調整，也能在宣告進入元件後輕鬆驗證，而 CSS Border Radius 產生器會為途中每一種組合同時產出壓縮後的簡寫與即時預覽。
想進一步了解，請參閱 CSS 對話泡泡產生器速查表：邊框與尾巴。