CSS Border Radius 產生器

以視覺化方式建立複雜的 CSS border-radius 值。可獨立控制每個圓角。

TL: 20pxTR: 20pxBR: 20pxBL: 20px

border-radius: 20px 20px 20px 20px;

如何使用本工具

1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
2
Watch the indigo preview box update live as you change each corner.
3
Read the generated border-radius declaration in the code box below the sliders.
4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.

CSS 的 border-radius 屬性最多接受四個值，每個圓角一個，順序為左上、右上、右下、左下。組合不同的圓角半徑可創造出有機的水滴形狀、不對稱卡片或對話氣泡樣式。本工具讓你透過滑桿調整每個圓角，並即時檢視結果。

Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.

橢圓形圓角呢？▼

border-radius 還支援每個圓角用 / 分隔的兩個值，從而建立橢圓而非圓形。對於基礎用途，每個圓角用單個值就足夠了。