Control all eight border-radius percentages, preview the shape, and copy the slash-syntax declaration.
This panel stays locked until you review the generated output above. It checks output shape, feature dependencies, motion/fallback concerns and creates a copy-ready component handoff.
Generated component handoff will appear here.
Browser support is checked against the browser running this page, not every browser you support. Treat this as a production preflight, then test the copied CSS in your real component, content, cascade and target browser matrix.
Generated CSS should be judged by the real output, not just the controls.
Copy the output into the actual component, test its layout/content extremes, and review browser support, fallbacks and accessibility before production use.
CSS border-radius supports horizontal and vertical radii separated by a slash. A value that looks circular at one element size can become an ellipse when the box dimensions change. Keep both axes visible when reproducing organic shapes instead of assuming one percentage controls the whole corner.
If adjacent radii would overlap, CSS applies a proportional reduction so the final used radii fit the box. That means entered percentages are not always the exact pixel curves you imagine. Preview the rule on an element with the same width and height as the production component.
A radius string does not encode box size, border width, overflow, background, or clipping behavior. When handing off a nonstandard shape, record the reference dimensions and whether overflow is hidden. Test responsive breakpoints because the same percentages can produce visibly different curvature.
Many-digit percentages can reproduce one screenshot but make later edits difficult. If a simpler set of values looks equivalent at target sizes, prefer the simpler declaration. Keep an exact copy only when matching an authored vector or design token is more important than hand-editability.
WebToolArc