CSS Border Radius issue

Question

Can anyone explain me how make a rounded border div like this image?

I tried but the result is not the same: the left and right side curves should be less hard.

Here it is my code snippet:

.cnt {
  margin: 0 auto;
  border: 1px solid grey;
  width: 300px;
  height: 150px;
  position: relative;
  background-color: #4a4d84;
}

.t {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: red;
  bottom: 0;
}

.t::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 70px;
  top:-30px;
  background-color: red;
  border-radius: 50% 50% 0 0;
}

<div class="cnt"> 
  <div class="t">
   
  </div>
</div>

Can you help me?

score 4 · Accepted Answer · answered Jan 10 '17 at 20:29

You want the circle to be round and much wider than the parent, yet at the same or a similar aspect ratio, hide the overflow, and you can do it with a single element.

div {
  width: 400px;
  height: 300px;
  background: blue;
  position: relative;
  overflow: hidden;
}
div:after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%);
  background: red;
  height: 300%; width: 400%;
  border-radius: 50%;
}

<div></div>

score 1 · Answer 2 · answered Jan 10 '17 at 20:29

Increasing .ts width to 200% and having a larger border radius does the trick. You can now alter its height to adjust the curve.

.cnt {
  margin: 0 auto;
  border: 1px solid grey;
  width: 300px;
  height: 150px;
  position: relative;
  background-color: #4a4d84;
  overflow: hidden;
}
.t {
  position: absolute;
  width: 200%;
  height: 200px;  /* Change this to adjust the curvature. */
  top: 40%;
  left: -50%;
  background-color: red;
  border-radius: 200%;
}

<div class="cnt">
  <div class="t">

  </div>
</div>

score 0 · Answer 3 · answered Jan 10 '17 at 21:12

you can increase the width (as advised in other answers) of your pseudo and use a box-shadow to paint the upper part of the box:

div:before {
  content:'';
  position:absolute;
  top:3em;
  left:-5%;
  right:-5%;
  bottom:0;
  box-shadow:0 0 0 8em turquoise;
  border-radius:100% 100% 0 0%;
  pointer-events : none; /* remove it from the way */
}
div {
  box-sizing:border-box;
  position:relative;
  width:300px;
  margin:auto;
  border:solid;
  font-size:20px;
  padding:5em 1em 1em;
  background:tomato;
  color:white;
  text-align:center;
  font-variant:small-caps;
  overflow:hidden;
}

<div>
  Some text here  
</div>

score 0 · Answer 4 · answered Jan 11 '17 at 05:49

Another approach to use background-image:

.main {
  width: 300px;
  height: 200px;
  position: relative;
  /*
  140% is x-axis,
  50% is y-axis,

  at 50% is x-position
  90% is y-position
  */
  background-image: radial-gradient(140% 50% at 50% 90% , #1F8698 0%, #1F8698 50%, #1DC0D6 50%, #1DC0D6 100%)
}

.main::after
{
  content: "Text Here";
  position: absolute;
  bottom: 10%;
  width: 100%;
  text-align: center;
  font-size: 25px;
  color: white;
  
  }

<div class='main'></div>

CSS Border Radius issue

4 Answers4