CSS Border Radius Generator
Visually build any border-radius shape and copy the CSS output.
Presets
Corners
How to Use the Border Radius Builder
- 1.Choose a preset shape (None, Small, Medium, Large, Pill, Squircle, Leaf, etc.) to start quickly.
- 2.Toggle Linked mode to adjust all corners together, or Free mode to control each corner independently.
- 3.Switch between px, %, and rem units using the unit buttons.
- 4.Use the color picker to change the preview box color and visualize your shape in context.
- 5.Click Copy to copy the optimized CSS shorthand (e.g.,
border-radius: 16px 4px;).
What is CSS Border Radius?
The CSS border-radius property rounds the corners of an element's box. You can specify a single value for all four corners, two values for the top-left/bottom-right and top-right/bottom-left pairs, or up to four individual values for complete control. Percentage values (like 50%) create circular or elliptical shapes. The property is widely used for buttons, cards, avatars, and decorative shapes. Using rem units ties corner sizes to the user's base font size, which respects accessibility preferences. The shorthand syntax automatically optimizes when corners share values - so border-radius: 16px 16px 16px 16px compresses to border-radius: 16px.
Frequently Asked Questions
How do I make a perfect circle with CSS?
Set border-radius: 50% on an element with equal width and height. The 50% value creates a fully circular shape regardless of the element's size in pixels.
What is the border-radius shorthand syntax?
With 4 values: top-left, top-right, bottom-right, bottom-left (clockwise). With 2 values: top-left & bottom-right, top-right & bottom-left. With 1 value: all four corners. The builder auto-generates the most compact shorthand for your settings.
Can I use border-radius in Tailwind CSS?
Yes. Tailwind has built-in classes: rounded, rounded-lg, rounded-full, etc. For custom values, use arbitrary syntax: rounded-[30px_4px].