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

Asked 27/5, 2010 at 16:25 Answered 20/7, 2020 at 8:17

638

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

border: none;  
border: 0;

Microbarograph answered 27/5, 2010 at 16:25 Comment(1)

I like these type of overlooked questions. – Fructuous 19/8, 2010 at 15:11

533

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.

Haply answered 27/5, 2010 at 16:27 Comment(9)

"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. – Ask 8/2, 2014 at 19:49

@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. – Haply 8/2, 2014 at 21:49

Maybe it's worth adding to description that the statement was sarcasm-istic? :) – Lazurite 16/12, 2014 at 8:52

Additionally, all css will be served gz encoded (one would hope) reducing the 3 character benefit to nil. – Lichen 14/4, 2015 at 21:57

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: player.vimeo.com/video/22399003. – Indoor 27/8, 2016 at 7:15

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! – Grandstand 6/6, 2017 at 15:29

Am I the only one back here that cheers at an extra nanosecond? – Pretzel 8/8, 2017 at 15:12

@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: onlinelibrary.wiley.com/doi/full/10.1111/jiec.12630 – Estellaestelle 12/6, 2019 at 22:36

@Erdős-Bacon Phew, I thought 1 briquette / MB sounded a lot!! – Sellers 19/8, 2020 at 9:52

181

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

Baran answered 27/5, 2010 at 16:28 Comment(10)

Also note that "After a zero length, the unit identifier is optional", so border: 0; is valid. – Alfieri 27/5, 2010 at 16:45

@Dubs seriously?, you like when people link to w3schools? – Hillegass 27/12, 2011 at 23:7

@Hillegass - 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. – Baran 28/12, 2011 at 1:58

@ajax33221, I used them as a convenient resource when I was first learning to wwebsite as on the internet. Thanks for bringing their issues to my attention! – Outplay 6/1, 2012 at 19:58

Wrong! As described in my answer and demonstrated in the live demo, 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. – Hudibrastic 1/8, 2014 at 6:10

@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. – Baran 1/8, 2014 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. – Indignity 9/9, 2018 at 18:4

@ajax333221: can you suggest an alternative to w3schools please? – Milomilon 9/9, 2020 at 21:51

@Milomilon I usually google javascript related like this "array join MDN" (developer.mozilla.org) is good resource – Hillegass 10/9, 2020 at 20:18

@Hillegass thanks. google usually sends me to w3schools... – Milomilon 11/9, 2020 at 14:54

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

Barbabas answered 18/7, 2014 at 21:51 Comment(0)

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>

Cloudburst answered 1/6, 2010 at 9:33 Comment(1)

To remove the borders of datepickers in Sencha Touch 2, I had to use border: none instead of border: 0. – Brume 27/6, 2012 at 8:53

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.

Perspicacious answered 6/4, 2012 at 13:45 Comment(0)

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

Graceless answered 21/4, 2011 at 18:43 Comment(2)

"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). – Hudibrastic 1/8, 2014 at 6:6

Some browsers? What do you mean? Seems like a dream or something. – Anticathode 27/8, 2015 at 9:25

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.

Saros answered 27/5, 2010 at 16:26 Comment(2)

Zero dotted looks the same as zero solid – Fructuous 27/5, 2010 at 17:54

True. But, see also Chris's answer – Gregory 24/1, 2012 at 12:26

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;

Stoneblind answered 13/3, 2018 at 14:13 Comment(0)

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.

Placard answered 4/10, 2016 at 21:20 Comment(0)

Easiest Way to remove border with css

border: 0;

Autogenous answered 30/10, 2019 at 5:56 Comment(0)

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

Annorah answered 20/7, 2020 at 8:17 Comment(0)

-3

In my point,

border:none is working but not valid w3c standard

so better we can use border:0;

Snell answered 1/2, 2013 at 12:24 Comment(1)

There is nothing invalid about border: none. – Periphrasis 8/5, 2016 at 17:43

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++