⬜
border-radius,
CSS Border Radius 產生器
以視覺化方式控制全部 8 個 border-radius 數值。
建立不規則形狀 (Blob) 並可即時預覽。
🎛️
8 數值控制
4 個角落 × 水平/垂直半徑
🫧
Blob 形狀
輕鬆建立有機的不規則形狀
📋
即時複製
一鍵複製生成的 CSS
預覽 (Preview)
預設形狀 (Presets)
水平 (Horizontal)
垂直 (Vertical)
生成的程式碼 (Generated Code)
about,
關於本工具
CSS Border Radius 產生器讓您可以透過視覺化的方式，控制全部 8 個 border-radius 數值 (4 個角落各自的水平與垂直半徑)，並且能即時預覽結果。
除了一般的圓角之外，您還可以建立複雜的不規則形狀 (Blob)，例如 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — 這在主視覺區塊 (Hero section) 的裝飾上非常受歡迎。所有的處理都在您的瀏覽器中本地完成。
how to,
使用方法
步驟 1
選擇預設形狀
從預設選項 (圓形、葉片、不規則等) 開始，快速獲得一個基礎形狀，然後再使用滑桿進行微調。
步驟 2
調整滑桿
拖曳每個角落的水平和垂直滑桿。預覽區塊會立即更新以反映您的修改。
步驟 3
複製 CSS
點擊「複製」按鈕將生成的 CSS 複製到剪貼簿，然後將其貼上到您的樣式表中。
glossary,
詞彙表
- border-radius
- 一個用於讓元素角落變圓的 CSS 屬性。每個角落都可以獨立設定，並支援 px 和 % 單位。
- 水平 / 垂直半徑 (Horizontal / Vertical Radius)
- 由 border-radius 定義的橢圓形的兩個半徑。「/」分隔符號用來區分水平值 (前面) 和垂直值 (後面)。
- 不規則形狀 (Blob)
- 一種透過在所有 8 個軸上設定不對稱的 border-radius 數值所創造出的有機、不規則的形狀。
- clip-path
- 一個用於將元素裁剪成自訂形狀的 CSS 屬性。雖然比 border-radius 更靈活，但語法也更複雜。
- 縮寫 (Shorthand)
- 例如：border-radius: 10px 20px 30px 40px — 在單一宣告中指定全部四個角落。使用「/」來分隔水平和垂直值。
faq,
常見問題
- Q.這 8 個數值代表什麼？
- 4 個角落的每一個都有水平與垂直的圓角半徑，總共 8 個數值。格式為：border-radius: A B C D / E F G H。
- Q.不規則形狀 (Blob) 可以用在哪裡？
- 適合用於主視覺區塊 (Hero section) 的背景裝飾、個人檔案圖片的遮罩、CTA 按鈕的造型等。
- Q.資料會被傳送到伺服器嗎？
- 不會。所有的處理和生成都在您的瀏覽器中本地執行。
- Q.支援 IE11 嗎？
- border-radius 支援 IE9 及以上版本。帶有 "/" 的橢圓寫法同樣從 IE9 開始支援。
- Q.我可以搭配 Sass 或 Less 使用嗎？
- 可以。產生的程式碼是標準的 CSS，因此可以直接用於 Sass、Less 和 Stylus 等預處理器中。
use cases,
使用場景
🎨
按鈕與卡片設計
為按鈕和卡片元件建立獨特的圓角形狀，突破標準的圓形或方形限制。
🫧
Blob 背景裝飾
在著陸頁 (Landing Page) 的主視覺區塊 (Hero section) 使用有機的不規則形狀作為背景裝飾。
📸
個人檔案圖片遮罩
探索標準圓形或方形之外的，與眾不同的個人大頭照遮罩。
🎓
學習 CSS
透過實際操作滑桿，視覺化地了解 border-radius 的運作原理。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.