Html:How to Make a Curve Like This Using HTML & CSS Using Border or Box

How make a perfect curve with css?

This should work here you go :)

The website you gave uses .svg images to create this curve effect.

And with display: flex; makes them inline.

<body>
<style>
* {
padding: 0;
margin: 0;
background: black;
}

.navbar {
display: flex;
}

</style>
<div class="navbar">
<div class="left">
<img src="https://techfest.org/2021/home/Navbar/Logo.svg">
</div>
<div class="right">
<img src="https://techfest.org/2021/home/Navbar/TN.svg">
</div>
</div>
</body>

Make a curve in Border using CSS

Use pseudo elements to produce the triangle.

We can give a border to the triangle by using both the before and after pseudo elements - which act as 2 triangles - an outer one - with a color the same as the border color and an inner one - with a slight offset - with a color the same as the background of the widget.

In the following example, the before pseudo element is the 'outer' triangle and the after pseudo elemnt is the 'inner' triangle.

Markup

<p class="triangle-border">This only needs one HTML element.</p>

CSS

.triangle-border {
position: relative;
background: #fff;
border: 1px solid #c2c2c2;
width: 200px;
padding: 15px;
margin: 20px;
border-radius: 3px;
box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}
.triangle-border:before {
content:"";
position: absolute;
top: -10px;
left: 46px;
border-width: 0 10px 10px;
border-style: solid;
border-color: #c2c2c2 rgba(0, 0, 0, 0);
display: block;
width: 0;
}
.triangle-border:after {
content:"";
position: absolute;
top: -8px;
left: 47px;
border-width: 0 9px 9px;
border-style: solid;
border-color: #FFF rgba(0, 0, 0, 0);
display: block;
width: 0;
}

FIDDLE

Source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

There are also generators for this like:

http://ilikepixels.co.uk/drop/bubbler/

http://cssarrowplease.com

http://html-generator.weebly.com/css-speech-bubble-generator.html

Curved lines using border

Please check updated fiddle. https://jsfiddle.net/nileshmahaja/84t6w8ca/3/

I have added one container to the entire html

<div class="container">
<div class="left-corner-lines">
<div class="left-round-line yellow-round"></div>
<div class="left-round-line blue-round"></div>
<div class="left-round-line purple-round"></div>
<div class="left-round-line pink-round"></div>
<div class="left-round-line green-round"></div>
</div>
</div>

also modified your css code

.container{
position:relative;
width: 200px;
height: 200px;
overflow:hidden;
}
.left-corner-lines {
width: 200px;
left: 50%;
height: 200px;
position: relative;
top:-50%
}
.left-round-line {
border-radius:100%;
border: 5px solid #fbbc56;
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

.left-round-line.yellow-round {
height: 20px;
width: 20px;
border-color:#fbbc56;

}

.left-round-line.blue-round {
height: 40px;
width: 40px;
border-color: #0090d0;
}

.left-round-line.purple-round {
height: 60px;
width: 60px;
border-color: #915da3;
}

.left-round-line.pink-round {
height: 80px;
width: 80px;
border-color: #cc5299;
}

.left-round-line.green-round {
height: 100px;
width: 100px;
border-color: #bed140;
}

how to make css curve box with gradient & shadow

you just make is border-radius as like this

Css

div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}

div:beforae {
content:"";
position:absolute;
border-left:15px solid blue;
border-right:15px solid green;
height:200px;
border-radius:15px 0 0 15px;
}

HTML

<div></div>​

and now check to live demo http://jsfiddle.net/rohitazad/Vsvg2/74/

Draw a curve with css

You could use an asymmetrical border to make curves with CSS.

border-radius: 50%/100px 100px 0 0;

VIEW DEMO