Border Radius Generator

關於本工具

border-radius 屬性可使元素的角變圓。當四個值相等時，使用單值簡寫。不同的值會產生不對稱形狀——膠囊形在所有角使用 50%，葉形交替使用 0% 和 50%。

點擊任意角的數字直接輸入值，或拖動關聯滑桿一次更改所有四個角。關閉鎖定所有角可獨立控制每個角。

使用方法

1. 在四個角的輸入框（左上、右上、左下、右下）中輸入值。
2. 啟用鎖定所有角，可透過滑桿同時設定四個值。
3. 根據設計需求在 px 和 % 單位之間切換。
4. 點擊預設（膠囊形、葉形、水滴形等）立即套用預定義形狀。

使用情境

UI 設計師使用 border-radius 建立按鈕、卡片和頭像形狀。開發者根據品牌設計系統微調圓角。膠囊形（50%）常用於標籤和徽章。非對稱值可為裝飾元素建立有機的葉形或水滴形。

常見問題

• px 和 % 有什麼區別？ — px 給出與元素大小無關的固定圓角半徑。% 相對於元素的寬度和高度——正方形元素所有角使用 50% 將產生完美的圓形。
• 可以為每個角設定不同的半徑嗎？ — 可以。取消勾選鎖定所有角，然後在每個角的輸入框中輸入不同的值。
• 簡寫輸出值是什麼意思？ — 當四個角相等時，輸出單個值。不同時，CSS 順序為：左上、右上、右下、左下。