Devo usar 'border: none' ou 'border: 0'?

543

Qual dos dois métodos está em conformidade com os padrões W3C? Ambos se comportam conforme o esperado nos navegadores?

borda: nenhuma;
borda: 0;

css border

— John Himmelman
fonte

74

Eu gosto desse tipo de perguntas negligenciadas.

— Christopher Altman

453

Ambos são válidos. É a sua escolha.

Eu prefiro border:0porque é mais curto; Acho isso mais fácil de ler. Você pode achar nonemais legível. Como vivemos em um mundo de pós-processadores CSS muito capazes, recomendo que você use o que preferir e execute-o através de um "compressor". Não há guerra santa que valha a pena lutar aqui.

Dito isto, se você estiver escrevendo manualmente todo o seu CSS de produção, eu mantenho - apesar das queixas nos comentários - não faz mal ter consciência da largura de banda. Usando border:0 vai economizar uma quantidade infinitesimal de largura de banda. Por si só, isso conta muito pouco, mas se você fizer com que cada byte conte , você tornará seu site mais rápido.

As especificações do CSS2 estão aqui . Eles são estendidos no CSS3, mas não são relevantes para isso.

'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

Você pode usar qualquer combinação de largura, estilo e cor.
Aqui, 0define a largura, noneo estilo. Eles têm o mesmo resultado de renderização: nada é mostrado.

— Oli
fonte

117

"Se você tem muito tráfego, notará a diferença!" Duvido muito disso. Mesmo com um milhão de visitantes por hora, a diferença é de apenas 3 MB. E isso assumindo que nenhum desses visitantes tenha o CSS armazenado em cache e também pressupõe que a compactação forneça 0 benefício, ambas as instruções muito improváveis. Na realidade, provavelmente haveria algumas centenas de KB de diferença por dia, o que é basicamente 0 para um site grande. Não que eu ache que border:noneseja de alguma forma melhor, mas usar isso como seu raciocínio está com defeito.

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft Foi mais sarcasmo do que qualquer outra coisa .. ... Ou hipérbole ... Ou um pouco de ambos. Você está certo, isso provavelmente nunca terá um efeito de tempo de execução em nada, a menos que você o use milhares de milhões de vezes e todos na Internet acessem seu CSS de uma só vez.

— Oli

6

Talvez valha a pena adicionar à descrição que a afirmação era isca de sarcasmo? :)

— timofey.com

7

Só por completude, eu queria acrescentar outro aspecto. A transferência de 1 MB de dados requer a quantidade de energia contida em um briquete de carvão comum. Veja esta palestra do Jay Walkers no TED: player.vimeo.com/video/22399003 .

— Zensursula 27/08/16

11

Eu sou o único aqui atrás que torce por um nanossegundo extra?

— Leathan

155

Eles têm efeito equivalente , apontando para diferentes atalhos :

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

E o outro..

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

Ambos funcionam, basta escolher um e seguir em frente :)

— Nick Craver
fonte

5

Observe também que "Após um comprimento zero, o identificador da unidade é opcional" , portanto, border: 0;é válido.

— Ismael

59

@Dubs seriamente ?, você gosta quando as pessoas fazem links para w3schools?

— ajax333221

29

@ ajax333221 - Tenha cuidado com uma atitude em preto e branco em relação à w3schools (ou a qualquer site). Nesse caso, a descrição é boa, enquanto eu os odeio em geral, a explicação deles referente a essa pergunta é correta e bastante sucinta. Você é livre para odiá-los em geral, e eu sim, mas não assuma que 0% do conteúdo é útil, alguns deles são, até algumas coisas nas respostas do yahoo são úteis, até certo ponto.

— Nick Craver

4

Errado! Conforme descrito na minha resposta e demonstrado na demonstração ao vivo , border: 0NÃO é o atalho para border-width: 0. Em vez disso, a versão curta sempre define todas as três propriedades: border-color, border-stylee border-width.

— Denilson Sá Maia

3

