Drawing specific lines in html - html

Question

I'm putting design into html+css - the question is - how do i draw curved lines on the sides, so that it would be scalable and responsive? What's the best way to do it

Answer 1

you can try this one:
section{
margin: 0 auto;
width: 600px;
text-align: center;
}
h1 {
position: relative;
//margin-top: 20px;
}
h1.one {
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px black;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #fff;
padding: 0 20px;
position: relative;
z-index: 5;
}
/* method 2*/
button
{
padding:8px;
background-color: gray
color:white;
border: 2px solid;
border-radius: 15px;
margin-top:2px;
position: relative;
z-index: 5;
}
.circle
{
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row
{
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
DEMO FIDDLE

Answer 2

Check as per the description this answer get your perfectly needs.
body {
background:#007DAD;
}
section {
text-align: center;
}
h1.one {
position: relative;
margin-top: 0;
}
h1.one:before {
content: "";
display: block;
border: solid 1px #FFF;
width: 100%;
height: 150px;
position: absolute;
top: 50%;
z-index: 1;
border-radius:5px;
}
h1.one span {
background: #007DAD;
padding: 0 20px;
position: relative;
z-index: 5;
}
.row {
height: 100px;
margin: 10px;
}
.circle {
border:4px solid red;
height: 70px;
width: 70px;
border-radius: 40px;
margin:10px auto;
display:inline-block;
}
button {
padding:10px;
background-color: gray;
color:white;
border: 2px solid;
border-radius: 5px;
margin-top:-10px;
position: relative;
z-index: 5;
}
<section>
<h1 class="one">
<span>It Has Naver Been Easier</span>
</h1>
<div class="row">
<div class="circle"><p>1</p></div>
<div class="circle"><p>2</p></div>
<div class="circle"><p>3</p></div>
</div>
<button type="button">Order Now</button>
</section>