How to make rounded gradient borders to a button instead of square?

Question

Kindly anyone guide me please how to make linear-gradient css border as rounded one instead of square that will support on all the browsers? Also the button background color preferred to be transparent.

.btn_outter { 
  border: 2px solid;
  border-image-source: linear-gradient(45deg, #FFF000, #000000);
  border-image-slice: 1;
  color: #000; 
}

Adarsh Sharma · Answer 1 · 2019-05-27T07:56:54.220

-1

You can try below sample

 <!DOCTYPE html>
<html>
<head>
<style>

.btn_outter { 
  border: 20px solid;
  border-image-source: radial-gradient(red, green, blue);
  border-image-slice: 20;
  color: #000; 
}
.round_div{
    border: 1px solid;
    width: max-content;
    border-radius: 30px;
    overflow: hidden;
}

</style>
</head>
<body>
<div class="round_div">
<button class="btn_outter"> button </button>
</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

edited May 27 '19 at 07:56

answered May 25 '19 at 09:58

Adarsh Sharma

526
5
11

hope this meet your requirements – Adarsh Sharma May 25 '19 at 09:58
Thanks Adarsh, but how to give radius to this button ? – John smith FN May 25 '19 at 10:56
@JohnsmithFN Please Check My answer I've edited as per your requirement, You can always extend My css to give exact colour ans shape to your button, Thankyou :-) – Adarsh Sharma May 27 '19 at 07:57

How to make rounded gradient borders to a button instead of square?

1 Answers1