[css] How to remove the bottom border of a box with CSS

alt text

I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.

Edit: Here is my CSS:

_x000D_
_x000D_
#index-03 {_x000D_
  position: absolute;_x000D_
  border: .1px solid #900;_x000D_
  border-width: .1px;_x000D_
  border-style: solid;_x000D_
  border-color: #900;_x000D_
  left: 0px;_x000D_
  top: 102px;_x000D_
  width: 900px;_x000D_
  height: 27px;_x000D_
}
_x000D_
<div id="index-03" _x000D_
     style="background-color:limegreen; width:300px; height:75px;">_x000D_
</div>
_x000D_
_x000D_
_x000D_

This question is related to css border

The answer is


You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.

The width property is what your C-D is, but it is also what A-B is. If you omit it, the div will not have a defined width and the width will be defined by its contents.


Update (following the comments on the question:

Add a border-bottom-style: none; to your CSS to remove this style from the bottom only.


You could just set the width to auto. Then the width of the div will equal 0 if it has no content.

width:auto;

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.

_x000D_
_x000D_
div {_x000D_
  border: 3px solid #900;_x000D_
_x000D_
  background-color: limegreen; _x000D_
  width:  28vw;_x000D_
  height: 10vw;_x000D_
  margin:  1vw;_x000D_
  text-align: center;_x000D_
  float: left;_x000D_
}_x000D_
_x000D_
.stylenone {_x000D_
  border-bottom: none;_x000D_
}_x000D_
.widthzero {_x000D_
  border-bottom: 0;_x000D_
}
_x000D_
<div>_x000D_
(full border)_x000D_
</div>_x000D_
<div class="stylenone">_x000D_
(style)<br><br>_x000D_
_x000D_
border-bottom: none;_x000D_
</div>_x000D_
<div class="widthzero">_x000D_
(width)<br><br>_x000D_
border-bottom: 0;_x000D_
</div>
_x000D_
_x000D_
_x000D_

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.