調整 CSS 圓角屬性
CSS 的 border-radius 屬性用於控制網頁元素外框四個角的圓潤度。本工具提供直觀的介面，讓設計人員與開發人員可以直接調整各個角的半徑，並即時產生對應的 CSS 程式碼。
在預設狀態下，滑桿的初始值為 24，產生的程式碼為 border-radius: 24px;。工具提供兩種控制模式：
- 四角連動：啟用「四角連動」時，介面僅顯示一個標有「所有角」的滑桿，同時控制四個角。
- 獨立控制：停用連動後，介面會提供「左上」、「右上」、「右下」及「左下」四個獨立滑桿，依順時針方向對應元素的四個角。
像素與百分比單位的運作機制
本工具的「單位」選擇器支援「px」（像素）與「%」（百分比）兩種單位，兩者在響應式網頁設計中的表現各有不同：
- 像素 (px)：屬於固定數值。無論元素本身的寬度或高度如何變化，圓角的弧度都保持不變。
- 百分比 (%)：屬於相對數值，其圓角半徑取決於元素自身的尺寸。水平方向的百分比相對於元素的寬度計算，垂直方向的百分比則相對於元素的高度計算。
運用橢圓角模式建立異形外觀
當「橢圓角」功能關閉時，每個角都是由單一半徑構成的四分之一圓。啟用「橢圓角」後，每個角會拆分為「水平」與「垂直」兩個獨立滑桿，範圍均為 0 至 100。
在橢圓模式下，每個角都擁有獨立的橫向與縱向半徑，能產生更柔和、更具流動感的有機形狀（即「異形」或「blob」）。此時，產生的 CSS 程式碼會採用帶有斜線（/）的兩組數值格式，分別代表水平半徑與垂直半徑；當所有角重新恢復為正圓時，程式碼則會自動縮短為無斜線的簡寫格式。
快速預設版面
工具提供五種「預設」按鈕，以便快速套用常見的幾何形狀：
- 直角：將所有角的半徑設為 0。
- 圓角：套用標準的基礎圓角。
- 正圓：將所有角設為 50%。
- 異形：利用橢圓角設定，產生不規則的流動形狀。
- 葉形：使對角的圓角數值不對稱，呈現類似葉片的視覺效果。
完美正圓與膠囊形按鈕的設定方法
利用特定的數值組合，可以精確繪製出網頁設計中常見的幾何圖形：
- 正圓：必須使用正方形元素。將「單位」切換為「%」，啟用「四角連動」，並將滑桿數值設為 50。點按「正圓」預設按鈕亦可直接達到此效果。
- 膠囊形按鈕：適用於寬度大於高度的矩形元素。將「單位」保持為「px」，並將圓角滑桿拖曳至超過按鈕高度的一半。此時，無論按鈕寬度如何延伸，兩側都會保持完美的半圓形，而不會變形。
瀏覽器本機處理與隱私保護
本工具完全在用戶端運作。每個圓角形狀都在你的瀏覽器裏繪製，這裡設定的內容不會上傳到 BroBroGo。
常見問題
四個角和 px、% 是如何對應的？
四個滑桿按順時針方向分別對應左上、右上、右下、左下四個角。用 px 時圓角是固定的像素大小；用 % 時則相對於元素本身——橫向百分比按寬度計算，縱向百分比按高度計算，所以正方形設成 50% 就變成了圓。
橢圓模式是做甚麼的？
關閉時每個角都是單一半徑的四分之一圓。打開後，每個角可以分別設定橫向和縱向兩個半徑，這正是做出柔和、流動的異形（“blob”）形狀的關鍵。工具會自動寫成帶斜線的兩組數值，四個角都變回正圓時又會收回最短寫法。
如何做出正圓或膠囊形狀？
把四個角連動，切換到 %，設成 50%——正方形就變成正圓。想做膠囊按鈕就改用 px，把某個角拖曳到超過按鈕高度的一半，不論多寬兩端都會是完整的圓。點按一下「正圓」預設就能得到第一種效果的起點。