I'm trying to add a "spacing" border to an element with a background-color. I explain it better, in html I have this:
<div></div>
Then in CSS:
div{
background-color: grey;
height: 100px;
width: 100px;
}
What I want is that when I click on my element, a border appears separate from the element and not attached to my element:
document.getElementsByTagName("div").onclick =
document.getElementsByTagName("div").style.border= "2px dashed red";
I know this doesn't work because I have the background-color and it fills in the padding. So the question is is there a way to add a background color other than using background-color or padding? And if there isn't, do you have any idea how to separate the element from the border and still have it colored? A thank you in advance!
document.querySelector("div").onclick =
document.querySelector("div").style.border = "2px dashed red";
div {
background-color: grey;
height: 100px;
width: 100px;
}
<div></div>
Instead of occupying border, you can occupy "outline" this places that "border" on the outside. In addition, it has the "outline-offset" property with which you can add more separation, or even place the border inside if you put a negative value