Border radius 50% gradient color

Question

I want to create a round border around my div, with a gradient color. How can I create that?

I want to use this linear-gradient(142deg, #ED586A, #ED844A);

I current have this HTML;

<div class="col-sm-2">
<p class="inner-text"> TITLE </p>
</div>

CSS:

.col-sm-2 p {border: 2px solid #e3e3e3; border-radius: 50%; height: 175px; line-height: 175px; width: 175px;}

JSFIDDLE: https://jsfiddle.net/k8wazLgz/

Answer 1

You can create the effect by placing an after pseudo-element below the element with gradient background

Note:For this to work a solid background color is required otherwise clip-path can be used

 .col-sm-2 p { border: 2px solid #e3e3e3; border-radius: 50%; height: 175px; line-height: 175px; width: 175px; text-align: center; position:relative; background:#fff; } .col-sm-2 p:after{ position:absolute; content:""; width:110%; height:110%; background:linear-gradient(142deg, #ED586A, #ED844A); top:-5%; left:-5%; z-index:-1; border-radius:50%; } 

 <div class="col-sm-2"> <p class="inner-text">TITLE</p> </div>