Border Radius

border-radius rounds the corners of an element. You can set all four corners equally (border-radius: 8px), each corner individually (border-radius: 8px 0 16px 0), or use the slash syntax for elliptical corners (border-radius: 50px / 25px). Values can be px, %, em, or any CSS length.

Set border-radius: 50% on a square element (equal width and height). If the element isn't square, 50% creates an ellipse instead. Alternatively, use clip-path: circle(50%) for a perfect circle regardless of aspect ratio.

Pixel values create consistent rounding regardless of element size. Percentage values are relative to the element's dimensions — 50% always creates the maximum rounding (circle/ellipse). For responsive designs, % or rem values often work better than fixed px.

Yes — border-radius is animatable with CSS transitions and animations. You can create morphing blob effects by animating between different border-radius values. For smooth organic shapes, animate individual corners with different durations and delays.