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.
css - Should I use `border: none` or `border: 0`? - Stack Overflow
How t reproduce floating left border style
Why does Chrome ignore border style outset?
[Show-off] Old-school ASCII-art style
Videos
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.
They are equivalent in effect, pointing to different shortcuts:
border: 0;
//short for..
border-width: 0;
And the other..
border: none;
//short for...
border-style: none;
Both work, just pick one and go with it :)