@ DenilsonSá Eu disse que eles eram iguais na primeira linha da resposta, porque se a borda tem uma largura 0, as outras 2 não importam aqui. Porém, o CSS 2.1, que esclareceu o comportamento aqui, foi a última chamada 7 meses após esta resposta e foi apresentado como recomendação mais de um ano depois. Se você quiser esclarecer respostas antigas aqui, faça-o! A edição de atualizações é incentivada ativamente.

— Nick Craver

42

Como outros já disseram, ambos são válidos e farão o truque. Não estou 100% convencido de que eles sejam idênticos. Se você tem algum estilo em cascata, eles podem, em teoria, produzir resultados diferentes, uma vez que substituem efetivamente valores diferentes.

Por exemplo. Se você definir "border: none;" e, posteriormente, como dois estilos diferentes substituem a largura e o estilo da borda, um faz algo e o outro não.

No exemplo a seguir, no IE e no Firefox, as duas primeiras divs de teste são exibidas sem borda. Os dois segundos, no entanto, são diferentes, com a primeira div no segundo bloco sendo plana e a segunda div no segundo bloco com uma borda tracejada de largura média.

Portanto, embora ambos sejam válidos, talvez você precise ficar de olho em seus estilos, se eles fizerem muito em cascata e coisas como eu acho.

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

1

Para remover as bordas dos seletores de data no Sencha Touch 2, tive que usar em border: nonevez de border: 0.

— Kris Khaira

39

(nota: esta resposta foi atualizada em 01/08/2014 para torná-la mais detalhada, precisa e adicionar uma demonstração ao vivo )

Expandindo as propriedades shortand

De acordo com a especificação CSS2.1 do W3C ( “Valores omitidos são definidos com seus valores iniciais” ), as seguintes propriedades são 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>

Se essas regras forem as mais específicas aplicadas às bordas de um elemento, as bordas não serão mostradas, por causa da largura zero ou por hidden/none style. Portanto, à primeira vista, essas três regras parecem equivalentes. No entanto, eles se comportam de maneiras diferentes quando combinados com outras regras.

Bordas em um contexto de tabela no modelo de borda recolhida

Quando uma tabela é renderizada border-collapse: collapse, cada borda renderizada é compartilhada entre vários elementos (as bordas internas são compartilhadas como células vizinhas; as bordas externas são compartilhadas entre células e a própria tabela; mas também linhas, grupos de linhas, colunas e grupos de colunas compartilham bordas ) A especificação define algumas regras para a resolução de conflitos de fronteira :

Fronteiras com a border-stylede hiddenter precedência sobre todas as outras fronteiras conflitantes. [...]

As fronteiras com um estilo de nonetêm a menor prioridade. [...]

Se nenhum dos estilos for hiddene pelo menos um deles não for none, as bordas estreitas serão descartadas em favor de outras mais amplas. [...]

Se os estilos de borda diferem apenas em cores, […]

Portanto, em um contexto de tabela, border: hidden(ou border-style: hidden) terá a maior prioridade e ocultará a borda compartilhada, não importa o quê.

No outro extremo das prioridades, border: none(ou border-style: none) tem a prioridade mais baixa, seguida pela borda com largura zero (porque é a borda mais estreita). Isso significa que um valor calculado de border-style: nonee um valor calculado deborder-width: 0 são essencialmente os mesmos.

Regras e herança em cascata

Como nonee 0afetam diferentes propriedades ( border-stylee border-width), elas se comportarão de maneira diferente quando uma regra mais específica definir apenas o estilo ou apenas a largura. Veja a resposta de Chris para um exemplo.

Demonstração ao vivo !

Deseja ver todos esses casos em uma única página? Abra a demonstração ao vivo !

— Denilson Sá Maia
fonte

21

Usando

border: none;

não funciona em algumas versões do IE. O IE9 é bom, mas nas versões anteriores ele exibe a borda mesmo quando o estilo é "nenhum". Eu experimentei isso ao usar uma folha de estilo de impressão onde não queria bordas nas caixas de entrada.

border: 0;

parece funcionar bem em todos os navegadores.

— Kieran
fonte

12

