如何修复内容未显示的框？

Question

I'm trying to wrap multiple things within a box, namely a login feature. However when I've tried putting the content within it's own but even after editing the css the actual changes don't show

I've tried both a .boxed method and a .box + .white (for background) method. Neither show any differences

<div class="form-horizontal">
        <div class="box white">
            <h4>tbl_Gebruiker</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <div class="form-group">
                @Html.LabelFor(model => model.gebruikersnaam, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.gebruikersnaam, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.gebruikersnaam, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.wachtwoord, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.wachtwoord, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.wachtwoord, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>

And for the css:

.box {
      width: 800px;
      height: 500px;
      border: 2px black;
  }
  .white {
      background: white;
  }

What I expect to happen is that the login feature gets wrapped in a white box with a black border. What happens is well, nothing.

Answer 1

The reason why you are not able to see the border even after applying the .box class is that you haven't declared the border-style . So, a default value of none is taken which specifies no border.

As per the Border property syntax it accepts one or more of the following values in combination:

border:  <border-width> || <border-style> || <color>

And what you have specified is a border-width and color without the border-style for the border property which makes the .box class border property as: border:2px black none .

So, change the class .box from this:

.box {
  width: 800px;
  height: 500px;
  border: 2px black;
}

To this:

.box {
  width: 800px;
  height: 500px;
  border: 2px solid black;
}

And you will be able to see the border.

Answer 2

If i am getting your question right follow below css:

.box{
width: 100%;
height:100%;
border: 2px solid black;
background:white;

}

Answer 3

You can use this way that css

.white-box {
background: #fff;
border-radius: 15px;
padding: 0 0 35px 0;
box-shadow: rgba(0,0,0,0.1) 0 4px 5px;
border: #eee solid 1px;
height: 100%;