CSS white bite and oval form in spinner - css

Question

I'm playing making my own UI library, I'm working on an Input component who is able to add components (like an icon or spinner) to the sides and I have this strange spinner bug. There are two problems that are explained in the code.
If I uncheck & check the width attr from dev tools, the "white bite" fixes.
PD: The example is written in a react project because I want to add behaviour later, but now it's just a simple css problem.
EDIT: This is the image of the oval when you remove the "dummy-wrapper" div.
.container {
display: flex;
border: 1px solid rgba(34, 36, 38, 0.15);
border-radius: 10px;
border-color: teal;
padding: 0.4em 0.5em;
background: white;
justify-content: center;
align-items: center;
width: 50%;
}
input {
width: 100%;
border: none;
background: inherit;
color: inherit;
outline: 0;
padding: 0em 0.4em;
font-size: 14px;
font-family: Poppins;
color: black;
/* TODO: make themeable */
font-weight: 400;
letter-spacing: 0.14px;
}
.spinner {
width: 15px;
height: 15px;
border-radius: 50%;
border: 0.2rem solid rgba(151, 159, 208, 0.3);
border-top-color: inherit;
animation: 1s spin infinite linear;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="container">
<label>X</label>
<input
placeholder="this is a placeholder......"
value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s"
/>
<!--{/* Problem 1: Without the dummy-wrapper the circle becomes an oval. */}
{/* Problem 2: The circle has a small white bite. */}-->
<div class="dummy-wrapper">
<div class="spinner" />
</div>
</div>

Answer 1

Try using a fixed px border width, I guess it might be the border width 0.2rem => 3.1875px chrome view resolution problem.
border: 3px solid rgba(151, 159, 208, 0.3);

Answer 2

I don't see any problem there ... ?
.spinner {
--spinSz : 32px; /* spinner size */
box-sizing : border-box;
display : inline-block;
flex-shrink : 0;
width : var(--spinSz);
height : var(--spinSz);
border-radius : 50%;
border : calc(var(--spinSz)/10) solid #1a31c54d;
border-top-color: #830b2f;
animation : 1s spin infinite linear;
}
#keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<b class="spinner"></b>