Diferença entre contorno e borda

Alguém sabe de alguma diferença entre as propriedades 'border' e 'outline' no CSS? Se não houver diferença, por que existem duas propriedades para a mesma coisa?

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

A propriedade de estrutura de tópicos CSS é uma propriedade confusa. Quando você o conhece pela primeira vez, é difícil entender como ele é remotamente diferente da propriedade border. O W3C explica como tendo as seguintes diferenças:

1. Os contornos não ocupam espaço.

2.Os contornos podem não ser retangulares.

Além de algumas outras respostas ... aqui estão mais algumas diferenças que posso pensar:

1) cantos arredondados

bordersuporta cantos arredondados com a border-radiuspropriedade outlinenão.

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>

FIDDLE

(Nota: embora o Firefox tenha a -moz-outline-radiuspropriedade que permite cantos arredondados no contorno ... essa propriedade não está definida em nenhum padrão CSS e não é suportada por outros navegadores ( fonte ))

2) Denominar apenas um lado

fronteira tem propriedades ao estilo de cada lado com border-top:, border-left:etc.

O esboço não pode fazer isso. Não existe um esboço geral: etc. É tudo ou nada. (veja esta postagem do SO )

3) deslocamento

O esboço suporta deslocamento com a propriedade contorno-deslocamento . fronteira não.

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

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

FIDDLE

Nota: Todos os principais navegadores suportam, outline-offsetexceto o Internet Explorer

Além de outras respostas, os contornos são geralmente usados ​​para depuração. O Opera possui alguns estilos CSS agradáveis ​​para o usuário que usam a propriedade outline para mostrar onde estão todos os elementos em um documento.

Se você está tentando descobrir por que um elemento não está aparecendo onde você esperava ou no tamanho que você esperava, adicione alguns contornos e veja onde estão os elementos.

Como já mencionado, os contornos não ocupam espaço. Quando você adiciona uma borda, a largura / altura total do elemento no documento aumenta, mas isso não acontece com o contorno. Além disso, você não pode definir contornos em lados específicos, como bordas; é tudo ou nada.

tldr;

O W3C explica como tendo as seguintes diferenças:

• Os contornos não ocupam espaço.
• Os contornos podem não ser retangulares.

Fonte

O esboço deve ser usado para acessibilidade

Também deve ser observado que o objetivo principal do esboço é a acessibilidade. Configurando para delinear: nenhum deve ser evitado.

Se você precisar removê-lo, talvez seja uma idéia melhor fornecer um estilo alternativo:

Eu já vi algumas dicas sobre como remover o indicador de foco usando o contorno: nenhum ou o contorno: 0. Por favor, não faça isso, a menos que você substitua o contorno por outra coisa que facilite a visualização de qual elemento tem o foco do teclado. A remoção do indicador visual do foco do teclado dificulta a navegação e o uso do site pelas pessoas que dependem da navegação do teclado.

Fonte: "Não remova o contorno dos controles de link e formulário", 365 Berea Street

Mais recursos

• http://outlinenone.com/

Um uso prático do esboço lida com transparência. Se você possui um elemento pai com um plano de fundo, mas deseja que a borda de um elemento filho seja transparente para que o plano de fundo do pai apareça, você deve usar "estrutura de tópicos" em vez de "borda". Embora uma borda possa ser transparente, ela mostrará o plano de fundo da criança, não o dos pais.

Em outras palavras, essa configuração criou o seguinte efeito:

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

Do site da escola W3

As propriedades da borda CSS permitem especificar o estilo e a cor da borda de um elemento.

Um contorno é uma linha que é desenhada ao redor dos elementos (fora das bordas) para destacar o elemento.

A propriedade abreviada do contorno define todas as propriedades do contorno em uma declaração.

As propriedades que podem ser definidas são (em ordem): cor do contorno, estilo do contorno, largura do contorno.

Se um dos valores acima estiver ausente, por exemplo, "estrutura de tópicos: solid # ff0000;", o valor padrão da propriedade ausente será inserido, se houver.

Verifique aqui para mais informações: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Um pouco de uma pergunta antiga, mas vale a pena mencionar um bug de renderização do Firefox (ainda presente a partir de janeiro de 13), onde o esboço será renderizado no exterior de todos os elementos filhos, mesmo que eles excedam o pai (através de margens negativas, sombras de caixa) etc.)

Você pode corrigir isso com:

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

Super lamentável que ainda não esteja consertado. Prefiro contornos em muitos casos, pois eles não aumentam as dimensões de um elemento, poupando-o de sempre considerar as larguras das bordas ao definir as dimensões de um elemento.

Afinal, qual é mais simples?

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

Ou:

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

Também é importante notar que o esboço do W3C é a fronteira do IE , pois o IE não implementa o modelo de caixa do W3C.

No modelo de caixa w3c, a borda é exclusiva da largura e altura do elemento. No IE, é inclusivo.

Eu fiz um pequeno pedaço de código css / html apenas para ver a diferença entre ambos.

outlineé melhor incluir elementos filho potencialmente excedentes, especialmente em um contêiner embutido .

borderé muito mais adaptado para elementos que se comportam em bloco .

Violino para você, senhor!

A propriedade de estrutura de tópicos no CSS desenha uma linha ao redor da parte externa de um elemento. É semelhante à fronteira, exceto que:

• Ele sempre gira em torno de todos os lados, você não pode especificar
• lados Não faz parte do modelo da caixa, portanto não afetará a
  posição do elemento ou dos elementos adjacentes

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

Como um exemplo prático do uso de "estrutura de tópicos", a borda pontilhada fraca que segue o foco do sistema em uma página da Web (por exemplo, se você percorrer os links) pode ser controlada usando a propriedade estrutura de tópicos (pelo menos, eu sei que pode no Firefox , não tentei outros navegadores).

Uma técnica comum de "substituição de imagem" é usar, por exemplo:

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

com o seguinte no CSS:

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

O problema é que, quando o foco atinge a marca, o contorno segue 1000em para a esquerda. O esboço pode permitir que você desative o esboço do foco em tais elementos.

Acredito que a barra de ferramentas do desenvolvedor do IE também esteja usando algo como o esboço "sob o capô" ao destacar elementos para inspeção no modo "selecionar". Isso mostra bem o fato de que o "esboço" não ocupa espaço.

pense no contorno como uma borda que um projetor desenha fora de algo, pois uma borda é um objeto real em torno dessa coisa.
uma projeção pode se sobrepor facilmente, mas a borda não permite que você passe.
algumas vezes quando eu uso grid+%width, border muda a escala na porta de exibição, por exemplo, uma div com width:100%um pai width:100pxpreenche o pai completamente, mas quando adiciono border:solid 5pxa div diminui a div para criar espaço para a borda (embora seja raro e contornável!),
mas com estrutura de tópicos ele não tem esse problema, pois a estrutura de tópicos é mais virtual: D é apenas uma linha fora do elemento, mas o problema é que se você não fizer o espaçamento corretamente, ele se sobreporá a outros conteúdos.

para abreviar:
delinear profissionais:
não mexe com espaçamento e posições
contras:
alta chance de sobreposição

Diferenças entre borda e contorno:

A borda faz parte do modelo da caixa, portanto, é contabilizada em relação ao tamanho do elemento. O contorno não faz parte do modelo da caixa, portanto não afeta os elementos próximos.

Demo:

#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 do W3Schools:

Definição e Uso

Um contorno é uma linha que é desenhada ao redor de elementos (fora das bordas) para destacar o elemento.