CSS circle issue - border-radius not working

Question

I am trying to render a circle in CSS using border-radius but it is appearing as a square in the browser - can anybody help with where I am going wrong please?

Below is the css

.circ {
border-radius: 50%;
    width: 214px;
    height: 214px;
    margin: 0 53px;
    padding: 85px 61px 85px 63px;
    border-style: solid;
    border-width: 12px;
    border-image-source: linear-gradient(32deg, #ca45d9 14%, #fb2777 84%);
    border-image-slice: 1;
    background-color: #fff;
}

<div class="circ"><h3>Text</h3></div>

Many thanks,