I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png
Below is the HTML template:
<template>
<div class="navbar-container rounded-pill">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
...
</div>
</nav>
</div>
</template>And here's the CSS:
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.navbar-container {
box-sizing: border-box;
margin: 0.5rem;
height: 100%;
width:60%;
border: 2px solid red;
margin-left: 20%;
background-color: transparent;
}
nav {
background-color: white !important;
font-size: 1.3rem !important;
}
nav ul li a {
padding-inline: 1rem !important;
}
</style>The issue arises when I try to achieve a pill-rounded shape for the navbar. Everything works fine in a square shape, but I can't seem to make it work using Bootstrap classes and CSS border radius.