⭕ Border Radius Generator

📐 工作原理與說明

四角半徑分別對映為 CSS border-radius 的左上 / 右上 / 右下 / 左下值，即時預覽並生成宣告；支援獨立設定各角，用於前端圓角樣式落地。

Drag to set the corner radius of an element and copy ready-to-use CSS border-radius, with independent control of all four corners.

統一圓角

單獨控制每個角

左上

右上

右下

左下

預覽

Border Radius

📚 深度解析：圓角生成器

生成左上 24px、右下 50% 圓角

輸入：TL 24px、TR 8px、BR 50%、BL 8px。處理：拼接 border-radius 簡寫。輸出：即時預覽與 <code>border-radius:24px 8px 50% 8px;</code> 程式碼。

百分比是相對什麼？: 相對元素自身的寬高，因此方形與長條形會得到不同弧度。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。