Estoy tratando de añadir a un elemento con un background-color un borde "espaciado". Lo explico mejor, en html tenngo esto:
<div></div>
Luego en CSS:
div{
background-color: grey;
height: 100px;
width: 100px;
}
Lo que quiero es que al hacer click en mi elemento aparezca un borde separado del elemento y no pegado a mi elemento:
document.getElementsByTagName("div").onclick =
document.getElementsByTagName("div").style.border= "2px dashed red";
Se que esto no sirve porque tengo el background-color y rellena el padding. Entonces la questión es ¿hay alguna manera de añadir un color de fondo que no sea usando background-color o que no rellene el padding? Y si no la hay, ¿tienen alguna idea de como separar el elemento del borde y que siga coloreado? Un gracias adelantado!
document.querySelector("div").onclick =
document.querySelector("div").style.border = "2px dashed red";
div {
background-color: grey;
height: 100px;
width: 100px;
}
<div></div>