Border radius not showing on div-CodePudding

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;" >
  <div  style="width: 90%; height: 100%;border-radius: 30px !important;overflow: hidden;">
    <div  style="background-color: #b5ebff">
    </div>
    <div  style="background-color: white">
    </div>
  </div>
</div>

CodePudding user response：

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;" >
  <div  style="width: 90%; height: 100%;overflow: hidden;">
    <div  style="background-color: #b5ebff; border-radius: 30px;">
    </div>
    <div  style="background-color: white; border-radius: 30px;">
    </div>
  </div>
</div>

CodePudding user response：

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;" >
<div  style="width: 90%; height: 100%;border-radius: 30px !important;overflow: hidden;">
    <div  style="background-color: #b5ebff">
        

    </div>
    <div  style="background-color: white;  border-radius: 50px;">

    </div>
</div>

CodePudding user response：

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;" >
  <div  style="width: 90%; height: 100%; overflow: hidden;">
    <div  style="background-color: #b5ebff">
    </div>
    <div  style="background-color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px;">
    </div>
  </div>
</div>

CodePudding user response：

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;" >
  
  <div  style="width: 90%; height: 100%;overflow: hidden;">
    <div  style="background-color: #b5ebff;">
    </div>
    <div  style="background-color: white;">
    </div>
  </div>
</div>