/* Generated on cssgen.org */
border-radius: 16px;
Design perfect rounded corners visually. Adjust individual corner values and copy the clean CSS code instantly.
/* Generated on cssgen.org */
border-radius: 16px;
Rounded corners are a fundamental staple of modern UI design. From the soft, approachable aesthetic of mobile interfaces to the structured layout of modern SaaS dashboards, the border-radius property is what takes a harsh, boxy layout and makes it feel polished and user-friendly.
While adding a uniform border-radius: 8px; to a card is easy, things can get confusing when you need independent control over each corner. Our visual generator helps you master the CSS shorthand syntax—which applies values in a clockwise direction (top-left, top-right, bottom-right, bottom-left)—without having to memorize the order or manually type out repetitive CSS rules.
Choosing the right unit is crucial for responsive web design. Using Pixels (px) or Rems (rem) is perfect for buttons, input fields, and modal cards where you want a consistent, rigid curve regardless of how wide the element stretches. Using Percentages (%) is dynamic and mathematically scales with the element; this is exactly how developers create perfect circles out of square profile pictures by setting the value to 50%.
border-radius: 9999px; and it will automatically lock into a perfect pill shape, no matter how much text is inside.overflow: hidden; to the parent card element so it cleanly clips the child image.<button> or <input>, ensure your accessibility outlines match the curve. Modern browsers handle this automatically when using the standard outline property!To create a perfect circle, first ensure your element has an equal width and height (a perfect square). Then, apply the rule border-radius: 50%;. This will round the corners completely into a circle.
The shorthand syntax applies values in a clockwise direction starting from the top-left corner. For example: border-radius: 10px 20px 30px 40px; applies to top-left, top-right, bottom-right, and bottom-left respectively.
If you apply a border radius to a container element (like a <div>) but the image inside it still has sharp corners sticking out, you need to add overflow: hidden; to the parent container to cleanly clip the child elements.
If you want to move beyond standard UI corners and create fluid, organic "blob" shapes for modern landing pages, you need to use the 8-value syntax. Head over to our Fancy Border Radius Generator to build complex geometry easily.