Use the free Border Radius Previewer below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
From Square Corners to Organic Blobs
Border radius is the CSS property that rounds the corners of a box. With one value you get a simple rounded card. With eight values, four horizontal radii and four vertical radii, you get organic blob shapes: the soft, blobby forms used in modern hero sections, avatars and decorative backgrounds. The tool above gives you eight sliders, one per value, and shows the shape live.
The syntax looks odd at first. The four numbers before the slash are the horizontal radii of the top-left, top-right, bottom-right and bottom-left corners. The four numbers after the slash are the vertical radii of the same corners in the same order. When a horizontal and vertical radius differ, that corner stretches into an ellipse instead of a circle, and the box starts to look organic.
Start With a Blob, Then Refine It
The default shape in the tool is already a gentle blob: all eight values sit between 40 and 60 percent. From there, move one slider at a time and watch which corner changes. Pushing one corner high and its neighbour low creates an asymmetric, hand-drawn feel. Pushing all values toward 50 percent returns the shape toward a circle.
The Random shape button is a fast way to explore. Each press rolls a new set of values between 30 and 80 percent. When a random shape catches your eye, refine it by hand: nudge the most extreme corner back toward the others until the shape feels intentional rather than accidental. Randomness finds ideas; editing makes them designs.
Blobs in Real Layouts
Blobs work best as decoration, not as containers for important text. A blob behind a hero image, a blob avatar for a profile photo, or a blob badge on a landing page all add warmth and modernity. Text inside a blob is risky, because the curved edges cut into the readable area and long lines collide with the shape.
If you do place content inside a rounded shape, keep it short and centred: a single word, an icon or a small badge. For cards that hold paragraphs, use a modest uniform radius, like 12 to 24 pixels, instead of a blob. Readers should never have to fight the container to read the content.
Copy the CSS, Keep It Responsive
Press Copy CSS and paste the rule into your stylesheet. Percentage radii scale with the element, so a blob that looks good at 280 pixels keeps its character at 400 pixels. Fixed pixel radii do not scale the same way, which is why blobs use percentages. Test the shape at phone width too: a blob that looks elegant large can look cramped small, and a slightly simpler set of values often works better there.
One caution: very extreme blobs can clip content and confuse screen readers if they hide text behind curves. Keep decorative blobs empty or behind content, never wrapped tightly around text. And if the shape carries meaning, like a status badge, do not rely on shape alone: add a label or colour that communicates the same information.
Ideas Beyond Blobs
The same eight sliders make more than blobs. Set the top two corners high and the bottom two to zero for an arch shape, useful for image frames. Set one corner to zero and the rest high for a speech-bubble feel. Set all eight equal for a circle or a pill. Once you understand the slash syntax, a whole family of shapes opens up from one property, and the tool is the fastest way to learn it by playing.
Finally, keep a small library of shapes you like. Note the eight values for each keeper, just as you would note a colour palette, and reuse them across a project. A consistent set of blob shapes becomes part of a brand language, while a new random shape on every page just looks unsettled.
Related tools
- Vista Previa de Bordes Redondeados (Spanish version)
- Neon Text Effect Maker
- Outline Text Effect Maker
Pingback: Signature Pad Maker - Draw and Download Your Signature