CSS text-decoration-style Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Example showing different text-decoration-style values */
.container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 24px;
  max-width: 720px;
  margin: 0 auto;
  color: #111;
}

h1 {
  font-size: 20px;
  margin-bottom: 16px;
}

p, a {
  font-size: 18px;
  margin: 12px 0;
}

.decoration-solid {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #1a73e8;
  text-decoration-thickness: 3px;
}

.decoration-double {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: #e91e63;
  text-decoration-thickness: 4px;
}

.decoration-dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #ff9800;
  text-decoration-thickness: 3px;
}

.decoration-dashed {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #6a1b9a;
  text-decoration-thickness: 3px;
}

.decoration-wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #2e7d32;
  text-decoration-thickness: 3px;
}

.link-wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #00796b;
  text-decoration-thickness: 2px;
  color: #00796b;
}

a.link-wavy:hover {
  text-decoration-color: #004d40;
}
</style></head><body><main class='container'>
    <h1>text-decoration-style examples</h1>
    <p class='decoration-solid'>Solid underline</p>
    <p class='decoration-double'>Double underline</p>
    <p class='decoration-dotted'>Dotted underline</p>
    <p class='decoration-dashed'>Dashed underline</p>
    <p class='decoration-wavy'>Wavy underline</p>
    <a href='#' class='link-wavy'>Wavy link (anchor)</a>
  </main></body></html>