Background-color Border stroke in hyperlinks

Hi, can someone help me achieve what Washington DC Classifieds - Free Classifieds Ads for Washington DC, District of Columbia, Virginia, Maryland at eBay Classifieds (Kijiji). does when you highlight a category. They have a stroke around the background-color. What is the syntax to do this with CSS?


Thank you!

I’m not sure I understand, but they have the border declared as white for a and changed to blue on a:hover:

ul.category a {
    [b]border: 1px solid #FFFFFF;[/b]
    color: #65574D;
    display: inline-block;
    padding: 1px 3px;

ul.category a:hover {
    background-color: #E9F7FF;
    [b]border-color: #86B8CE;[/b]
    color: #5A4B3E;
    text-decoration: none;

Something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
ul.category a {
    border: 1px solid #FFFFFF;
    color: #65574D;
    display: inline-block;
    padding: 1px 3px;
ul.category a:hover {
    border:1px solid blue;
<ul class="category">
    <li><a href="#">Test</a></li>
    <li><a href="#">Testing </a></li>
    <li><a href="#">Testing again</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test 2 </a></li>
    <li><a href="#">Test 3</a></li>

When you add a border on hover you really don’t want the page to reflow as it will jump around so you place a border on the element by default in the current background color. When you hover you just change its color and it works smoothly.

The display:inline-block is needed so that vertical padding and borders are handled correctly.


Beaten to the punch by noonnope :slight_smile:

Thanks guys, it worked.