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;

I like these type of overlooked questions. – Christopher Altman Aug 19 '10 at 15:11 — Christopher Altman, Aug 19 '10 at 15:11

Oli · Accepted Answer · 2020-08-19T10:24:36.240

526

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.

edited Aug 19 '20 at 10:24

answered May 27 '10 at 16:27

Oli

235,628
64
220
299

133

*"If you have a lot of traffic, you'll notice the difference!"* - I highly doubt that. Even with a million visitors an hour, the difference is only 3MB. And that's assuming none of those visitors have the CSS cached, and also assumes compression provides 0-benefit, both very unlikely statements. In reality, it'd probably be a few hundred KB difference a day, which is basically 0 for a large site. Not that I think `border:none` is somehow better, but using this as your reasoning is faulty. – BlueRaja - Danny Pflughoeft Feb 08 '14 at 19:49
23

@BlueRaja-DannyPflughoeft It was more sarcasm than anything else..… Or hyperbole... Or a bit of both. You're right, this will likely never have a runtime effect on anything unless you use it jillions of times and have everybody on the internet accessing your CSS at once. – Oli Feb 08 '14 at 21:49
6

Maybe it's worth adding to description that the statement was sarcasm-istic? :) – Timofey Drozhzhin Dec 16 '14 at 08:52
1

Additionally, all css will be served gz encoded (one would hope) reducing the 3 character benefit to nil. – Jamie Pate Apr 14 '15 at 21:57
9

Just for completeness I wanted to add another aspect. Transferring 1MB of data requires the amount of energy contained in a common charcoal briquette. See this TED talk of Jay Walkers: https://player.vimeo.com/video/22399003. – Zensursula Aug 27 '16 at 07:15
1

Might I point out how many MB of extra traffic and minutes of time were wasted because of this calculation and discussion? And now I'm wasting even more! – Andrew Jun 06 '17 at 15:29
15

Am I the only one back here that cheers at an extra nanosecond? – Leathan Aug 08 '17 at 15:12
1

@Zensursula--Re: Transferring 1 MB being a charcoal briquette of energy--That's a good sentiment, but those numbers are way off. It's hard to find scholarly analyses of end-to-end energy consumption for data transfer, but something on the order of ~0.02MJ/MB would be reasonable about ten years ago (when video was made). On the other hand, a charcoal briquette is around 0.4MJ (low end). So even then, that was a huge stretch. Today, values of ~0.0001MJ/MB are more reasonable, so now it's ~0.03% of a briquette per MB. Citation: https://onlinelibrary.wiley.com/doi/full/10.1111/jiec.12630 – Erdős-Bacon Jun 12 '19 at 22:36
@Erdős-Bacon Phew, I thought 1 briquette / MB sounded a lot!! – 00-BBB Aug 19 '20 at 09:52

score 175 · Answer 2 · answered May 27 '10 at 16:28

175

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

answered May 27 '10 at 16:28

Nick Craver

623,446
136
1,297
1,155

6

