<!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" xml:lang="en" lang="en"><head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Hiding the Browsers Focus Borders. Should I, Shouldn’t I?</title>

<script language="JavaScript" type="text/JavaScript">

//add event function
function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, true); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}

// Find all link elements and add an onfocus attribte and value
function hideFocusBorders(){
var theahrefs = document.getElementsByTagName("a");
if (!theahrefs){return;}
for(var x=0;x!=theahrefs.length;x++){
theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}
}

//event added using the addEvent() function above
addEvent(window, 'load', hideFocusBorders);

</script>
<style type="text/css">
<!--
/* ----- Uncomment the global selector below to over-ride the default margin and padding added to all tags  ----- */

*{padding: 0; margin: 0;}

/* ----- global default/initial styles ----- */
body {background-color:#fff; margin: 10px; padding: 0;}

/* ----- base default font size, type, and line height ----- */
html body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}
html>body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}

/* ----- add selectors here for font sizing ----- */
p, table, ul, dl {font-size: 1.2em}
caption {font-size: 1.4em}
h2 {font-size: 1.6em}


/* ----- base links ----- */
a:link {color: #CC6633;}
a:visited {color: #CC6633;}
a:hover {color: #999966;}
a:active {color: #CC6633;}
a:focus{color: #CC6633;}

p {line-height:1.4em;margin:10px 0;}

/* ----- hidden focus borders from mozilla ----- */
:focus { -moz-outline-style: none; }

-->
</style></head><body>

<p>Notice the folliwng <a href="#">link</a> will not have dotted borders upon focus.</p>


</body></html>