We would like to know how to add rounded Border when hover.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a {<!-- w w w . j a v a2s. c o m-->
text-align: center;
color: #4096ee;
text-decoration: none;
padding: 6px;
postion: absolute;
}
a:visited {
font-weight: bold;
color: #4096ee;
text-decoration: none;
}
a:hover {
font-weight: bold;
border-radius: 5px;
color: #4096ee;
padding: 4px;
border: solid 2px;
border-color: #303030;
text-decoration: none;
}
a:active {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="navigation">
<a href"#">LINK 1</a>
<a href"#">LINK 1</a>
<a href"#">LINK 1</a>
<a href"#">LINK 1</a>
</div>
</body>
</html>
The code above is rendered as follows: