UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Border Radius Generator

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

About Border Radius Generator

Border radius seems simple until you need an organic blob shape, a card with one sharp corner, or a pill button that stays pill-shaped at any width. The CSS shorthand collapses symmetric corners gracefully but the elliptical slash syntax for asymmetric curves is easy to miswrite. The Border Radius Generator gives you independent sliders for all four corners with optional elliptical two-axis control per corner. One-click presets cover the most common needs — pill (9999px), circle (50%), and several blob shapes. The live preview shows the exact rendered curve as you adjust, and the output auto-collapses to the shortest valid shorthand, whether that's a single value, a two-value pair, or the full four-value or slash form. Works in pixels or percent.

Why use Border Radius Generator

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.

Pill & Circle

Instant presets for the two most common rounded shapes: 9999px for pills that stay rounded at any width, and 50% for circles on equal-dimension elements. No mental math required — pick the shape and move on.

Blob Shapes

Enable elliptical radii for organic, asymmetric curves using the CSS slash syntax. Each corner gets a horizontal and vertical radius that can differ, producing teardrop, bubble, and flowing organic shapes from a single HTML element.

Shorthand Output

The generated CSS collapses automatically to the shortest valid shorthand. Identical corners merge to a single value, two-pair symmetry uses two values, and only fully asymmetric shapes emit all four. Output is always clean and minimal.

Live Preview

A resizable preview box shows the exact corner curve at the dimensions you set. Resize it to match your actual component's proportions and see how the radius looks at different widths and heights before committing.

Pixel + Percent

Switch between px and % units per corner or globally. Percentage radii scale proportionally with the element size, which is essential for circles and responsive cards, while pixel values stay fixed for design-system tokens.

How to use Border Radius Generator

  1. Choose all-corners mode for uniform rounding or per-corner mode for independent control
  2. Drag each corner slider to set the radius in pixels or switch to percent with the unit toggle
  3. Enable the elliptical mode toggle to set independent horizontal and vertical radii per corner
  4. Click a preset — Pill, Circle, Square, or Blob — to load a predefined corner configuration
  5. Inspect the live shape preview to confirm the exact curve at your intended element size
  6. Click Copy CSS to copy the auto-collapsed border-radius shorthand to your clipboard

When to use Border Radius Generator

  • When designing a button component and want to test sharp, slightly rounded, and full-pill variants side by side
  • When creating a card with a sharp top-left corner for a notched design or folded-corner visual motif
  • When building organic blob shapes as hero background decorations or avatar containers
  • 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
  • When experimenting with elliptical radii to create teardrop or asymmetric curved shapes

Examples

Pill button

Input: All corners set to 9999px

Output: border-radius: 9999px;

Card with sharp top-left

Input: top-left: 0px, top-right: 12px, bottom-right: 12px, bottom-left: 12px

Output: border-radius: 0 12px 12px 12px;

Organic blob

Input: Elliptical mode: tl 60%/40%, tr 30%/70%, br 70%/30%, bl 40%/60%

Output: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Tips

  • Use 9999px instead of 50% for pill buttons to guarantee the pill shape holds at any element width without becoming an oval
  • Add overflow: hidden to any rounded container to clip child images and media to the rounded boundary
  • Organic blob shapes require the elliptical slash syntax — enable per-corner and two-axis mode and experiment with opposing asymmetric values
  • 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% creates a flowing organic shape. The generator's blob presets offer ready-made starting points.
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.

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 Playground Prototype grid templates, gaps, and alignment with a responsive preview and CSS export. CSS Transform Playground Combine translate, rotate, scale, and skew with live matrix feedback 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.