CSS 圓角產生器

連動或獨立調整四個角，預覽一般與橢圓圓角，並匯出 border-radius。

單位

px %

同步四角

左上角

右上角

右下角

左下角

橢圓圓角

分別設定垂直半徑

預覽

CSS

內容僅在此瀏覽器處理，不會上傳或儲存。

工具介紹

設計按鈕、卡片或徽章時，對照一般圓角與橢圓圓角的差異。

設計工具

選擇 px 或 %，透過滑桿或數值欄位調整四角半徑。預設四角連動，取消後可分別設定。展開橢圓圓角並啟用獨立垂直半徑，即可分開調整水平與垂直曲率。

範圍為 0–500 px 或 0–100%。複製或下載的 border-radius 與預覽使用相同數值。百分比效果會隨目標元素尺寸改變；切換單位會改變數值的解讀方式，不保證維持相同的視覺大小。

斜線前為水平半徑，斜線後為垂直半徑。圓角重疊時，CSS 會按比例縮小半徑，使其符合盒子尺寸。

百分比圓角分別依元素的寬與高計算，長方形設為 50% 會變成橢圓；正圓需要寬高相等。希望圓角維持固定曲率時可選 px，並在實際元素尺寸上確認效果。