CSS ボーダーは四隅の実装コードを追加します

<div class="ログインボディ">
          <div class="border_corner border_corner_left_top"></div>
          <div class="border_corner border_corner_right_top"></div>
          <div class="border_corner border_corner_left_bottom"></div>
          <div class="border_corner border_corner_right_bottom"></div>

     <--その他……………………-->
 </div>

.ログインボディ{
        境界線: 1px実線 #21a7e1;
        ボックスの影: 5px 5px 10px 10px rgba(24,68,124,0.4);
        パディング上部:20px;
        境界線の半径: 6px;
        位置: 相対的;
      }

      /*四隅のフレーム*/
      .border_corner{
        zインデックス: 2500;
        位置: 絶対;
        幅: 19px;
        高さ: 19px;
        背景: rgba(0,0,0,0);
        境界線: 4px 実線 #1fa5f1;
      }
      .border_corner_left_top{
        上: -2px;
        左: -2px;
        右境界線: なし;
        下部境界線: なし;
        左上の境界線の半径: 6px;
      }
      .border_corner_right_top{
        上: -2px;
        右: -2px;
        左境界線: なし;
        下部境界線: なし;
        右上の境界線の半径: 6px;
      }
      .border_corner_left_bottom{
        下: -2px;
        左: -2px;
        右境界線: なし;
        上境界線: なし;
        左下の境界線の半径: 6px;
      }
      .border_corner_right_bottom{
        下: -2px;
        右: -2px;
        左境界線: なし;
        上境界線: なし;
        右下の境界線の半径: 6px;
      }