▣ CSS Border Radius Generator
Build CSS border-radius shapes visually with independent corner controls. Preview any shape live and copy the CSS. Free online border-radius generator for web designers.
How to Use
1
Drag the sliders
Use the four corner sliders to set individual border-radius values. Toggle "All" to change all corners at once.
2
See the live preview
The box updates instantly to show the exact shape your radius values create.
3
Copy the CSS
Click Copy CSS to copy the border-radius property to your clipboard.
Frequently Asked Questions
What is CSS border-radius?
border-radius rounds the corners of an element. A single value rounds all corners equally. You can specify each corner individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
How do I make a perfect circle with CSS?
Set border-radius: 50% on a square element (equal width and height). For example: width:100px; height:100px; border-radius:50%;
What is the shorthand order for border-radius?
The shorthand follows clock order: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px applies 10px to top-left, 20px to top-right, 30px to bottom-right, 40px to bottom-left.
What are elliptical border radius values?
You can create elliptical corners using the / separator: border-radius: 50px 50px 0 0 / 80px 80px 0 0 creates a semi-ellipse on top. This creates organic, pill, or teardrop shapes in CSS.
Can I use percentages for border-radius?
Yes — percentage values are relative to the element width (horizontal) and height (vertical). border-radius: 50% makes a perfect circle on square elements and an ellipse on rectangular ones.
完整指南：CSS border-radius生成器
什么是border-radius？
border-radius圆化元素的角。使用不对称值可创建有机形状如水滴。完整语法每角可接受8个值（水平和垂直半径），用/分隔。
如何使用
- 拖动每个角的控件调整半径。
- 或手动输入数值。
- 启用非对称半径创建有机形状。
- 复制CSS。
专业技巧
border-radius: 50%将任意正方形变为完美圆形。- 胶囊/标签使用大于高度的值：
border-radius: 100px。 %值相对于元素尺寸——更适合响应式设计。