0

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>

1 respuesta 1

1

En vez de ocupar border, puedes ocupar "outline" este te coloca ese "borde" por fuera. Además, tiene la propiedad "outline-offset con la cual puedes añadir mayor separación, o incluso colocar el borde por dentro si es que le colocas un valor negativo

document.querySelector("div").onclick = function()
{
    this.style.outline = "2px dashed red";
    this.style.outlineOffset= "2px";
};
div {
  background-color: grey;
  height: 100px;
  width: 100px;
}
<div></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.