Border Radius
Corner radii or organic blob shapes.
CSS
border-radius: 16px 16px 16px 16px;
About the Border Radius
Shape element corners with four independent radius sliders or generate organic blob shapes using the eight-value elliptical syntax. Both modes output ready-to-paste CSS with a live preview of the shape.
How to use the Border Radius
- Choose "Four corners" for classic rounded rectangles, or "Organic blob" for blob shapes.
- In corners mode, set each corner radius individually and switch the unit between px and %.
- In blob mode, move the sliders to sculpt the shape, or hit randomize to explore.
- Copy the border-radius CSS from the output panel.
Border Radius FAQ
What is the blob syntax?
Border-radius accepts eight values โ four horizontal and four vertical radii separated by a slash โ which lets each corner become an elliptical curve. That is what creates the smooth organic blobs.
Should I use px or %?
Pixels give predictable, fixed rounding. Percentages scale with the element size โ a 50% value on a square turns it into a circle or pill.
Does the CSS work on images and videos?
Yes. Border-radius clips any replaced element, including img, video and canvas, as long as the element itself is not overflow-hidden by a parent.