Set border-style:none; on my anchor tags but border shows up when I click on a link - why?

html css onclick border

13,613

Solution 1

the border you see is called an outline. you can get rid of it by putting this style into your a rules:

outline:none;

personally i always define it as a blanket a rule near the top of my stylesheets (i really dislike outlines even though i know they have a use)

a { outline:none; }

hope this helps

Solution 2

That´s not the border, it is the outline.

You can disable it by setting:

a {
    outline: none;
}

13,613

Author by

gday

Updated on July 12, 2022

Comments

gday almost 2 years

As you can see from the example below, I have a black background and red links to emphasize this problem of dotted borders showing up on my links when they are clicked. I added border-style:none but it doesn't seem to have any effect. Is there some other way to remove the dotted border appearing around the links when they are clicked?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body 
{
    height: 100%;
    margin: 0;
    padding: 0;
    font-weight:normal;
    font-size:12pt;
    font-family: Verdana, Arial, Helvetica, serif, sans-serif;
    background:black;
}

#linksouter
{
    margin: 0;
    padding: 0;
    border-style:solid;
    border-width:0px;
    position:absolute;
    top: 0px;
    left: 0px;
    width: 80px;
    text-align:left;
}
#linksinner
{
    margin: 80px 0 0 .5em;
    width:100%;
    display:inline;
    height:100%;
}
#linksinner a
{
    color:red;
    text-decoration: none;
    display:block;
    margin: 5px 0 0 0;
    border-style:none;
}
</style>
</head>

<body>
<div id="linksouter">
    <div id="linksinner">
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    <a href="#">1</a>
    </div>
</div>

</body>
</html>

gday almost 15 years

Awesome. Is there anything you don't know?
Emily almost 15 years

The outline is an important part of accessibility. It allows users who cannot use a mouse to tab around the page and see what link has focus.
gday almost 15 years

Good point Emily. Didn't realize it was needed for accessibility. However, the site I'm designing is intended to be 'design-y' - not maximally accessible.
Darko almost 15 years

Thats correct Emily, it is an important part of accessibility. Unfortunately I'm in a part of the media industry that mostly don't give a rat's ass even if individual developers do.
NickFitz almost 15 years

Don't forget "focus": link, visited, hover, focus, active is generally accepted as the optimal order. "Focus" is important for accessibility (particularly if the default outline has been disabled) as styling an element when it has focus helps those who cannot use a mouse to see when they can perform the equivalent action to clicking. Generally, a good idea is to make "hover" and "focus" have the same styles.