Guided Notes
Effects & Transforms
Rounded corners, shadows, filters, object-fit, 2D and 3D transforms.
Rounded corners and shadows
Slide 1 / 5border-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).