Border Radius Generator - CSS Corner Preview
CSS shape
Border Radius Generator
Adjust each corner visually and copy the resulting CSS border-radius value.
Preview
border-radius: 16px 16px 16px 16px;
Usage guide
Design CSS corner radii visually and copy the exact declaration
Border radius can use one value for all corners or separate values for each corner. A visual generator helps match card, button, badge, and decorative shapes without repeatedly editing CSS by hand.
How to use Border Radius Generator
- 1.Adjust each corner or use a shared radius until the preview matches the intended component shape.
- 2.Check the result at the actual component size because a large radius behaves differently on small and large boxes.
- 3.Copy the generated border-radius declaration and test it with the real border, background, and overflow behavior.
Examples
- Use the same radius on all four corners for a consistent card component.
- Round only the top corners of a panel that sits above a square-edged content area.
- Use a very large radius on a pill-shaped button whose height remains smaller than its width.
Limitations and notes
- Border radius affects the border box but does not automatically clip overflowing child content unless overflow behavior is also set.
- Percentages and elliptical radii can produce shapes that differ from simple pixel-based rounded corners.
How do I make a pill shape?
Use a radius at least half the element's height, or a very large value such as 9999px, on a wide element.
Why does a child image ignore the rounded corner?
The parent may need overflow:hidden or the image may need a matching border radius so its pixels are clipped to the same shape.
For transparency, review Tool Nova's data source policy and editorial policy.
Discover more tools
Explore more tools in this category, browse popular utilities, or check recently added tools on Tool Nova.
How the border radius generator works
Paste or enter the code, data, or value you want to inspect.
The tool processes it locally in your browser.
Copy the formatted output or converted value for your project.
Frequently Asked Questions
Is the border radius generator free?
Yes. It is free and does not require an account.
Is my code sent to a server?
No. These developer tools run locally in your browser.
Related Tools
Explore more free online tools from Tool Nova.
CSS Unit Converter
Convert pixels into rem, em, vw, and vh values using custom root font size and viewport dimensions.
CSS Minifier & Beautifier
Minify or beautify CSS locally for cleanup, inspection, and copying into projects.
Markdown Editor
Write Markdown and preview rendered HTML instantly.
XML Formatter
Format compact XML into readable, indented XML locally in your browser and copy the cleaned output.