CSS Border Radius Generator
Design smooth card corners, asymmetric modern badges, and organic morphing blob shapes with 8-value CSS3 border-radius syntax.
Border Radius Syntax Demystified
Controls the radius of top-left, top-right, bottom-right, and bottom-left using pixel or percentage measurements.
Using the slash notation (a b c d / e f g h), you specify independent horizontal and vertical elliptical radii for each corner.
By varying the horizontal and vertical radii, elements deform into smooth, organic shapes popular in modern hero sections.
Frequently Asked Questions
What does the slash ( / ) mean in border-radius?
The values before the slash define horizontal radii, while the values after the slash define vertical radii. If no slash is present, horizontal and vertical radii are equal.
Is 8-point border-radius supported by all modern browsers?
Yes, elliptical border radii have been standard in CSS3 and are supported in Chrome, Safari, Firefox, Edge, and mobile browsers since 2011.