Skip to content
Free Tools Galaxy
◼️
100% free · no signupRuns in your browser

Border Radius Generator

Adjust each corner of border-radius with a live preview.

Best for: Buttons, cards, avatars, badges and pill-shaped controls.

Complete guide

Input

border-radius: 16px 16px 16px 16px;
How it's calculated & sources
The Border Radius Generator uses the standard method for this calculation. It runs entirely in your browser, so your inputs are never uploaded. Last reviewed June 2026.

Free & no sign-up · runs entirely in your browser. Results are estimates for general information, not professional advice — verify important decisions with a qualified expert. Last reviewed June 2026.

Continue your journey

Where people usually head next.

🌈
CSS Gradient Generator
Live linear gradient builder with angle, two colors and CSS output.
🌑
Box Shadow Generator
Visual CSS box-shadow generator with X/Y/blur/spread/color and live preview.
🎨
Color Palette Generator
Generate tints and shades from any base color.
🎯
Color Contrast Checker
Check WCAG contrast between two colors — AA/AAA verdicts for normal and large text.

Complete guide

Quick answers

Short, sourced answers to the questions people (and AI assistants) ask most.

What is Border Radius?
A border-radius generator rounds an element's corners and gives you the CSS, from gentle rounding to pills and circles.
Why does Border Radius matter?
A CSS value that softens corners. Percentages scale with the element size; pixels stay fixed.
How is Border Radius calculated?
border-radius accepts one to four values for the corners (clockwise from top-left), and you can set each corner or even an elliptical curve using a slash to separate horizontal and vertical radii. A radius of 50% on a square makes a circle.
What are common border radius mistakes?
Mixing percentage and pixel radii without realising they scale differently.
When should you use the Border Radius Generator?
Buttons, cards, avatars, badges and pill-shaped controls.

What is the Border Radius Generator?

A border-radius generator rounds an element's corners and gives you the CSS, from gentle rounding to pills and circles.

How the Border Radius Generator works

border-radius accepts one to four values for the corners (clockwise from top-left), and you can set each corner or even an elliptical curve using a slash to separate horizontal and vertical radii. A radius of 50% on a square makes a circle.

Common mistakes to avoid

  • Mixing percentage and pixel radii without realising they scale differently.
  • Rounding a child more than its parent, causing the corner to clip.
  • Using 50% expecting a circle on a non-square element (you get an ellipse).

Keywords: border, radius, css, corner.

Sources: MDN — border-radius

Reviewed by the Free Tools Galaxy editorial team · Updated June 2026 · Calculated privately in your browser.

Frequently asked questions

Is the Border Radius Generator free to use?+

Yes. Every tool on Free Tools Galaxy is 100% free, runs in your browser and requires no signup.

How accurate is the Border Radius Generator?+

Border Radius Generator uses the standard border radius formula in double-precision arithmetic, so the same inputs always produce the same result and you can verify any figure by hand. It is an educational estimate — real-world outcomes depend on your actual rates, rules and assumptions.

Do you store my inputs?+

No. The Border Radius Generator runs entirely in your browser. Nothing is uploaded or saved to a server.

Can I use the Border Radius Generator on mobile?+

Yes — the interface is fully responsive and works on phones, tablets and desktops.

What are common mistakes to avoid?+

The most frequent mistake is mixing units. Double-check your inputs use a single, consistent unit before clicking Calculate.

Explore more

Popular tools

🚭
Smoking Cost Calculator
Lifetime cost of cigarettes per day, week, year.
⌨️
Typing Speed Test
Test your WPM and accuracy with a live typing challenge.
📚
Study Planner
Plan study hours across subjects based on topics and days left.
➕
Simple Calculator
Basic arithmetic for two numbers: add, subtract, multiply, divide.

Explore other categories

🧾
SSI Payment Calculator
Estimate your 2026 monthly Supplemental Security Income (SSI) from your income and living situation.
🏦
PPF Calculator
Project your Public Provident Fund maturity with a full year-by-year schedule.
💼
EPF Calculator
Estimate your Employees' Provident Fund corpus at retirement.
🧓
NPS Calculator
Project your National Pension System corpus, lump sum and monthly pension.
Related searches: box shadow generator, css gradient generator, color contrast checker

Smart Autopilot

AI-style routing · 100% on-device

Based on this tool, your recent activity and how others chain tools together.

Likely next step

