CSS 圓角產生器
免費線上 CSS 圓角產生器。即時預覽並產生 CSS border-radius 程式碼，支援 px 與 % 單位。
CSS 圓角產生器
免費線上 CSS 圓角產生器。即時預覽並產生 CSS border-radius 程式碼，支援 px 與 % 單位。
關於 CSS 圓角
產生四角 shorthand 語法
產生器會輸出一行 border-radius 宣告，順序是左上、右上、右下、左下。您可以讓四角連動或分別調整，再選擇 px 或百分比單位後複製 CSS。
預覽顏色不會進入輸出片段
背景與區塊顏色只用來讓您調整形狀時看清楚圓角效果。複製的程式碼只包含 border-radius 屬性，因此可以直接貼進既有按鈕、卡片或元件樣式，不會夾帶額外色彩規則。
常見問題
關於這個主題的常見疑問與實用解答。
可以為每個角設定不同的圓角值嗎？
可以，您可以分別設定左上、右上、右下與左下各角的圓角值，或使用「所有角落」一次統一設定。
支援哪些單位？
支援像素（px）與百分比（%）。使用百分比可建立響應式造型，例如圓形（50%）或膠囊形狀。
可以製作圓形或膠囊形狀嗎？
可以，將所有角設為 50% 即可在正方形元素上建立完美圓形，或在矩形元素上使用較大的像素值建立膠囊形狀。
我的資料會被傳送到伺服器嗎？
不會，border-radius CSS 生成完全在您的瀏覽器中處理。您的圓角值在本地處理，不會上傳任何資料。