Developer

Border Radius Generator

Shape corners with unified or per-corner sliders and export shorthand border-radius CSS.

Loading interactive tool…

Embed this tool on your site

About this tool

Border radius looks simple until you want a card with one sharp corner or need the shortest valid shorthand. The Border Radius Generator has a Unified corners checkbox: ticked, one All corners slider sets every corner; unticked, separate Top-left, Top-right, Bottom-right and Bottom-left sliders appear. Each slider runs from 0 to 120 px. The preview rectangle updates as you drag, and the CSS output collapses to the shortest shorthand — one value when all corners match, two when opposite corners match, three when top-right equals bottom-left, otherwise four. Values are always in pixels; for percentages, pill shapes larger than 120 px or the elliptical slash syntax, edit the copied value by hand.

Why use it

  • Per-Corner Control: Set top-left, top-right, bottom-right, and bottom-left radii independently instead of applying one uniform value. This unlocks designs where only one corner is sharp, or where adjacent corners use different rounding scales.

  • Shortest Shorthand Automatically: Matching corners collapse to one, two or three values, so the output stays minimal without you working out the order.

  • Live Preview: A wide preview rectangle shows the curve as you drag, so you can compare subtle and heavy rounding instantly.

  • Quick Switch Between Modes: One checkbox toggles between a single slider and four corner sliders.

  • Token-Friendly Pixel Values: Pixel output maps directly onto design-system radius tokens like 4, 8, 12 and 24 px.

How to use

  1. Leave Unified corners ticked and drag All corners to round every corner equally
  2. Untick Unified corners to show the Top-left, Top-right, Bottom-right and Bottom-left sliders
  3. Drag each corner slider between 0 and 120 px
  4. Watch the preview rectangle and the shorthand in the CSS box update as you drag
  5. Click Copy CSS to copy the border-radius declaration

When it helps

  • When designing a button or card and want to compare sharp, slightly rounded and heavily rounded corners
  • When creating a card with a sharp top-left corner for a notched design or folded-corner visual motif
  • When adding consistent border-radius tokens to a design system and need the shorthand values
  • When converting a Figma component's individual corner radius values to CSS

Examples

Uniform rounding

Input
Unified corners, All corners 24
Expected result
border-radius: 24px;

Card with a sharp top-left corner

Input
Top-left 0, Top-right 12, Bottom-right 12, Bottom-left 12
Expected result
border-radius: 0px 12px 12px;

Diagonal pairs

Input
Top-left 24, Top-right 4, Bottom-right 24, Bottom-left 4
Expected result
border-radius: 24px 4px;

Tips

  • Use 9999px instead of 50% for pill buttons so the shape holds at any width without becoming an oval — type it into the copied CSS, since the sliders stop at 120px.
  • Add overflow: hidden to any rounded container to clip child images and media to the rounded boundary
  • Organic blob shapes need the elliptical slash syntax, which this tool does not output; write them by hand with opposing asymmetric percentages.
  • Keep token names proportional to usage: --radius-sm (4px), --radius-md (8px), --radius-lg (12px), --radius-full (9999px) covers most design system needs
  • Proportional rounding (radius roughly 20–25% of the element's shorter dimension) tends to look balanced at any size

Frequently Asked Questions

How do I make a perfect circle with border-radius?
Set border-radius to 50% on an element that has equal width and height. The percentage applies to both dimensions, and 50% of each maps to half the element's dimensions, creating a circle. If the element is not square, you get an ellipse instead.
What is the difference between 50% and 9999px for pill shapes?
50% on a wide, short element creates an ellipse with half-height radii, which may look more rounded than expected. 9999px creates a fully semicircular end cap — the browser caps the radius at half the element's shortest dimension, giving a consistent pill at any width.
How do elliptical radii (the slash syntax) work?
The slash in border-radius separates horizontal and vertical radii. Values before the slash define the x-radius of each corner; values after define the y-radius. This allows each corner to be a different ellipse, enabling organic blob shapes.
Can border-radius use both px and percent values?
Yes. You can mix units across corners, and even mix units within a single corner's elliptical pair. Percent refers to the element's own width for the horizontal radius and height for the vertical radius, while px values are fixed.
Why doesn't border-radius clip my child images?
border-radius affects the element's visual rendering but does not clip child content by default. Add overflow: hidden to the parent element to force child content — including images and iframes — to clip at the rounded boundary.
How do I make organic blob shapes in pure CSS?
Use the elliptical slash syntax with different horizontal and vertical radii on each corner, for example border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. This generator only outputs pixel values without the slash, so type blob values into your stylesheet directly.
Does border-radius affect outline and box-shadow?
box-shadow follows the border-radius shape automatically. outline in modern browsers also follows the border-radius. Older browsers may render outline as a rectangle even on rounded elements, in which case box-shadow can replace outline for focus indicators.
Will border-radius break in older browsers?
border-radius has been supported without vendor prefixes since IE9, Chrome 4, Firefox 4, and Safari 5. The elliptical slash syntax is equally well-supported. Any current browser in production use supports all border-radius features without fallbacks.
Can I use percentages or values above 120px?
Not with the sliders, which output whole pixels from 0 to 120. Edit the copied value to use 50% for a circle or 9999px for a pill.

Explore the category

Text Shadow Generator Stack up to three readable text shadows and export CSS for headings and hero type. CSS Triangle Generator Create directional CSS triangles using the transparent border technique with sizing controls. CSS Button Generator Style padding, radius, colors, borders, and optional hover darken with instant previews. CSS Grid Generator Build a CSS grid visually: set columns, rows and gaps, drag across cells to place items, then copy the HTML and CSS. CSS Transform Playground Combine translate, rotate, scale, and skew values with a live preview box and CSS export. CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations.
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

Glossary

Border Radius
A CSS shorthand property that rounds element corners by setting the radius of the curve applied at each corner of the border box.
Elliptical Radius
An individual corner radius with separate horizontal and vertical values, specified using the slash syntax in border-radius. Allows each corner to be an elliptical arc rather than a circular one.
Pill Shape
A fully rounded rectangle created by setting border-radius to a value at least half the element's height, typically 9999px, so both ends become perfect semicircles.
Shorthand Property
A CSS property that sets multiple related values in a single declaration. border-radius shorthand can set all four corners at once, collapsing symmetric values for brevity.
Corner Smoothing
A technique (prominent in Apple's design language) that uses a superellipse curve instead of a circular arc for smoother transitions between straight edges and rounded corners. Approximated in CSS with slightly asymmetric elliptical radii.
Blob
An irregular, organic curved shape created in CSS by applying different elliptical radii to each corner of a border-radius declaration, producing flowing shapes that resemble natural forms.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities