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

回答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>

回答2:

You can use the shortcode for border, which contains color, width AND style (which you are missing right now):

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

回答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>

来源：https://stackoverflow.com/questions/42497049/html-div-border-not-showing