CSS 產生器

Border Radius 圓角產生器

透過直覺的視覺化編輯器，輕鬆建立精美的 CSS 圓角效果。 支援 Blob 形狀、橢圓圓角，所有操作即時預覽。

單位
四角圓角控制
左上角 (TL)
右上角 (TR)
右下角 (BR)
左下角 (BL)
橢圓圓角 (水平 / 垂直半徑)
調整水平/垂直比例產生橢圓效果
預設樣式
即時預覽
寬 高
CSS 程式碼
border-radius: 16px;

功能特色

四角獨立控制
橢圓圓角
多單位切換
即時預覽
30+ 預設樣式
隨機 Blob 產生
一鍵複製 CSS
匯出 PNG / SVG
復原 / 重做
響應式預覽
連結 / 分開控制
純前端離線執行

使用說明

  1. 調整 左上、右上、右下、左下 四個角的 Slider 或輸入數值，即時控制圓角半徑。
  2. 點擊 🔗 連結按鈕 可同步修改四個角；取消連結則可獨立控制每個角。
  3. 切換 單位（px / % / rem / em）立即重新產生 CSS。
  4. 使用 橢圓圓角 控制調整水平與垂直半徑比例，創造橢圓邊角效果。
  5. 瀏覽 預設樣式 或點擊 隨機形狀 按鈕獲取 Blob 靈感。
  6. 使用 淺色 / 深色 / 棋盤 背景切換查看不同效果。
  7. 點擊 複製 CSS 或 下載 PNG / SVG 用於您的專案中。

常見問題

什麼是 CSS border-radius？
CSS border-radius 是用於設定元素外框圓角效果的屬性。它可以接受一到四個值，分別控制左上、右上、右下、左下四個角的圓角半徑。搭配斜線（/）還可以分別設定水平與垂直半徑，創造橢圓形圓角。
如何讓元素變成圓形？
將四個角的 border-radius 設為高度或寬度的一半即可。例如一個 200x200 的元素，設定 border-radius: 50% 或 border-radius: 100px 就能變成完美的圓形。
什麼是橢圓圓角？
橢圓圓角（Elliptical Border Radius）允許分別設定水平半徑和垂直半徑，用斜線（/）分隔。例如 border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%。這可以創造不對稱的有機形狀和 Blob 效果。
px、%、rem 和 em 有什麼不同？
px 是固定像素值；% 是相對於元素寬度/高度的百分比；rem 是相對於根元素（html）字型大小；em 是相對於目前元素字型大小。使用百分比時，50% 即可產生圓形效果。
什麼是 Blob 形狀？
Blob 形狀是一種有機、不規則的圓角形狀。透過為四個角設定不同的數值，並搭配橢圓圓角水平/垂直比例差異，可以產生類似水滴、有機體的自然形狀。點擊 隨機 按鈕即可自動產生漂亮的 Blob 形狀。
這個工具是免費的嗎？
是的，完全免費，無需註冊。所有處理都在您的瀏覽器中本地執行 — 不會傳送任何資料到伺服器，您的圓角設定絕不外流。

瀏覽器相容性

Chrome 4+
Firefox 3+
Safari 3+
Edge 12+
Opera 10.5+
iOS Safari 3.2+
Android 2.1+
IE 9+

隱私說明

此工具完全在您的瀏覽器中執行。您建立的任何資料、圓角設定或形狀都不會傳送到任何伺服器。所有工作都留在您的裝置上。我們不會對這個工具使用 Cookie 或追蹤功能。