Should I use 'border: none' or 'border: 0'?
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 :)
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.