Você pode simplesmente usar os dois conforme a especificação gentilmente fornecida pela Oli.

Eu sempre uso border:0 none;.

Embora não haja mal algum em especificá-los separadamente e alguns navegadores analisarão o CSS mais rapidamente se você usar as chamadas de propriedade CSS1 herdadas.

Embora border:0;normalmente o padrão seja o estilo da borda none, notei, no entanto, alguns navegadores aplicando o estilo da borda padrão, que pode sobrescrever estranhamente border:0;.

— Xenni82
fonte

"alguns navegadores analisam o CSS mais rapidamente" → não há diferença perceptível no tempo de análise do CSS. E, realmente, o tempo de análise de CSS não é relevante para 99,999999999999% dos casos. O tempo de renderização do CSS é muito mais importante (e também totalmente não relacionado a essa pergunta).

— Denilson Sá Maia

1

Alguns navegadores? O que você quer dizer? Parece um sonho ou algo assim.

— Rootical V.

7

Eu uso:

border: 0;

A partir da 8.5.4 no CSS 2.1 :

'fronteira'

Valor: [<largura da borda> || <border-style> || <'border-top-color'>] | herdar

Portanto, qualquer um dos seus métodos parece bem.

— cleto
fonte

1

Zero pontilhado parece o mesmo que zero sólido

— Christopher Altman

1

Verdade. Mas, ver também a resposta de Chris

— Antony Hatchkins

5

Bem, para ver com precisão a diferença entre border: 0e border: nonepodemos fazer algumas experiências.

Experimentar:

Vamos criar três divs, primeiro um cuja borda só pode ser desativada definindo sua largura como zero, o segundo que só pode ser desativado definindo seu estilo como nenhum e um terceiro com uma borda que só pode ser "desativada" definindo sua largura. cor para transparente. Então vamos tentar o efeito de:

border: 0;
border: none;
border: transparent

estilo de borda: sólido! importante; cor da borda: vermelho! importante; largura da borda: 2px! important; cor da borda: vermelho! importante; largura da borda: 2px! important; estilo de borda: sólido! importante;

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

Meus resultados foram os mesmos no firefox e no chrome:

border: 0;Parece definir a largura da 0borda e o estilo da borda none, mas não alterar a cor da borda;

border: none;Parece alterar apenas o estilo da borda (para none);

border: transparent;Parece alterar a cor da transparentborda e o estilo da borda para none;

— Agesly Danzig
fonte

2

Embora os resultados provavelmente sejam os mesmos (sem borda), o 0 e nenhum estão tecnicamente abordando coisas diferentes.

0 endereça a largura da borda e nenhum endereça o estilo da borda. Obviamente, uma borda com largura 0 é inexistente, portanto, não terá estilo.

No entanto, se mais tarde na sua folha de estilo você pretender substituí-lo, naturalmente abordará especificamente um ou outro. Se agora eu quisesse uma borda 3px, essa seria a substituição direta da borda: 0 em relação à largura. Se agora eu quisesse uma borda pontilhada, isso seria diretamente superior à borda: nenhuma em relação ao estilo.

— Carly
fonte

2

A maneira mais fácil de remover bordas com css

border: 0;

— Love Kumar
fonte

-1

DEVEMOS USAR FRONTEIRA 0

De acordo com minha opinião e experiência, sugiro que use Border: 0; Há uma razão válida e muito boa, porque sempre que usamos borda: nenhuma, eu entendo que funcione, mas pense que estamos usando uma borda, 1px, 2px, 3px etc. Quero dizer, estamos dando o valor de nossa borda ... px / em / rem right então precisamos usar border: 0; para remover o valor da borda porque, como sabemos, quando usamos background: none; significa que estamos removendo o plano de fundo de um plano de fundo que não é um valor que é outra coisa.

obrigado

— Vinod Kumar
fonte

-3

No meu ponto,

border:none está funcionando, mas não é o padrão w3c válido

tão melhor que podemos usar border:0;

— anglimasS
fonte

6

Não há nada de inválido border: none.

— Quentin