Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add a bottom border to a div

Tags:

css

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?

like image 624
ScG Avatar asked Dec 28 '09 12:12

ScG


People also ask

Can you add border to div in HTML?

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.

How do I put border on top and bottom only?

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.


2 Answers

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

like image 92
rahul Avatar answered Sep 19 '22 18:09

rahul


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;
like image 37
Jamie Dixon Avatar answered Sep 19 '22 18:09

Jamie Dixon