<p class="notice">Your browser does not support the <code>accent-color</code> property.</p>
<progress id="progress" min="0" max="100" value="50"></progress>
body {
  display: grid;
  height: 100vh;
  place-items: center;
}

progress {
  accent-color: #30cc7e;
  place-self: center;
  width: clamp(300px, 60%, 850px);
}

.notice {
  background: #fff9c4;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: center;
  width: clamp(300px, 60%, 850px);
}

@supports (accent-color: #fff) {
  .notice {
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.