Online Tool Store
· 3 min read
How to Build CSS Border Radius Shapes
Manesh Jayawardhana
CIO & Co-founder
Rounded corners look simple until the shape needs to be precise. A pill, card, blob-like panel, or asymmetric image crop may require more than border-radius: 8px. CSS supports eight radius values and elliptical slash syntax, but writing that shorthand by hand is easy to get wrong.
A CSS border radius generator helps you shape corners visually, generate the shortest valid CSS, and understand when the browser scales radii because they do not fit the box.
What border radius design involves
Each corner can have a horizontal and vertical radius. In simple cases, one value rounds all corners equally. In advanced cases, CSS can define different horizontal and vertical radii with slash syntax, such as border-radius: 20px 40px / 10px 30px.
Percentages behave differently from pixels because they depend on the element size. A 50% radius can create a circle or pill shape when the dimensions support it.
Why people get stuck here
The shorthand order is not obvious once you move beyond one or two values. Top-left, top-right, bottom-right, and bottom-left values must be placed correctly, and slash syntax doubles the mental load.
Another surprise is scaling. If the combined radii along a side exceed the element size, browsers reduce them according to the CSS specification. That can make the rendered shape differ from the numbers you typed.
| Radius Feature | Use Case |
|---|---|
| One value | Same rounding everywhere |
| Four values | Different corner sizes |
| Slash syntax | Elliptical corners |
| Percentages | Responsive pill or oval shapes |
What good radius CSS looks like
The preview matches the real box
Resize the preview when percentages are involved so you can see how the shape responds.
The shorthand is readable
Use the shortest CSS that still expresses the intended shape.
Scaling warnings are visible
If the browser will shrink radii, knowing the scaling factor prevents confusion.
Common mistakes to avoid
- Mixing corner order. CSS order starts top-left, then top-right, bottom-right, bottom-left.
- Assuming percentages equal pixels. Percent values respond to element dimensions.
- Ignoring slash syntax. Elliptical radii need horizontal and vertical values.
- Overbuilding simple shapes. A pill may only need a large single radius.
How to do it with CSS Border Radius Generator
- Open the free CSS Border Radius Generator.
- Adjust each corner in the live preview.
- Use elliptical controls when horizontal and vertical curves should differ.
- Resize the preview if percentages are part of the design.
- Copy the generated
border-radiusCSS.
The tool also reports when radii overflow and the browser scales them down.
Frequently asked questions
What does the slash mean in border-radius?
The slash separates horizontal radii from vertical radii, enabling elliptical corners.
How do I make a pill shape?
Use a very large radius, often 9999px, or a percentage-based value on a rounded rectangle.
Why does my radius look smaller than expected?
If combined radii exceed the side length, the browser scales them to fit.
Final thought
Border radius is more powerful than most people use. A visual generator makes the full syntax easier to trust.