CSS Border Radius Generator with Live Preview
Round corners visually and copy the CSS. Per-corner control, elliptical radii, px or %, presets from pill to blob, with a live preview.
Loading CSS Border Radius Generator with Live Preview… If nothing happens, please enable JavaScript.
The CSS border-radius property rounds the corners of an element, and it is one of the few properties that changes the whole character of an interface. Buttons feel friendlier with 8 pixels of rounding, cards look modern at 12 to 16, avatars become circles at 50 percent, and tags turn into pills once the radius passes half the height. This generator lets you dial in those values with sliders and number fields while watching the result immediately, then copy a single line of CSS to paste into your stylesheet. No sign-up, no export step, and nothing leaves your browser.
Frequently asked questions
How do I make a circle with border-radius?
What is the slash in a border-radius value?
Should I use pixels or percentages?
In what order do the four values apply?
Why does my radius look smaller than the value I set?
Does border-radius clip the content inside the element?
Is the CSS compatible with older browsers?
Can I use this for images and buttons?
Is anything uploaded?
About CSS Border Radius Generator with Live Preview
Border radius is more capable than most people use it for. Each of the four corners can be set independently, which is how you get leaf shapes, speech bubbles, ticket stubs and asymmetric cards. Each corner can also be elliptical rather than circular, meaning it takes a horizontal radius and a vertical radius, written with a slash: border-radius: 60px 20px 60px 20px / 30px 60px 30px 60px. That slash syntax is what the "Elliptical corners" switch here produces, and it is the trick behind the organic blob shapes that show up in modern landing pages. The "Blob" preset generates a random set of eight values so you can shuffle until something looks right.
The choice between pixels and percentages matters more than it first appears. A pixel radius is absolute: 20px stays 20px whether the element is a small badge or a wide hero panel. A percentage radius is relative to the element's own dimensions, horizontally to its width and vertically to its height, so 50% always produces a perfect ellipse and a shape defined in percentages keeps its proportions when the element is resized. This is why avatars are usually 50% while buttons are usually a fixed pixel value. Use the unit toggle to see the difference: resize the preview box with the width and height sliders and watch how a percentage shape flexes while a pixel shape does not.
Everything renders in your browser using the same CSS engine that will render your site, so the preview is not an approximation, it is the real thing. Use the checkerboard preview to judge shapes against transparency, switch on the image background to see how a photo gets clipped by the corners, and copy the CSS when it looks right. If you enter a radius larger than the element can accommodate, browsers scale all the radii down proportionally rather than overlapping them, which is why a very large pixel value on a short box produces a clean pill instead of a broken shape.
The Long Fight Over Rounded Corners
Rounded corners were a design obsession long before CSS could produce them. In 1981, while building the first Macintosh, Bill Atkinson wrote fast routines for drawing circles and ovals but was reluctant to add rounded rectangles because the maths seemed too slow. Steve Jobs walked him around the block pointing out rounded rectangles on street signs and car windows until Atkinson relented; the resulting RoundRects routine shaped the look of the Mac interface and, by extension, of graphical computing.
On the web, the wait was long. Through the early 2000s a rounded box meant slicing a design into corner images in Photoshop and stitching them back together with nested div elements, an approach so common it had a name: the sliding doors technique. Some developers generated corners with tables, others with JavaScript libraries that drew them at runtime. border-radius was proposed for CSS3 and shipped behind vendor prefixes, first as -moz-border-radius in Firefox in 2005 and then -webkit-border-radius in Safari, so real-world stylesheets carried three copies of every corner declaration for years. Internet Explorer only supported it in version 9, released in 2011, which is the point at which most teams finally deleted their corner images.
The visual argument never really ended, it just moved. Apple's own icon shapes drifted from plain circular corners to a squircle, a superellipse whose curvature changes continuously rather than snapping from straight edge to arc, because the join looks smoother to the eye. Designers have chased that effect in CSS ever since, using elliptical radii, SVG paths and now the experimental corner-shape property to approximate it. Meanwhile the pendulum of taste keeps swinging: the flat design era of the mid-2010s trimmed radii back to almost nothing, and the current preference for soft, friendly interfaces has pushed them out again. The property is a single line of CSS, but which number you put in it has been argued over for forty years.