邊框圓角產生器是一項視覺化 CSS 工具，可將選定的四個圓角半徑轉換成等效且最簡短的 CSS border-radius 宣告。CSS 邊框圓角產生器可讓你分別標示左上、右上、右下與左下的控制項，選擇像素或百分比，並預覽將複製的確切簡寫形式。這個差異很重要，因為 CSS 讀取圓角值的順序，未必符合你預期的由左至右、由上至下的視覺順序。四個值會從左上角開始依順時針方向排列；較短的簡寫形式會重複使用相符的圓角。產生器會套用這些規則，並在不變更所選圓角形狀的情況下壓縮重複的值。其預覽直接使用產生的簡寫形式，因此也能協助你在程式碼送入頁面前找出簡寫形式的錯誤。實務上，這項工具能回答一個明確的問題：我該將哪一種 border-radius 宣告貼到樣式表中？它不是自動化的設計系統，也無法判斷半徑是否適合按鈕、卡片、面板或響應式元件。複製結果後，你仍須依實際尺寸測試真正的元素，同時考量其邊框、內距、聚焦狀態、溢位行為與響應式斷點。產生器中的所有作業都在瀏覽器本機執行，因此設計值不會上傳或儲存。
邊框圓角如何對應至方塊
CSS 邊框圓角會將元素的邊框方塊圓化，而其四個圓角各自都能採用獨立的圓形半徑。這不只是背景裝飾：背景與邊框都會沿著曲線呈現，溢位裁切也可能沿著內側圓弧邊緣進行。MDN border-radius 參考資料記錄了此屬性的語法及其與邊框方塊的關係。因此，半徑既是視覺選擇，也是一種值得在實際情境中測試的版面配置行為。
手動實作很容易變得重複，因為每次變更都必須對應到正確的值順序，並與算繪後的方塊核對。產生器免除了反覆進行編輯、預覽與複製的流程。它依順時針方向呈現各圓角，將所選值與明確標示保持對應，並輸出等效的簡寫形式。它的用途比完整的介面設計更為限縮：它處理圓角幾何與序列化，而將元件適配性與互動品質交由實作測試決定。
產生並複製宣告
- 開啟產生器，輸入左上、右上、右下與左下圓角的半徑。依照顯示的順時針方向操作，讓每個數字都對應到預定的圓角。
- 固定曲線可選擇像素，大小相對的曲線則可選擇百分比。產生器接受 px 與百分比單位，並會驗證四個半徑是否為實用範圍內的非負數值。
- 在工具顯示的方塊尺寸下檢查即時預覽。查看每個圓角、背景、邊框及任何可見的裁切。單一顯示尺寸的預覽無法呈現響應式尺寸或周圍內容所產生的所有結果。
- 複製壓縮後的宣告，將其貼入元件的樣式表，並使用元素的實際寬度、高度、邊框、內距、聚焦外框、溢位行為與響應式斷點進行測試。複製出的程式碼是交付內容，但是否最終採用仍取決於周圍介面。
預覽是依與供複製內容相同的簡寫形式算繪，而非使用四個互不相關的長寫屬性。這能讓順序與序列化錯誤提早曝光。介面會明確標示每個圓角，因此你在試作時不必記憶 CSS 的對應關係。無須帳號，也不會上傳或儲存任何設計值；所有處理都在瀏覽器本機完成。
簡寫形式為何可能包含較少的值
CSS border-radius 是簡寫屬性，因此相等或可策略性共用的圓角半徑，可以使用較少項目來表示。產生器會將重複的模式壓縮成等效簡寫形式，同時完整保留你選定的圓角值。在下表中，A、B、C 與 D 代表指派給各圓角的值；它們是說明用的標籤，而不是 CSS 關鍵字。
| CSS 形式 | 左上 | 右上 | 右下 | 左下 | 規則 |
|---|---|---|---|---|---|
| 一個值 | A | A | A | A | 一個半徑會套用至每個圓角。 |
| 兩個值 | A | B | A | B | 第一個值涵蓋左上與右下；第二個值涵蓋右上與左下。 |
| 三個值 | A | B | C | B | 中間的值由右上與左下共用。 |
| 四個值 | A | B | C | D | 每個圓角都有自己的順時針值。 |
四個相同的圓角會變成一個值。交錯的對角圓角會變成兩個值：第一個值涵蓋左上與右下，第二個值涵蓋右上與左下。共用的右上與左下可產生三值形式。如果沒有更短的等效形式，四個值就會依順時針順序全部顯示。
這就是控制項順序為何重要。依列閱讀可能造成誤解：四個值依序代表左上、右上、右下與左下。使用三個值時，中間的值由右上與左下共用。由於預覽會算繪產生的簡寫形式本身，因此在複製程式碼前，更容易發現放錯位置的圓角或錯誤的壓縮形式。文字較短只是一項便利功能，並不會改變預定的幾何形狀。
單位與瀏覽器算繪如何影響結果
像素與百分比定義了半徑如何隨元件尺寸變化而與元件產生關聯。像素半徑維持固定，而百分比半徑則依邊框方塊的尺寸計算。因此，這兩種選擇回答的是不同的設計問題，並非可互換的標籤。
| 單位 | 方塊調整尺寸時的行為 | 適用意圖 | 主要考量 |
|---|---|---|---|
| 像素 | 指定的曲線維持固定。 | 讓卡片、面板與控制項採用一致的圓角。 | 曲線不會隨元素放大或縮小。 |
| 百分比 | 曲線會依邊框方塊的尺寸比例變動。 | 大小相對的藥丸形、橢圓形、葉片形與不對稱面板。 | 外觀可能隨方塊比例大幅改變。 |
在正方形上，50% 會形成圓形圓角；在寬矩形上，相同的值則會產生類似橢圓的兩端。百分比會同時依循方塊的兩個尺寸，因此某個形狀在一種寬高比下看似平衡，在另一種寬高比下可能呈現不同樣貌。
當相鄰曲線重疊時，瀏覽器可能按比例縮減實際採用的半徑。因此，極大的指定值算繪出來可能比其數字所暗示的更小。這種正規化是標準的瀏覽器行為，並非複製出的宣告有誤。百分比選項允許超過 100 的值，因為 CSS 接受這些值，儘管非常大的值在正規化後往往看起來相同。
零會形成直角。負半徑與非有限數字無法產生有效的宣告。產生器會為每個圓角產生一個圓形半徑。CSS 也支援以斜線分隔水平與垂直群組的橢圓形半徑，相關定義見於 CSS 背景與邊框 Level 3 規格，但這項進階語法刻意不在此重點式產生器的支援範圍內。
可在真實元件中試作的模式
- 統一樣式卡片：使用單一共用的固定像素半徑；12px 到 24px 是實用的起始範圍。
- 藥丸形：使用較大的像素半徑或 50%，前提是元素具有足夠的水平內距。
- 有機面板：變更全部四個百分比半徑，讓每個圓角形成各自的曲線。
這些模式是起始點，而不是元件規則。按鈕需要足夠的內部空間容納標籤與聚焦處理。卡片可能需要在文字與媒體周圍保留空間。含有溢位的面板可能會顯示裁切是否沿著內側曲線進行。產生器負責塑造方塊形狀，但不會決定元件的間距、無障礙性或視覺階層。
預覽無法取代的正式環境檢查
獨立預覽適合用來探索幾何形狀，但完成後的介面才能提供決定半徑是否有效的條件。複製宣告後，請執行下列檢查：
- 檢查實際寬度、高度、邊框、內距、聚焦外框，以及元素變更尺寸的每個斷點。
- 檢視溢位裁切，確保內容不會過度擠近曲線。
- 觀察高度圓角的可用區域，並為按鈕與控制項保留適當的觸控目標尺寸。
- 測試鍵盤聚焦、溢位行為、對比與目標大小，不要預設圓角預覽已經完整涵蓋所有條件。
- 不要只靠圓角形狀或顏色傳達意義。
非常大的半徑可能會縮小可點擊的圓角區域，因此視覺圓潤度與可用性必須一起評估。如需套用此工作流程的具體範例，請參閱元件層級的卡片逐步指南。
產生器是一項正式環境輔助工具，不能取代在真實介面中的測試。由於處理過程維持在本機，你可以探索多種半徑模式，而不必將設計值傳送至伺服器，最後只複製通過元件測試的宣告。
如需更深入的了解，請參閱初學者專用的盒狀陰影產生器：實用 CSS 指南。