Making dashed or dotted link using CSS

Today, one of the friend of my office asked me how to make dotted or dashsed link as he was looking for “text-decoration” for making it.Today, I’ve come up with a very simple technique to make a dotted or dashed hyperlink using CSS.This technique might be known to most of you guys but it might be useful for those guys who don’t know about this technique.

Making dotted and dashed link using CSS

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

As, you can can you can use the border-bottom property to add the border in the bottom and then you must specify that text-decoration property to “none” to remove the underline from hyperlink which comes default in hyperlink. In the similar fashion, you can create dashed underline link with the following example code.

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

7 thoughts on “Making dashed or dotted link using CSS

  1. css

    Cascading Style Sheets (CSS) web design lessons
    Css link Properties Attributes – examles

    http://css-lessons.ucoz.com/link-css-examples-1.htm
    http://css-lessons.ucoz.com/link-css-examples-2.htm

  2. Roman

    I would like to use dotted links also in my current Project, but the customer has to use Opera and there is a bug for dotted borders. See this demo and compare the rendering with FF and Opera: http://home.tiscali.nl/developerscorner/css-discuss/test-opera-dotted-borders.html
    Do you know another way to make links dotted?

  3. IMF

    Good tip, I didn´t know it was possible, thanks.

  4. kikie

    Thanks for such a great site!
    your in my favorites 😉

  5. SM

    Thank you very much! I exactly wanted this and found here. :)

  6. Sam

    Is there a way to use this technique for defining one set of hyperlink styles (say, in the body of text) but use another style elsewhere (say, in a menu list)? How would I write that? New to CSS, still trying to figure it all out.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>