Generate 8-value organic border radius
Input
30% 70% 70% 30% / 30% 30% 70% 70%Example output
/* CSS Border Radius */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;CSS Border Radius & Corner Shaper
Color & CSS100% Client-SideReady
TEXT
0 lines0 chars
0 B / 9.8 KB
Preview12px
Preview
12pxRead-only
0 lines0 chars
0 B
About this tool, examples & FAQ
Sculpt uniform, per-corner, or 8-value organic elliptical CSS border-radius shapes with real-time visual output and Tailwind CSS utilities.
Key facts
| CSS specification | W3C CSS Backgrounds and Borders Module Level 3 (§5 Corner Radii) |
|---|---|
| Supported corner configurations | Uniform 1-value, 4-corner per-side, and full 8-value elliptical slash syntax |
| Tailwind CSS integration | Maps standard radii to rounded-* tokens and complex radii to rounded-[...] |
| Max input size | 10 KB |
| Execution deadline | 1 s |
| Processing location | Browser-only: corner math and syntax generation runs locally in a Web Worker |
How to use
- Enter a single radius for uniform rounding or configure individual corners.
- Toggle 'Elliptical' to set separate horizontal and vertical radii for organic blob shapes.
- Select your measurement unit: pixels (px), percentage (%), or rems (rem).
- Choose export format: CSS Declarations, Tailwind CSS, or Radius Model (JSON).
- Copy generated border-radius shorthand properties into your design system.
Example
Edge cases
8-value elliptical syntax parsing
The slash ('/') character separates horizontal radii from vertical radii, allowing distinct curvature along each geometric axis.
Overlapping corner radii reduction
When the sum of two adjacent corner radii exceeds the element border-box size, browsers proportionally reduce all radii per W3C algorithm.
50% vs 9999px pill shapes
50% forms an ellipse on rectangular elements; 9999px caps at half the minor axis, producing a consistent pill shape without distortion.
How it works
- Parses incoming radius values across 1-token, 2-token, 4-token, or 8-token formats.
- Normalizes horizontal and vertical radii for Top-Left, Top-Right, Bottom-Right, and Bottom-Left corners.
- Generates minimal shorthand syntax and individual corner longhand properties.
- Maps standard px metrics to Tailwind CSS rounded utility tokens.
Related workflows
CSS Box Shadow & Drop Shadow Generator
Design, inspect, and export multi-layer CSS box-shadow and drop-shadow declarations with blur, spread, inset, and Tailwind CSS arbitrary classes.
CSS Gradient Generator & Inspector
Create, inspect, and export linear, radial, and conic CSS gradients with multi-stop color controls, angle presets, and Tailwind CSS outputs.
CSS Unit Converter (PX, REM, EM, %, PT)
Convert CSS typography and layout units between pixels (px), rem, em, points (pt), and percent (%) with configurable root and parent font sizes.
Frequently asked questions
How does the 8-value border-radius syntax work?
Values before the slash ('/') set horizontal radii for the four corners in clockwise order (TL, TR, BR, BL). Values after the slash set the vertical radii for those same corners.
Should I use percentages or pixels for border-radius?
Pixels provide fixed, predictable corner curves regardless of container dimensions. Percentages scale dynamically with element width and height, suitable for circular avatars and responsive capsules.
Are my designs processed on any server?
No. All radius calculation and syntax generation executes in your local browser worker.
References
- W3C CSS Backgrounds and Borders Module Level 3: The border-radius property — Official standard specification for CSS corner radius shorthands and elliptical syntax