border-radius rounds the border box, and background, border and shadow follow the curve. One to four values go clockwise from top-left, 50% turns a square into a circle, a huge length such as 999px makes a pill, and 40px / 20px draws elliptical corners. Children still overflow the corners unless the parent sets overflow: hidden or clip.
box-shadow: x y blur spread color paints a shadow outside the border box without affecting layout; inset moves it inside, and a comma-separated list layers several, first on top. A tight dark shadow plus a wide faint one looks natural; animating shadows repaints every frame, so animate the opacity of a shadowed ::after instead. A spread with no blur, such as 0 0 0 100vmax rgb(0 0 0 / .7), dims the whole page around a highlighted element.
When an inline box wraps across lines, box-decoration-break: slice (the default) cuts its padding, border, radius and shadow at each break, while clone gives every fragment its own. It is not Baseline: Chromium 130 4,389 + and Firefox 555 support it, and Safari 10 needs -webkit-box-decoration-break, so declare both.
<style>
body { font: 16px/2.3 system-ui; display: flex; gap: 22px; align-items: center; margin: 14px; }
.card { width: 80px; height: 64px; border-radius: 12px;
box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 8px 20px rgb(0 0 0 / .15); }
.pill { padding: 4px 14px; border-radius: 999px; box-shadow: inset 0 2px 6px rgb(0 0 0 / .35); }
p { width: 130px; margin: 0; }
span { padding: 3px 8px; border-radius: 8px; background: #e3f2fd; box-shadow: 3px 3px #1565c0; }
.clone { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
</style>
<div class="card"></div><div class="pill">inset</div>
<p><span>slice cuts the box at the break</span></p>
<p><span class="clone">clone repeats the box per line</span></p>