CODEWITHSUNDEEP
cssborder
Gandalf
Gandalf

Reputation: 13683

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:

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

Upvotes: 49

Views: 229615

Answers (4)

Oded
Oded

Reputation: 498934

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.

Upvotes: 6

SherylHohman
SherylHohman

Reputation: 17900

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.

Upvotes: 8

DaiYoukai
DaiYoukai

Reputation: 1898

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

Upvotes: 100

DADU
DADU

Reputation: 7048

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

width:auto;

Upvotes: 0

Related Questions