Making dashed or dotted link using CSS

Friday, August 15, 2008, 10:12
css, tips and technique
7 comments

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;
}

Popularity: 3% [?]

Tags: css, tips

» Blogroll
» How to hide actual URL in the status bar of all browsers?
» Block Shuffling effect using jquery
» Useful Keyboard Shortcut keys in Mozilla Firefox

7 Comments on “Making dashed or dotted link using CSS”

css wrote on 12 November, 2008, 18:39
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
Roman wrote on 18 February, 2009, 11:48
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?
IMF wrote on 9 June, 2009, 16:51
Good tip, I didn´t know it was possible, thanks.
kikie wrote on 31 March, 2010, 12:21
Thanks for such a great site!
your in my favorites
SM wrote on 19 May, 2010, 6:17
Thank you very much! I exactly wanted this and found here.
Sam wrote on 12 August, 2010, 4:18
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.