¿Debo usar ‘border: none’ o ‘border: 0’?

¿Cuál de los dos métodos cumple con los estándares W3C? ¿Ambos se comportan como se espera en todos los navegadores?

borde: ninguno;
frontera: 0;

Ambos son validos Es tu elección.

Prefiero el border:0 porque es más corto; Me resulta más fácil de leer. Puede encontrar none más legible. Vivimos en un mundo de postprocesadores de CSS muy capaces, por lo que te recomendaría que uses lo que prefieras y luego lo ejecutes a través de un “compresor”. No hay una guerra santa que valga la pena pelear aquí.

Dicho todo esto, si estás escribiendo a mano todo tu CSS de producción, mantengo -a pesar de las quejas en los comentarios- que no hace daño ser consciente del ancho de banda. Usando border:0 guardará una cantidad infinitesimal de ancho de banda. Por sí solo eso cuenta por muy poco, pero si haces que cada byte cuente , harás que tu sitio web sea más rápido.

Las especificaciones de CSS2 están aquí . Estos se extienden en CSS3 pero no de ninguna manera relevante para esto.

 'border' Value: [  ||  || < 'border-top-color'> ] | inherit Initial: see individual properties Applies to: all elements Inherited: no Percentages: N/A Media: visual Computed value: see individual properties 

Puede usar cualquier combinación de ancho, estilo y color.
Aquí, 0 establece el ancho, none el estilo. Tienen el mismo resultado de representación: no se muestra nada.

Son equivalentes en efecto , señalando diferentes atajos :

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

Y el otro..

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

Ambos funcionan, solo elige uno y listo 🙂

Como otros han dicho, ambos son válidos y harán el truco. No estoy 100% convencido de que son idénticos sin embargo. Si tiene un estilo en cascada, entonces, en teoría, podrían producir resultados diferentes ya que están anulando valores diferentes.

Por ejemplo. Si establece “border: none” y luego tener dos estilos diferentes que anulan el ancho y el estilo del borde, entonces uno hará algo y el otro no.

En el siguiente ejemplo, tanto en IE como en Firefox, los primeros dos test div salen sin borde. Sin embargo, los segundos dos son diferentes, siendo el primer div en el segundo bloque simple y el segundo div en el segundo bloque teniendo un borde discontinuo de ancho medio.

Aunque ambos son válidos, es posible que necesites estar pendiente de tus estilos si hacen muchas cosas en cascada y eso creo.

      
"Border: 0" and "border-width: 3px"
"Border: 0" and "border-style: dashed"
"Border: none" and "border-width: 3px"
"Border: none" and "border-style: dashed"

(nota: esta respuesta se actualizó el 2014-08-01 para que sea más detallada, más precisa y para agregar una demostración en vivo )

Ampliando las propiedades shortand

De acuerdo con la especificación W3C CSS2.1 ( “Los valores omisos se establecen en sus valores iniciales” ), las siguientes propiedades son equivalentes:

 border: hidden; border-style: hidden; border-width: medium; border-color:  border: none; border-style: none; border-width: medium; border-color:  border: 0; border-style: none; border-width: 0; border-color:  

Si estas reglas son las más específicas aplicadas a los bordes de un elemento, entonces los bordes no se mostrarán, ya sea por el ancho cero, o por el estilo hidden / none . Entonces, a primera vista, estas tres reglas parecen equivalentes. Sin embargo, se comportan de diferentes maneras cuando se combinan con otras reglas.

Los bordes en un contexto de tabla en el modelo de borde colapsado

Cuando se representa una tabla usando border-collapse: collapse , cada frontera renderizada se comparte entre múltiples elementos (los bordes internos se comparten entre las celdas vecinas, los bordes externos se comparten entre las celdas y la tabla misma, pero también filas, grupos de filas, columnas y los grupos de columnas comparten fronteras). La especificación define algunas reglas para la resolución de conflictos fronterizos :

  1. Los bordes con el border-style de border-style hidden tienen prioridad sobre el rest de las fronteras conflictivas. […]

  2. Los bordes con un estilo de none tienen la prioridad más baja. […]

  3. Si ninguno de los estilos está hidden y al menos uno de ellos no es none , los bordes angostos se descartan a favor de los más anchos. […]

  4. Si los estilos de borde difieren solo en color, […]

