什麼是 CSS 邊框圓角產生器？
免費線上 CSS 邊框圓角產生器。透過視覺化控制項調整四個角的圓角半徑。
CSS 的 border-radius 屬性可控制元素邊角的圓潤程度，而它的靈活性遠不止簡單的圓角矩形。透過獨立調整每個邊角，您可以建立膠囊、圓形、不對稱形狀與複雜的有機造型——全都只需單一 CSS 屬性。CSS Border Radius Generator 為四個邊角提供獨立的滑桿控制，並即時預覽、立即更新。
每個邊角——左上、右上、右下、左下——都有自己的滑桿，讓您建立完全不對稱的形狀。像素 (px) 與百分比 (%) 的單位切換會大幅改變行為。像素值建立固定半徑的邊角，無論元素尺寸為何都維持相同大小。百分比值則將半徑與元素尺寸綁定，這正是建立正圓的方式（正方形上使用 border-radius: 50%）。
四種預設涵蓋最常見的使用情境。Circle 建立 border-radius: 50%，產生正圓（非正方形元素則為橢圓）。Pill 建立兩端完全圓潤的形狀（border-radius: 9999px），適合按鈕徽章與標籤。Card 套用適合卡片元件與容器的細緻 8px 圓角。Rounded 在四個邊角套用 8px 圓角，適合按鈕與表單輸入框。
產生的 CSS 程式碼會顯示縮寫語法。若四個邊角數值相同，會輸出單一數值（例如 border-radius: 8px）。若邊角不同，會依順時針順序輸出四數值語法（左上、右上、右下、左下）。程式碼可直接複製到您的樣式表。