跳至主要內容
Lizely

CSS 邊框半徑生成器

視覺化產生四個 CSS 角，並複製最短正確的 border-radius 宣告。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.依照順時鐘順序輸入每個角落的半徑。
  2. 2.選擇像素以取得固定曲線，或選擇百分比以取得與尺寸相關的曲線。
  3. 3.檢視預覽時，以顯示的方塊尺寸為準。
  4. 4.複製壓縮後的宣告，並在實際元件上測試。

關於CSS 邊框半徑生成器

CSS 邊框半徑產生器提供一種直接的視覺方式，用來設定方塊的四個角落，無需重複編輯樣式表。設定左上、右上、右下、左下四個邊角半徑，選擇像素或百分比，並即時觀看預覽更新。產生的宣告依照 CSS 順時鐘角順序，並將重複值壓縮為最短等效簡寫。四個相同角落僅顯示一個值；對角相反的角落顯示兩個值；共享右上與左下的角落可顯示為三個值；否則所有四個值皆保留。這讓結果更易閱讀，同時完整保留你選擇的角落值。

邊框半徑的簡寫方式並非由左至右直觀排列，因此控制順序至關重要。當有四個值時，CSS 會讀取為左上、右上、右下、左下。當有兩個值時，第一個值會應用於左上與右下，第二個值則應用於右上與左下。當有三個值時，中間的值會同時應用於右上與左下。本工具會明確標註每個角落，因此你無需記憶這些對應關係。預覽視窗會直接使用產生的簡寫方式，而非分開的角落屬性，這有助於在複製前發現序列化錯誤。

像素與百分比會產生不同的行為。像素半徑在元素大小改變時保持不變。百分比半徑則根據邊框盒的尺寸計算，可產生圓形、橢圓、葉片狀或極度不對稱的形狀。在正方形上設定 50% 會產生圓角，而在寬矩形上則會產生類似橢圓的末端。瀏覽器在鄰近曲線重疊時可能會比例縮小使用的半徑。因此極大指定值可能顯示小於數值所示。這種正常化行為是瀏覽器的標準行為，並非複製宣告的錯誤。

值限制在實用的非負範圍內。CSS 不支援負的角落半徑，且非有限數值無法產生有效宣告。零值會產生方角。百分比選項允許超過 100 的值，因為 CSS 支援百分比，且瀏覽器會處理重疊曲線，但極大值在正常化後常看起來相同。此工具為每個角落產生單一圓形半徑。CSS 也支援橢圓形半徑，以斜線分隔的水平與垂直組合；此進階語法刻意不包含在本專注的生成器中。

圓角不僅影響裝飾。背景與邊框會遵循曲線，且溢位裁剪可沿內側圓角進行。極大半徑可能縮小可點選區域，因此按鈕與控制元件仍應符合適當的觸控目標大小。內容若內縮過小，可能在視覺上擠壓曲線。複製宣告後，應以元件實際的寬度、高度、邊框、內邊距、焦點外框及響應斷點進行測試。不要僅依賴圓角或顏色來傳達意義。

所有功能皆在瀏覽器本機執行，不會上傳或儲存任何設計值，無需帳號，也無需載入額外依賴。使用預覽探索，複製 CSS 後，再於實際元件中驗證宣告。對於統一的卡片，建議從 12px 到 24px 開始。對於圓形按鈕，使用大像素半徑或 50%，前提是元件有足夠的水平內邊距。對於自然風格的面板，可調整所有四個百分比值。此生成器僅為生產輔助工具，並非測試鍵盤焦點、溢位、對比度與目標大小的替代品。

方法與來源

驗證四個非負數值的半徑，以及 px 或百分比單位，接著套用 CSS 順時鐘縮寫規則，並在視覺預覽中使用相同的產生值。

常見問題

為何四個值會變成一個或兩個值？
此產生器會將重複的角弧合併為等效的 CSS 縮寫形式，但渲染結果保持不變。
為何極大的半徑看起來比預期來得小？
瀏覽器會按比例縮減重疊的角弧，使相鄰的半徑能完整容納於邊框範圍內。
不支援橢圓斜線語法。
不支援。此專注的產生器每角僅設定一個半徑，若需分別設定水平與垂直半徑，則必須使用進階的斜線語法。

相關工具

開發者工具 使用指南

查看全部