CSS Border Radius Generator

What is the CSS border-radius Property?

The CSS border-radius property rounds the corners of an element's outer border edge. Instead of the sharp right-angle corners you get by default, you can shape an element into anything from a subtly softened card to a perfect circle, using a single line of CSS.

It works on any block or inline-block element, including divs, buttons, images, and inputs. The rounding follows the element's background, border, and box shadow, so everything stays visually consistent without any extra markup.

Syntax Explained

The shorthand property accepts one to four values, following the same clockwise convention as margin and padding:

Each corner also has its own longhand property: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. You would use these in JavaScript or when you want to animate a single corner without overwriting the others.

Values can be in any CSS length unit: px, em, rem, or a percentage. Percentages are calculated relative to the element's own width (for horizontal radii) and height (for vertical radii), which is how you make a perfect circle with just 50%.

Common Shapes and When to Use Them

A few radius patterns show up over and over in real projects. Here is what each looks like and when it makes sense to reach for it.

• Subtle rounding (4px to 8px). The standard for most UI cards, form inputs, and buttons. It signals "modern and friendly" without calling attention to itself.
• Medium rounding (12px to 24px). Used by larger cards, modals, and panels. Gives a softer, more approachable feel, common in consumer apps and dashboards.
• Pill shape (999px or 50%). Makes fully rounded capsule buttons, tags, and badges. The 999px trick works on any element of any height because the radius simply clips at the edge.
• Circle (50% on a square element). The standard way to crop images or avatars into a circle. The element must have equal width and height for this to work correctly.
• Asymmetric corners. Mixing different values per corner creates organic, blob-like shapes often used in decorative backgrounds and illustration-heavy designs.

Elliptical Corners with the Slash Syntax

The border-radius property has a lesser-known feature: you can control the horizontal and vertical radii of each corner separately using a slash to separate them.

The values before the slash define horizontal radii for each corner (top-left, top-right, bottom-right, bottom-left). The values after the slash define the vertical radii in the same order. This is how designers create egg shapes, tear drops, and the squircle-adjacent blob shapes that are popular in modern illustration-driven UIs. Our generator covers the most common symmetric case, but knowing the slash syntax is useful when you need to fine-tune shapes by hand.

Practical Tips

• Use rem or em for scalable UI. If your design uses a base font size, setting radius in rem means the rounding scales proportionally when users change their browser font preference.
• border-radius respects overflow: hidden. If a child element bleeds out of a rounded parent, add overflow: hidden to the parent and the child will be clipped to the rounded shape.
• Clip images cleanly. Setting border-radius: 50% and object-fit: cover on an img element creates a perfectly cropped circular avatar without any wrapper markup.
• Animate border-radius for interactive feedback. You can transition from a rounded button to a pill on hover with a simple CSS transition. Browsers interpolate radius values smoothly with no jank.
• Percentage values behave differently than px. On a non-square element, 50% produces an ellipse, not a circle. Use 999px if you want a consistent pill regardless of element dimensions.