css - rounded - ¿Debo usar ''border: none'' o ''border: 0''?

div border html

Question

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

frontera: ninguna;
borde: 0;

Answer 1

(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 de shortand

De acuerdo con la especificación W3C CSS2.1 ( "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 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.

Bordes en un contexto de tabla en modelo de borde colapsado

Cuando una tabla se procesa usando border-collapse: collapse , entonces cada borde renderizado se comparte entre múltiples elementos (los bordes internos se comparten como celdas vecinas; los bordes externos se comparten entre las celdas y la tabla en sí, 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 en la frontera :

1. Las fronteras con el border-style de border-style hidden tienen prioridad sobre todas las demás fronteras en conflicto. […]

2. Las fronteras 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 estrechos se descartan en favor de los más amplios. […]

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

Por lo tanto, en un contexto de tabla, el border: hidden (o border-style: hidden ) tendrá la mayor prioridad y hará que el borde compartido esté oculto, sin importar qué.

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

Reglas en cascada y herencia

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

Demo en vivo !

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

Answer 2

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 deshabilitar estableciendo su ancho en cero, el segundo que solo se puede deshabilitar estableciendo su estilo en ninguno, y un tercero con un borde que solo se puede "deshabilitar" configurando su Color a transparente. Entonces probemos el efecto de:

• border: 0;
• border: none;

• border: transparent

  estilo de borde: sólido! importante; color del borde: rojo! importante; ancho del borde: 2px! importante; color del borde: rojo! importante; ancho del borde: 2px! importante; 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;
}

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

Mis resultados fueron los mismos tanto en Firefox como en Chrome:

border: 0; Parece establecer el ancho del borde en 0 y el estilo del borde en 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 borde a transparent y el estilo del borde a none ;

Answer 3

Como han dicho otros, 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, entonces, en teoría, podrían producir resultados diferentes, ya que efectivamente están anulando diferentes valores.

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

En el siguiente ejemplo, tanto en IE como en Firefox, los dos primeros divs de prueba salen sin borde. Sin embargo, los dos segundos 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.

Así que, aunque ambos son válidos, es posible que debas vigilar tus estilos si hacen mucha cascada y eso 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>

Answer 4

En mi punto,

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

así que mejor podemos usar border:0;

Answer 5

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

0 aborda el ancho del borde y ninguno aborda el estilo del borde. Obviamente, un borde de 0 de ancho es inexistente, 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 tratará específicamente uno u otro. Si ahora quisiera un borde de 3px, eso sería reemplazar directamente el borde: 0 con respecto al ancho. Si ahora quisiera un borde punteado, sería un borde superior directamente: ninguno en lo que respecta al estilo.

Answer 6

Simplemente puede utilizar ambos de acuerdo con las especificaciones proporcionadas por Oli.

Yo siempre uso border:0 none; .

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

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

Answer 7

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 trabajan, solo escoge uno y ve con ello :)

Answer 8

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.

Answer 9

Yo suelo:

border: 0;

Desde 8.5.4 en CSS 2.1 :

''frontera''

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

Así que cualquiera de tus métodos se ve bien.

Answer 10

Ambos son validos Es tu elección.

Prefiero el border:0 porque es más corto; Encuentro eso más fácil de leer. Puede que encuentres none más legible. Vivimos en un mundo de post-procesadores de CSS muy capaces, así que te recomiendo que uses lo que prefieras y luego lo ejecutes a través de un "compresor". No hay guerra santa que valga la pena pelear aquí.

Dicho todo esto, si está escribiendo a mano todo su CSS de producción, mantengo que, a pesar de las quejas en los comentarios, no está de más estar consciente del ancho de banda. Usando el border:0 guardará 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 de CSS2 están aquí . Estos se extienden en CSS3 pero no son relevantes 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

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

Answer 11

DEBEMOS USAR FRONTERA 0

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

Gracias