Border Radius Generator
Generate CSS border-radius values visually with our free border radius generator. Drag 8 independent corner handles to create circles, pills, blobs, and custom rounded shapes — get copy-ready CSS shorthand and longhand output instantly. All processing runs locally in your browser. No signup required.
Drag the 8 sliders to set independent horizontal and vertical radii for each corner. Use presets for common shapes or link all corners to edit them together. The CSS output updates in real time — copy the shorthand or longhand CSS with one click.
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
border-top-left-radius: 30% 30%; border-top-right-radius: 70% 30%; border-bottom-right-radius: 30% 70%; border-bottom-left-radius: 70% 70%;
.element {
border-radius: 30% 70% 30% 70% / 30% 30% 70% 70%;
}--radius-tl: 30% 30%; --radius-tr: 70% 30%; --radius-br: 30% 70%; --radius-bl: 70% 70%;
Why Use Our Border Radius Generator?
Instant CSS Border Radius Generation
Generate CSS border-radius values visually and get copy-ready CSS output in real time. Our border radius generator updates the preview and CSS on every slider move — no button press needed, no signup required.
Secure Border Radius Generator Online
All CSS generation happens locally in your browser using JavaScript. Your design configurations never leave your device, ensuring 100% privacy when you use our border radius generator online.
Border Radius Generator Online - No Installation
Use our border radius generator directly in your browser with no downloads, plugins, or Node.js required. Generate CSS border-radius values from any device, any time.
8-Point Control & 10 Shape Presets
Set independent horizontal and vertical radii for all 4 corners (8 values total) to create circles, pills, blobs, leaves, and organic shapes. Choose from 10 built-in presets or link all corners to edit them together. Outputs shorthand, longhand, and CSS variable formats.
Common Use Cases for Border Radius Generator
UI Component Design
Frontend developers use our border radius generator to design rounded corners for buttons, cards, modals, and input fields. Drag the handles to find the perfect radius and copy the CSS directly into your stylesheet.
Design System Tokens
Design system engineers use our border radius generator to define consistent border-radius tokens. The CSS variable output maps directly to design token files for Tailwind, Figma tokens, and Style Dictionary.
Blob & Organic Shape Creation
Designers use our border radius generator to create organic blob shapes for hero sections, avatars, and decorative elements. The 8-point interface enables fully asymmetric shapes that would be impossible to calculate manually.
App Icon & Avatar Frames
Mobile developers use our border radius generator to create the squircle shape used for iOS app icons and Android adaptive icons. The Squircle preset (30%) produces the correct rounded square shape instantly.
Landing Page Visual Elements
Marketing designers use our border radius generator to create pill-shaped CTAs, rounded image frames, and decorative shapes for landing pages. The Pill and Blob presets are especially popular for modern SaaS landing pages.
Learning CSS Border Radius
Developers learning CSS use our border radius generator to understand how the 8-value border-radius syntax works. The live preview makes it immediately clear how each horizontal and vertical radius value affects the shape.
Understanding CSS border-radius
What is CSS border-radius?
The CSS border-radius property rounds the corners of an element's border box. It accepts 1 to 4 values for the four corners (top-left, top-right, bottom-right, bottom-left) and optionally a second set of values after a slash (/) for the vertical radii. This 8-value syntax enables elliptical corners where the horizontal and vertical radii differ — making it possible to create circles, pills, organic blob shapes, and leaf forms. Our border radius generator exposes all 8 values through individual sliders so you can create any shape without memorizing the syntax.
How Our Border Radius Generator Works
- 1. Choose a Preset or Start from Scratch: Click any of the 10 shape presets (Sharp, Rounded, Card, Circle, Pill, Squircle, Blob, Leaf, Egg, Diamond) to instantly apply a starting shape. Or start from the default asymmetric shape and adjust the sliders manually.
- 2. Drag the 8 Corner Handles: Each corner has two sliders — horizontal (X) and vertical (Y) radius. Drag the sliders or type values directly. Toggle "Link all corners" to edit all 8 values simultaneously. Switch between px and % units at any time.
- 3. Copy the Generated CSS: The border radius generator outputs four CSS formats in real time: shorthand (border-radius), longhand (individual corner properties), full CSS rule with selector, and CSS variable declarations. Click any Copy button to copy the format you need.
CSS border-radius Output Formats
- Shorthand (border-radius): When all corners are equal, outputs border-radius: 16px. When corners differ but X=Y, outputs the 4-value form. When X≠Y, outputs the full 8-value form with a slash separator.
- Longhand (individual properties): Outputs border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius with both X and Y values for maximum browser compatibility.
- Full CSS Rule: Outputs the complete .element { border-radius: ... } rule ready to paste into your stylesheet or component styles.
- CSS Variables: Outputs --radius-tl, --radius-tr, --radius-br, --radius-bl custom property declarations for use in design token systems and CSS variable-based design systems.
Understanding the 8-Value border-radius Syntax
The full CSS border-radius syntax is: `border-radius: [tl-x] [tr-x] [br-x] [bl-x] / [tl-y] [tr-y] [br-y] [bl-y]`. The values before the slash set the horizontal radii (how far the curve extends horizontally from each corner). The values after the slash set the vertical radii (how far the curve extends vertically). When horizontal and vertical radii are equal, the corner is a circular arc. When they differ, the corner is an elliptical arc. Setting all 8 values independently is what enables organic blob shapes — the border radius generator makes this visual and intuitive.
Related Tools
JSON to YAML
Convert JSON to YAML format instantly - Free online JSON to YAML converter
XML to YAML
Convert XML to YAML format for configuration migration - Free online XML to YAML converter
CSV to YAML
Convert CSV spreadsheet data to YAML format - Free online CSV to YAML converter
TSV to YAML
Convert TSV tab-separated data to YAML format - Free online TSV to YAML converter
Frequently Asked Questions About Border Radius Generator
What is a border radius generator?
A border radius generator is a visual tool that lets you set CSS border-radius values by dragging handles on a preview shape and outputs the copy-ready CSS. Our border radius generator supports all 8 individual corner values for fully asymmetric shapes — no signup required.
What CSS properties does the border radius generator output?
The border radius generator outputs the border-radius shorthand when all corners are equal, or the full 8-value syntax when corners differ. It also outputs individual corner properties (border-top-left-radius etc.) and CSS variable declarations for design token workflows.
What is the difference between the 4-value and 8-value border-radius syntax?
The 4-value syntax sets the same horizontal and vertical radius for each corner. The 8-value syntax (with a slash separator) sets independent horizontal and vertical radii for each corner, enabling elliptical and organic blob shapes.
Is my CSS data safe when using this border radius generator?
Yes. All CSS generation happens locally in your browser using JavaScript. No data is sent to any server, ensuring complete privacy for your design work.
Is this border radius generator completely free to use?
Yes! Our border radius generator is 100% free with no signup, no account, and no usage limits. Generate CSS border-radius values for any project directly in your browser.
Can I create blob and organic shapes with the border radius generator?
Yes. By setting different horizontal and vertical radii for each corner using the 8-point handle interface, you can create organic blob shapes, pill shapes, leaf shapes, and other asymmetric rounded forms. The border radius generator outputs the full 8-value CSS syntax for these shapes.
What are the preset shapes in the border radius generator?
The border radius generator includes 10 presets: Sharp (0px), Rounded (8px), Card (16px), Circle (50%), Pill (9999px), Squircle (30%), Blob (asymmetric organic), Leaf (asymmetric), Egg (elliptical), and Diamond. Click any preset to instantly apply it.
Can I copy the border-radius CSS directly from the generator?
Yes. The border radius generator shows four CSS formats — shorthand, longhand, full rule, and CSS variables — each with a one-click copy button. The CSS updates in real time as you drag the sliders.
Does the border radius generator support percentage values?
Yes. Switch between px and % units using the unit toggle. Percentage values are relative to the element's dimensions — 50% creates a circle for square elements and an ellipse for rectangular ones.