How to Change Link Underlines on a Webpage

How to edit the style of the link and hyperlink text style in an easy way using CSS. Learn how to change the link underlines on your website.

By Claudio Pires
Updated on July 25, 2022
How to Change Link Underlines on a Webpage

See now how to edit the style of the link and hyperlink text style on your webpage in an easy way using CSS to make your links looks awesome and more attractive. Learn how to change the link underlines on your website.

Web browsers default has certain CSS styles that apply to specific HTML elements. The defaults will apply if you do not overwrite these defaults with your site’s style sheets. For hyperlinks, the default display style is that any linked text will be blue and underlined. The browser does this so that a site’s visitors can easily see what text is linked. Many web designers do not care for these default styles, especially those underlines.

Thankfully, CSS makes it easy to change the look of those underlines or remove them completely.

How to Change Link Underlines on a Webpage
How to Change Link Underlines on a Webpage

Underlined text can be more challenging to read than non-underlined text. Additionally, many designers simply do not care for the look of underlined text links. In these instances, you will likely want to remove these underlines altogether.

You will use the CSS property text-decoration to remove the underlines from text links. Here is the CSS you would write to do this:

a { text-decoration: none; }

You would remove the underline from all text links with that one line of CSS. Even though this is a very general style (it uses an element selector), it still has more specificity than the default browsers’ styles. Because those default styles are what create the underlines, to begin with, that is what you need to overwrite.


Visually, removing underlines may be precisely what you want to accomplish, but you should also be cautious when doing this.

Whether you like the look of underlined links, you cannot argue that they make it evident which text is linked and which is not. If you remove underlines or change that default blue link color, you should replace them with styles that still allow linked text to stand out.

This will make for a more intuitive experience for your site’s visitors.

This will make for a more intuitive experience for your site's visitors.
Underlined Link

Another caution on links and underlines is doing not to underline text that is not a link to emphasize it. People have come to expect underlined text to be a link, so if you emphasize content to add emphasis (instead of making it bold or italicizing it), you send the wrong message and confuse site users.


If you want to keep your text link underlines but change the style of that underline from the default look, which is a “soldi” line, you can do this too. Instead of that solid line, you can use dots to underline your links. To do this, you will still remove the underline, but you will replace it with the border-bottom style property:

a { text-decoration: none; border-bottom:1px dotted; }

Since you’ve removed the standard underline, the dotted one is the only one that appears.

You can do the same thing to get dashes. Just change the border-bottom style to dashed:

a { text-decoration: none; border-bottom:1px dashed; }


Another way to draw attention to your links is to change the color of the underline. Just make sure the color fits with your color scheme.

a { text-decoration: none; border-bottom:1px solid red; }


The trick to using double underlines is that you have to change the width of the border. If you create a 1px wide border, you’ll end up with a double underline that looks like a single underline.

a { text-decoration: none; border-bottom:3px double; }

You can also use the existing underline to make a double underline with other features, such as one of the lines being dotted:

a { border-bottom:1px double; }

You can add the border-bottom style to your links at different states such as :hover, :active, or :visited. This can create a pleasant “rollover” style experience for visitors using that “hover” pseudo-class. To make a second dotted underline appear when you hover over the link:

a { text-decoration: none; }
a:hover { border-bottom:1px dotted; }
Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.