Guided Notes

Effects & Transforms

Rounded corners, shadows, filters, object-fit, 2D and 3D transforms.

Rounded corners and shadows

Slide 1 / 5

border-radius: 12px β€” round all corners; border-radius: 12px 12px 0 0 β€” only the top. border-radius: 50% β€” a circle (on a square) or ellipse.

box-shadow: x y blur spread color box-shadow: 0 4px 12px rgb(0 0 0 / 15%); β€” a soft card shadow. box-shadow: inset 0 2px 4px rgb(0 0 0 / 10%); β€” an inner shadow. Stack several with commas for realistic depth.

text-shadow works the same way for text (without spread).

← Links, Lists, Tables & Forms