CSS Border Radius 產生器

以即時預覽視覺化設計 CSS border-radius，並複製可直接上線的程式碼。

預覽拖曳邊角控制點

CSS

border-radius: —;

100% 私密 — 所有處理都在你的瀏覽器中執行，不會上傳任何內容。

連動所有邊角

所有邊角

水平半徑

垂直半徑

元素

填充顏色

背景顏色

預設

關於 CSS Border Radius 產生器

CSS 邊框圓角產生器可打造從柔和圓角卡片到有機水滴形狀的各種效果。直接在預覽畫面上拖曳角落控制點，或以數值方式設定每個角落——包括完整的八值語法，讓每個角落都有各自獨立的水平與垂直半徑。正是這第二軸解鎖了蛋形、葉形、淚珠形與水滴形。

角落連動切換可讓所有四個角落保持同步，做出經典的均勻圓角，而取消連動則能讓每個角落自由呈現不對稱形狀。十二種預設——圓角、藥丸形、圓形、方圓形、兩種水滴形、葉形、蛋形、拱形、淚珠形、花瓣形與波浪形——展示了這個屬性的能耐，隨機按鈕則能無限生成嶄新的有機形狀。

你可以更改單位、為元素與畫布重新上色以配合你的設計，並複製純粹的 border-radius 值或完整的 CSS 規則。這個工具 100% 在用戶端運作——不會上傳任何內容。

斜線前的數值是四個角落的水平半徑；斜線後的則是垂直半徑。讓每個角落的兩個軸各不相同，正是把一個普通圓角方塊變成蛋形、葉形或水滴形的關鍵。

要做圓形，請使用正方形元素並設定 border-radius: 50%。要做藥丸形，則給任何矩形至少是其高度一半的半徑——圓形與藥丸形預設會立即設好這兩者。

會的——border-radius 會裁切元素的方框，包括背景圖片，而 overflow: hidden 會將裁切範圍延伸到子內容。將水滴形半徑套用到 img 元素上，是快速做出有機照片遮罩的方法。

可以，當兩種狀態使用相容的單位時，border-radius 可以隨 CSS 過渡平滑內插。在滑鼠懸停時於兩個水滴值之間做動畫，是一種很受歡迎的有機變形效果——你可以在這裡產生兩種狀態，並在它們之間做過渡。

是的，完全免費且私密：它只在你的瀏覽器中運作，無需帳號，也不會傳送任何資料到任何地方。