圓角產生器

它會將正方形元素變成完美圓形。要形成真正的圓形，元素的寬度和高度必須相等——例如 `width: 100px; height: 100px; border-radius: 50%`。50% 的半徑從四個方向都恰好延伸到中點，形成完美曲線。若元素非正方形，50% 會產生橢圓——根據元素尺寸呈現橫向或縱向較長的形狀。這是 CSS 中製作圓形頭像圖片、圓形按鈕和圖示容器最常見的方式。

對非正方形元素（如按鈕或標籤）使用 `border-radius: 9999px`（或任意較大值如 100px）。瀏覽器會自動將半徑限制為元素較短邊的一半，使兩端變成完美半圓，長邊保持筆直。這會產生現代設計系統中常見的經典膠囊形 CTA 按鈕。`9999px` 技巧適用於任何元素尺寸——無需手動計算高度的一半。本產生器的「膠囊」預設即時套用此樣式。

像素值是絕對的——`12px` 的半徑無論元素大小如何都保持 12 像素。若元素縮放，角落大小保持不變。百分比值是相對的——`50%` 永遠彎曲到每條邊的確切中點，產生隨元素縮放的等比形狀。對需隨元素縮放的形狀（如圓形、膠囊形）使用百分比（`50%`）。對 UI 元件（如卡片、按鈕、輸入框）使用像素，以確保無論內容多少都有一致的設計系統定義角落大小。

標準 `border-radius` 只能產生向外（凸）彎曲的角落。若要製作反向或凹入角——票券、標籤和氣泡框上向內的「缺口」曲線——單靠 `border-radius` 無法達成。常用技術是放射狀漸層遮罩：`mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`，對每個要向內咬入的角落重複此設定。另一種方式是帶有頁面背景色的定位偽元素（`::before`），賦予自己的向外 `border-radius` 並疊加於角落上，從而刻出凹形。對波浪形或打孔邊緣（如票根撕線），可沿一側使用重複放射漸層遮罩產生扇形穿孔效果。因此「反向圓角」實際上是遮罩技巧，而非 border-radius 值——搜尋反向圓角產生器時很有用。

使用各角獨立屬性：`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` 或 `border-bottom-left-radius`。例如，`border-bottom-right-radius: 24px` 只圓角化右下角，其餘三角保持尖銳。可自由組合：`border-top-left-radius: 16px; border-bottom-right-radius: 16px` 創造對角線圓角形狀。在縮寫語法中，兩個值設定對角組合：`border-radius: 16px 0` 圓角化左上角和右下角，左上角和右下角保持尖銳。

從左上角順時針依序：左上 → 右上 → 右下 → 左下。因此 `border-radius: 16px 8px 0 8px` 給予左上 16px、右上 8px、右下 0、左下 8px。這與 `margin`、`padding` 和 `border-width` 使用的標準 CSS 縮寫方向一致。兩個值時，第一個套用至左上和右下；第二個套用至右上和左下。三個值時，第二個套用至右上和左下。一個值則均勻套用至所有四角。

可以——直接對 `<img>` 元素套用 `border-radius`：`img { border-radius: 50%; width: 100px; height: 100px; }` 即可製作圓形頭像。或者，將圖片包裝在帶有 `overflow: hidden` 的 `<div>` 中，並對包裝元素套用 border-radius，這樣可獲得更多版面控制彈性。使用本工具的圖片上傳功能，在複製 CSS 前先預覽你的圓角效果在實際照片上的樣子。這對頭像裁切、媒體卡片縮圖和相簿版面特別實用，因為確切的裁切形狀會影響設計呈現。

將三個角設為較大值，一個角保持零：`border-radius: 50% 50% 50% 0`。配合 `transform: rotate(-45deg)` 可產生經典地圖標記的水滴形狀。調整哪個角為零以改變水滴指向方向：`0 50% 50% 50%` 指向左，`50% 0 50% 50%` 指向右。零值角形成尖端；三個大半徑角構成圓弧主體。適用於位置標記、指示箭頭和插畫風格 UI 中的裝飾重點。

斜線用於分隔每個角的水平和垂直半徑。語法為：`border-radius: [水平半徑] / [垂直半徑]`。例如，`border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` 創造類似蛋形的形狀，每個角都有非對稱橢圓曲線。本工具的隨機 Blob 產生器使用此語法產生有機、非對稱形狀——廣受主視覺背景、裝飾性 Blob 和插畫風格設計元素的歡迎。每個角可擁有不同的水平對垂直半徑比例。

cssmatic.com 的圓角工具雖可使用但已過時——缺乏圖片上傳、Blob 產生和預設庫。css-tricks.com 的說明文件非常優秀，但不是互動式產生器。bennettfeely.com 的 clip-path 製作器在使用情境上有所重疊，但針對 clip-path 而非 border-radius。UtiloKit 的產生器提供：帶圖片上傳（完全客戶端處理）的即時預覽、形狀預設（圓形、膠囊、卡片、蛋形、Blob）、使用 8 值斜線語法的隨機 Blob 產生、px/% 單位切換，以及三種複製格式。無廣告、無浮水印、無需登入，不傳送任何資料至伺服器，免費使用。

不會——圖片僅透過瀏覽器的 File API 載入，永遠不會離開你的裝置。預覽元素使用本地的 `createObjectURL()` 呼叫在瀏覽器記憶體中渲染圖片。無需上傳、無伺服器處理、無雲端儲存。相同的客戶端架構適用於所有其他功能：滑桿輸入、CSS 產生、Blob 隨機化和剪貼簿複製全部在 JavaScript 中執行，初始頁面載入後不發出任何網路請求。你的圖片和設計工作完全私密。

`border-radius` 可完全透過 CSS 過渡和關鍵影格動畫進行動畫處理。使用 `transition: border-radius 0.3s ease` 可在懸停時平滑地在兩個值之間插值。使用 `@keyframes` 持續在形狀之間變形——從 `0` 動畫到 `50%` 使正方形脈動成圓形。在兩個 Blob 形狀（不同的 8 值斜線值）之間變形，可創造流動的有機動畫，廣受主視覺背景歡迎。請注意，動畫 border-radius 會在每個影格觸發重繪，因此對頻繁動畫的元素使用 `will-change: border-radius`。

`border-radius` 純粹是視覺效果——它裁切元素的繪製外觀，但不改變其版面盒模型、邊距區域或指標事件觸發區域。不可見的方形角落仍然可以點擊，並在版面中佔用空間。這對觸控介面很重要：圓形按鈕在角落仍有方形可點擊區域。若需要觸擊區域精確跟隨圓角形狀，改用 `clip-path: circle()`，它也會裁切指標事件。`box-shadow` 會正確跟隨 `border-radius`；`outline` 在大多數瀏覽器中不會——使用 `box-shadow: 0 0 0 3px color` 作為圓角焦點環的替代方案。

可以——本工具完全自適應，可在任何現代行動瀏覽器中使用。在 iPhone 上，可在 Safari 或 Chrome 中使用，無需安裝任何東西。在 Android 上，Chrome、Firefox 和 Edge 均可正常使用。滑桿支援觸控操作，具有適當大小的拖曳把手。圖片上傳使用手機原生的檔案選擇器，可從相機膠卷或檔案 App 選取。所有現代行動瀏覽器均支援透過標準 Web Clipboard API 複製 CSS 至剪貼簿。整個工具在客戶端執行，無需下載 App、無需帳號，不傳送任何資料。