Home > CSS > Remove dotted lines from links

Remove dotted lines from links

The dotted lines that appear around links is an accessibility feature for people who can't use a mouse and are forced to use a keyboard to navigate. It works well when you use the tab key but it still shows when you are using a mouse.

If your working on government sites that need w3c compliance then I would not recommend removing this feature, otherwise use the CSS code below.

  1. a {
  2. /* Mozilla */
  3. outline:none;
  4.  
  5. /* IE */
  6. -moz-outline-style: none;
  7. }

You could get fancy and use the dotted line to your advantage. With CSS you can change the dotted line type to solid or change its colour to suit the design.

Good Luck!

Categories: CSS Tags: ,
  1. June 3rd, 2009 at 02:41 | #1

    I am a student using Dreamweaver for the first time, and generally just work in design view.

    At which point in the code do i insert the above CSS code in order to rectify this problem with my site?

  2. June 3rd, 2009 at 15:22 | #2

    Hi Eira,
    simply insert the code above within you header tag.

    Untitled Document

    a {
    /* Mozilla */
    outline:none;

    /* IE */
    -moz-outline-style: none;
    }

  3. a
    March 21st, 2010 at 14:16 | #3

    hola
    a mi me esta pasando lo mismo.
    me aparece la linea de puntos alrededor del flash al publicarlo.
    el HTML lo estoy editando en dreamweaver.
    he intentado seguir las intrucciones que habeis puesto y no me ha funcionado.
    alguna sugerencia?
    mil gracias
    a

  1. No trackbacks yet.
SEO Powered by Platinum SEO from Techblissonline