CSS hover border makes inline elements adjust slightly

Solution 1:

You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:

http://jsfiddle.net/TEUhM/3/

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

Solution 2:

You can also use outline, which won't affect the width i.e. so no "jump" effect. However, unfortunately, you cannot make an outline rounded.

Solution 3:

You could use a box shadow, rather than a border for this sort of functionality.

This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.

Try using a declaration like

box-shadow:0 0 1px 1px #102447;

instead of your

border:1px solid #102447;

on your hover state.

Below is a quick demo of this in action:

DEMO

#homeheader a:visited,
#homeheader a {
  text-decoration: none;
  color: black;
  margin-right: 5px;
}
#homeheader a:hover {
  background-color: #D0DDF2;
  border-radius: 5px;
  box-shadow: 0 0 1px #102447;
}
#homeheader li {
  padding: 0;
  margin: 0px 10px;
  display: inline;
  font-size: 1em;
}

<div id="homecontainer">
  <div id="homeheader">
    <ul>
      <li><a href="#">this</a>
      </li>
      <li><a href="#">that</a>
      </li>
      <li><a href="#">this again</a>
      </li>
      <li><a href="#">that again</a>
      </li>
    </ul>
  </div>
</div>

Solution 4:

Add a margin of 1px and remove that margin on hover, so it is replaced by the border.

http://jsfiddle.net/TEUhM/4/

Solution 5:

After taking a long time pressure i found a cool solution. Hope that it will help others.

on the add the folloing code :

HTML

<div class="border-test">
  <h2> title </h2>
  <p> Technology founders churn rate niche market </p>
</div>

CSS

.border-test {
  outline: 1px solid red;
  border: 5px solid transparent;
}
.border-test:hover {
  outline: 0px solid transparent;
  border: 5px solid red;
}

Check live : Live Demo

Hope it will help.