Border radius not showing on div

Question

I have a simple 2 div I want to make round border of second div but its not working

My code

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center"> <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;border-radius: 30px;important:overflow; hidden:"> <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff"> </div> <div class="col-lg-6 col-md-6 h-75" style="background-color: white"> </div> </div> </div>

Answer 1

You can add css like as below more detail for border radius: https://www.w3schools.com/cssref/css3_pr_border-radius.asp

border-radius: 50px;

and here is sample https://jsfiddle.net/6ekjbwzn/1/

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
<div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;border-radius: 30px !important;overflow: hidden;">
    <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff">
        

    </div>
    <div class="col-lg-6 col-md-6 h-75" style="background-color: white;  border-radius: 50px;">

    </div>
</div>

Answer 2

Your'e adding the border-radius to the row. This works fine, but the border radius doesnt show as the two child divs are not reaching the top/bottom corners. So the border-radius on the row is working , its just not visible tho.

Remove the border-radius from the row and move it onto the col(s).

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center"> <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;overflow: hidden;"> <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff; border-radius: 30px;"> </div> <div class="col-lg-6 col-md-6 h-75" style="background-color: white; border-radius: 30px;"> </div> </div> </div>

Answer 3

maybe this help, if you only want white div have border radius

 border-top-right-radius: 50px;
 border-bottom-right-radius: 50px;

and you put border radius at row, that's not gonna work to white div

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center">
  <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%; overflow: hidden;">
    <div class="col-lg-6 col-md-6 h-75" style="background-color: #b5ebff">
    </div>
    <div class="col-lg-6 col-md-6 h-75" style="background-color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px;">
    </div>
  </div>
</div>

Answer 4

You can define a class rounded-30 and assign it to the elements that should have a border. This gives you more flexibility. I would recommend avoiding inline styles and also the use of important.

 .rounded-30 { border-radius: 30px; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div style="height: 100vh; background-color: #00aff0;" class="row align-items-center justify-content-center"> <div class="mh-100 row align-items-center justify-content-center" style="width: 90%; height: 100%;overflow: hidden;"> <div class="rounded-30 col-lg-6 col-md-6 h-75" style="background-color: #b5ebff;"> </div> <div class="rounded-30 col-lg-6 col-md-6 h-75" style="background-color: white;"> </div> </div> </div>