Hello, I am currently working on a Bootstrap 4 Carousel where my controls are replaced by arrow images. I am attempting to create an oval-shaped background for the arrows as shown in this picture. However, I am facing issues with adjusting the border to match the image. I have tried various properties such as radius, border-radius, and width but nothing seems to work. Any assistance would be greatly appreciated. You can view the picture [here](https://i.sstatic.net/7I6TX.jpg).
width:1440px;
background:url(images/pattern-quotes.svg),url(images/pattern-bg.svg);
background-repeat: no-repeat, no-repeat;
background-size: 10%, 50%;
background-position:top 213px left 250px,top 70px right 70px;
}
.container{
font-size: 32px;
font-family: 'Inter', sans-serif;
position:relative;
top: 150px;
font-weight: 300;
}
.item{
width:540px;
height:540px;
float:right;
}
.controls{
position:relative;
padding-left: 700px;
background: yellow;
border-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.controls img {
}
.carousel-caption {
width:650px;
text-align: left;
top:30%;
left:-105%;
bottom:auto;
color:hsl(240, 38%, 20%)
}
strong{
font-weight: 700;
font-size: 20px;
}
span{
font-weight: 300;
color: hsl(240, 18%, 77%);
}