在HTML和CSS中仅获取底部边框

Question

I wanted only border-bottom line, not border-left, border-right or border-top:
So I wrote a code like this:
CSS code and HTML code :

 .category { border-radius: 4px; border: 1px solid blue; height: 33px; margin: 2% 0; padding: 1% 2%; width: 100%; border-bottom: lined; border-bottom-color: blue; } 

 <div class = "category"> <span class = "ctgryName" id="ctgryName">JNCIA - Junos</span> <!-- <span class = "ctgryIcon pull-right"></span> --> </div> 

But I'm getting a whole border, I want only border-bottom line.
How can I do it?

Answer 1

Your mistake is that you set the border instead of border-bottom , please do the following-

change this css line:

border: 1px solid blue;  

to

border-bottom: 1px solid blue;

Answer 2

You can select wich border you want to display like this :

border:0;
border-bottom:1px solid blue;

Answer 3

try this code.. u made mistake in css you have used border also and border-bottom also. u need to use only border-bottom

   .category {
   border-radius: 4px;
   border-bottom: 1px solid blue;
   height: 33px;
   margin: 2% 0;
   padding: 1% 2%;
   width: 100%;

    }  

Answer 4

change

border: 1px solid bleu;

to

 border-bottom: 1px solid blue;