圓角與形狀產生器
以 px 或 % 調整四個角的水平和垂直半徑，並預覽形狀。複製或儲存產生的 border-radius CSS。預覽的寬度、高度和顏色不會包含在 CSS 中。
可執行的操作
從預設值調整圓角
可從 8 種預設值中選擇，包括圓角、膠囊形和葉片形，再調整半徑。選擇預設值會一併取代半徑和單位。
分別設定四個角的圓角
關閉共用半徑設定後，即可分別輸入左上、右上、右下和左下角的水平與垂直半徑。
檢查並取得 CSS
檢查形狀後產生 CSS。可在簡寫和各角個別宣告格式間切換，再複製或儲存為 CSS 檔案。
使用方式
選擇預設值和單位
直接輸入半徑，或選擇預設值開始調整。變更單位不會換算數值。
比較圓角和形狀
輸入一個數值即可套用相同半徑。若要分別設定各角，請取消勾選該選項並調整水平與垂直數值。
視需要檢查尺寸
您可以在預覽設定中變更寬度、高度和預覽顏色。這些設定不會包含在輸出 CSS 中。
產生 CSS，再複製或儲存
按下「產生 CSS」並選擇所需格式。變更半徑、單位或尺寸後，請重新產生。
適用情境
調整卡片和按鈕的圓角
想要為頁面元件建立 CSS，將四個角都設為相同圓角，或只將上方兩角設為圓角時。
建立不對稱的圓角背景
想要分別調整各角的水平和垂直圓角，建立類似葉片或有機形狀的輪廓時。
半徑、單位與顯示尺寸的關係
水平與垂直是同一角的兩個方向
水平半徑控制水平方向的圓角，垂直半徑控制垂直方向的圓角。任一數值為 0 時，該角不會呈現圓角。請從左上角開始，依順時針順序指定四個角。
水平和垂直 % 分別以寬度和高度為基準
水平 % 數值以元素寬度為基準，垂直 % 數值則以元素高度為基準。即使數值相同，正方形、直向或橫向長方形的外觀仍會不同。px 可直接指定長度。
過大的半徑會按相同比例縮小
若相鄰半徑的總和超過邊長，顯示用的 8 個半徑都會按相同比例縮小。輸入值和產生的 CSS 維持不變。產生後可在詳細資料中查看預覽實際使用的半徑。
圓角可呈現的輪廓範圍
border-radius 會將角變成橢圓曲線，無法建立凹陷或任意多邊形。squircle 預設值以橢圓角近似此形狀，並非精確呈現數學曲線。
常見問題
可以為每個角設定不同的圓角嗎？
可以。取消勾選「所有角使用相同圓角半徑」，即可分別輸入每個角的水平和垂直半徑。重新勾選後，所有半徑都會設為左上角的水平半徑。
切換單位時會換算數值嗎？
不會。數值會保留，只會變更單位。若從 px 切換為 % 後仍有數值大於 100，請重新輸入 0–100 範圍內的數值。
CSS 會包含預覽的尺寸和顏色嗎？
不會。輸出內容只有 border-radius 宣告。請在使用它的頁面或元件中設定寬度、高度和背景顏色。
為什麼顯示的形狀比我輸入的半徑更小？
瀏覽器會按相同比例縮小顯示的半徑，避免角落曲線重疊。您可以在「顯示用半徑」下查看縮小比例和各角使用的 px 數值。
輸入與結果
- 半徑
- 以相同單位指定全部 8 個數值：0–100% 或 0–9999px。也接受小數。
- 預覽
- 預覽寬度和高度須為 1–400px 的整數。若寬度超出欄位，您可以在欄位內水平捲動。
- 輸出
- border-radius 簡寫，或分別列出 4 個角的宣告。可複製或儲存 border-radius.css。
- 不包含
- 寬度、高度、背景顏色，以及圖片或 SVG 匯出。