CSS 圓角／橢圓角產生器

以 px 或 % 精確編輯八個圓角／橢圓角半徑，拖曳百分比把手、比較盒子尺寸，並在本機複製原生 border-radius CSS。

02 / 原生預覽

改變尺寸，看見差異

一般圓角

目標盒子 300 × 200px · 顯示比例 100%。尺寸只用於預覽，不包含在複製的 CSS。

寬度（px）

高度（px）

預覽長寬為 64–640px；比例不會建立響應式斷點。

px 模式使用精確欄位；切換 % 模式可拖曳八個半徑把手。

03 / 精確編輯

px 與 % 各自保留本頁數值，不會自動換算；切換模式可能改變形狀。

編輯左上角落

水平半徑 (px)

垂直半徑 (px)

px：0–9999；%：0–100，最多一位小數。空白、負數、科學記號及附帶單位會被拒絕；這是工具範圍，不是 CSS 上限。欄位方向鍵調整 1，Shift 調整 10。

04 / 幾何檢查

重疊縮減比例: 100%

目前不需要重疊縮減。

僅計算此無捲軸預覽盒子，顯示至小數第二位；任一軸為 0 時該角仍呈直角。不是任意網頁的使用值檢查器。

05 / CSS

border-radius: 12px;

CSS 保留指定半徑，不包含預覽尺寸、背景與把手。設定只留在此頁，不上傳、不儲存，也不寫入網址。請在實際元件檢查內容、點擊範圍與焦點。

選擇範例與單位、選取角落，再編輯水平與垂直半徑，或在百分比模式拖曳把手。比較不同尺寸與重疊縮減比例後複製 CSS；兩種單位模式各自保留數值，不自動換算。

本工具編輯原生橢圓角 border-radius，不處理 superellipse、corner-shape、任意 CSS 匯入或 SVG 路徑。預覽不能證明裁切、點擊範圍或鍵盤焦點正確，請以真正尺寸檢查目標元件。