Después de consultar especialistas en la materia, programadores de diversas áreas y profesores hemos dado con la respuesta al dilema y la compartimos en esta publicación.
Solución:
De: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
La propiedad de contorno CSS es una propiedad confusa. Cuando se entera por primera vez, es difícil entender cómo es remotamente diferente de la propiedad del borde. El W3C explica que tiene las siguientes diferencias:
1. Los contornos no ocupan espacio.
2. Los contornos pueden no ser rectangulares.
Además de algunas otras respuestas … aquí hay algunas diferencias más que puedo pensar:
1) Esquinas redondeadas
border admite esquinas redondeadas con el border-radius propiedad. outline no
div
width: 150px;
height: 150px;
margin: 20px;
display: inline-block;
position: relative;
.border
border-radius: 75px;
border: 2px solid green;
.outline
outline: 2px solid red;
border-radius: 75px;
-moz-outline-radius: 75px;
outline-radius: 75px;
.border:after
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
.outline:after
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
VIOLÍN
(Nota: aunque Firefox tiene el -moz-outline-radius propiedad que permite esquinas redondeadas en el contorno… esta propiedad no está definida en ningún estándar CSS y no es compatible con otros navegadores (fuente))
2) Peinar un solo lado
el borde tiene propiedades para diseñar cada lado con border-top:, border-left: etc
el contorno no puede hacer esto. No hay contorno-top: etc. Es todo o nada. (ver esta publicación SO)
3) compensar
contorno admite desplazamiento con la propiedad contorno-desplazamiento. la frontera no.
.outline
margin: 100px;
width: 150px;
height: 150px;
outline-offset: 20px;
outline: 2px solid red;
border: 2px solid green;
background: pink;
VIOLÍN
Nota: todos los principales navegadores son compatibles outline-offset excepto Internet Explorer
Además de otras respuestas, los esquemas generalmente se usan para la depuración. Opera tiene algunos estilos CSS de usuario agradables que usan la propiedad de esquema para mostrarle dónde están todos los elementos en un documento.
Si está tratando de averiguar por qué un elemento no aparece donde esperaba o con el tamaño que esperaba, agregue algunos contornos y vea dónde están los elementos.
Como ya se mencionó, los contornos no ocupan espacio. Cuando agrega un borde, el ancho/alto total del elemento en el documento aumenta, pero eso no sucede con el contorno. Además, no puede establecer contornos en lados específicos como bordes; es todo o nada.
valoraciones y comentarios
Acuérdate de que tienes la capacidad de añadir una evaluación certera si acertaste tu obstáculo a tiempo.