Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to remove the dotted outline around anchor links?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 459
    Comment on it

    Hello Readers.

    Anchor links (<a>'s), when become ‘active’ or ‘focused’, get a dotted outline around them. This is a default styling. Also, the color of the outline is the same as the color of the text.

    One thing, if you all might have noticed, is that this dotted outline will only disappear in the case if user clicks anywhere else in the page. There are situations when we would want to remove this outline. Before getting to that, let’s see the difference between an outline and a border.

    Clearly, outline property is similar to the border property to a great extent. There are 2 major  differences between the two. First, outline is done all around the entire object . Outline cannot be side-specific. Second, the outline property is not a part of the box model. Border is calculated with the total width of the box (total width=width+border), but this is not the case with outline property.

    So, how to remove this default outline? Add this really simple code to your CSS, and you’re done.

    CSS:

    
    a, a:active, a:focus {
    outline: 0;
    }


    Keep Coding Fellas!

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: