Border Radius Generator

Few CSS properties have as much impact on the feel of a user interface as border-radius. Straight, sharp, 90-degree corners read as formal, rigid, and sometimes aggressive — they are the default of the web, but they rarely represent a deliberate design choice. Rounded corners, on the other hand, feel softer, more approachable, and more human. There is a reason every major operating system, from iOS to Android to Windows, has trended toward rounded rectangles over the past decade: the human eye processes curves as more natural and less cognitively demanding than sharp angles. A 4px radius on a button is barely noticeable but subconsciously signals that the element is interactive; a 16px radius on a card gives it the friendly, pillowy look of modern SaaS design; a 50% border-radius on a square creates a circle — the foundation of avatar components. The CSS border-radius property is actually a shorthand for four longhand properties: `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, and `border-bottom-left-radius`. The shorthand accepts one, two, three, or four values following the same clockwise order as margin and padding (top-left → top-right → bottom-right → bottom-left). A single value like `border-radius: 12px` makes all four corners identical. Two values follow the diagonal pattern: first value for top-left and bottom-right, second value for top-right and bottom-left. Three values set top-left, then top-right and bottom-left together, then bottom-right. Four values set each corner independently. What most developers do not realise is that border-radius also supports an eight-value syntax using the slash separator, where the first four values set the horizontal radius and the second four set the vertical radius, enabling elliptical corners. A value like `border-radius: 50px / 25px` gives corners that are twice as wide as they are tall, creating an organic, leaf-like shape rather than a perfect quarter-circle. This tool sticks to the uniform (circular arc) radius for each corner to keep the interface approachable, but the underlying CSS mechanism is far richer than most people assume. This tool exists because getting the right corner radius by editing numbers in a text editor and refreshing the page is a slow, imprecise process. Designers often hand off specifications like "cards should have 8px rounded corners" but the reality is that the ideal radius depends on the element's size, its neighbours, the font size, and the overall design language. A 12px radius on a 48px-tall button feels very different from a 12px radius on a 300px-wide card. This generator lets you see the result immediately and experiment freely. The three preset buttons cover the most common use cases. **Pill** sets the radius to a large value (9999px or 50%) so that a rectangular element becomes fully rounded on the short sides — the classic pill-button shape used for tags, badges, and call-to-action buttons. **Rounded** sets all four corners to a moderate 12px, the default rounded-card style prevalent in Tailwind-based designs. **None** resets to 0px, restoring sharp corners. These presets are starting points, not final answers — you can always tweak individual corners after applying a preset. The link-corners toggle is a small feature with outsized usefulness. When linked, dragging any corner slider updates all four corners to the same value — the fastest way to find the right uniform radius. When unlinked, each corner is independent, enabling asymmetrical shapes like a calling card with one rounded edge (common in branding), or a tab that is rounded only at the top, or a chat bubble that is sharp on one side. The pair of unit selectors (px and %) next to each corner gives you the choice between absolute pixel rounding and percentage-based rounding. Pixel values produce the same physical curve on every screen, while percentage values scale with the element's dimensions — `border-radius: 50%` on a square always produces a circle regardless of the square's size. This is particularly useful for responsive designs where the element dimensions change at different breakpoints but you want the rounding to remain proportional. One subtle interaction to be aware of: if the combined radii of two adjacent corners exceed the element's width or height, the browser automatically scales both radii down proportionally to prevent overlap. This is called the corner-overlap algorithm and is defined in the CSS Backgrounds and Borders Module Level 3 specification. That means a 200px radius on a 100px-wide element will not actually produce a massive curve — the browser calculates the reduction factor and applies it to all corners, ensuring the shape remains valid. This tool does not simulate that reduction in the preview (the preview box is large enough that overlap is rare), but the CSS output you copy will behave according to the browser's algorithm when applied to your actual element.