Should I use 'border: none' or 'border: 0'?

Question

Which of the two methods conforms to W3C standards? Do they both behave as expected across browsers?

border: none;
border: 0;

Answer 1

Both are valid. It's your choice.

I prefer border:0 because it's shorter; I find that easier to read. You may find none more legible. We live in a world of very capable CSS post-processors so I'd recommend you use whatever you prefer and then run it through a "compressor". There's no holy war worth fighting here but Webpack→LESS→PostCSS→PurgeCSS is a good 2020 stack.

That all said, if you're hand-writing all your production CSS, I maintain —despite the grumbling in the comments— it does not hurt to be bandwidth conscious. Using border:0 will save an infinitesimal amount of bandwidth on its own, but if you make every byte count, you will make your website faster.

---

The CSS2 specs are here. These are extended in CSS3 but not in any way relevant to this.

'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  

You can use any combination of width, style and colour.
Here, 0 sets the width, none the style. They have the same rendering result: nothing is shown.