Por lo tanto, en un contexto de tabla, border: hidden (o border-style: hidden ) tendrá la prioridad más alta y ocultará el borde compartido, sin importar qué.

En el otro extremo de las prioridades, border: none (o border-style: none ) tiene la prioridad más baja, seguido por el borde de ancho cero (porque es el borde más angosto). Esto significa que un valor calculado de border-style: none y un valor calculado de border-width: 0 son esencialmente los mismos.

Reglas en cascada y herencia

Como none y 0 afectan a propiedades diferentes ( border-style border-width ), se comportarán de manera diferente cuando una regla más específica defina solo el estilo o solo el ancho. Vea la respuesta de Chris para un ejemplo.

Demostración en vivo !

¿Quieres ver todos estos casos en una sola página? ¡Abre la demostración en vivo !

Utilizando

 border: none; 

no funciona en algunas versiones de IE. IE9 está bien, pero en versiones anteriores muestra el borde incluso cuando el estilo es “ninguno”. Experimenté esto al usar una hoja de estilo de impresión donde no quería bordes en los cuadros de entrada.

 border: 0; 

parece funcionar bien en todos los navegadores.

Puede simplemente usar ambos según la especificación amablemente proporcionada por Oli.

Siempre uso border:0 none; .

Aunque no hay inconveniente en especificarlos por separado y algunos navegadores analizarán el CSS más rápido si usas las llamadas de propiedad heredadas de CSS1.

Aunque border:0; Normalmente, el estilo del borde se definirá por defecto en none , sin embargo, he notado que algunos navegadores imponen su estilo de borde predeterminado que puede sobrescribir extrañamente el border:0; .

Yo suelo:

 border: 0; 

De 8.5.4 en CSS 2.1 :

‘frontera’

Valor: [ || || < 'border-top-color'>] | heredar

Entonces cualquiera de sus métodos se ve bien.

Si bien es probable que los resultados sean los mismos (sin borde), el 0 y ninguno abordan técnicamente cosas diferentes.

0 trata el ancho del borde y ninguno aborda el estilo del borde. Obviamente, un borde de 0 de ancho no existe, por lo que no tendrá estilo.

Sin embargo, si más tarde en su hoja de estilo tiene la intención de anular esto, naturalmente se dirigirá específicamente a uno u otro. Si ahora quisiera un borde de 3px, eso estaría directamente anulando el borde: 0 en lo que respecta al ancho. Si ahora quisiera un borde punteado, estaría bordeando el borde directamente: ninguno en lo que respecta al estilo.

Bueno, para ver con precisión la diferencia entre border: 0 y border: none podemos hacer algunos experimentos.

Experimentar:

Permite crear tres divs, el primero cuyo borde solo se puede desactivar estableciendo su ancho en cero, el segundo que solo se puede desactivar configurando su estilo en ninguno, y un tercero con un borde que solo se puede “deshabilitar” configurando su color a transparente. Entonces intentemos el efecto de:

  • border: 0;
  • border: none;
  • border: transparent

    estilo de borde: sólido! importante; color del borde: rojo! importante; width-width: 2px! important; color del borde: rojo! importante; width-width: 2px! important; estilo de borde: sólido! importante;

 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 = ""; }); 
 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; } 
 
border-style: solid!important;
border-color: red!important;
border-width: 2px!important;
border-color: red!important;
border-width: 2px!important;
border-style: solid!important;

DEBEMOS USAR FRONTERA 0

De acuerdo con mi opinión y experiencia, sugeriría utilizar Border: 0; Hay una razón válida y muy buena porque cada vez que usamos border: none, entiendo que funciona pero creo que estamos usando un borde, 1px, 2px, 3px, etc. Quiero decir que estamos dando el valor de nuestro límite es … px / em / rem correcto, así que necesitamos usar border: 0; para eliminar el valor del borde porque como sabemos cuando usamos background: none; significa que estamos eliminando el fondo de un fondo que no es un valor que sea otra cosa.

Gracias

En mi punto,

border:none funciona, pero no es válido. estándar w3c

así que mejor podemos usar border:0;