CSS 工作流程
CSS border-radius：橢圓角與半徑重疊縮減
同一個圓角可以有不同的水平與垂直半徑。用視覺介面編輯原生 CSS 後，仍須在實際元件檢查：形狀取決於 border box，不只是輸入的數字。
內容更新： · 維護者與修正回報
先按順時針讀角落，再讀斜線
四個值依序為左上、右上、右下、左下。/ 之前是水平半徑，之後是垂直半徑；沒有斜線時，兩軸使用同一組值。一個值套用全部角落；兩個值在對角重複；三個值會將第二個值用於左下角。
只有實際使用的水平與垂直半徑相等時，該角才是圓弧。任一軸為零，該角就呈直角。原生橢圓角不是 superellipse 或數學 squircle；本工具不產生 corner-shape。
百分比取決於盒子的寬與高
水平百分比按 border box 寬度計算；垂直百分比按高度計算。300 × 200px 的盒子使用 50%，會得到水平 150px、垂直 100px。正方形配上 50% 圓角會形成圓，長方形則形成橢圓。
預覽使用沒有捲軸的 border box。為配合螢幕可能縮小顯示，但目標尺寸與複製的 CSS 不變。調整預覽不輸出 width、height 或響應式斷點。px 與 % 模式各自保留本頁數值；切換不會自動換算或保證形狀相同。
同一個縮減比例套用八個半徑
當相鄰指定半徑超過邊長，瀏覽器會把八個半徑乘上同一比例。取以下最小值：1、寬度除以上邊水平半徑總和、寬度除以下邊總和、高度除以左邊垂直半徑總和、高度除以右邊總和。總和為零時不增加限制。
200 × 100px 的盒子全部指定 80px 時，比例為 100 / 160 = 0.625，每個使用半徑都變成 50px；宣告仍是 border-radius: 80px;。表格僅解釋這個簡單預覽，顯示至小數第二位，不是通用的 DOM 使用值檢查器。瀏覽器可能為捲軸額外調整，不在本預覽模型內。
檢查內容、點擊範圍與可見焦點
背景變圓角，不代表所有子元素都自動被裁切。內容需要沿曲線裁切時，請明確選擇 overflow 規則；overflow: hidden 也可能裁掉焦點提示或其他內容。保留重要控制項與可見焦點，並使用實際文字及縮放測試。
圓角邊界會影響指標事件範圍，不能假設矩形角落全部可點擊。裝飾預覽不是無障礙合規證明。請在目標元件檢查鍵盤、指標、窄螢幕與強制色彩；圓角與多邊形 clip-path 用途不同時，應分開處理。
明確區分工具範圍與隱私
本工具接受 0–9999px 或 0–100% 的半徑，最多一位小數；預覽尺寸為 64–640px 整數。會移除數字前後空白，但拒絕空值、負數、非有限數值、科學記號、附帶單位及過多小數。這是工具範圍，不是 CSS 限制。拖曳限制在 0–100%；方向鍵調整 1、Shift 調整 10，Escape 取消拖曳。
無效欄位會阻止預覽、輸出與複製，不顯示舊的成功結果。剪貼簿失敗時仍可選取程式碼。設定只存在此頁記憶體，不上傳、不持久儲存、不寫入網址，也不記錄輸入值分析；既有核准的頁面分析仍可能運作。本工具不匯入任意 CSS、不混合單位、不匯出 SVG，也不做形狀動畫。複製後仍須在支援的瀏覽器與實際元件測試。
.card {
border-radius: 24px 8px 32px 8px / 12px 8px 24px 8px;
}
.card:focus-visible { outline: 2px solid #315460; outline-offset: 4px; }
/* 200 × 100px：指定 80px，使用 50px */
.overlap-example { width: 200px; height: 100px; border-radius: 80px; }資料可信度