How to make rainbow border semi-circle CSS?

Question

I'm trying to make a semi-circle with a rainbow border, I can't figure out how to do it. I feel as I am very close.

.visual {
    width: 400px;
    height: 200px;
    border-top-left-radius: 210px;
    border-top-right-radius: 210px;
    border-bottom: 0;
    margin-right: auto;
    margin-left: auto;
    background: rgb(9,196,2);
    background: linear-gradient(90deg, rgba(9,196,2,1) 0%, rgba(170,190,2,1) 14%, rgba(184,145,2,1) 31%, rgba(178,4,2,1) 50%, rgba(126,2,174,1) 68%, rgba(62,1,64,1) 89%);
}

.visualBorder {
    width: 300px;
    height: 150px;
    border-top-left-radius: 210px;
    border-top-right-radius: 210px;
    border-bottom: 0;
    margin-right: auto;
    margin-left: auto;
    background-color: #2d2d2d;
    border: -5px solid transparent;
}

<div class="visual">
  <div class="visualBorder"></div>
</div>

Could I get some help? Thanks