CSS :paused

The :paused pseudo-class is intended to match media elements such as audio or video while playback is paused. Support is limited, so it should be treated as experimental.

Syntax

video:paused {
  outline: 0.25rem solid #f97316;
}

Reliable pattern

.media-card[data-state="paused"] {
  outline: 0.25rem solid #f97316;
}

.media-card[data-state="playing"] {
  outline: 0.25rem solid #22c55e;
}

Result:

Paused media state

Important note

For production UI, update a class or data attribute from media events such as play and pause. That avoids relying on unsupported selectors.