CODEWITHSUNDEEP
htmlcss
JGeer
JGeer

Reputation: 1852

Border radius 50% gradient color

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/

Upvotes: 1

Views: 4290

Answers (1)

Akshay
Akshay

Reputation: 14348

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>

Upvotes: 2

Related Questions