`:muted` CSS pseudo-class

Baseline 2026

Newly available

Since August 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Want more browser support for this feature? Tell us why.

See full compatibility
Learn more

The :muted CSS pseudo-class selector represents an element that is capable of making sound, such as <audio> or <video>, but is muted (forced silent).

Muted is different from :volume-locked in that the page author has control over whether a media element can be muted or un-muted. User agents may set media muted value according to use preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise). An element that is :volume-locked cannot be muted, un-muted, or have its volume changed via JavaScript because of an operating system or user agent preference.

Syntax

css

:muted {
  /* ... */
}

Examples

HTML

The muted attribute is added to the <video> element so that the sound is muted, this works the same for <audio> elements.

html

<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  muted
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

CSS

If the <video> element is muted then a red outline is drawn around it, when it is not muted then it has a green outline. Try toggling the mute icon in the controls to see the state change.

video {
  margin: 5px;
}

css

video:muted {
  outline: 5px solid red;
}

video:not(:muted) {
  outline: 5px solid green;
}

Specifications

Specification
Selectors Level 4 # selectordef-muted
HTML # selector-muted

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jul 16, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

:muted CSS pseudo-class