How to create div with curve in css and html5?

Question

I am newbie in css world and I am trying to make responsive design like this using bootstrap,css and html5.

but ended up like this.

how to create same

Answer 1

To get curved edges use border-radius, the background can be achieved with linear-gradient

jsfiddle: https://jsfiddle.net/ojhcbepz/

html, body {
  height: 100%;
}
div.outer {
  width: 600px;
  height: 250px;
  background: linear-gradient(to bottom,blue 50%,red 0px);
  padding: 20px 0;
  overflow: hidden;
}
div.inner {
  height: 100%;
  border-radius: 50%;
  background: white;
  margin: 0 -50px;
}