How To Make Curve Border Using Css

How to make curve border like the image using css? Thanks.

Solution 1:

You can use the svgpolyline element.

Here is an example:

.contain-demo {
    margin: 25px auto;
    text-align: center;
}

.p {
    text-align: center;
     margin-top: 140px;
}

<divclass="contain-demo"><svgwidth="150"height="200"><desc>First orange polyline demonstrating white fill on open path.</desc><polylinepoints="0,40 40,40 40,80 80,80 80,120 120,120 120,160"fill="white"stroke="#D07735"stroke-width="6" /></svg><svgwidth="150"height="200"><desc>Second orange polyline demonstrating yellow fill on open path.</desc><polylinepoints="0,40 40,40 40,80 80,80 80,120 120,120 120,160"fill="#F9F38C"stroke="#D07735"stroke-width="6" /></svg></div>