I am trying to add a bottom border to a div
.divLast
{
top: 0px;
margin:0px;
padding: 0px 2px 2px 3px;
border-width: 2px;
border-bottom-width:2px;
border-bottom-color:White;
width: 100%;
}
However the bottom border does not appear white. Any idea?
As per the W3C: Since the initial value of the border styles is 'none', no borders will be visible unless the border style is set. In other words, you need to set a border style (e.g. solid ) for the border to show up. border:thin only sets the width.
You can use the following in your css or style tag .... Using the border-width selector you can define the various border thickness. The values are inserted in the order top, right, bottom, left and the shorthand version is top/bottom and right/left which is what I've used. Save this answer.
You have to specify the border-bottom-style also to the div
and your code becomes
.divLast
{
top: 0px;
margin:0px;
padding: 0px 2px 2px 3px;
border-width: 2px;
border-bottom-width:2px;
border-bottom-color:White;
border-bottom-style: solid;
width: 100%;
}
or you can use a shorthand for the border-bottom like below
<style>
.divLast
{
top: 0px;
margin:0px;
padding: 0px 2px 2px 3px;
border-width: 2px;
border-bottom: 2px white solid;
width: 100%;
}
</style>
<div class='divLast'>
test element with white border bottom
</div>
This works fine for me
It's because you need to state what the border style is. Without this the border wont show:
border-bottom-style:solid;
You could also combine your declerations into one like so:
border-bottom:2px solid White;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With