¿Debo usar 'border: none' o 'border: 0'?

544

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

borde: ninguno;
borde: 0;

css border John Himmelman
fuente

74

Me gustan este tipo de preguntas pasadas por alto.

Christopher Altman

454

Ambos son validos. Es tu elección.

Prefiero border:0porque es más corto; Me resulta más fácil de leer. Puede encontrar nonemás legible. Vivimos en un mundo de posprocesadores CSS muy capaces, por lo que le recomiendo que use lo que prefiera y luego lo ejecute a través de un "compresor". No hay guerra santa que valga la pena luchar aquí.

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

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

'border'
    Value:      [ <border-width> || <border-style> || <'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í, 0establece el ancho, noneel estilo. Tienen el mismo resultado de representación: no se muestra nada.

Oli
fuente

117

"¡Si tienes mucho tráfico, notarás la diferencia!" - Lo dudo mucho. Incluso con un millón de visitantes por hora, la diferencia es de solo 3 MB. Y eso supone que ninguno de esos visitantes tiene el CSS en caché, y también supone que la compresión proporciona un beneficio 0, ambas declaraciones muy poco probables. En realidad, probablemente sería una diferencia de unos cientos de KB al día, que es básicamente 0 para un sitio grande. No es que creo que border:nonesea de alguna manera mejor, pero usar esto como razonamiento es defectuoso.

BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Fue más sarcasmo que otra cosa ... ... o una hipérbole ... O un poco de ambas. Tiene razón, esto probablemente nunca tendrá un efecto de tiempo de ejecución en nada a menos que lo use millones de veces y haga que todos en Internet accedan a su CSS a la vez.

Oli

66

¿Quizás valga la pena agregar a la descripción que la declaración fue sarcástica? :)

timofey.com

77

Solo por completo, quería agregar otro aspecto. La transferencia de 1 MB de datos requiere la cantidad de energía contenida en una briqueta de carbón común. Vea esta charla TED de Jay Walkers: player.vimeo.com/video/22399003 .

Zensursula

11

¿Soy el único aquí atrás que aplaude en un nanosegundo extra?

Leathan

155

Son equivalentes en efecto , apuntando a 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 ve con él :)

Nick Craver
fuente

55

También tenga en cuenta que "Después de una longitud cero, el identificador de la unidad es opcional" , por lo que border: 0;es válido.

Ismael

59

@ ¿En serio ?, ¿te gusta cuando la gente se conecta a w3schools?

ajax333221

29

@ ajax333221 - Tenga cuidado con una actitud en blanco y negro hacia w3schools (o cualquier sitio web). En este caso, la descripción está bien, aunque los odio en general, su explicación en lo que respecta a esta pregunta es correcta y bastante sucinta. Eres libre de odiarlos en general, y lo hago, pero no asumas que el 0% del contenido allí es útil, en parte lo es, incluso algunas cosas en las respuestas de Yahoo son útiles, hasta cierto punto.

Nick Craver

44

¡Incorrecto! Como se describe en mi respuesta y se demostró en la demostración en vivo , border: 0NO es el atajo para border-width: 0. En cambio, la versión corta siempre establece las tres propiedades: border-color, border-styley border-width.

Denilson Sá Maia

3

@ DenilsonSá Dije que tenían el mismo efecto que la primera línea de la respuesta, porque si el borde tiene un ancho de 0, los otros 2 no importan aquí. Sin embargo, aparte de esto, CSS 2.1 que aclaró el comportamiento aquí fue la última llamada 7 meses después de esta respuesta, y se presionó como recomendación más de un año después. Si desea aclarar las respuestas anteriores aquí, ¡hágalo! Se recomienda activamente la edición para actualizaciones.

Nick Craver

42

Como otros han dicho, ambos son válidos y harán el truco. Sin embargo, no estoy 100% convencido de que sean idénticos. Si tiene algún estilo en cascada, en teoría podrían producir resultados diferentes, ya que anulan efectivamente diferentes valores.

Por ejemplo. Si establece "borde: ninguno;" y luego tener dos estilos diferentes que anulan el ancho y el estilo del borde, uno hará algo y el otro no.

En el siguiente ejemplo, tanto en IE como en Firefox, los primeros dos divs de prueba salen sin borde. Sin embargo, los segundos dos son diferentes, ya que el primer div en el segundo bloque es plano y el segundo div en el segundo bloque tiene un borde discontinuo de ancho medio.

Entonces, aunque ambos son válidos, es posible que deba vigilar sus estilos si hacen mucho en cascada y, como creo.

<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}

</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>

Chris
fuente

1

Para eliminar los bordes de datepickers en Sencha Touch 2, tuve que usar en border: nonelugar de border: 0.

Kris Khaira

