CSS 圓角產生器
用一條滑桿或八值語法調整盒子的圓角，可切換 px 與百分比，即時預覽並複製可直接使用的 border-radius 宣告。
圓角設定
單位
CSS 輸出
border-radius: 12px;border-radius 在做什麼
border-radius 會把元素的角變成圓角。一個值代表四角相同，四個值從左上開始順時針指定，斜線則把水平半徑與垂直半徑分開，這也正是做出有機形狀的關鍵。
預覽與複製出來的宣告來自同一個值，看到的形狀就是貼進樣式表後的結果。
如何做出圓角
- 保持「四角連動」，拖動單一滑桿讓四角一起變化。
- 關掉連動後，可分別調整左上、右上、右下、左下。
- 切換成百分比，圓角會隨元素尺寸縮放；正方形設 50% 就是正圓。
- 勾選「進階（八值）」可為每個角設定水平與垂直半徑，滿意後複製 border-radius 宣告。
border-radius 範例
圓角卡片
四角都是 12px
border-radius: 12px;
正圓
四角都是 50%
border-radius: 50%;
有機形狀
30% 70% 70% 30% / 30% 30% 70% 70%
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
UrsaKit 與其他圓角產生器比較
| 比較項目 | UrsaKit | border-radius.com | cssgenerator.org | 9elements Fancy |
|---|---|---|---|---|
| 費用 | 免費 | 免費 | 免費，含廣告 | 免費 |
| 用滑桿而非純輸入 | 支援 | 不支援 | 部分支援 | 部分支援 |
| px 與百分比單位 | 支援 | 部分支援 | 不支援 | 部分支援 |
| 八值斜線語法 | 支援 | 不支援 | 不支援 | 支援 |
| 預設形狀 | 提供 | 無 | 無 | 無 |
| 上傳任何內容 | 不會 | 不會 | 不會 | 不會 |
常見問題
常見問題
一個值與四個值差在哪裡？
一個值代表四角相同；四個值從左上開始順時針指定：左上、右上、右下、左下。
斜線後面的數值是什麼？
那是垂直半徑，與前面的水平半徑分開設定，所以 30% 70% 70% 30% / 30% 30% 70% 70% 會讓每個角各自成為橢圓，而不是單純的四分之一圓。
百分比是相對什麼計算？
水平半徑相對於盒子寬度，垂直半徑相對於高度，因此在正方形上設 50% 就會得到正圓。
膠囊按鈕怎麼做？
圓角至少要達到元素高度的一半，一般按鈕設 100px 或 999px 都能得到膠囊形。
可以只改一個角嗎？
可以。關掉「四角連動」，只拖動那個角的滑桿，其餘三個角會保持不變。
設定的內容會被上傳嗎？
不會。數值在瀏覽器內組合，不會送到任何伺服器。