Question

What is the best CSS practice to achieve a border on all sides of a container, apart from, for example, the bottom?

The border property cannot specify different values for each side.

Option 1: Overwriting Rules

border: 1px solid red;
border-bottom: none;

• Seems that an extra computation is needed — similar drawbacks as CSS resets (at least philosophically).

Option 2: Setting Specific Rules

border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;

• Might be more correct (in terms of CSS “semantics”)
• But if you want to change the border specifics, then it’ll require
  multiple changes (harder to manage).

Answer 1

Actually it totally depends on you, what is more convenient to you, it also depends on some state like if I want the color of all borders to be same I’ll go for 1st but If I think I need to change the colors of each side of the border in near future I’ll go with the second 1, but for now, I’ll stick to first option

Reasons:

• Less CSS to be stated
• Specifically it shows that I want border-bottom as none
• As you said I don’t need to change each and every property: value if I need any changes

If you say proper semantics, proper semantics define very specifically like

border-color: /*Whatever*/;
border-width: /*Whatever*/;
border-style: /*Whatever*/;

Now am sure you don’t want to be this specific