Side Navbar with custom design - html

Question

Imagen de un diseno en UPlabs
Hi im trying to make a navbar like this but i cant finish it.
someone can help me? Only want to know how round the border of links when they are active
Now i have this resolved, but i dont know how round borders on the container of the links like we see in the design of UpLabs
Image of my project
HTML
<div id="navbar" class="sticky-top">
<div class="d-flex flex-wrap justify-content-center align-content-center" style="height: 20%;">
<img class="{{url}}" alt="">
</div>
<nav class="nav flex-column ml-4">
<a id="link" routerLink="sales" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-cash-register"></i>
</div>
<div class="col-9">
Ventas
</div>
</div>
</a>
<a id="link" routerLink="debtors" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-user-friends"></i>
</div>
<div class="col-9">
Deudores
</div>
</div>
</a>
<a id="link" routerLink="balance" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-chart-line"></i>
</div>
<div class="col-9">
Balance
</div>
</div>
</a>
<a id="link" routerLink="products" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-boxes"></i>
</div>
<div class="col-9">
Productos
</div>
</div>
</a>
</nav>
</div>
and this is the file CSS that round borders of links when they are active and other parts of desing.
div#navbar {
left: 0px;
width: 100%;
height: 100vh;
border-radius: 0 40px 40px 0;
background: #f4755f;
}
a#link {
font-size: 18px;
padding: 20px 0;
color: white;
}
.active {
background: #fbf3f2;
color: #f4755f !important;
border-radius: 30px 0 0 30px;
}
img {
width: 45%;
height: 70%;
}

Answer 1

Making the border of a link round is done like that:
html:
Link 1
css
a {
background: red;
border-radius: 10px 0px 0 10px;
}
To make it round only when it is active you need to add a class to the active link and style that instead of the a tag, though.