Border radius and shapes

Design rounded corners, circles and organic shapes with border-radius and copy the CSS.

Processed in your browser · Check it yourself Nothing sentData sent: 0 · To other domains: 0Analytics: not present · Ads: not present

Move all corners together

Corners

Top left · Horizontal: 30%Top left · Vertical: 30%

Top right · Horizontal: 70%Top right · Vertical: 30%

Bottom right · Horizontal: 70%Bottom right · Vertical: 70%

Bottom left · Horizontal: 30%Bottom left · Vertical: 70%

CSS

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Tailwind

rounded-[30%_70%_70%_30%/30%_30%_70%_70%]

Import an existing border-radius (in %)Paste the value or the whole declaration.

More in Web design