Inside content pushed by adding border on hover

Question

I am trying to add border on hover for an element. But, it feels like jumps a little bit inside.

Note: I know I can add outline to achieve this, but outline doesn't have border-radius.

How can I do this?

<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 130px;
min-height: 30px;
padding: 10px;
border-radius: 12px;
outline: 1px solid green;
background: yellow;
}
p:hover{
border: 1px solid black;
}
</style>
</head>

<body>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

score 0 · Answer 1 · answered Oct 28 '20 at 20:39

Give it a standard yellow border and change the color on hover.

p {
  width: 130px;
  min-height: 30px;
  padding: 10px;
  border-radius: 12px;
  background: yellow;
  border: 1px solid yellow;
}

p:hover {
  border: 1px solid black;
}

<p style="color:red;">A red paragraph.</p>

score 0 · Accepted Answer · answered Oct 28 '20 at 20:39

Border does affect the width of the container, so if you don't want the jump, add a transparent border to start with of the same width and then change the color on hover.

<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 130px;
min-height: 30px;
padding: 10px;
border-radius: 12px;
outline: 1px solid green;
background: yellow;
border: 1px solid transparent;
}
p:hover{
border: 1px solid black;
}
</style>
</head>

<body>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

Inside content pushed by adding border on hover

2 Answers2