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

User · Answer

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

User · Answer

In my point   border none is working but not valid w3c standard   so better we can use border 0

User · Answer

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        x000D   x000D  var container   document querySelector   container    x000D  var btnSetZero   document querySelector   setZero    x000D  var btnSetNone   document querySelector   setNone    x000D  var btnSetTransparent   document querySelector   setTransparent    x000D  var btnReset   document querySelector   reset    x000D  btnSetZero addEventListener  click        gt    x000D   container className    border-zero   x000D      x000D   x000D  btnSetNone addEventListener  click        gt    x000D   container className    border-none   x000D      x000D   x000D  btnSetTransparent addEventListener  click        gt    x000D   container className    border-transparent   x000D      x000D   x000D  btnReset addEventListener  click        gt    x000D   container className       x000D      x000D  div div   x000D    border  2px solid red  x000D    margin  2px  x000D    font-family  monospace  x000D    white-space  nowrap  x000D    width  250px  x000D    x000D   x000D  div border-zero div   x000D    border  0  x000D    x000D  div border-none div   x000D    border  none  x000D    x000D  div border-transparent div   x000D    border  transparent  x000D    x000D   lt div id  container  gt  x000D     lt div style  border-style  solid important  border-color  red important   gt  x000D      border-style  solid important  lt br gt  x000D      border-color  red important  x000D     lt  div gt  x000D     lt div style  border-width  2px important  border-color  red important   gt  x000D      border-width  2px important  lt br gt  x000D      border-color  red important  x000D     lt  div gt  x000D     lt div style  border-width  2px important  border-style  solid important   gt  x000D      border-width  2px important  lt br gt  x000D      border-style  solid important  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt button id  setZero  gt border  0  lt  button gt  x000D   lt button id  setNone  gt border  none  lt  button gt  x000D   lt button id  setTransparent  gt border  transparent  lt  button gt  x000D   lt button id  reset  gt reset lt  button gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

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  quot compressor quot   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          lt border-width gt      lt border-style gt      lt  border-top-color  gt      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

User · Answer

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   lt the same as  color  property gt   border  none       border-style  none                     border-width  medium                     border-color   lt the same as  color  property gt   border  0          border-style  none                     border-width  0                     border-color   lt the same as  color  property gt   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

User · Answer

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    lt html gt   lt head gt   lt style gt  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     lt  style gt   lt  head gt   lt body gt    lt div class  zerotest  gt   lt div class  setwidth  gt   Border  0  and  border-width  3px   lt  div gt   lt div class  setstyle  gt   Border  0  and  border-style  dashed   lt  div gt   lt  div gt    lt div class  nonetest  gt   lt div class  setwidth  gt   Border  none  and  border-width  3px   lt  div gt   lt div class  setstyle  gt   Border  none  and  border-style  dashed   lt  div gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

I use   border  0    From 8 5 4 in CSS 2 1       border       Value          lt border-width      lt border-style      lt  border-top-color       inherit   So either of your methods look fine

User · Answer

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

User · Answer

Easiest Way to remove border with css  border  0

User · Answer

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

User · Answer

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

[css] Should I use 'border: none' or 'border: 0'?

Examples related to css

Examples related to border