CSS 圓角生成器
拖動滑塊或選個預設——即時看到圓角形狀，一鍵複製 border-radius CSS。
模式單位
預設
預覽——相鄰圓角重疊時瀏覽器會按比例縮減，預覽即真實效果。
使用方法
- 開啟就有一個 16px 的圓角卡片——拖動「圓角」滑塊或切換單位（px / %），一切即時變化，無需點選按鈕。
- 用模式 chips 切換：「全部」一根滑桿管四角；「分角」四角各自獨立（左上/右上/右下/左下）；「橢圓」每個角有水平、垂直兩個半徑（即斜槓語法）。
- 點選預設（方角、圓角卡片、圓形、膠囊、葉子、花瓣）一鍵載入現成形狀，模式與單位自動跟隨。一鍵複製完整的 border-radius 宣告。
示例
預設
圓角卡片
border-radius CSS
border-radius: 16px;
「葉子」預設（分角，0 / 50% / 0 / 50%）摺疊為 border-radius: 0% 50%；「花瓣」預設輸出橢圓形式 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;。凡是四角呈映象關係，輸出都會用更短的簡寫——與 CSS 簡寫規則一致。
範圍、限制與常見問題
- 僅做 border-radius：不支援 iOS 風格的連續圓角（squircle / 平滑角）——那需要 clip-path 或 SVG，超出本工具範圍。
- 不支援貼上解析已有 CSS 值：所有數值都來自滑塊、預設與模式切換，不存在解析歧義。
- 相鄰圓角之和超過邊長時，瀏覽器會按比例縮減。預覽是真實渲染結果；程式碼框顯示的是你設定的原始值。
- 「膠囊」預設輸出 9999px——社群慣例寫法，表示「儘可能圓」，瀏覽器會自動鉗到半短邊。
- % 按軸計算：水平半徑按寬度、垂直半徑按高度（預覽是方形，兩軸數值相同）。換到其他尺寸的元素上，同一個百分比形狀會不同。
- 不儲存、分享連結不帶引數：重新整理即回到預設的圓角卡片。一切都在你的瀏覽器裡完成。
相關工具
當你想把這個盒子再修飾一步時。