I need to create a div with a 5px border on the bottom, right, and left when hovered over. I am using 'box-sizing: border-box' to maintain the size, but the text inside the div shifts when hovered over, indicating that the border may be affecting the inner padding.
I am wondering if I can achieve the same effect using a background-image with linear gradients in CSS?
Thank you
Edit:
I have a div
#my-div {
background-color: green;
}
#my-div:hover {
border-right: 5px solid red;
border-bottom: 5px solid red;
border-left: 5px solid red;
}
Instead of using border properties, I would like to achieve the same look with a linear-gradient, like this:
#my-div:hover {
// something that would look like if I had done
// border-right: 5px solid red;
// border-bottom: 5px solid red;
// border-left: 5px solid red;
// background-color: green;
background-image: linear-gradient(...);
}
This would result in the same appearance as the initial design