【CSS:添付画像のようにしたいです】form-groupの設定の仕方

Question

添付画像のように背景をグレーで角を丸くし、入力フォームをその中に入れたいと思っています。
bootstrapを使っており下記のように書いたのですが、角丸やsubmitボタンのサイズ等全く反映されません。
対応方法を教えていただければと思います。
よろしくお願い致します。

<div class="top_image">
<div class="container">
  <div class="col-lg-12 mx-auto">
    <form>
    <%= form_for @user, url:sign_in_path do |f| %>
      <div class="form-group">
       <label for="user_email"></label>
        <%= f.email_field :email, class: "form-control", placeholder:"メールアドレス" %>
       <label for="user_password"></label>
        <%= f.password_field :password, class: "form-control", placeholder:"パスワード" %>
      <input type="submit" value="ログインする" class="btn btn-primary  btn-block">
      </div>
    <% end %>
    </form>
  </div>
</div>
</div>

.form-group {
  width: 500px;
  border: 1px solid #d8dadf;
  padding: 10px;
  color: #000000;
  background-color: #fff;
  border-radius: 2px;
  margin-left: auto;
}

label[for="user_email"] {
  width: 80%;
  font-size: 16px;
  letter-spacing: 2px;
}

label[for="user_password"] {
  width: 80%;
  font-size: 16px;
  letter-spacing: 2px;
}

input[type="submit"]{
  width: 200px;
}

Comments

[miyabi_pudding]

JSPでしょうか？
使っている言語、フレームワークは全てタグに入れましょう。

また、HTMLは、完全に出力後（JSPなりなんなりを適用後の最終的なHTML）状況を記載いただいた方が、回答を得られやすいと思います。
（要素の構造などが変わるため、CSSの適用方法が変わる）

[Komama]

ご指摘ありがとうございます。
修正して再投稿します。

Answer 1

角丸は効いていると思います。2px よりももう少し大きくしてみたらどうでしょうか？

.btn-block のボタンは幅100%に広がります。
https://getbootstrap.com/docs/4.3/components/buttons/#sizes

btn-block を外すか、上書きするならクラス名を含めてみてください。

input[type="submit"].btn-block {
  width: 200px;
}