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 {_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_
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
.
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_
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
.
Source: Stackoverflow.com