How to Remove Underline from Link in HTML

When building a website, hyperlinks (<a> tags) come with default styling—typically blue text with an underline. While this is useful for indicating clickable text, it may not always suit your design aesthetic.

In this article, you’ll learn how to remove the underline from a link in HTML using CSS, while also maintaining accessibility and usability.

Table of Contents

🔗 The Default Link Behavior

By default, browsers style links like this:

<a href="https://example.com">Visit Example</a>

Browsers apply the following CSS automatically:

a {
  color: blue;
  text-decoration: underline;
}

✅ How to Remove the Underline Using CSS

To remove the underline, simply override the text-decoration property in your CSS.

✅ Inline CSS (Quick and Simple)

<a href="https://example.com" style="text-decoration: none;">Visit Example</a>

Good for:

Quick fixes
Single-use or dynamic links

✅ Internal or External CSS (Best Practice)

Use this method for maintainability and cleaner code:

<head>
  <style>
    a {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <a href="https://example.com">Visit Example</a>
</body>

Or in an external CSS file:

/* styles.css */
a {
  text-decoration: none;
}

Then link it in your HTML:

<link rel="stylesheet" href="styles.css">

🎨 Customize Link Appearance

You can still style the link in other ways while removing the underline:

a {
  text-decoration: none;
  color: #0077cc;
  font-weight: bold;
}

🚨 Important: Accessibility Tips

Make links visually distinguishable. If you remove the underline, consider changing the color or adding a hover effect so users still know it’s clickable.
Example:

a {
  text-decoration: none;
  color: #0077cc;
}

a:hover {
  text-decoration: underline;
}

🧪 Bonus: Remove Underline Only in Certain States

You can control underline visibility in different link states:

a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

This adds underline only when a user hovers or focuses on the link—improving both UX and accessibility.

✅ Summary

Method	Use Case
`style="..."`	Quick one-time use
Internal CSS	Small projects or testing
External CSS	Large or reusable styles

To remove underline from links in HTML:

a {
  text-decoration: none;
}

But don’t forget—always ensure your links remain recognizable to users.