圆角不适用于div内的所有角？

Question

For some reason border-radius is not applying to all corners of the div (the grey in the screenshot). Is there something I'm doing wrong?

Also, if you notice the furthest right of my header isn't covered - I don't suppose this is an issue with Chrome? (I'll attach my CSS for the header too just in case).

For Rounded Corners:

HTML:

<div class="header"></div>
<h1 class="title">Creative Checker</h1>
<div class="row">
  <div class="col-12 col-md-10 offset-md-1">
    <div class="alert alert-success" style="display: none">
    </div>
    <div class="alert alert-danger" style="display: none">
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="text-center">
          1. Select product type:
        </p>
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-lg-4">
        <button type="button" id="btn-snapshot" class="btn btn-secondary col-lg-12">Snapshot</button>
      </div>
      <div class="col-lg-4">
        <button type="button" id="btn-tmd" class="btn btn-secondary col-lg-12">TMD</button>
      </div>
      <div class="col-lg-4">
        <button type="button" id="btn-bpush" class="btn btn-secondary col-lg-12">Behavioural Push</button>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <p class="text-center">
          2. Upload folder/images:
        </p>
        <form action="server.php" class="dropzone" id="my-awesome-dropzone" onsubmit="onSubmit()">
          <!-- <select name="product-type" id="product_type">
                <option value="snapshot">
                  Snapshot
                </option>
                <option value="TMD">
                  TMD
                </option>
                <option value="b-push">
                  Behavioural Push
                </option>
              </select> -->
        </form>
      </div>
    </div>
  </div>
</div>

CSS:

.row {
  padding-top: 12px;
  padding-bottom: 15px;
  background-color: #F1F1F1;
  border-radius: 50px;
}

For Header Issue:

.header {
  min-height: 100px;
  background-image: url('header_wallpaper.png');
  background-position: center;
  background-size: contain;
}

Answer 1

I'm looking at your code and I also had tried it on codepen and the border-radius attribute it's working fine, even in the photo you shared it's seems like it's doing what it should do. I notice that the left side of the div it's too near to the borer of the browser and that's why it's seems to not being applied to all the div.

First of all, I recommend you to reset the css. Because the browser itself has properties which applies to your pages by default and it could make things work weird and maybe that's what it's making your div to look like that. To do that, at the begining of your css file do:

*{
  margin: 0;
  padding: 0;
}

You could also add things like color or font-family inside of the reset css to apply things to the whole of the page.

That should solve the problem with the div and the header, if it doesn't, try to add to .row{ margin: 1px;} or something like that and .header{width:100%;} .