使用說明
四個角可以各自設定，也可以鎖定成同一個值。切換到橢圓角後，每個角會分成水平與垂直兩個半徑，輸出成 `border-radius: 上左 上右 下右 下左 / 上左 上右 下右 下左` 的完整語法，就能做出水滴或不規則的有機形狀。單位切成百分比時，圓角會跟著元素尺寸縮放，50% 即為橢圓。
CSS / FRONTEND · 瀏覽器內處理
CSS 圓角產生
分別調整四個圓角，支援橢圓角並輸出 border-radius。
支援 px 與百分比兩種單位，以及水平／垂直分開的橢圓角語法。
border-radius: 18px 18px 18px 18px;
快速形狀
快速形狀
單位
四個圓角
操作步驟
- 決定使用 px 或百分比單位。
- 調整四個角的半徑，需要不對稱時開啟橢圓角。
- 複製 border-radius 宣告。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- 百分比圓角和 px 有什麼不同？
- px 是固定長度，元素放大縮小時圓角維持不變；百分比則相對於元素本身的寬高，會隨尺寸縮放。想做出永遠是膠囊形狀的按鈕，用很大的 px 值（例如 999px）比用百分比穩定。
- 斜線後面的第二組數值代表什麼？
- 斜線前是四個角的水平半徑，斜線後是垂直半徑。兩組不同時每個角就是橢圓弧而不是正圓弧，常用來做花瓣或水滴形狀。