Also note that ["After a zero length, the unit identifier is optional"](http://www.w3.org/TR/CSS21/syndata.html#value-def-length "4 Syntax and basic data types"), so `border: 0;` is valid. – Ishmael May 27 '10 at 16:45
61

@Dubs seriously?, you like when people link to w3schools? – ajax333221 Dec 27 '11 at 23:07
32

@ajax333221 - Be careful there with a black and white attitude towards w3schools (or *any* website). *In this case* the description is fine, while I do hate them in general, their explanation as it pertains to this question is correct and fairly succinct. You're free to hate them in general, and I do, but don't assume that 0% of the content there is useful, some of it is, even some things on yahoo answers are useful, to a degree. – Nick Craver Dec 28 '11 at 01:58
2

@ajax33221, I used them as a convenient resource when I was first learning to wwebsite as on the internet. Thanks for bringing their [issues](http://w3fools.com) to my attention! – Dubs Jan 06 '12 at 19:58
6

Wrong! As described in [my answer](http://stackoverflow.com/a/24834322/) and demonstrated in the [live demo](http://codepen.io/denilsonsa/pen/LkdHh?editors=110), `border: 0` is NOT the shortcut for `border-width: 0`. Instead, the short version always sets all three properties: `border-color`, `border-style` and `border-width`. – Denilson Sá Maia Aug 01 '14 at 06:10
3

@DenilsonSá I said they were the same *in effect* as the very first line of the answer, because if the border has a 0 width, the other 2 don't matter here. As an aside though, CSS 2.1 that clarified the behavior here was last call 7 months after this answer, and pushed as a recommendation over a year after it. If you want to clarify old answers here, please do so! Editing for updates is actively encouraged. – Nick Craver Aug 01 '14 at 13:20
I'm glad to know I'm not the only one who hates w3schools. It's the site you'd get if you hired mechanical Turks to create all your content, and spent most of your energy and time perfecting the SEO. It's bland and lacking any deep insights, but almost always at the top of every relevant Google search. – iconoclast Sep 09 '18 at 18:04
@ajax333221: can you suggest an alternative to w3schools please? – user27182 Sep 09 '20 at 21:51
@user27182 I usually google javascript related like this "array join MDN" (https://developer.mozilla.org) is good resource – ajax333221 Sep 10 '20 at 20:18
@ajax333221 thanks. google usually sends me to w3schools... – user27182 Sep 11 '20 at 14:54

score 49 · Answer 3 · edited Jun 20 '20 at 09:12

(note: this answer has been updated on 2014-08-01 to make it more detailed, more accurate, and to add a live demo)

Expanding the shortand properties

According to W3C CSS2.1 specification (“Omitted values are set to their initial values”), the following properties are equivalent:

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>

If these rules are the most specific ones applied to the borders of an element, then the borders won't be shown, either because of zero-width, or because of hidden/none style. So, at the first look, these three rules look equivalent. However, they behave in different ways when combined with other rules.

Borders in a table context in collapsing border model

When a table is rendered using border-collapse: collapse, then each rendered border is shared between multiple elements (inner borders are shared among as neighbor cells; outer borders are shared between cells and the table itself; but also rows, row groups, columns and column groups share borders). The specification defines some rules for border conflict resolution:

Borders with the border-style of hidden take precedence over all other conflicting borders. […]

Borders with a style of none have the lowest priority. […]

If none of the styles are hidden and at least one of them is not none, then narrow borders are discarded in favor of wider ones. […]

If border styles differ only in color, […]

So, in a table context, border: hidden (or border-style: hidden) will have the highest priority and will make the shared border hidden, no matter what.

On the other end of the priorities, border: none (or border-style: none) have the lowest priority, followed by the zero-width border (because it is the narrowest border). This means that a computed value of border-style: none and a computed value of border-width: 0 are essentially the same.

Cascading rules and inheritance

Since none and 0 affect different properties (border-style and border-width), they will behave differently when a more specific rule defines just the style or just the width. See Chris answer for an example.

Live demo!

Want to see all these cases in one single page? Open the live demo!

score 42 · Answer 4 · answered Jun 01 '10 at 09:33

As others have said both are valid and will do the trick. I'm not 100% convinced that they are identical though. If you have some style cascading going on then they could in theory produce different results since they are effectively overriding different values.

For example. If you set "border: none;" and then later on have two different styles that override the border width and style then one will do something and the other will not.

In the following example on both IE and firefox the first two test divs come out with no border. The second two however are different with the first div in the second block being plain and the second div in the second block having a medium width dashed border.

So though they are both valid you may need to keep an eye on your styles if they do much cascading and such like I think.

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

To remove the borders of datepickers in Sencha Touch 2, I had to use `border: none` instead of `border: 0`. — Kris Khaira, Jun 27 '12 at 08:53

score 22 · Answer 5 · answered Apr 06 '12 at 13:45

Using

border: none;

doesn't work in some versions of IE. IE9 is fine but in previous versions it displays the border even when the style is "none". I experienced this when using a print stylesheet where I didn't want borders on the input boxes.

border: 0;

seems to work fine in all browsers.

score 12 · Answer 6 · edited Aug 01 '14 at 06:03

12

You may simply use both as per the specification kindly provided by Oli.

I always use border:0 none;.

Though there is no harm in specifying them seperately and some browsers will parse the CSS faster if you do use the legacy CSS1 property calls.

Though border:0; will normally default the border style to none, I have however noticed some browsers enforcing their default border style which can strangely overwrite border:0;.

edited Aug 01 '14 at 06:03

Denilson Sá Maia

47,466
33
109
111

answered Apr 21 '11 at 18:43

Xenni82

129
1
2

1

*"some browsers will parse the CSS faster"* → there is no noticeable difference in the CSS parsing time. And, really, the CSS parsing time is not relevant to 99.999999999999% of the cases. The CSS rendering time is much more important (and also totally unrelated to this question). – Denilson Sá Maia Aug 01 '14 at 06:06
2

Some browsers? What do you mean? Seems like a dream or something. – Rootical V. Aug 27 '15 at 09:25

cletus · Answer 7 · 2010-06-01T08:44:42.637

7

I use:

border: 0;

From 8.5.4 in CSS 2.1:

'border'

Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit

So either of your methods look fine.

edited Jun 01 '10 at 08:44

answered May 27 '10 at 16:26

cletus

616,129
168
910
942

1

Zero dotted looks the same as zero solid – Christopher Altman May 27 '10 at 17:54
1

True. But, see also Chris's answer – Antony Hatchkins Jan 24 '12 at 12:26

Agesly Danzig · Answer 8 · 2018-03-19T22:40:17.133

Well, to precisely see the difference between border: 0 and border: none we can make some experiments.

Experiment:

Lets create three divs, first one whose border can only be disabled by setting its width to zero, second one that can only be disabled by setting its style to none, and a third with a border that can only be "disabled" by setting its color to transparent. Then lets try the effect of:

border: 0;
border: none;
border: transparent

border-style: solid!important; border-color: red!important; border-width: 2px!important; border-color: red!important; border-width: 2px!important; border-style: solid!important;

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>

My results were the same in both firefox and chrome:

border: 0; Seems to set border-width to 0 and border-style to none, but not change border-color;

border: none; Seems to only change border-style (to none);

border: transparent; Seems to change border-color to transparent and border-style to none;

score 2 · Answer 9 · answered Oct 04 '16 at 21:20

While results will most likely be the same (no border), the 0 and none are technically addressing different things.

0 addresses border width and none addresses border style. Obviously a border of 0 width is nonexistent so will therefore have no style.

However, if later on in your stylesheet you intend to override this, you would naturally specifically address one or the other. If I now wanted a 3px border, that would be directly overriding border: 0 in regards to width. If I now wanted a dotted border, that would be directly overriding border: none in regards to styling.

score 2 · Answer 10 · answered Oct 30 '19 at 05:56

2

Easiest Way to remove border with css

border: 0;

answered Oct 30 '19 at 05:56

Love Kumar

1,056
9
10

score 0 · Answer 11 · answered Jul 20 '20 at 08:17

This is the result in Firefox 78.0.2 (64-Bit):

img {
    border: none;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: medium;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: medium;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: medium;
}

img {
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-right-color: currentcolor;
        border-right-style: none;
        border-right-width: 0px;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
        border-left-color: currentcolor;
        border-left-style: none;
        border-left-width: 0px;
        border-image-outset: 0;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
}

Date: 20200720

score -3 · Answer 12 · answered Feb 01 '13 at 12:24

-3

In my point,

border:none is working but not valid w3c standard

so better we can use border:0;

answered Feb 01 '13 at 12:24

anglimasS

1,304
2
16
41

6

There is nothing invalid about `border: none`. – Quentin May 08 '16 at 17:43

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

12 Answers12

Expanding the shortand properties

Borders in a table context in collapsing border model

Cascading rules and inheritance

Live demo!

'border'

Experiment:

Linked