Setting a border for one or two sides of the element

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.

16 Likes

Is there a specific order in which these designs have to come in, such as width, style, then color? Or is it able to be scrambled such as attributes for tags?

2 Likes

No There is no specific order to set this as we can set

style then color then width or as we want.

7 Likes

This is from the border style documentation available at MDN Web Docs:

The border-style property may be specified using one, two, three, or four values.

  • When one value is specified, it applies the same style to all four sides .
  • When two values are specified, the first style applies to the top and bottom , the second to the left and right .
  • When three values are specified, the first style applies to the top , the second to the left and right , the third to the bottom .
  • When four values are specified, the styles apply to the top , right , bottom , and left in that order (clockwise).
    Source: border-style - CSS: Cascading Style Sheets | MDN

Therefore, you can achieve your desired result by concatenating up to four values to the border-style css property.

If you want to set a border to just one side of the element, use four values (write none to the side you want no border to appear).

If you want to set a border to the top and bottom sides, use two values (write none to the second value).

If you want to set a border to the left and right, use three values (write none to the first and third values).

Example:

border-style: none solid none none; // border will be applied only to the right side.

border-style: solid none; // border will be applied only to the top and bottom sides.

20 Likes

Hi guys, I have a question about styling paragraphs in css.

What if I have 3000 paragraphs in html code and I want to color half red and the other half blue (styling in css)? if I go through classes, the solution will take longer.If anyone knows the simpless solution, please answer :smiley:

Hi, one thing you can do is wrap one half in a div with class red and the other half in a div with class blue. Then in css you and select .red p {color: red;} and . blue p {color: blue;}.

3 Likes

nice example! thank you axelkaban

This code is working properly. Dialdesk

Hi, That’s good to know. Thank you very much for your useful information.

is there an issue if we configure the values in no specific order. For instance in the example usually we se see that values for border are given in width style and color in that order. There is an issue if I code somethin like:
p {
border: dotted red 3px;
}
???

1 Like

In (CSS), you can definitely specify border properties (such as width, style, and color) in any order you prefer! Hope this helps :slight_smile:

1 Like