How to Create a Circular Gradient Border Around a Circle (eclipse shape) in CSS?

Question

I am trying to create a circular border with a gradient around a circle in CSS. I've attempted using border-image with a conic-gradient, but the gradient appears as a conic gradient on a rectangular shape, not around the circle as intended. I'm looking for a solution that allows me to place a gradient border that follows the circular path of the border itself. Search shows that the key limitation with using border-image for gradients on circular shapes is how the gradient is applied at the corners. Unlike a solid border, a gradient doesn't naturally curve around the circle's corners. Instead, the gradient is typically stretched or sliced, which can lead to corners that look more angular or square

I also tried to mimic the design with a pseudo overlay element but I'm lost in how to place it properly in my layout to match the design. [image shows the current design requirement. Eclipse is over container so overlay "::after" element didn't work for me](https://i.stack.imgur.com/aT2ev.png).

Here is my current code which isn't helping me in this case.

<div class="gradient-circle-bottom"></div>

.gradient-circle-bottom {
        width: 188px;
        height: 581px;
        border-radius: 50%;
        position: relative;
        background: white;
        background: rgb(2, 0, 36);
        background: radial-gradient(#1b1b1ba1, #1b1b1ba1, #1b1b1ba1, #FDBE1C 100%);
        border-radius: 50%;
        z-index: -1;
        transform: rotate(50deg);
    }
    
    .gradient-circle-bottom::before {
    
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        width: 188px;
        height: 582px;
        background: #1B1B1B;
        border-radius: 50%;
        z-index: -1;
    }

here is also another solution I tried:

<div class="circle-container">
     <div class="circle"></div>
</div>

.circle-container {
    width: 200px;
    height: 200px;
    padding: 10px; /* This will act as the border width */
    background: conic-gradient(
        from 90deg at 50% 50%, 
        gold, 
        gold 45%, /* Adjust to set the gradient start */
        black 45% /* Adjust to set the gradient end */
    );
    border-radius: 50%; /* Ensures the container is circular */
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle {
    width: 100%; /* Fill the container, accounting for padding */
    height: 100%; /* Fill the container, accounting for padding */
    background: black;
    border-radius: 50%; /* Ensures the inner element is circular */
    display: block;
}

Answer 1

I tried a different approach and it's working I believe. Here if anyone has a similar question can use "box-shadow".

.gradient-circle-bottom {
width: 228px;
height: 621px;
border-radius: 50%;
position: absolute;
top: 330px;
right: 30px;
box-shadow: -3px -5.5px #fdbe1c73;
border-radius: 50%;
z-index: -1;
transform: rotate(-135deg);

}

You can check the results in this image