一個邊框圓角產生器範例展示了從四個原始圓角輸入到瀏覽器可直接渲染、無需透過樣式表往返的最短正確 CSS border-radius 宣告的完整路徑。產生器依順時針順序為每個圓角接收一個半徑，允許每個圓角各自帶有像素或百分比值，在所顯示的方塊尺寸下將這些值繪製到預覽中，然後在複製前將四個輸入摺疊為等效的 CSS 簡寫。壓縮規則遵循 CSS 順時針慣例:當四個圓角相等時，宣告變為單一值;當兩個對角的圓角交替時，變為兩個值;當右上與左下共用時，變為三個值;否則四個值依左上、右上、右下、左下的順序全部保留。由於預覽使用的是產生的簡寫本身，而不是四個獨立的圓角屬性，因此圓角標籤與宣告順序之間的任何不一致都會在 CSS 被複製之前於渲染的形狀中顯現出來。
邊框圓角產生器範例實際展示的內容
一個真實的邊框圓角產生器範例不僅僅是圓角的螢幕截圖。它是一個小型工作流程，能一次解決三項反覆出現的雜務。它讓你不必在每次曲線看起來不對時反覆將值輸入樣式表，它會暴露出簡寫與圓角位置未對齊時最常困住初學者的順序錯誤，並產生長度與形狀實際對稱性相符的宣告。
在 CSS 邊框圓角產生器 內部，每個圓角都有自己的標籤欄位，單位選擇器同時將所有圓角在像素與百分比之間切換，預覽反映的是壓縮後的宣告，而不是四個獨立的屬性。每個圓角都有標籤這點很重要，因為 border-radius 簡寫並不遵循直觀的由左至右排列。當有四個值時，CSS 依序讀取左上、右上、右下、左下。當有兩個值時，第一個值套用至左上與右下，第二個值則套用至右上與左下。當有三個值時，中間的值由右上與左下共用。該工具明確標示每個圓角，因此你無需記住它們的對應關係。預覽使用的是產生的簡寫本身，而不是各別的圓角屬性，這有助於在複製前發現序列化錯誤。
此範例也區分了兩種會產生明顯不同結果的單位系統。像素在方塊調整大小時保持固定。百分比則依據邊框方塊的尺寸計算，能從相同的四個數字產生藥丸形、橢圓形、葉形以及強烈不對稱的形狀。該範例將這些差異並列呈現，這也是唯一能看出為何 50% 半徑在正方形上看起來像圓形、而在寬矩形上卻像橢圓形端點的方式。
使用產生器建立卡片圓角
學習此工具最快的方式是透過一個小型且可重現的範例來操作。建立一個 320 乘 200 的卡片，採用平緩且一致的曲線，然後進行第二次操作以引入不對稱。
- 依順時針順序為每個圓角輸入一個半徑。在左上欄位輸入 24，右上欄位輸入 24，右下欄位輸入 24，左下欄位輸入 24。
- 若要固定曲線選擇像素，若要依尺寸相對調整的曲線則選擇百分比。將單位選擇器維持在像素，如此圓角便不會因卡片寬度改變而變動。
- 在所顯示的方塊尺寸下檢查預覽。確認預覽顯示單一圓角矩形，其所有圓角一致，且形狀與你輸入的內容相符。
- 複製壓縮後的宣告並在實際元件上測試。由於四個圓角全部相等，簡寫會將其摺疊為單一值，因此產生器應回傳 border-radius: 24px;。
現在以混合值執行相同範例，以觀察壓縮規則的實際運作。將左上與右下設為 12，右上與左下設為 24。由於交替模式符合雙值 CSS 規則，第一個值套用至左上與右下，第二個值套用至右上與左下，因此工具會輸出 border-radius: 12px 24px;。
再進一步推動此形狀，強制使用四值形式。將左上設為 8，右上設為 24，右下設為 16，左下設為 32。由於沒有任何一對圓角共用值，產生器會依 CSS 預期的順時針順序回傳 border-radius: 8px 24px 16px 32px;。
解讀產生器回傳的最短 CSS 簡寫
簡寫的簡短程度僅與你四個輸入的對稱性成正比。下表列出產生器所套用的每一條壓縮規則，並附上範例輸入所產生的精確宣告。每一列的渲染結果與四圓角形式完全一致;僅有位元組不同。
| 圓角輸入(順時針) | 壓縮後的宣告 | 縮短原因 |
|---|---|---|
| 24, 24, 24, 24 | border-radius: 24px; | 四個圓角全部相等，單一值即可涵蓋 |
| 12, 24, 12, 24 | border-radius: 12px 24px; | 左上與右下共用 12，右上與左下共用 24，兩個值交替 |
| 12, 24, 8, 24 | border-radius: 12px 24px 8px; | 中間值由右上與左下共用，右下則明確保留 |
| 8, 24, 16, 32 | border-radius: 8px 24px 16px 32px; | 沒有重複的值，四個圓角全部保留 |
請注意，壓縮永遠不會改變哪個像素繪製到哪個圓角。四個值時順序永遠是左上、右上、右下、左下。兩個值時，第一個對應至左上與右下，第二個對應至右上與左下。三個值時，中間的值由右上與左下共用。由於產生器明確標示每個圓角，你無需記住這些對應關係;你只需要讀取回傳的宣告，並確認繪製的預覽與你輸入的圓角相符即可。
根據 MDN border-radius 參考資料，此簡寫屬於 CSS 背景與邊框 Level 3 的一部分，這意味著每個現代瀏覽器都套用相同的壓縮規則與相同的順時針順序。
同一範例中的像素與百分比
保持四個圓角輸入不變，僅切換單位選擇器，以觀察相同的數字如何改變渲染的形狀。下表在 320 乘 200 的方塊上，對每個圓角皆使用 24。
| 單位 | 宣告 | 在 320 乘 200 方塊上的行為 | 調整大小至 480 乘 120 後的行為 |
|---|---|---|---|
| 像素 | border-radius: 24px; | 每個圓角皆為 24px 曲線 | 仍為 24px 曲線，不受新尺寸影響 |
| 百分比 | border-radius: 24%; | 曲線使用每邊的 24%，大於像素形式 | 曲線隨新尺寸重新縮放 |
| 百分比，50% | border-radius: 50%; | 每邊的 50% 在寬矩形上產生類橢圓形的端點 | 當方塊變寬時仍維持橢圓形端點 |
| 百分比，正方形 | 正方形方塊上的 border-radius: 50%; | 等邊的 50% 形成圓形 | 在仍是正方形時維持圓形 |
在任何邊框圓角產生器範例中，單位的選擇是最具決定性的決策。像素值在曲線上保持鎖定，不受版面配置影響，這使其成為卡片、徽章以及大多數按鈕的正確選擇。百分比值則繼承方塊，這正是藥丸形按鈕在其標籤變更時仍能維持藥丸形，或是有機面板在其容器成長時仍能保有葉狀不對稱的原因。
極大的百分比值也會暴露出第二個值得理解的行為。當相鄰曲線會重疊時，瀏覽器可能會按比例縮減實際使用的半徑，因此極大的指定值可能會渲染得比其數字所顯示的還小。此標準化是瀏覽器的標準行為，並非複製宣告中的錯誤。請將渲染的預覽視為事實來源，若形狀與預期不符，請重新輸入。
若要更深入比較這兩種單位及其套用的圓角順序，邊框圓角 CSS 像素與百分比及圓角順序指南 以更多變化展示了相同的概念。
在實際元件上驗證宣告
產生器回傳的宣告是測試的起點，而不是終點。圓角所改變的不只是裝飾。背景與邊框會沿著曲線跟隨，而 overflow 裁剪可能會沿著內部圓角邊緣跟隨。極大的半徑可能會縮減可點擊的圓角區域，因此按鈕與控制項仍應符合適當的觸控目標尺寸。當填補空間過小時，內容可能會在視覺上擠向曲線。
複製宣告後，請使用元件的真實寬度、高度、邊框、填補空間、焦點外框以及響應式斷點進行測試。以下四個步驟可將產生的 CSS 轉為已驗證的結果。
- 將宣告貼入實際的樣式表或元件樣式區塊，然後在目標視窗下載入頁面。
- 在元件實際的尺寸範圍內調整大小，並確認曲線仍如預期呈現，特別是在單位為百分比時。
- 檢查鍵盤焦點、懸停與停用狀態，以確保圓角形狀不會隱藏焦點外框，或將點擊目標縮減至小於平台建議的最小值。
- 檢查圓角方塊內部的對比與填補空間;若文字擠向曲線，請在再次調整半徑之前增加填補空間。
若為統一的卡片，從 12px 到 24px 開始。若為藥丸形，請使用較大的像素半徑或 50%，前提是該元素具有足夠的水平填補空間。若為有機面板，請變化全部四個百分比。請勿僅依賴圓角形狀或顏色來傳達意義;請將半徑視為仍須遵守對比、焦點與目標尺寸的視覺結構。一切皆在本機瀏覽器中執行，因此不會上傳或儲存任何設計值，無需帳號，也不會載入任何新的相依項目。
延伸閱讀:CSS 對話框產生器範例:完整逐步解說。
\