Hover Border Enlargement

This example shows how to modify an elements border without changing the size of the element in the DOM. This can be accomplished by using the box-shadow css property to create the added border width on hover. Unlike a border, the box-shadow does not take size in the DOM, and therefore will not affect the positioning.

This box-shadow declaration

box-shadow: 0 0 1px 1px black;

Would render the same as:

border: 1px solid black;

Given this markup for example,

<div class="wrapper">
    <div>
        <h5>Container "A"</h5>
    </div>
    <div>
        <h5>Container "B"</h5>
    </div>
</div>

Here is some css to demonstrate a border color change and 2px thickness on hover using a box-shadow for the 1px increase.

body {
	background-color: #f8f8f8;
}
.wrapper {
 	display: flex;
}
.wrapper div {
 	background: #fff;
  	margin: 1.5rem;
  	padding: 1.5rem;
  	border: 1px solid #708090;
  	border-radius: 3px;
}
.wrapper div:hover {
  	border-color: black;
	box-shadow: 0 0 1px 1px black;
}

demo and edit this code in our online sandbox

• CSS