幫網站做卡片、按鈕或頭像的時候，最麻煩的常常不是設計，而是 border-radius 後面那一串數字。明明只想讓右下角圓一點，寫了三個值，結果四個角全跑掉。改來改去，半小時就這樣沒了。這種小事不大，但累積起來真的很磨人。
🔔 不錯過任何精彩內容
立即訂閱我們的 LINE 或將本站設為 Google 偏好來源，掌握最新資訊！
這次要介紹的是 BrowserStyle 的 Border Radius Generator，網址是 https://browserstyle.com/border-radius-generator/。根據官網的介紹，它可以用 px 或 % 設定每個角的圓角，還能另外設定垂直半徑做出橢圓角。設定完之後，你可以複製最短的 border-radius 縮寫、四個角分開寫的 longhand，或是 Tailwind CSS 的類別，而且官網標示為免費。
對經營部落格或接案的人來說，這類工具的價值不在於「做不到」，而是「少試錯」。我自己的想法是，圓角這種東西用眼睛調，比用腦袋算快很多，尤其是遇到橢圓角或 Blob 這種不規則形狀的時候。所以這篇會帶你走一遍操作流程，也順便把幾個容易搞混的觀念講清楚。
BrowserStyle 圓角產生器是什麼？
BrowserStyle 圓角產生器是一個讓你用視覺方式設定 CSS 圓角，並直接複製程式碼的免費網頁工具。根據官網的介紹，頁面上方有 Card、Pill、Circle、Tab、Speech bubble、Leaf、Blob 七種預設形狀，點一下就能當起點。預覽框的寬與高也可以自己填，官網預設是 280 × 180。你調整數值的時候，下方的 CSS 會跟著即時更新，不需要再按什麼「產生」按鈕。
另外，官網在頁尾寫明這個工具在你的瀏覽器裡運作，輸入的內容不會被送到任何地方。對只是想調個圓角的人來說，這點可能無關緊要。不過如果你習慣拿公司專案的片段來測試，這種說明至少讓人比較安心。當然，這是官網自己的聲明，我沒有另外驗證。
BrowserStyle 圓角產生器怎麼用？
使用 BrowserStyle 圓角產生器只需要挑形狀、調數值、複製程式碼三個動作。實際上頁面的欄位不多，英文介面用的也都是常見的設計用語。下面照著官網頁面的順序，一步一步帶你走一遍。
步驟 1：先挑一個接近的預設形狀
打開官網頁面後，先從 Card、Pill、Circle 這幾個預設裡，挑一個最像你想要的。從現成的形狀改，比從零開始快很多。如果你想做的是不規則的有機形狀，直接點 Blob 當起點會省事。
步驟 2：選好單位，再填盒子大小
在 Unit 選擇 px 或 %，接著把 Box width 與 Box height 改成你實際元件的尺寸。這一步很容易被跳過，但百分比的圓角是跟著盒子大小算的。尺寸填得不對，預覽出來的樣子就不準。
步驟 3：調整四個角的半徑
如果勾選「Same radius on every corner」，四個角會一起變動。取消勾選之後，就能分別設定 Top left、Top right、Bottom left 與 Bottom right 的 Radius。做卡片或分頁標籤這種上下不對稱的形狀，就靠這一步。
步驟 4：需要橢圓角，再勾選垂直半徑
勾選「Separate vertical radius (elliptical corners)」之後，每個角會多出垂直方向的半徑欄位。水平和垂直設成不同的數字，那個角就會變成橢圓的一部分，而不是正圓。官網後面提到的任意值範例，用的就是這種帶斜線的寫法。
步驟 5：複製 CSS 或 Tailwind 類別
CSS 區塊可以切換 Shorthand 與 Longhand，確認內容沒問題就按「Copy CSS」。如果你的專案用 Tailwind，改按 Tailwind CSS 區塊的「Copy classes」就好。熟了之後，整個流程應該一分鐘內就能走完。
border-radius 的縮寫到底怎麼讀？
border-radius 縮寫是從左上角開始，依照順時鐘方向，依序設定四個角的圓角半徑。根據官網的說明，寫成 border-radius: 4px 8px 16px 32px 的話，依序是左上、右上、右下、左下。少寫的值會複製對角的那一個。三個值時左下複製右上，兩個值時右下複製左上、左下複製右上，只寫一個值就是四個角都一樣。
拿官網預設顯示的例子來說，border-radius: 24px 24px 8px; 只寫了三個值。左上與右上各是 24px，右下是 8px，沒寫的左下則複製右上，所以也是 24px。對應的 Tailwind 類別是 rounded-3xl rounded-br-lg，意思是整體 24px，再把右下角改成 8px。這種上面圓、右下角收一點的形狀，拿來做文章卡片或對話框都滿順手的。
斜線則是另一個容易讓人卡住的地方。根據官網，斜線前面的值是水平半徑，後面的值是垂直半徑，例如 border-radius: 40px / 20px 會讓每個角都是寬 40px、高 20px 的橢圓。第一次看到這種寫法，多半都要停下來想一下。用工具勾選「Separate vertical radius」，看預覽就懂了，我覺得這是它最實用的地方。
px、% 與 9999px 該怎麼選？
px 是固定大小的圓角，% 是跟著盒子自己尺寸變化的圓角，9999px 則是做膠囊形狀最常用的寫法。三種寫法看起來差不多，實際用起來差很多。我整理成下面這張表，方便你對照。
| 寫法 | 計算基準 | 適合的情境 | 要注意的地方 |
|---|---|---|---|
| px（例如 12px） | 固定數值，不隨盒子大小改變 | 希望不同尺寸的卡片、按鈕弧度一致 | 設得太大時，瀏覽器會自動縮小 |
| %（例如 50%） | 水平半徑看盒子寬度，垂直半徑看盒子高度 | 把正方形的頭像做成圓形 | 50% 只有正方形才是正圓，長方形會變成橢圓 |
| 9999px | 超大的 px 值，會被縮到短邊的一半 | 膠囊形狀的按鈕與標籤 | 任何寬度都能得到半圓形的兩端 |
官網還特別說明了「圓角設太大會怎麼樣」。如果同一邊的兩個圓角加起來比那一邊還長，瀏覽器會把所有圓角等比例縮小，直到最緊的那一邊放得下為止。舉例來說，在 200 × 100px 的盒子四角都設 80px，上方需要 160px 放得下，但左側需要 160px 卻只有 100px。所以四個半徑都乘上 0.625，變成 50px，整個盒子就成了膠囊形。
這也解釋了為什麼 9999px 在任何尺寸都能做出膠囊：它一定會被縮到短邊的一半。官網的 Pill 預設是 280 × 72px，每個角實際畫出來是 36px，剛好是高度的一半。發生縮小的時候，工具會告訴你瀏覽器實際畫出的半徑。我覺得這個提示比預覽圖更實用，因為它直接回答了「為什麼我明明設 80px，看起來卻是 50px」。
要複製縮寫、Longhand 還是 Tailwind 類別？
BrowserStyle 圓角產生器提供縮寫、Longhand 與 Tailwind 類別三種輸出，分別對應不同的寫作習慣。要用哪一種，看你的專案怎麼寫就好，沒有誰比較高級。下面這張表是我整理的對照。
| 輸出方式 | 內容 | 適合誰 | 官網範例或操作 |
|---|---|---|---|
| Shorthand（縮寫） | 官網一律輸出意思相同的最短寫法 | 想讓樣式表保持簡短的人 | border-radius: 24px 24px 8px; |
| Longhand（分開寫） | 四個角的半徑完整攤開 | 想一眼看清每個角的人 | 在 CSS 區塊切換到 Longhand |
| Tailwind 類別 | Tailwind CSS v4 的圓角類別 | 專案本來就用 Tailwind 的人 | rounded-3xl rounded-br-lg |
Tailwind 的部分有個細節值得一提。根據官網，當每個角都剛好落在 Tailwind 的圓角刻度上，工具會給具名類別，而且盡量用最少的類別，例如 rounded-xl，或 rounded-t-xl rounded-b-none。如果是其他數值、百分比或橢圓角，就會變成一個任意值類別，像 rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%] 這樣。
刻度本身也列在官網上，我順手整理成下面的表格。官網提醒，這些數值是以預設 16px 的根字級換算，因為 Tailwind 的刻度單位是 rem。
| Tailwind 類別 | 圓角大小 |
|---|---|
| rounded-none | 0 |
| rounded-xs | 2px |
| rounded-sm | 4px |
| rounded-md | 6px |
| rounded-lg | 8px |
| rounded-xl | 12px |
| rounded-2xl | 16px |
| rounded-3xl | 24px |
| rounded-4xl | 32px |
另外，Tailwind 自己的 rounded-full 在官網的說明裡是 calc(infinity * 1px)，視覺效果和 9999px 一樣。如果你本來就在用 Tailwind，這個工具幫你省掉了「幾 px 對應哪個類別」的換算。對這類使用者來說，這是個很實際的加分。
border-radius 做不到哪些事？
border-radius 只能把角往外彎，不能做出往內凹的缺口，也不會自動裁切裡面的內容。官網的 FAQ 正好把兩個最常見的踩雷點講得很清楚。先說圖片：圓角只會處理元素自己的背景與邊框，裡面的子元素要再加上 overflow: hidden 或 overflow: clip，才會被裁成圓弧。如果是直接對 img 設圓角，那張圖自己就會被裁好。
第二個是缺口。像票券那種往內咬一口的形狀，border-radius 做不出來，官網建議改用 mask 或 clip-path。他們在同站提供了 clip-path 產生器，可以裁出任意形狀。另外還有 CSS to Tailwind 轉換器、flexbox 產生器與 CSS grid 產生器，排版和轉換的需求也能一起處理。
官網公布的測試方式可信嗎？
BrowserStyle 官網公開了自己的測試方式，用 Chrome 實際算出的圓角半徑，來核對工具輸出的結果。根據官網的介紹，他們用 497 種不同的形狀與盒子尺寸，把複製出來的 CSS 貼進 Chrome，Chrome 算出的 1,988 個圓角半徑必須與設定值完全相同。Tailwind 類別則用 Tailwind CSS 4.3.3 編譯後，同樣要算出一樣的半徑。
至於圓角太大時的縮小規則，官網說是用 430,727 個取樣點，檢查它們是否落在瀏覽器實際畫出的圓角框內。這些數字都是官網自己公布的，我沒有逐項重現，讀者可以當作參考。不過一個小工具願意把測試方法攤開來講，至少比只寫「很準確」三個字有誠意。
BrowserStyle 圓角產生器常見問題有哪些？
這裡整理的是讀者最常問的費用、地區、單位選擇與圓角限制。
BrowserStyle 圓角產生器需要付費或註冊嗎？
根據官網的介紹，這個工具是免費的，頁面上也沒有看到登入或付費方案的說明。所以目前沒有「值不值得升級」的問題，打開網址就能用。實際使用前，建議你再看一下官網最新的說明。
台灣的使用者可以直接使用嗎？
官網是一般的網頁工具，頁面上沒有標示地區限制，用瀏覽器打開網址就能使用。不過介面與說明都是英文，欄位名稱可以對照本文的步驟。
圓角該用 px 還是 %？
px 是固定大小，不管盒子多大弧度都一樣，% 則是依盒子的寬高計算。根據官網，50% 只有在正方形才會是正圓，長方形會變成橢圓。想要固定弧度的卡片，用 px 會比較直覺。
做膠囊按鈕該寫 9999px 還是 50%？
官網建議用 9999px。圓角過大時會被縮到短邊的一半，所以任何寬度都能得到半圓形的兩端。50% 在長方形上，兩端則會變成橢圓形。
為什麼圖片放進圓角容器，角落還是直角？
因為 border-radius 只處理元素自己的背景與邊框，裡面的子元素不會自動被裁切。根據官網，要再加上 overflow: hidden 或 overflow: clip。如果是直接對 img 設圓角，那張圖自己就會被裁好。
圓角可以做出票券那種缺口嗎？
不行，border-radius 只能把角往外彎。官網說往內凹的缺口要用 mask 或 clip-path，並提供了 clip-path 產生器可以使用。