effects
border-radius
Rounds the corners of an element's border box. Values can be lengths or percentages, and the slash syntax lets you set different horizontal and vertical radii for elliptical corners.
border-radius: <length> | <percentage> | <t> <tr> <br> <bl> [/ <t> <tr> <br> <bl>]Common values
| Value | Effect |
|---|---|
| 0 | Sharp square corners |
| 4px | Subtle rounded UI corners |
| 12px | Common card radius |
| 9999px | Pill or capsule shape |
| 50% | Perfect circle on square elements |
Examples
.card { border-radius: 12px; }Modern rounded card
.avatar { width: 40px; height: 40px; border-radius: 50%; }Circular avatar
.pill { border-radius: 9999px; padding: .25rem .75rem; }Capsule badge
Gotcha
Rounding does not clip child content; use overflow: hidden on the parent to actually clip children to the rounded shape.
Related properties
box-shadow
Adds one or more shadows around an element's box. Multiple comma-separated shadows layer to create depth, glow, or inset effects.
overflow
Determines what happens when content exceeds its box's boundaries. Setting overflow to anything but visible creates a new block formatting context.
background
Shorthand for all background-* properties, letting you set color, image, position, size, and repeat in one declaration. Resets any background properties you do not specify to their initial values.
background-image
Sets one or more background images on an element, including URL images and CSS gradients. Multiple layers stack in the order given, with the first painted on top.
opacity
Sets the transparency of an entire element, including its background, borders, and children. Values range from 0 (fully transparent) to 1 (fully opaque).