39

(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 )

Expandiendo las propiedades shortand

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

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 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 ancho cero o por hidden/ noneestilo. Entonces, a primera vista, estas tres reglas parecen equivalentes. Sin embargo, se comportan de diferentes maneras cuando se combinan con otras reglas.

Bordes en un contexto de tabla en un modelo de borde contraído

Cuando se representa una tabla usando border-collapse: collapse, cada borde representado se comparte entre múltiples elementos (los bordes internos se comparten entre celdas vecinas; los bordes exteriores se comparten entre las celdas y la tabla en sí; pero también las filas, los grupos de filas, las columnas y los grupos de columnas comparten bordes ) La especificación define algunas reglas para la resolución de conflictos fronterizos :

Fronteras con la border-styledel hiddenprevalecen sobre todas las demás fronteras conflictivas. [...]

Las fronteras con un estilo de nonetienen la prioridad más baja. [...]

Si ninguno de los estilos es hiddeny al menos uno de ellos no lo es none, los bordes estrechos se descartan en favor de los más anchos. [...]

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 máxima prioridad y hará que el borde compartido esté oculto, pase lo que pase.

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

Reglas en cascada y herencia

Desde noney 0afectar a diferentes propiedades ( border-styley border-width), que se comportan de manera diferente cuando un regla más específica define sólo el estilo o simplemente la anchura. 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 !

Denilson Sá Maia
fuente

21

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.

Kieran
fuente

12

Simplemente puede usar ambos según la especificación amablemente proporcionada por Oli.

Yo siempre uso border:0 none;.

Aunque no hay ningún daño en especificarlos por separado y algunos navegadores analizarán el CSS más rápido si utiliza las llamadas de propiedad CSS1 heredadas.

Aunque border:0;normalmente usará el estilo de borde predeterminado none, sin embargo, he notado que algunos navegadores aplican su estilo de borde predeterminado que puede sobrescribir extrañamente border:0;.

Xenni82
fuente

"algunos navegadores analizarán el CSS más rápido" → no hay una diferencia notable en el tiempo de análisis CSS. Y, realmente, el tiempo de análisis CSS no es relevante para el 99.999999999999% de los casos. El tiempo de renderizado CSS es mucho más importante (y tampoco está relacionado con esta pregunta).

Denilson Sá Maia

1

Algunos navegadores? ¿Qué quieres decir? Parece un sueño o algo así.

Rootical V.Agos

7

Yo suelo:

border: 0;

Desde 8.5.4 en CSS 2.1 :

'frontera'

Valor: [<ancho de borde> || <estilo de borde> || <'border-top-color'>] | heredar

Entonces, cualquiera de sus métodos se ve bien.

cletus
fuente

1

Cero puntos se ve igual que cero sólido

Christopher Altman

1

Cierto. Pero, vea también la respuesta de Chris

Antony Hatchkins

5

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

Experimentar:

Vamos a crear tres divs, el primero cuyo borde solo se puede desactivar estableciendo su ancho en cero, el segundo que solo se puede desactivar estableciendo su estilo en ninguno, y un tercero con un borde que solo se puede "desactivar" estableciendo 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; ancho de borde: 2px! importante; color del borde: rojo! importante; ancho de borde: 2px! importante; estilo de borde: sólido! importante;

Mostrar fragmento de código

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

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

Expandir fragmento

Mis resultados fueron los mismos en Firefox y Chrome:

border: 0;Parece establecer el ancho del 0borde y el estilo del borde none, pero no cambiar el color del borde;

border: none;Parece que solo cambia el estilo de borde (a none);

border: transparent;Parece cambiar el color del transparentborde a y el estilo del borde a none;

Edad Danzig
fuente

2

Si bien los resultados probablemente serán los mismos (sin borde), el 0 y ninguno técnicamente abordan cosas diferentes.

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

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

Carly
fuente

2

La forma más fácil de eliminar el borde con CSS

border: 0;

Amor kumar
fuente

-1

DEBEMOS USAR FRONTERA 0

Según mi opinión y experiencia, sugeriría utilizar Border: 0; Hay una razón válida y muy buena porque siempre que usamos borde: ninguno, entiendo que funciona, pero piense que estamos usando un borde, 1px, 2px, 3px, etc. Quiero decir que estamos dando el valor de que nuestro borde es ... px / em / rem a la derecha, por lo que debemos usar border: 0; para eliminar el valor del borde porque, como sabemos cuando usamos fondo: ninguno; significa que estamos eliminando el fondo de un fondo que no es un valor que es otra cosa.

Gracias

Vinod Kumar
fuente

-3

En mi punto

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

así que mejor podemos usar border:0;

angulos
fuente

66

No hay nada inválido border: none.

Quentin