Create rounded corners, pills, and 8-point organic blob shapes with real-time visual preview and instant CSS code export.
The CSS Border Radius Generator lets you visually design and customize border-radius values for HTML elements with a live preview that updates in real time. Create perfect circles, smooth pill shapes, rounded rectangles, organic blobs, and complex asymmetric shapes — then copy the generated CSS code directly into your project with a single click.
The CSS border-radius property rounds the corners of an element's border box. It is one of the most commonly used CSS properties in modern web design, enabling designers to move away from the sharp, boxy look of early web interfaces toward the softer, more approachable aesthetic that dominates contemporary UI design. The property can be applied to any block-level or inline-block element, including divs, buttons, images, inputs, and cards.
The border-radius property accepts a wide range of values. You can use pixel values for fixed-size rounding (e.g., border-radius: 8px), percentage values for proportional rounding that scales with the element's size (e.g., border-radius: 50% creates a circle from a square element), and em or rem values for rounding that scales with the font size. You can also use the slash syntax to create elliptical corners, where the horizontal and vertical radii of each corner are different.
Creating custom border-radius shapes with this tool is intuitive and requires no CSS knowledge to get started. Use the All Corners slider for uniform rounding, or adjust top-left, top-right, bottom-right, and bottom-left sliders independently for asymmetric organic shapes. Copy the generated CSS snippet directly into your stylesheet.
Border radius is one of the most versatile CSS properties, used in virtually every modern web interface. Standard card containers typically use 8px to 16px radii, buttons use 6px to 8px or pill shapes (9999px), and avatars use 50% for circular framing.
Consistency is key when using border-radius in a design system. Choose a small set of radius values and apply them consistently throughout your interface. Asymmetric blob presets add a natural, organic feel to hero background accents and illustration frames.
CSS is generated locally. No data leaves your browser.
border-radius rounds the corners of an element's border box. A value of 50% on a square element creates a perfect circle. You can set all four corners at once or control each corner independently for asymmetric shapes.
Shorthand (border-radius: 10px) sets all four corners equally. Longhand properties (border-top-left-radius, border-top-right-radius, etc.) set each corner individually.
You can use px (fixed pixels), % (relative to element size), em (relative to font size), or rem (relative to root font size).
Yes. Set border-radius to a large value like 9999px or 50px on a button.
Border-radius appearance depends on the element's dimensions.
Useful Chrome & Edge extensions built by Webutilbox to save you time.
Subscribe to get updates on new developer utilities & web tools. 100% free, zero spam.