視覺化圓角產生器
為網頁元件設計完美的圓角，不該再盲猜數值並不斷重新整理瀏覽器。這款視覺化圓角產生器讓你能透過調整滑桿，即時預覽弧度對元件的影響。當你調出理想的外觀後，就能直接將最佳化後的 CSS 程式碼片段複製到剪貼簿。
由於所有計算與預覽都在你的瀏覽器本機端執行，這款工具的處理速度極快，且完全保障隱私。你的任何設計或點擊操作都不會被上傳到伺服器。
掌握 CSS 圓角設定
border-radius 屬性是現代網頁設計的基礎，常用於柔化按鈕、圖片、彈出視窗與排版容器的生硬邊緣。雖然表面上看似簡單，但當你想針對特定角落進行設定時，語法其實有著許多細節。
這款 border-radius CSS 產生器能幫助你有效理解並運用 CSS 的縮寫語法。當你將所有角落的數值連動時，工具會輸出單一數值（例如：border-radius: 16px;）。如果你取消連動以建立自訂形狀，產生器會根據你的輸入自動格式化 CSS 程式碼：
- 四個數值： 如果四個角落的數值皆不相同，CSS 會從左上角開始，以順時針方向套用（例如：
border-radius: 16px 8px 4px 2px;）。 - 兩個數值： 如果左上角與右下角相同，且右上角與左下角相同，工具會聰明地將程式碼精簡為兩個數值（例如：
border-radius: 16px 0;）。
像素與百分比
撰寫 CSS 圓角時，最常見的問題之一就是選擇合適的單位。這個工具能讓你輕鬆在像素 (px) 和百分比 (%) 之間切換，這兩者在 UI 設計中各有不同的用途。
像素 (px) 是絕對單位。無論是套用在小按鈕還是巨大的主視覺大圖上，12px 的圓角看起來都會完全一樣。像素是卡片、下拉式選單和輸入框等 UI 元件的標準選擇，因為它們能在整個應用程式中維持一致的設計語彙。本工具允許的像素值最高可達 200px。
百分比 (%) 是相對於元素本身大小的單位。在正方形元素上設定 50% 的圓角，無論該正方形寬度是 50 像素還是 500 像素，都會形成一個完美的圓形。如果元素是長方形，50% 則會產生橢圓形。百分比非常適合用於個人頭像或裝飾性背景圖形等響應式元素。本工具將百分比上限設為 50%，因為在 CSS 中超過此數值並不會增加視覺上的圓角效果。
不只是基本圓角：CSS 形狀產生器
雖然 border-radius 最常用來製作柔和的圓角，但它也是強大的 CSS 形狀產生器。只要取消各個圓角的連動，並搭配極端的數值，就能創造出獨特的幾何形狀，完全不需要用到 SVG 檔案或複雜的 clip-path。本工具提供幾種預設樣式來示範：
- 膠囊： 為所有圓角設定極大的像素值（例如
9999px），就能做出「膠囊」或跑道形狀。這廣泛應用於徽章、標籤及現代的行動呼籲按鈕。瀏覽器會自動將實際的圓角半徑限制在元素高度的一半，確保兩側呈現完美的半圓形。 - 圓形： 將所有圓角設定為
50%，就能把正方形變成完美的圓形。 - 葉片： 將左上與右下圓角設定為
0，並將右上與左下圓角設定為較大的數值（例如48px），就能創造出不對稱、自然的葉片形狀。 - 頁籤： 只將左上與右上設定圓角（例如
16px），並將底部圓角保持為0，就能做出經典的資料夾頁籤形狀，非常適合用於導覽選單。
打造完美的 UI 元件
圓角很少單獨存在，通常是完整設計系統的一部分。舉例來說，設計精良的卡片元件會將柔和的圓角半徑與層次感及色彩結合，在頁面上脫穎而出。
產生理想的圓角半徑後，您可以將其與其他 CSS 效果結合，完成您的設計。試著使用我們的 區塊陰影產生器 為新形狀加上柔和的陰影，創造出立體的懸浮效果。如果您正在設計按鈕或裝飾性背景元素的樣式，可以使用 CSS 漸層產生器 套用鮮豔的背景，或者透過 配色產生器 尋找完美的互補純色。