Help & Tutorial

What is Border Radius?

The CSS border-radius property allows you to add rounded corners to elements. But did you know you can create organic, blob-like shapes using 8 values with the slash syntax?

The syntax looks like this:

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y;

Simple Mode

Simple mode uses 4 values that are mirrored across the shape. This is perfect for basic organic shapes like blobs and pills.

How to use:

1. Click and drag any of the 4 handles (top, bottom, left, right)
2. Watch the shape transform in real-time
3. Copy the generated CSS code

Full Control Mode

Full control mode gives you 8 independent handles for maximum creative freedom. You can create asymmetric shapes that aren't possible in simple mode.

Handles explained:

• Top, Bottom, Left, Right: Primary control points
• Top Right, Bottom Right, Left Bottom: Secondary control points for the X-axis

Creating Animations

Our generator includes a powerful animation feature that lets you create smooth morphing animations!

Steps to create an animation:

1. Adjust the shape to your desired starting position
2. Click Record to save the first frame
3. Modify the shape
4. Click Record again
5. Repeat until you have all desired frames
6. Click Preview to see the animation
7. Use Duration and Easing controls to fine-tune
8. Click Copy to get the CSS code

Using Presets

Don't want to create from scratch? Use our built-in presets:

• Blob Pulse: A pulsing blob effect
• Breathing: A calm breathing animation
• Water Drop: Droplet falling animation
• Leaf: A swaying leaf effect
• Organic: Smooth organic morphing
• Wobbly: A fun wobbly circle

Select a preset from the dropdown, and it will automatically load all frames and play the animation.

Exporting Code

Copy the generated CSS code with one click! The code includes:

• For static shapes: The border-radius property
• For animations: The complete @keyframes rule and animation property

Example animation output:

@keyframes morph {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
}

.your-class {
  animation: morph 3s infinite alternate ease-in-out;
}

Example Shapes

Here are some examples of shapes you can create:

Need More Help?

If you have questions or feedback, please contact us. We'd love to hear how you're using the generator!