Corners and shapes
border-radius, blobs and clip-path
Editor
Drag the eight handles along the edges, or type the values. Each corner has a horizontal and a vertical radius.
Presets
Morphing
Code
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
About this tool
This editor creates two kinds of CSS shapes. The border-radius tab sets all eight radii of a box, one horizontal and one vertical per corner, to get rounded corners, a drop, a leaf or an organic blob. You drag eight handles along the edges, type the values in percent, or paste an existing value. An option animates the box between a start shape and an end shape.
The clip-path tab cuts an element into a polygon, a circle, an ellipse or an inset rectangle with rounded corners. Polygons take 3 to 40 vertices that you move with the mouse or the keyboard, and eleven presets include a star, an arrow and a message bubble. The preview can use a solid color or an image of your choice, and the CSS copies in one click.
How to use it
- Pick the "border-radius" or "clip-path" tab.
- For border-radius, start from one of the "Presets" or click "Random blob", then adjust the handles or the "Horizontal radii" and "Vertical radii".
- For clip-path, choose the "Shape type", then move the "Vertices" or adjust the sliders.
- Check "Animate between two shapes" if you want motion and set the "Cycle duration".
- Click "Copy CSS" and paste the code into your stylesheet.
Frequently asked questions
What does the border-radius syntax with a slash mean?
The four values before the slash are the horizontal radii of the corners, in the order top left, top right, bottom right, bottom left; the four after it are the vertical radii. Different values produce elliptical corners, which is how blob shapes are made.
What code does the shape animation produce?
A @keyframes morph block that goes from the start shape to the end shape and back, an infinite animation rule using the duration you chose from 1 to 30 seconds, and a prefers-reduced-motion media query that turns the animation off for people who limit motion.
How do I add or remove a polygon vertex?
Click an edge of the polygon to add a vertex at that spot, or use "Add a vertex". With the keyboard, Tab selects a vertex, the arrow keys move it (Shift for bigger steps) and Delete removes it. A polygon always keeps at least 3 vertices.
Is the preview image uploaded anywhere?
No. The image you pick for the clip-path preview is displayed from a local address created by your browser. It is neither uploaded nor stored, and it does not appear in the generated CSS, which only contains the clip-path property.