Border line bottom curved top straight - html

Question

I want to make a curved line between parts like here. Because if I now try to curve my borderline, the top also curves. I use nuxt.js and tailwind for css. I did not finish the code yet, but you can see where I want the lines. And I'm also checking how I will get the pictures in the right place.
Code
<template>
<div class="bg-gray-100 h-auto">
<div class="lg:mx-32 xl:mx-60 h-96 w-auto text-blue-900">
<div class="py-20">
<h3 class="text-4xl font-bold text-center">Nuestro proceso de Check-in</h3>
</div>
<h1 class="font-bold text-7xl text-gray-300 ml-10">1</h1>
<div class="relative border-l-2 border-b-2 border-dashed rounded-xxl border-blue-900 w-1/2">
<div class="m-10">
<h3 class="text-3xl font-bold items-end col-start-1 row-start-2 h-auto"><u>Escanea</u> el
documento<br>del viajero</h3>
<p class="col-start-1 row-start-3">
Con solo escanear el código MRZ ubicado en la parte inferior
del DNI o Pasaporte del viajero, nuestra app registra al
instante todos sus datos personales.
</p>
</div>
</div>
<div class="relative w-1/2">
<!-- <div class="layer0 bg-contain bg-no-repeat h-full w-2/3" :style="passport"></div>
<div class="layer1 bg-contain bg-no-repeat h-full w-2/3" :style="phone"></div> -->
</div>
<div class="relative grid grid-cols-2 grid-rows-5 h-96 w-auto">
<div class="absolute border-r-2 border-dashed rounded-xxl border-blue-900 bg-contain bg-no-repeat h-full w-1/2 row-span-4"
:style="sign"></div>
<div class="col-start-2 ml-5">
<h1 class="font-bold text-7xl text-gray-300 col-start-2 row-start-1">2</h1>
<h3 class="text-3xl font-bold items-end col-start-2 row-start-2 h-auto"><u>Firma</u> del huésped
</h3>
<p class="col-start-2 row-start-3">
Una vez escaneado su documento, completa el registro
con la firma digital de tu huésped, usando su
dedo o un puntero
</p>
</div>
</div>
</div>
</div>
</template>
<style>
.layer0 {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
.layer1 {
position: absolute;
top: 0;
left: 62%;
z-index: 1;
}
</style>
<script>
export default {
components: {},
data() {
return {
passport: {backgroundImage: "url(passport.png)"},
phone: {backgroundImage: "url(phone_scan.png)"},
sign: {backgroundImage: "url(sign.png)"}
};
}
}
</script>

Answer 1

You can go to figma.com
use the pen tool
create the shape/lines you want.
then right click the shape/lines Copy as SVG
paste it in your code.
As it is as SVG code you can apply CSS to it and use it how ever you want