⬜
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 的運作原理。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback sent successfully. Thank you for your cooperation!
An error occurred. Please try again later.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.