Create custom border radius shapes with live preview. Generate CSS code for rounded corners.
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.
When you set individual values for each corner, the shorthand order is top-left, top-right, bottom-right, bottom-left — going clockwise from the top-left corner. This allows you to create asymmetric shapes where each corner has a different radius, enabling a wide range of creative design possibilities beyond simple rounded rectangles.
Creating custom border-radius shapes with this tool is intuitive and requires no CSS knowledge to get started.
Border radius is one of the most versatile CSS properties, used in virtually every modern web interface.
Consistency is key when using border-radius in a design system. Choose a small set of radius values — for example, 4px for small elements, 8px for medium elements, 16px for large cards, and 50% for circular elements — and apply them consistently throughout your interface. This creates a cohesive visual language that makes your UI feel intentional and well-designed rather than arbitrary.
When creating circular elements, remember that border-radius: 50% only creates a perfect circle when the element is square (equal width and height). If the element is rectangular, 50% will create an ellipse. To create a circle from a non-square element, you need to explicitly set equal width and height, or use a fixed pixel value that is at least half the smaller dimension.
For the blob and organic shape presets, the asymmetric values create shapes that feel natural and hand-drawn. These are popular in modern web design for hero sections, background decorations, and illustration-style UI elements. You can further customize the blob shape by adjusting individual corner values until you find a shape that fits your design aesthetic.
Webutilbox's Border Radius Generator is fast, free, and requires no account or installation. The live preview gives you immediate visual feedback as you adjust the sliders, making it much faster to find the right values than manually editing CSS and refreshing your browser. The automatic CSS simplification ensures the generated code is clean and concise — using a single value when all corners are equal, rather than redundantly listing all four.
The quick preset buttons make it easy to jump to common shapes without starting from scratch, and the individual corner controls give you the precision to create any shape you can imagine. Whether you are a beginner learning CSS or an experienced designer looking for a faster workflow, this tool streamlines the process of creating and experimenting with border-radius values.
Your privacy is our priority. All processing happens entirely in your browser using JavaScript. No files, data, or inputs are ever uploaded to any server. Everything stays on your device, making this tool completely safe to use with sensitive content.