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;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

Answer 2

well a simple solution maybe... use a small red dot image and repeat it in outer div and inner div has border-radius: 50%

<div style="background-image: red url("http://i.imgur.com/dXis68u.png") repeat;"> 

    <div style="background-color: white; border-radius: 50%; text-align:center;" >
         ABCDEFGH
    </div>
</div>

(You can add two

's of height as you want to get those top and bottom borders)

Answer 3

You should use percentage to define the border-radius, in this way the curve will look like the one you want.

border-radius: 100%

http://codepen.io/FezVrasta/pen/XKvkJX?editors=1100