Différence entre contour et bordure

Est-ce que quelqu'un connaît une différence entre les propriétés 'border' et 'outline' en CSS? S'il n'y a pas de différence, alors pourquoi y a-t-il deux propriétés pour la même chose?

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

La propriété de contour CSS est une propriété déroutante. Lorsque vous en prenez connaissance pour la première fois, il est difficile de comprendre en quoi il est même éloigné de la propriété frontière. Le W3C l'explique comme présentant les différences suivantes:

Les contours ne prennent pas de place.

Les contours peuvent être non rectangulaires.

En plus de quelques autres réponses ... voici quelques autres différences auxquelles je peux penser:

1) coins arrondis

borderprend en charge les coins arrondis avec la border-radiuspropriété. outlinepas.

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>

VIOLON

(NB: bien que Firefox possède la -moz-outline-radiuspropriété qui autorise les coins arrondis sur le contour ... cette propriété n'est définie dans aucun standard CSS, et n'est pas prise en charge par d'autres navigateurs ( source ))

2) Style d'un seul côté

la bordure a des propriétés avec lesquelles styliser chaque côté border-top:,border-left: etc.

contour ne peut pas faire ça. Il n'y a pas de plan-dessus: etc. C'est tout ou rien. (voir ce message SO )

3) décalage

contour prend en charge le décalage avec la propriété contour-offset . la frontière ne le fait pas.

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

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

VIOLON

Remarque: tous les principaux navigateurs prennent en charge outline-offsetsauf Internet Explorer

En plus d'autres réponses, les contours sont généralement utilisés pour le débogage. Opera a de jolis styles CSS utilisateur qui utilisent la propriété outline pour vous montrer où se trouvent tous les éléments dans un document.

Si vous essayez de savoir pourquoi un élément n'apparaît pas là où vous vous attendiez ou à la taille que vous attendiez, ajoutez quelques contours et voyez où se trouvent les éléments.

Comme déjà mentionné, les contours ne prennent pas de place. Lorsque vous ajoutez une bordure, la largeur / hauteur totale de l'élément dans le document augmente, mais cela ne se produit pas avec le contour. Vous ne pouvez pas non plus définir des contours sur des côtés spécifiques comme les bordures; c'est tout ou rien.

tldr;

Le W3C l'explique comme présentant les différences suivantes:

• Les contours ne prennent pas de place.
• Les contours peuvent être non rectangulaires.

La source

Le contour doit être utilisé pour l'accessibilité

Il convient également de noter que le principal objectif de l'aperçu est l'accessibilité. Le définir sur contour: aucun ne doit être évité.

Si vous devez le supprimer, il est peut-être préférable de fournir un style alternatif:

J'ai vu pas mal de conseils sur la façon de supprimer l'indicateur de mise au point à l'aide de contour: aucun ou contour: 0. Ne le faites pas, sauf si vous remplacez le contour par quelque chose d'autre qui permet de voir facilement quel élément a le focus clavier. La suppression de l'indicateur visuel de la mise au point du clavier donnera aux personnes qui dépendent de la navigation au clavier un moment très difficile pour naviguer et utiliser votre site.

Source: "Ne supprimez pas le contour des contrôles de lien et de formulaire", 365 Berea Street

Plus de ressources

• http://outlinenone.com/

Une utilisation pratique du contour traite de la transparence. Si vous avez un élément parent avec un arrière-plan, mais que vous souhaitez que la bordure d'un élément enfant soit transparente pour que l'arrière-plan du parent apparaisse, vous devez utiliser «contour» plutôt que «bordure». Bien qu'une bordure puisse être transparente, elle montrera l'arrière-plan de l'enfant, pas celui du parent.

En d'autres termes, ce paramètre a créé l'effet suivant:

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

Depuis le site de l'école W3

La bordure CSS propriétés de vous permettent de spécifier le style et la couleur de la bordure d'un élément.

Un aperçu est une ligne qui est dessinée autour des éléments (en dehors des bordures) pour faire ressortir l'élément.

La propriété de raccourci contour définit toutes les propriétés de contour dans une déclaration.

