Should I Use 'Border: None' or 'Border: 0'

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

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 - Border none still showing a border

It's becuase of your CSS transformations.

To get rid of those borders (in Chrome) you must add -webkit-backface-visibility with a value of hidden. This will smooth them out.

-webkit-backface-visibility: hidden;

Here is your JSFiddle updated

border none property does not really remove the border (visually)

The border looks more like a drop shadow than an actual grey line. I see you've tagged the question with 'twitter-bootstrap'. Try adding the following line to your code where fit.

box-shadow: none;

Why does .border-0 override .border-bottom in Bootstrap 4.0.0

This is basically answered in Why is there an important override on the border classes's color property in Bootstrap?

As you can see in the docs, the borders are additive and subtractive.
The border--*-0 classes are meant to remove borders, either all or specific sides, from an element that already has borders such as the card.

The other border-* classes are meant to add borders.

Therefore, in the case of border-0 border-bottom, yes border-0 removes borders from all sides as intended. In your example, it doesn't make sense to use border-0 because the box doesn't have borders to start with.

If you wanted to only show a border-bottom border-primary on an element that already has borders (ie: card), you'd use: border-primary border-left-0 border-right-0 border-top-0... border-primary to changes the existing border color, and border-left-0 border-right-0 border-top-0 to remove the existing border.

Hiding/Showing border

Your solution is the right way to handle this problem.

Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.

I would use exactly the same method you have used.

The border goes all the way to the right

Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.

Also, get rid of the top left attributes.

*{
  padding: 0;
  margin: 0;
  box-sizing: inherit;
  box-sizing: border-box;
}


body {
    font-size: 15pt;
    // width: 480px;
    // height: 500px;
}

#kilograms {
  position: relative;
  // top: 70px;
  // left: 140p;
  border: 20px solid crimson;
  border-radius: 4px;
}
#pounds {
  position: relative;
  // top: 100px;
  // left: 240px;
}
.dinnars {
  border: 15px solid darkorchid;
  width: min-content;
  position: relative;
  // top: 150px;
  // left: 240px;
  border-radius: 4px;
}

.box{
  border:2px dotted green;
  width: 500px;
  height 500px;
}

<div class='box'>
  <input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
  <p id="pounds">0</p>
  <p id="dinnars" class="dinnars">0</p>
</div>

*{
  margin: 0;
  padding: 0
}