Border Radius Generator

border-radius rounds the corners of an element's border box. A value of 50% on a square element produces a circle. Values can be set in px, em, rem or %.

Yes. CSS supports border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius individually, or you can use the shorthand border-radius with up to four values.

The four values apply clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. This is the same order as margin and padding shorthand.

The slash syntax (e.g. border-radius: 50px / 30px) lets you define separate horizontal and vertical radii for each corner, creating elliptical shapes instead of circular arcs.

Use border-radius: 9999px (or any very large value). This produces a fully rounded left and right edge on any rectangular element, giving the pill shape commonly used on buttons and tags.

No. border-radius is purely visual. The clickable or interactive area of the element remains rectangular regardless of the corner rounding applied.

Yes. border-radius is animatable. You can use transition: border-radius 0.3s ease to smoothly animate corner rounding on hover or state change.

For most practical purposes they produce the same result on a square element (a circle). The 50% value is the standard — values beyond 50% are capped at 50% by the browser since they cannot produce a larger arc.

Yes, when overflow: hidden is set on the element. Without overflow: hidden, child elements may visually overflow outside the rounded corners.

Yes. border-radius has universal support in all modern browsers including Chrome, Firefox, Safari, Edge and Opera. No vendor prefix is needed for modern usage.