The CSS border-radius property is deceptively simple in its most common use (rounding corners by a fixed amount) but surprisingly powerful in its extended form (independently controlling the horizontal and vertical radius of each corner to create organic, asymmetric shapes).
The Simple Form
A single value like border-radius: 8px rounds all four corners equally. A percentage like border-radius: 50% creates a circle (assuming the element is square) or an ellipse (assuming the element is not square). A large fixed value like border-radius: 9999px creates a pill shape where the radius clips at the element's minimum dimension.
The shorthand syntax follows the same top-right-bottom-left pattern as padding and margin. Two values set top-bottom and right-left. Three values set top, right-left, and bottom.
The Extended Form with Horizontal and Vertical Radii
Each corner actually has two radii: a horizontal radius and a vertical radius. By default they are equal, which produces a circular arc. Setting them independently creates an elliptical arc.
The slash syntax allows independent control: border-radius: 50px 20px / 20px 50px sets the top-left horizontal radius to 50px and vertical radius to 20px, and the top-right horizontal to 20px and vertical to 50px. Extending this to all eight values (four corners, two radii each) allows completely arbitrary rounded shapes.
Blob Shapes
Organic blob shapes are created by specifying large, asymmetric border-radius values for each corner independently. A value like border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% creates an irregular curved shape that resembles a blob or organic form. These shapes are popular in modern landing page hero sections as decorative background elements.
Using the DevHexLab Border Radius Generator
Open the tool at /tools/css/border-radius-generator. Drag the handles on each corner of the preview shape to set the horizontal and vertical radii independently. The live preview shows the result. Copy the CSS property.
Frequently Asked Questions
Does border-radius clip the element's content?
Yes. Content that extends beyond the rounded corners is clipped. This is useful for creating circular avatars: apply border-radius: 50% to an img element to clip it into a circle.
Can I animate border-radius?
Yes. Border-radius values can be transitioned and animated with CSS. Animating between two blob shapes creates an organic morphing effect.
What is the squircle?
A squircle is a shape that is mathematically between a square and a circle. Apple uses squircle shapes for app icons. They can be approximated using border-radius: 30% / 30% with careful corner tuning, though exact squircles require SVG or clip-path.
Generate border-radius values visually and get exact CSS.