Generate custom border-radius CSS for your elements with ease. Supports both simple 4 values and advanced 8 values syntax for creating unique shapes.
Border-radius rounds the corners of elements. Set border-radius: 10px and you get 10px curves on all four corners. Works on anything—divs, images, buttons, inputs. The property creates an invisible curve that clips the element.
You'll see it everywhere in modern design. Cards with subtle rounding, pill-shaped buttons, circular avatars, rounded modals. Small radiuses (4-8px) look polished. Larger ones (16-24px) feel friendly and approachable.
Shorthand works like margin/padding: border-radius: 10px 20px 30px 40px. That's top-left, top-right, bottom-right, bottom-left (clockwise from top-left).
I use this for asymmetric designs—maybe rounded on top, sharp on bottom. border-radius: 20px 20px 0 0 rounds just the top corners, perfect for card headers.
Yep. Use the slash notation: border-radius: 50px / 25px. First value is horizontal radius, second is vertical. Creates oval corners instead of circular ones. Works per corner too: border-top-left-radius: 50px 25px.
Great for organic, flowing designs that aren't perfectly circular. More commonly, I'll use it for subtle variations—making rounded rectangles feel more natural with slightly different horizontal and vertical curves.
Pixels give you exact, fixed curves: border-radius: 10px always makes a 10px radius no matter the element size. Predictable and precise.
Percentages are relative to the element's dimensions: border-radius: 50% on a square makes a perfect circle. On a rectangle, it makes an ellipse that fits the shape. The radius scales with the element.
Use pixels when you want consistent rounding across different-sized elements—like all buttons have 8px corners.
Use percentages for shapes that need to adapt—like circular profile pictures that could be any size. border-radius: 50% is the classic circle trick, works on any square element.
Make your element square (equal width and height), then border-radius: 50%. That's it. Example: width: 100px; height: 100px; border-radius: 50%;. If width and height don't match, you'll get an ellipse instead.
Use this for profile avatars, icon backgrounds, decorative elements. You can even make pill shapes (stadium shapes) with border-radius: 50% on rectangles—the ends become perfect semicircles.
Yes and no. Border-radius clips the parent's background and border, but child content can overflow unless you add overflow: hidden or overflow: clip to the parent. Without overflow control, child elements can poke out past the rounded corners.
I usually just throw overflow: hidden on rounded containers. Clips everything nicely.
Watch out though—it also hides drop shadows and absolutely positioned elements that extend outside.
In those cases, apply radius directly to the children instead.