Dois-je utiliser "border: none" ou "border: 0'?

Ils sont équivalents effet, pointant vers les différentes raccourcis:

border: 0;
//short for..
border-width: 0;

Et l'autre..

border: none;
//short for...
border-style: none;

À la fois le travail, il suffit de choisir un et d'aller avec elle 🙂

(note: cette réponse a été mis à jour sur 2014-08-01 pour le rendre plus détaillée, plus précise, et pour ajouter un démonstration en direct)

L'expansion de la court et propriétés

Selon CSS2 DU W3C.1 spécification (“valeurs Omises sont fixés à leurs valeurs initiales”), les propriétés suivantes sont équivalentes:

border: hidden;    border-style: hidden;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: none;      border-style: none;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: 0;         border-style: none;
                   border-width: 0;
                   border-color: <the same as 'color' property>

Si ces règles sont les plus précis appliqué aux bordures d'un élément, les frontières ne seront pas affichés, soit en raison de largeur nulle, ou en raison de hidden/none style. Si, au premier regard, ces trois règles look équivalent. Cependant, ils ont un comportement différent lorsqu'il est combiné avec d'autres règles.

Bordures d'un tableau du contexte dans l'effondrement des frontières modèle

Lorsqu'une table est rendu à l'aide de border-collapse: collapse, puis rendus frontière est partagé entre plusieurs éléments (frontières de l'intérieur sont partagés entre en tant que voisin de cellules; des frontières extérieures sont partagés entre les cellules et la table elle-même; mais aussi des lignes, des groupes de lignes, les colonnes et les groupes partagent des frontières). Le cahier des charges définit certains les règles de la frontière, la résolution des conflits:

1. Frontières avec la border-style de hidden préséance sur toutes les autres en conflit de frontières. [...]

2. Les frontières avec un style de none ont la priorité la plus faible. [...]

3. Si aucun des styles sont hidden et au moins l'un d'entre eux n'est pas none, puis frontières étroites sont écartées au profit de celles plus larges. [...]

4. Si la frontière des styles diffèrent que par la couleur, [...]

Donc, dans le tableau contexte, border: hidden (ou border-style: hidden) aura la priorité la plus élevée et fera de la frontière commune caché, n'importe quoi.

Sur l'autre extrémité de l'priorités, border: none (ou border-style: none) ont la priorité la plus faible, suivie par la zéro-largeur de la bordure (parce qu'il est le plus étroit de la frontière). Cela signifie qu'un valeur calculée de border-style: none et un valeur calculée de border-width: 0 sont essentiellement les mêmes.

Règles de cascade et héritage

Depuis none et 0 affecter des propriétés différentes (border-style et border-width), ils se comportent différemment lorsqu'un règle plus spécifique définit seulement le style ou tout simplement la largeur. Voir Chris répondre pour un exemple.

Démonstration en direct!

Voulez voir tous ces cas, en une seule page? Ouvrez le démonstration en direct!

Vous pouvez simplement utiliser à la fois selon les spécifications fournies par l'Oli.

J'ai toujours utiliser border:0 none;.

Si il n'y a pas de mal à les spécifier séparément et certains navigateurs va analyser les CSS plus rapide si vous utilisez l'héritage CSS1 appels de la propriété.

Si border:0; normalement par défaut le style de bordure pour none, j'ai cependant remarqué que certains navigateurs imposer leur style de bordure par défaut qui peut étrangement remplacer border:0;.

Bien, de voir avec précision la différence entre border: 0 et border: none nous pouvons faire quelques expériences.

Expérience:

Permet de créer trois divs, première dont la frontière ne peut être désactivé en réglant sa largeur à zéro, le second, qui ne peut être désactivée en définissant son style à aucun, et une troisième avec une frontière qui ne peut être "handicapé" par la fixation de sa couleur transparente. Alors que diriez-vous de l'effet de:

• border: 0;
• border: none;

• border: transparent

  border-style: solid!important;
  border-color: red!important;

  border-width: 2px!important;
  border-color: red!important;

  border-width: 2px!important;
  border-style: solid!important;

JS:

var container = document.querySelector('#container');
var btnSetZero = document.querySelector('#setZero');
var btnSetNone = document.querySelector('#setNone');
var btnSetTransparent = document.querySelector('#setTransparent');
var btnReset = document.querySelector('#reset');
btnSetZero.addEventListener('click', () => {
	container.className = "border-zero";
});

btnSetNone.addEventListener('click', () => {
	container.className = "border-none";
});

btnSetTransparent.addEventListener('click', () => {
	container.className = "border-transparent";
});

btnReset.addEventListener('click', () => {
	container.className = "";
});

CSS:

div div {
  border: 2px solid red;
  margin: 2px;
  font-family: monospace;
  white-space: nowrap;
  width: 250px;
}

div.border-zero div {
  border: 0;
}
div.border-none div {
  border: none;
}
div.border-transparent div {
  border: transparent;
}

HTML:

<div id="container">
  <div style="border-style: solid!important; border-color: red!important;">
    border-style: solid!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-color: red!important;">
    border-width: 2px!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-style: solid!important;">
    border-width: 2px!important;<br>
    border-style: solid!important;
  </div>
</div>

<button id="setZero">border: 0;</button>
<button id="setNone">border: none;</button>
<button id="setTransparent">border: transparent;</button>
<button id="reset">reset</button>

Mes résultats étaient les mêmes dans les deux firefox et chrome:

border: 0; Semble border-width à 0 et border-style de none, mais pas de modifier la frontière de la couleur;

border: none; Semble être la seule à changer border-style (à none);

border: transparent; Semble changer border-color à transparent et border-style de none;

Façon la plus simple de supprimer la frontière avec le css

border: 0;

Dans mon point de vue,

border:none est un travail, mais pas valide w3c standard

afin de mieux nous pouvons utiliser border:0;