所有工具
Border Radius Generator
Generate border radius
Generate border radius 在您的瀏覽器中本地執行
CSS
border-radius: 12px;
About the
邊框半徑產生器可獨立設定盒子的四個角，並提供即時預覽，並為您提供 CSS。簡寫的順序是大家都忘記的：左上、右上、右下、左下，從左上順時針方向。一個值適用於所有四個角，兩個值適用於對角線對，四個值依次處理每個角。當所有四個都匹配時，該工具會發出單值形式，這是您大多數時候真正想要的形式。
Where people use the
- 將半徑與設計規範相匹配，而無需猜測畫素值。
- 僅將卡片或模態框的頂角舍入。
- 塑造一個藥丸按鈕，其半徑為元素高度的一半。
- 求將方形頭像變成圓形的半徑。
How to use the
- 1
拖曳角滑塊
每個角落都有自己的滑桿，範圍從 0 到 150 畫素。當您移動預覽框時，預覽框會變圓。
- 2
保持角點連結或取消連結
開啟「連結」後，移動任何滑桿都會將所有四個滑桿一起移動。將其關閉以塑造各個角，這就是製作語音氣泡尾巴或葉子形狀的方法。
- 3
閱讀 CSS
如果所有四個都匹配，您將獲得單值簡寫。如果它們不同，您將獲得按順時針順序排列的完整四值形式。
- 4
考慮用百分比代替
方形元素上 50% 的半徑給出一個圓形。如果您需要的話，請將樣式表中的 px 單位替換為百分比。
提示和最佳實踐
- 當元素調整大小時使用百分比，不調整大小時使用畫素。
- 藥丸按鈕的半徑不是固定的；它是高度的一半，所以 9999px 是一個懶惰但穩健的答案。
- 保持整個元件集的半徑一致；混合 4px、6px 和 8px 看起來很驚訝。
常見問題
這四個值的順序是什麼？
從左上角開始順時針：左上、右上、右下、左下。一個有用的助記符是，它從您開始閱讀的地方開始，並像鐘面一樣旋轉。
兩個或三個值意味著什麼？
有兩個值設定對角線：第一個是左上角和右下角，第二個是右上角和左下角。三個值設定為左上角，然後是右上角和左下角，然後是右下角。
我該如何畫一個圓圈？
對已經是正方形的元素使用 50%。如果半徑碰巧等於寬度的一半，則使用畫素只會給出一個圓，這會在元素調整大小時中斷。
我可以在水平和垂直方向上以不同的方式圓角嗎？
完整的語法允許將橢圓半徑寫為水平值、斜線，然後是垂直值。該工具發出更簡單的統一形式，因此如果您需要該形狀，請手動新增斜線版本。
為什麼我的圓角被剪掉了？
因為子內容沒有被剪下到圓角框。將溢位隱藏新增到元素中，否則其中的影像或背景仍將顯示方角。