Border Radius Generator

Overview

A visual editor for every form of the border-radius property. The standard mode drives four corner radii in pixels with a link-all toggle; the organic mode exposes the full eight-value elliptical syntax, splitting each corner into a horizontal and a vertical radius in percent. The live preview box resizes its corners in real time and the panel copies both CSS and a Tailwind arbitrary class.

How It Works

Start in the 4 Corners mode and either drag each corner slider from 0 to 120 pixels or enable the Link all corners toggle so one slider drives all four. Switch to the 8-Value Organic mode to get eight percent sliders, four horizontal radii on the X axis and four vertical radii on the Y axis. Seven shape presets, including Pill Capsule, Ticket Cutout and Organic Blob, load ready-made value combinations. Copy the result as CSS or as a Tailwind class with the two buttons under the preview.

Step-by-Step Usage Guide

1. Choose 4 Corners for pixel radii or 8-Value Organic for elliptical corners.
2. Adjust the sliders, or link them all in standard mode.
3. Apply a preset such as Squircle or Leaf Badge as a starting point.
4. Copy the CSS or the Tailwind class from the export panel.

Technical Specifications & Standards

The eight-value syntax is border-radius with a slash: the four values before the slash are horizontal radii, the four after it are vertical radii, and each corner becomes a quarter ellipse instead of a quarter circle. Horizontal percentages resolve against the box width while vertical percentages resolve against the box height, which is why the same values produce a different silhouette on a wide rectangle than on a square. The CSS Backgrounds specification also defines an overlap rule: when the sum of two adjacent radii exceeds the side length, the browser scales every radius down by the same factor, so you cannot accidentally tear the shape apart. The Tailwind export replaces spaces with underscores to survive the arbitrary-value parser.

Targeted Use Cases

• Squircle-style app icons and avatar frames.
• Asymmetric leaf and ticket shapes for badges and coupons.
• Blob-like hero illustration containers that look designed rather than default.
• Consistent radius tokens across buttons, cards and inputs.

Notes & Gotchas

• Keep the linked toggle on while exploring, then unlink to fine-tune a single corner.
• Use the eight-value percent mode only when the element size is known, because percentages track the box dimensions.
• Remember that overflow hidden content still needs clipping if children have their own backgrounds.
• Avoid radii larger than half the element height in standard mode unless you want the pill look.

Frequently Asked Questions