Adjust each corner individually, elliptical, uniform or blob, with copyable CSS.
In its simplest form, border-radius applies the same radius to all four corners. But the spec allows controlling each corner individually and even setting horizontal and vertical radii separated by a slash, creating elliptical shapes. This makes it possible to build anything from lightly rounded cards to organic blob shapes. The 50% value is the most well-known, it turns any square element into a perfect circle and a rectangle into an ellipse. The four-value shorthand follows clockwise order: top-left, top-right, bottom-right, bottom-left, consistent with the general box model convention. This tool previews the shape in real time, collapses the output to the shortest possible form and lets you copy the ready declaration.
In short form, border-radius accepts one to four values in clockwise order: top-left, top-right, bottom-right, bottom-left. With one value all corners are equal; with two, the first applies to top-left and bottom-right and the second to the other pair; with four, each corner gets its own. This tool automatically collapses to the shortest possible form, if all four corners are equal, it writes just one number.
The full form uses the slash to separate horizontal and vertical radii: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, up to eight values. Before the slash go each corner's horizontal radii; after the slash, the vertical ones. When horizontal and vertical differ, the corner becomes an elliptical arc instead of a circular one, which is precisely what enables organic shapes.
A soft card: border-radius: 16px; rounds all four corners equally, that's the Card preset. A pill (a button fully rounded at the ends) uses a very high value, like border-radius: 9999px;, which caps at half the shorter side and creates the semicircular ends regardless of the button's width.
An organic blob uses elliptical notation with alternating values: border-radius: 30% 70% 30% 70% / 70% 30% 70% 30%; gives each corner very different horizontal and vertical radii, producing that irregular, fluid shape. Changing the percentages reshapes the blob without leaving a single CSS property.
Rounded corners show up in cards, buttons, avatars, modals and chat bubbles, and the same value can be animated with transition: border-radius to morph one shape into another smoothly. To clip an image or content at the corners, combine it with overflow: hidden on the container, or inner content will spill past the rounded border.
The unit choice changes responsive behavior: px is absolute and keeps the radius fixed at any size; % scales along with the element, ideal for circles and shapes that must keep their proportion. For circular avatars that change size, 50% is more robust than a fixed px.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/css-border-radius-generator"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="CSS Border Radius Generator"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
It's the property that rounds the corners of an element. It accepts values in px, %, rem or any CSS unit, and can control all four corners independently. In elliptical notation each corner can even have separate horizontal and vertical radii, reaching up to eight values.
border-radius: 12px;CSS is generated locally in your browser.