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` 會在左上與右下產生較緊的弧線，在右上與左下產生較寬的弧線，而不是左／右的劃分。一旦這個對角線規律被理解，簡寫組合的其他部分就會變得直覺。一個快速強化記憶的方式是：在撰寫時將數值唸出來，並把一個完整的四屬性展開宣告轉換為簡寫，在紙上依順時針列出角落，直到對應關係不再需要刻意思考。
像素 vs 百分比，逐一對照
兩種單位都能產生有效的弧線，但它們回答的是不同的設計問題。當弧線應在各種螢幕寬度與中斷點之間保持固定大小時，選擇像素。當弧線應隨著元素方塊縮放時，選擇百分比——這正是產生藥丸狀、橢圓形、葉片狀，以及不對稱有機形狀的方式。
| 面向 | 像素 (px) | 百分比 (%) |
|---|---|---|
| 錨定對象 | 絕對的 CSS 長度，與方塊無關 | 元素的 border-box 尺寸 |
| 當方塊變大時 | 弧線大小維持不變 | 弧線按比例放大 |
| 藥丸按鈕 | 使用較大的像素半徑 | 使用 50% |
| 不對稱有機形狀 | 難以在不同中斷點混合四種不同的弧線 | 可輕鬆在不同角落混合 0%、50% 與 100%+ |
| 邊框重疊 | 瀏覽器會限制渲染弧線，使相鄰弧線能夠容納 | 行為相同，在較大數值時通常更為明顯 |
一個實用的錨點就能涵蓋大部分情況：在正方形元素上使用 50% 會產生圓形，而同樣的 50% 在寬矩形上則會在短軸上產生橢圓般的弧線。這一個事實就能解釋大多數「為什麼我的藥丸按鈕不是完美的圓？」的除錯過程，而一個能讓你在不重寫表單的情況下切換單位的產生器，能讓這項差異一目了然、不費額外工夫。
如何使用 CSS Border Radius Generator
- 依順時針順序輸入每個角落的半徑——左上、右上、右下、左下。
- 固定弧線選擇像素，相對尺寸的弧線選擇百分比。
- 在所顯示的方塊尺寸下檢視預覽，確認弧線符合預期後再複製任何內容。
- 複製壓縮後的宣告並貼到實際元件中，然後在真實的寬度、高度、邊框、padding、聚焦外框，以及響應式中斷點下測試該元素。
每個輸入框僅接受非負數值，因此誤打成負數或非有限值時，會在驗證步驟失敗，而不是產生隱藏的 bug。預覽使用的是該工具所輸出的同一種簡寫，因此任何序列化錯誤都會在畫面上顯示出來，在宣告離開瀏覽器之前就能發現。按上述順序操作通常只需不到一分鐘；而更常見的、以視覺為主的做法——在影像編輯器中拖曳控制點——常常讓開發人員感到困惑，因為視覺上的直覺無法清楚地對應到 CSS 的角落順序。
解讀壓縮後的輸出
壓縮是多數產生器會略過的部分。CSS Border Radius Generator 套用與瀏覽器引擎相同的簡寫規則，因此你看到的輸出與樣式表實際渲染的結果完全一致：
- 四個角落全部相等 → 一個值：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 Generator 會在過程中為每種組合同時產生壓縮簡寫與即時預覽。
如需更深入的瞭解，請參閱 CSS Speech Bubble Generator 速查表：邊框與尾巴。
如需更深入的瞭解，請參閱 Clipboard Viewer Online 速查表：計數與控制項。