'HTML Div border not showing

I'm trying to add a border to a div element in HTML. Below is my code. 

#container-border {
  border-width: 2px;
  border-color: red;
}
<div id="container-border">
  ...
</div>

For some reason, the border doesn't show up. I had a look on a similar question (here) but I couldn't figure out why the border doesn't show up. Any suggestions please?

Note: This snippet is a part of an HTML page. Additional code could be provided upon request

htmlcss


Solution 1:[1]

The default value of border-style is none. You need to set a different value for a border to appear.

#container-border {
  border-width: 2px;
  border-color: red;
  border-style: dashed;
}
<div id="container-border">
  ...
</div>

Solution 2:[2]

You can use the shortcode for border, which contains color, width AND style (which you are missing right now, and whose default setting is "none"):

#container-border {
  border: 2px solid red;
}

Solution 3:[3]

You have to set the rule "border-style" to see the border

#container-border {
  border-width: 2px;
  border-color: red;
  border-style:solid;
}
<div id="container-border">
  ...
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Quentin
Solution 2
Solution 3 Diana Ysabel

Related Questions