Propiedad outline-offset

La propiedad outline-offset establece el desplazamiento del contorno exterior - un borde que no ocupa espacio. Los valores de la propiedad pueden ser cualquier unidad de tamaño, excepto porcentajes. El valor por defecto es: 0. Un valor positivo desplaza el contorno hacia fuera del elemento, un valor negativo - hacia dentro.

Sintaxis

cssselector {
  outline-offset: valor;
}

Ejemplo . Valor positivo

El contorno se desplaza fuera del elemento (el elemento está resaltado con fondo):

html<div id="elem"></div>

css#elem {
  outline-offset: 5px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

Ejemplo . Valor negativo

El contorno se encuentra dentro del elemento:

html<div id="elem"></div>

css#elem {
  outline-offset: -10px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

Ejemplo . Valor negativo de outline + border

Se puede lograr este interesante efecto (presta atención al grosor del espacio blanco entre bordes, es de 10px, no de 14, ya que parte fue ocupada por el outline con su grosor de 4px):

html<div id="elem"></div>

css#elem {
  outline-offset: -14px;
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

Ver también