Css Border Radius — 100% Client-Side Private Tool

100% Client-Side Privacy Guaranteed

All 8-value mathematical coordinates, keyframes, and organic blob geometry are computed locally in your browser. Zero telemetry or server calls.

Syntax:tl tr br bl / tl tr br bl

Interactive Visual Canvas

Ratio:

Guides

Animate

TLTRBRBL

ORGANIC SHAPE

8-Value CSS

60%

30%

70%

60%

Themes:

Top-Left Corner60% / 60%

Horizontal (X):

Vertical (Y):

Top-Right Corner40% / 30%

Horizontal (X):

Vertical (Y):

Bottom-Right Corner30% / 70%

Horizontal (X):

Vertical (Y):

Bottom-Left Corner70% / 40%

Horizontal (X):

Vertical (Y):

Export Ready-to-Use Code

Copy CSS property, full ruleset, Tailwind class, or keyframes animation

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

Understanding the 8-Value CSS Border-Radius Syntax

The Slash ( / ) Notation

In standard CSS, values before the slash / represent the horizontal radii (Top-Left, Top-Right, Bottom-Right, Bottom-Left), while values after the slash define the corresponding vertical radii.

tl-h tr-h br-h bl-h / tl-v tr-v br-v bl-v

Tangential Continuity

When the sum of the horizontal radii on an edge equals 100% (e.g. tl-h + tr-h = 100%) and vertical radii also sum to 100%, the curves meet at exact right angles with zero straight flat segments, creating a naturally fluid organic blob.

GPU-Accelerated Morphing

CSS border-radius transitions and keyframe animations interpolate smoothly in modern rendering engines, delivering 60fps / 120fps fluid animations without layout reflow penalty.

Frequently Asked Questions (FAQ)

How do I use this in Tailwind CSS?

Tailwind CSS supports arbitrary values with brackets. In Tailwind, spaces inside values must be replaced by underscores, as in: rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]. Our export tab provides the exact copy-paste class!

Is this compatible with all web browsers?

Yes! The 8-value elliptical border-radius syntax is part of the W3C CSS Backgrounds and Borders Module Level 3 specification and is fully supported in 100% of modern browsers (Chrome, Edge, Safari, Firefox, iOS Safari, Android).