Advertisement
Create CSS border-radius visually. Set each corner separately, use elliptical corners, and copy CSS, Tailwind or React code for pills, arches and blobs.
Round each corner, or shape pills, arches and blobs
Drag a handle on the shape, or use the controls below.
Start from a common shape, then fine-tune it.
Ready to copy into your project.
Adds width, height and background to the snippet.
Design rounded corners with a live preview. Link all four corners or set each one on its own, switch between pixels and percentages, add separate vertical radii for elliptical shapes and start from presets such as pill, arch, leaf and blob. The shortest valid border-radius is generated for you, with CSS, Tailwind and React output.
What you get with CSS Border Radius Generator.
Link all corners, or set each of the four independently.
Use separate horizontal and vertical radii for organic blobs, arches and eggs.
Output collapses to the shortest border-radius shorthand, in px or %.
Copy the result as a CSS rule, a Tailwind class or a React style object.
Advertisement
Common questions about CSS Border Radius Generator.
Use border-radius: 9999px, or 50% on a square for a circle. In this tool the Pill preset sets 50% on every corner.
The values before the slash are horizontal radii and the values after it are vertical radii. Different values on each side give elliptical corners, which is how CSS blobs are made.
Use px for a consistent corner size regardless of the element's size. Use % when the shape should scale with the element, such as circles, pills and blobs.
Browsers scale radii down when two neighbouring corners would overlap, so the corners can never be bigger than the element allows.
Choose the Tailwind output. It produces an arbitrary value class such as rounded-[30%_70%_70%_30%/30%_30%_70%_70%] that you can paste into your markup.
Advertisement
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.