Setting a border for one or two sides of the element


#1

Question

Is it possible to set a border for one or two sides of the element?

Answer

Yes! Sometimes we want to make text look as if it has been underlined or sandwiched between two lines. It is not really possible through the border property but we can use its derivatives:


border-top

border-right

border-bottom

border-left

Each one of them follows the same value structure for border: width style color;

So, to have a white top and bottom lines on a paragraph tag that is 2 pixels wide, we would write something like this:


p{

border-top: 2px solid white;

border-bottom: 2px solid white;

}

and then you can see something like this:

Note: There are other styles involved, but the main reason of this visual is for the borders.