🌈CSS Gradient GeneratorTop match🌑Box Shadow GeneratorVisual CSS box-shadow generator with X/Y/blur/spread/color and live preview.🎨Color Palette GeneratorGenerate tints and shades from any base color.🎯Color Contrast CheckerCheck WCAG contrast between two colors — AA/AAA verdicts for normal and large text.

Smart recommendations

Next best tool

🌑
Box Shadow Generator
Visual CSS box-shadow generator with X/Y/blur/spread/color and live preview.

Also worth a look

½
Fraction Calculator
Add, subtract, multiply and divide fractions with auto-simplification.
📋
SGPA Calculator
Semester Grade Point Average for a single term.
🔌
Power Converter
Watts, kilowatts, horsepower and BTU/hour conversions.
💓
Target Heart Rate Calculator
Karvonen formula target HR zone for cardio.

Share & publish

Share & challenge

Twitter Facebook LinkedIn WhatsApp
Share-to-grow kit (Reddit, LinkedIn, Medium)
Reddit post
Title: I built/used this free border radius generator — instant, no signup

Body: Adjust each corner of border-radius with a live preview. Try it: https://freetoolsgalaxy.com/tools/border-radius-generator
LinkedIn post
Border Radius Generator on Free Tools Galaxy — Adjust each corner of border-radius with a live preview. https://freetoolsgalaxy.com/tools/border-radius-generator
Medium intro
# Border Radius Generator — the free tool I keep coming back to

Adjust each corner of border-radius with a live preview.

Try it: https://freetoolsgalaxy.com/tools/border-radius-generator
Quora answer
The fastest way is to use a free in-browser border radius generator: https://freetoolsgalaxy.com/tools/border-radius-generator. Adjust each corner of border-radius with a live preview.

Embed this tool anywhere

Free embed code for blogs, docs and dashboards. Every embed sends a backlink home — helping you and the galaxy grow together.

HTML iframe
Drop into any site — auto-resizes to its content height, theme-aware.
<iframe src="https://freetoolsgalaxy.com/tools/border-radius-generator?embed=1" title="Border Radius Generator" loading="lazy"
  style="width:100%;height:600px;border:0;border-radius:16px;background:#0b1020"
  allow="clipboard-write"></iframe>
<script>window.addEventListener("message",function(e){if(e.data&&e.data.type==="ftg-embed-height"){document.querySelectorAll("iframe").forEach(function(f){if(f.contentWindow===e.source){f.style.height=e.data.height+"px";}});}});</script>
<p><a href="https://freetoolsgalaxy.com/tools/border-radius-generator" target="_blank" rel="noopener">Powered by Border Radius Generator on Free Tools Galaxy</a></p>
Responsive wrapper
Aspect-locked container — good for blog post bodies.
<div style="position:relative;padding-bottom:75%;height:0;overflow:hidden;border-radius:16px">
  <iframe src="https://freetoolsgalaxy.com/tools/border-radius-generator?embed=1" title="Border Radius Generator" loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="clipboard-write"></iframe>
</div>
WordPress / Markdown
Paste in a custom-HTML block or markdown file.
[Border Radius Generator — free online tool](https://freetoolsgalaxy.com/tools/border-radius-generator)

<iframe src="https://freetoolsgalaxy.com/tools/border-radius-generator?embed=1" width="100%" height="600" frameborder="0"></iframe>
Text link-back
Minimal credit link — best for sidebars and footers.
<a href="https://freetoolsgalaxy.com/tools/border-radius-generator" target="_blank" rel="noopener">Try the free Border Radius Generator</a>

Share-to-Grow Kit

Pre-written, ready-to-paste posts for every major channel. Help others discover this tool — and earn backlinks.

Title
I built a free pregnancy due date calculator that works instantly in the browser — no signup, no ads in your face
Body
Hey r/[subreddit],

I kept needing a quick pregnancy due date calculator and most options online were slow or behind paywalls, so I built one that:

• Runs 100% in your browser (your data never leaves your device)
• No signup, no email wall, no popups
• Loads in under a second on mobile

It covers the standard pregnancy due date use cases (pregnancy, due, date, baby) and links out to the formula + worked examples if you want to learn the math.

Link: https://freetoolsgalaxy.com/tools/pregnancy-due-date-calculator

Happy to take feedback — what's missing?
Post to a relevant subreddit (e.g. r/InternetIsBeautiful, r/webdev, r/productivity). Avoid spammy subs.
Developer & SEO tools