Les propriétés qui peuvent être définies sont (dans l'ordre): couleur du contour, style du contour, largeur du contour.

Si l'une des valeurs ci-dessus est manquante, par exemple "contour: solid # ff0000;", la valeur par défaut de la propriété manquante sera insérée, le cas échéant.

Cliquez ici pour plus d'informations: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Une question un peu ancienne, mais qui vaut la peine de mentionner un bogue de rendu de Firefox (toujours présent à partir de janvier 13) où le contour sera rendu à l'extérieur de tous les éléments enfants même s'ils débordent de leur parent (via des marges négatives, des zones d'ombre , etc.)

Vous pouvez résoudre ce problème avec:

.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 dommage que ce ne soit toujours pas réglé. Je préfère de loin les contours dans de nombreux cas, car ils n'ajoutent pas aux dimensions d'un élément, ce qui vous évite d'avoir toujours à prendre en compte la largeur des bordures lors de la définition des dimensions d'un élément.

Après tout, qu'est-ce qui est le plus simple?

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

Ou:

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

Il convient également de noter que le contour du W3C est la frontière d'IE , car IE n'implémente pas le modèle de boîte W3C.

Dans le modèle de boîte w3c, la bordure est exclusive de la largeur et de la hauteur de l'élément. Dans IE, il est inclusif.

J'ai créé un petit morceau de code css / html juste pour voir la différence entre les deux.

outlineest préférable d'inclure les éléments enfants potentiellement débordants, en particulier dans un conteneur en ligne .

borderest beaucoup plus adapté pour les éléments comportant des blocs .

Violon pour vous monsieur!

La propriété contour en CSS trace une ligne autour de l'extérieur d'un élément. C'est similaire à border sauf que:

• Il fait toujours le tour de tous les côtés, vous ne pouvez pas spécifier de particulier
• côtés Cela ne fait pas partie du modèle de boîte, donc cela n'affectera pas la
  position de l'élément ou des éléments adjacents

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

Comme exemple pratique d'utilisation de "contour", la légère bordure en pointillé qui suit le focus du système sur une page Web (par exemple, si vous parcourez les liens) peut être contrôlée à l'aide de la propriété contour (du moins, je sais que c'est possible dans Firefox , pas essayé d'autres navigateurs).

Une technique courante de "remplacement d'image" consiste à utiliser, par exemple:

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

avec ce qui suit dans le CSS:

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

Le problème est que lorsque le focus atteint la balise, le contour part de 1000em vers la gauche. Le contour peut vous permettre de désactiver le contour de mise au point sur ces éléments.

Je crois que la barre d'outils IE Developer utilise également quelque chose comme le contour "sous le capot" lors de la mise en évidence des éléments à inspecter en mode "sélectionner". Cela montre bien que «contour» ne prend pas de place.

Pensez au contour comme une bordure qu'un projecteur dessine à l'extérieur de quelque chose comme une bordure est un objet réel autour de cette chose.
une projection peut facilement se chevaucher mais la bordure ne vous laisse pas passer.
Parfois, lorsque j'utilise grid+%width, la bordure change la mise à l'échelle sur le port de vue, par exemple un div avec width:100%dans un parent avec width:100pxremplit complètement le parent, mais lorsque j'ajoute border:solid 5pxà div, cela rend le div plus petit pour faire de la place pour la bordure (bien que ce soit rare et contournable!)
mais avec le contour, il n'y a pas ce problème car le contour est plus virtuel: D c'est juste une ligne en dehors de l'élément mais le problème est que si vous ne faites pas l'espacement correctement, il se chevaucherait avec d'autres contenus.

pour faire court:
contour des avantages:
il ne gâche pas l'espacement et les positions
contre:
fort risque de chevauchement

Différences entre bordure et contour:

La bordure fait partie du modèle de boîte, elle compte donc dans la taille de l'élément. Le contour ne fait pas partie du modèle de boîte, il n'affecte donc pas les éléments proches.

Démo:

#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>

Copié à partir de W3Schools:

Définition et utilisation

Un contour est une ligne qui est dessinée autour des éléments (en dehors des bordures) pour faire ressortir l'élément.