How to remove the bottom border of a box with CSS

You can either set

border-bottom: none;

or

border-bottom: 0;

One sets the border-style to none.
One sets the border-width to 0px.

div {
  border: 3px solid #900;

  background-color: limegreen; 
  width:  28vw;
  height: 10vw;
  margin:  1vw;
  text-align: center;
  float: left;
}

.stylenone {
  border-bottom: none;
}
.widthzero {
  border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>

border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>

Side Note:
If you ever have to track down why a border is not showing when you expect it to, It is also good to know that either of these could be the culprit. Also verify the border-color is not the same as the background-color.


Just add in: border-bottom: none;

#index-03 {
    position:absolute;
    border: .1px solid #900;
    border-bottom: none;
    left:0px;
    top:102px;
    width:900px;
    height:27px;
}

Tags:

Css

Border