Diferencia entre contorno y borde

¿Alguien sabe de alguna diferencia entre las propiedades 'borde' y 'esquema' en CSS? Si no hay diferencia, ¿por qué hay dos propiedades para la misma cosa?

De: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

La propiedad de esquema CSS es una propiedad confusa. Cuando se entera por primera vez, es difícil entender cómo es remotamente diferente de la propiedad fronteriza. El W3C explica que tiene las siguientes diferencias:

1. Los esquemas no ocupan espacio.

2. Los contornos pueden ser no rectangulares.

Además de algunas otras respuestas ... aquí hay algunas diferencias más que puedo pensar:

1) esquinas redondeadas

borderadmite esquinas redondeadas con la border-radiuspropiedad. outlineno lo hace

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%);
}

<div class="border"></div>

<div class="outline"></div>

VIOLÍN

(Nota: aunque Firefox tiene la -moz-outline-radiuspropiedad 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) Estilizar solo un lado

el borde tiene propiedades para diseñar cada lado border-top:, border-left:etc.

El esquema no puede hacer esto. No hay bocetos: etc. Es todo o nada. (ver esta publicación SO )

3) compensación

esquema admite desplazamiento con la propiedad esquema-desplazamiento . la frontera no.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

VIOLÍN

Nota: Todos los principales navegadores son compatibles, outline-offsetexcepto Internet Explorer

Además de otras respuestas, los contornos generalmente se usan para la depuración. Opera tiene algunos estilos CSS de usuario agradables que utilizan 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 esquemas 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.

tldr;

El W3C explica que tiene las siguientes diferencias:

• Los contornos no ocupan espacio.
• Los contornos pueden ser no rectangulares.

Fuente

El esquema debe usarse para accesibilidad

También se debe tener en cuenta que el propósito principal del esquema es la accesibilidad. Poniéndolo en un esquema: no se debe evitar ninguno.

Si debe eliminarlo, tal vez sea una mejor idea proporcionar un estilo alternativo:

He visto bastantes consejos sobre cómo eliminar el indicador de enfoque mediante el uso de esquema: ninguno o esquema: 0. No haga esto, a menos que reemplace el esquema con otra cosa que facilite ver qué elemento tiene el foco del teclado. Al eliminar el indicador visual del foco del teclado, las personas que confían en la navegación con teclado tendrán dificultades para navegar y usar su sitio.

Fuente: "No eliminar el esquema de los controles de enlace y formulario", 365 Berea Street

Más recursos

• http://outlinenone.com/

Un uso práctico de ofertas de esquema con transparencia. Si tiene un elemento primario con un fondo, pero desea que el borde de un elemento secundario sea transparente para que se muestre el fondo primario, debe usar "esquema" en lugar de "borde". Si bien un borde puede ser transparente, mostrará el fondo del niño, no el de los padres.

En otras palabras, esta configuración creó el siguiente efecto:

outline: 7px solid rgba(255, 255, 255, 0.2);

Del sitio de la escuela W3

Las propiedades del borde CSS le permiten especificar el estilo y el color del borde de un elemento.

Un esquema es una línea que se dibuja alrededor de los elementos (fuera de los bordes) para que el elemento "se destaque".

La propiedad abreviada del esquema establece todas las propiedades del esquema en una declaración.

Las propiedades que se pueden establecer son (en orden): color de contorno, estilo de contorno, ancho de contorno.

Si falta uno de los valores anteriores, por ejemplo, "esquema: sólido # ff0000;", se insertará el valor predeterminado para la propiedad que falta, si corresponde.

Consulte aquí para obtener más información: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Una pregunta un poco antigua, pero vale la pena mencionar un error de representación de Firefox (todavía presente a partir de enero '13) donde el esquema se representará en el exterior de todos los elementos secundarios, incluso si desbordan a sus padres (a través de márgenes negativos, sombras de recuadro) , etc.)

Puedes arreglar esto con:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Súper desafortunado que todavía no está arreglado. Prefiero los contornos en muchos casos, ya que no se suman a las dimensiones de un elemento, lo que evita que siempre tenga que tener en cuenta los anchos de los bordes al configurar las dimensiones de un elemento.

Después de todo, ¿cuál es más simple?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

O:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

También vale la pena señalar que el esquema de W3C es el borde de IE , ya que IE no implementa el modelo de caja W3C.

En el modelo de caja w3c, el borde es exclusivo del ancho y la altura del elemento. En IE es inclusivo.

Hice un pequeño fragmento de código css / html solo para ver la diferencia entre ambos.

outlinees mejor incluir elementos secundarios potencialmente desbordados, especialmente en un contenedor en línea .

borderestá mucho más adaptado para elementos que se comportan en bloque .

Violín para usted señor!

La propiedad de esquema en CSS dibuja una línea alrededor del exterior de un elemento. Es similar al borde, excepto que:

• Siempre va por todos lados, no puedes especificar
• lados No es parte del modelo de caja, por lo que no afectará la
  posición del elemento o elementos adyacentes.

Fuente: https://css-tricks.com/almanac/properties/o/outline/

Como un ejemplo práctico del uso de "esquema", el borde punteado débil que sigue al foco del sistema en una página web (p. Ej., Si tabula a través de los enlaces) puede controlarse usando la propiedad de esquema (al menos, sé que puede en Firefox , no probé otros navegadores).

Una técnica común de "reemplazo de imagen" es utilizar, por ejemplo:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

con lo siguiente en el CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

El problema es que cuando el foco alcanza la etiqueta, el contorno se dirige 1000em a la izquierda. El esquema puede permitirle desactivar el esquema de enfoque en dichos elementos.

Creo que la barra de herramientas de desarrollador de IE también está usando algo como un esquema "debajo del capó" al resaltar elementos para inspección en modo "select". Eso muestra bien el hecho de que el "esquema" no ocupa espacio.

piense en el contorno como un borde que un proyector dibuja fuera de algo, ya que un borde es un objeto real alrededor de esa cosa.
una proyección puede superponerse fácilmente, pero el borde no te deja pasar.
algunas veces cuando uso grid+%width, el borde cambiará la escala en el puerto de vista, por ejemplo, un div con width:100%un padre width:100pxllena el padre por completo, pero cuando agrego border:solid 5pxa div lo hace más pequeño para hacer espacio para el borde (aunque es raro y ¡funciona sin problemas!)
pero con el esquema no tiene este problema, ya que el esquema es más virtual: D es solo una línea fuera del elemento, pero el problema es que si no se espacia correctamente, se superpondría con otros contenidos.

para abreviar:
esboce las ventajas:
no interfiere con el espacio y las
desventajas de las posiciones :
alta probabilidad de superposición

Diferencias entre borde y contorno:

El borde es parte del modelo de caja, por lo que cuenta en función del tamaño del elemento. El esquema no forma parte del modelo de caja, por lo que no afecta a los elementos cercanos.

Manifestación:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Copiado de W3Schools:

Definición y uso

Un esquema es una línea que se dibuja alrededor de los elementos (fuera de los bordes) para hacer que el elemento "se destaque".