批量圓角工作流程，是使用同一個視覺化產生器，為設計系統中的每個元件——卡片、按鈕、面板、標籤、頭像——輸入每個元素的四個角落數值，產生最短且正確的 CSS 簡寫，再複製出這段壓縮後的宣告。CSS Border Radius Generator會依順時針順序（左上、右上、右下、左下）為每個角落接受一個半徑值，讓你選擇像素或百分比，在其預覽中呈現同一段簡寫，並依照標準 CSS 壓縮規則，把重複的數值折疊成一個、兩個、三個或四個數值。因為預覽本身就是使用產生出來的宣告，你可以在貼上之前，準確看到瀏覽器將會收到的內容。四個角相等會變成單一數值；相對兩角交替相同會變成兩個數值；右上與左下共用同一數值會變成三個數值；否則四個數值都會保留顯示。當你要為數十個元件產生半徑值時，這種壓縮就很重要，因為最短的等效簡寫在樣式表中更容易閱讀，之後要在單一角落覆寫也更容易，在程式碼審查時也更容易一眼掃過。
「批量產生圓角」實際上代表什麼
在 CSS 圓角的情境下，「批量」通常不代表把四個元素的輸入陣列一次批次處理；這個專注的產生器一次只處理一個方框。批量效益來自於在設計系統中的多個元件上，不離開瀏覽器、反覆執行同一套緊湊、可預期的工作流程。每次使用這個工具，都會產生一段經過驗證的宣告，可以直接貼進樣式表、CSS 模組，或是 styled-components 規則中。
如果你維護的是一個具有具名 token 的設計系統（--radius-sm、--radius-md、--radius-lg、--radius-pill），批量工作流程會把每個 token 對應到一組特定的角落設定，而不是單一數字。這讓你可以把小卡片的每個角固定在 12px、藥丸形按鈕設成較大的半徑或 50%，把有機造型的面板設成四個不同的百分比——同時仍然為每一個都產生最短且正確的簡寫。一位需要十種按鈕變體、二十種卡片元件，以及數個彈窗畫面的開發者，可以連續執行十次產生器而不需要切換情境，每次都複製出一段最佳化的宣告。
產生前先規劃好 Token 系統
批量圓角工作最快的做法，是在開始輸入數值之前，先決定好整套系統。一個典型的 token 對照表如下：
- sm：每個角落 6px——用於標籤、小型晶片。
- md：每個角落 12px——用於卡片、輸入框、面板。
- lg：每個角落 20px——用於彈窗、大型畫面。
- pill：一個較大的像素值或 50%——用於按鈕、狀態徽章。
如果你有依每個角落而異的有機造型面板，請把它們視為具名的覆寫，而不是 token。無論哪一種情況，產生器的工作流程都相同：輸入四個數值、選擇單位、複製壓縮後的輸出結果，再貼到擁有該 token 的樣式表項目中。一旦鎖定 token 對照表，每次批量產生都會得到符合整套系統的數值，同一段宣告也能重複用在所有對應到該 token 的元件上。
為多個元件產生圓角宣告
- 開啟 CSS Border Radius Generator，依順時針順序——左上、右上、右下、左下——為每個角落輸入一個半徑值。
- 固定曲線選擇像素，尺寸相對曲線選擇百分比。這個單位會套用到那一輪的全部四個角落。
- 在顯示的方框尺寸下檢視預覽。預覽本身就是使用產生出來的簡寫，因此如果看起來不一致，就代表在複製之前需要調整輸入值。
- 複製壓縮後的宣告，並貼到你正在設定的元件、token 或樣式表規則中。這個產生器會依照標準 CSS 壓縮規則，把重複的角落折疊起來。
- 針對下一個元件重複上述步驟。重設四個欄位、輸入新的數值、選擇單位、複製、貼上。一旦決定好數值，整個循環只需要片刻。
- 複製每一段宣告之後，都要在真實元件的實際寬度、高度、邊框、內距、焦點外框與各個響應式斷點下進行測試。
當多個 token 共用同一個統一數值時——例如每張卡片的每個角都用 12px——你只需要確認一次這段簡寫，就能在整個系統中重複使用。這個產生器保證統一的 12px 輸入會產生 border-radius: 12px;，而不是較長的四值形式，這讓即使半徑對照表有三十列，樣式表依然容易閱讀。
批量工作流程中的像素與百分比
這兩種單位的行為不同，這也影響你要如何批次處理它們。
| 單位 | 在不同尺寸下的行為 | 最適合用於 |
|---|---|---|
| px | 不論元素尺寸如何，半徑都固定不變 | 卡片、輸入框、面板、固定版面的區域 |
| % | 依邊框方框的尺寸縮放 | 藥丸形、橢圓形、有機造型面板、響應式形狀 |
像素半徑在元素尺寸改變時仍保持固定。不論卡片寬度是 200px 還是 600px，12px 的半徑就是 12px，這也是為什麼像素會是卡片、輸入框、面板，以及大多數區域的預設單位。
百分比半徑則是依邊框方框的尺寸計算出來的。在正方形上使用 50% 的數值，會產生圓形的角落，形成一個視覺上的圓形；同樣的 50% 用在寬矩形上，則會產生類似橢圓形的端點。依每個角落混搭不同百分比，可以打造出葉片或不對稱斑點等有機造型。
想更深入了解像素與百分比在實際樣式表中的差異，請參閱這篇像素與百分比及角落順序指南。
讀懂壓縮後的簡寫與順時針的角落順序
這段簡寫是從左上角開始依順時針方向讀取，而不是由左到右。這個產生器所依循的壓縮規則，正是 CSS 用在手寫宣告上的同一套規則。
| 不同的角落數值 | 壓縮後的形式 | 範例輸出 |
|---|---|---|
| 四個角全部相等 | 一個數值 | border-radius: 12px; |
| 相對的兩對角交替相同 | 兩個數值 | border-radius: 8px 20px; |
| 右上與左下相等，另外兩個各自不同 | 三個數值 | border-radius: 8px 16px 24px; |
| 四個角全部不同 | 四個數值 | border-radius: 8px 12px 24px 4px; |
使用四個數值時，順序為左上、右上、右下、左下。使用兩個數值時，第一個套用到左上與右下，第二個套用到右上與左下。使用三個數值時，中間的數值由右上與左下共用。這個產生器會明確標示每個角落，因此你不需要記住這些對應關係，但壓縮後的輸出仍然依循相同的 CSS 規則。
以三值形式的實例來說，假設有一個有機造型面板，左上為 8px、右上為 16px、右下為 24px、左下為 16px。由於右上與左下相符，它們會折疊成中間的數值；結果為 border-radius: 8px 16px 24px;——三個數值代表四個角落，其中中間的 16px 涵蓋了右側的兩個角落。
這種共用角落的標示方式，正是視覺化工具對批量作業有幫助的主要原因。當十個元件各自需要自己的四角設定時，你可以對照具名的角落欄位逐一驗證，並確信壓縮後的結果仍然代表你原本的意圖。想了解完整規則，包括橢圓斜線形式，請參閱MDN border-radius 參考文件。
在真實元件上驗證每一段宣告
這個產生器完全在瀏覽器本機執行。不會上傳任何設計數值，不需要帳號，也不會載入任何新的相依套件。這讓反覆嘗試變得很快速，但也代表這個工具是生產輔助工具，而不是測試的替代品。複製每一段宣告之後，請驗證：
- 在該元素所支援的最小與最大寬度下渲染它。在 320px 下看起來正確的半徑，在 1920px 下可能會與內容重疊，而當相鄰角落競爭同一塊空間時，百分比半徑可能會被正規化成比預期更小的曲線。
- 確認可點擊的角落區域符合觸控目標尺寸。過大的半徑可能會縮小按鈕角落實際的可點擊區域。
- 檢查曲線周圍的內距。當內距太小時，內容可能會擠到角落。
- 驗證焦點外框是否完整可見。半徑可能會截斷焦點外框，使其在角落處消失。
- 不要只靠圓角造型或顏色來傳達意義。可操作性仍然應該來自標籤、圖示或對比度。
當相鄰的曲線會重疊時，瀏覽器可能會按比例縮小實際使用的半徑，因此一個極大的指定數值，渲染出來可能比數字本身所暗示的更小。這種正規化是標準的瀏覽器行為，而不是複製宣告時出現的錯誤。預覽本身就是使用產生出來的簡寫，這有助於在複製之前先發現序列化上的錯誤——但唯一能完全算數的測試，是在真實元件、以其實際上線寬度所進行的測試。
整合整套批量工作流程
針對你設計系統中的每個元件執行這個產生器，每次都複製最短且正確的宣告，然後在真實元件、真實寬度下驗證。同一個工具反覆使用，正是讓這個工作流程「批量」的原因——而最短且正確的簡寫，正是讓每一次產出都能上線的原因。
相關閱讀：Common Regex Patterns in JavaScript: A Token Reference。