100% PrivateFree
Preview
12px
12px
12px
12px
CSS Output
border-radius: 12px;

How It Works

1

Choose a Preset or Customize

Start with a preset shape or adjust each corner individually using the sliders.

2

Preview Live

Watch the shape update in real time as you adjust the corner values.

3

Copy CSS

Copy the generated border-radius CSS property to use in your project.

Frequently Asked Questions

What is border-radius?
The CSS border-radius property rounds the corners of an element. You can set all four corners equally or control each corner independently.
What is the difference between px and %?
Pixel values create a fixed rounding regardless of element size. Percentage values are relative to the element dimensions, so 50% on a square creates a perfect circle.
How do I make a perfect circle?
Set border-radius to 50% on a square element (equal width and height). This rounds each corner to half the element size.
Can I set different values for each corner?
Yes, border-radius accepts four values in order: top-left, top-right, bottom-right, bottom-left. This tool lets you control each independently.
What is a pill shape?
A pill (or stadium) shape uses a very large border-radius value (like 9999px) which fully rounds the shorter sides of a rectangle.
Share:

About Border Radius

What this tool does

Developer and design tools include CSS generators (gradients, shadows, glassmorphism), code playgrounds, color pickers, responsive previews, and reference charts for HTML tags, HTTP methods, and keyboard shortcuts.

Why use this tool

Front-end development involves constant context switching between code and visual output. Having generators and references in a single browser tab speeds up prototyping and reduces the need to search through documentation sites.

How it works

Each tool provides an interactive UI: you tweak parameters (colors, radii, durations), and the tool generates the corresponding CSS, HTML, or SVG code in real time. Copy the snippet directly into your project.

Pro tip

Use the CSS variable output option when available. It makes your generated code theme-friendly and easier to maintain across a design system.

Deep Dive: Related Research

The Complete Guide to CSS in 2026

30,000 words · 65 min read

The Complete UI/UX Design Systems Guide 2026: Tokens, Typography, Color, Components & Accessibility

30,000 words · 65 min read

Explore More

Love this tool? Explore 12467+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools