Create smooth, rounded corners visually
In web design, psychology matters. Sharp corners (`border-radius: 0`) signify seriousness, stability, and rigidity. Rounded corners signify friendliness, safety, and modernity. With the border-radius property, you can control this perception, transforming harsh squares into soft bubbles with a single line of code.
Border-radius is surprisingly deep. It accepts up to 8 values in a single property, separated by a slash!
Set a huge value like `9999px` (or `50vh`). The browser caps the radius at half the element's height, creating perfectly semi-circular ends. This creates a "pill" shape commonly used for "Submit" or "Buy Now" buttons.
Set `width` and `height` to be equal (e.g., 100px) and set `border-radius: 50%`. This is the standard for user profile pictures across the web.
Set three corners to `20px` and one corner (e.g., Bottom-Left) to `0`. This creates a distinctive "speech bubble" tail effect. Great for testimonial sections.
By using 8 values (e.g., `60% 40% 30% 70% / 60% 30% 70% 40%`), you can create "blobs" that look like liquid or pebbles. These are trendy in modern SaaS backgrounds to make the site feel approachable and less "techy". Our tool mostly handles simple arcs, but knowing the potential is key.
Apple's iOS icons use a special shape called a "Squircle" (superhelix). Standard CSS `border-radius` is a simple arc. While you can't create a perfect math-based squircle in vanilla CSS easily, you can approximate it with nested elements or SVG clip-paths for that premium app-like feel. Or use the new `goober` or `houdini` paint API libraries.
Browsers use anti-aliasing to smooth curves. If it looks jagged, ensure you aren't using `overflow: hidden` on a parent with a black background, which sometimes clips the sub-pixels. On high-DPI (Retina) screens, this is rarely an issue anymore.
Yes! It's very cheap to animate. You can make a square morph into a circle on hover (`transition: border-radius 0.3s`). This is a delightful micro-interaction.
The browser smart-clamps it. It will shrink the radius proportionally so that curves from adjacent corners don't overlap. It will never "break" the box, so feel free to use large numbers for full rounding.
Yes. If the image is a background-image, it clips to the border curve. If it's an `` tag inside a `
Pixels are fixed. `10px` is always `10px`. Percentage depends on the box size. `50%` on a rectangle makes an oval. `50%` on a square makes a circle. For responsive design, percentages (like `50%` for circles) are usually safer.
No. Negative border-radius is invalid CSS. To create "concave" corners (bites taken out), you need to use `radial-gradient` masks or `clip-path`.
Set Top-Left and Bottom-Right to `0`, and Top-Right and Bottom-Left to `50%`. This creates a classic lemon/leaf shape often used for eco-friendly branding.