2

I want to achieve rounded corners for button while using border-image-source to linear gradient.

snippet is below -

button-class :card-approve-btn

CSS:-

.card-approve-btn {
    width: 85px;
   height: 30px;
  text-align: center;
  color: #485564;
    font-size: 14px;
  line-height :10px;
  font-weight: 600;

  border-radius: 6px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-image-source: linear-gradient(291deg, #ffb37c, #f9514f);
  border-image-slice: 1;

}

using above css is resulting in edgy corners. and, after googling, i got to know that it is not possible to have both border radius and linear-gradient. Is it Really Impossible? If No, Then please suggest if anyone has answers.

himanshu sharma
  • 101
  • 1
  • 10

1 Answers1

5

You can apply the gradient as the main background then use a pseudo element above it to hide it and keep only the border part visible:

.card-approve-btn {
  position: relative;
  display:inline-block;
  background-image: linear-gradient(291deg, #ffb37c, #f9514f);
  padding:0 20px;
  line-height:30px;
  text-align: center;
  color: #485564;
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  z-index:0;
}

.card-approve-btn:before {
  content: '';
  position: absolute;
  /* specify the value of border width here */
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  /* --- */
  background-color: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  z-index: -1;
}
<div class="card-approve-btn">
  Approve
</div>
Temani Afif
  • 211,628
  • 17
  • 234
  • 311
  • Thanks for your solution.But, Now i am facing one more issue,button text is not showing up,it shows up only when i define content:'approve' and removed line-height. Basically i want to show button label as "Approve" with given style and it should be vertically aligned. – himanshu sharma Nov 27 '17 at 15:11
  • @himanshusharma ok am gonna update the answer with content ;) – Temani Afif Nov 27 '17 at 15:15
  • @himanshusharma check my answer again, i added content and more styles to handle it :) – Temani Afif Nov 27 '17 at 15:20
  • Thanks a ton for your efforts.But,it is still not in exactly in center.:( and,only on defining content:'Approve' it is showing 'Approve' label. – himanshu sharma Nov 27 '17 at 15:34
  • @himanshusharma did you copy all the CSS ? i made many changes ... – Temani Afif Nov 27 '17 at 15:35
  • @himanshusharma and in the snippet here it's not centred too ? you may also have another CSS in conflict you should consider too – Temani Afif Nov 27 '17 at 15:35
  • Yeah, I have used this complete CSS, and, even on inspecting element it show no override of alignment.Apart from it ,i see,on commenting content property,'approve' label comes automatically in center but,gradient color is also showing along. – himanshu sharma Nov 27 '17 at 15:56
  • 1
    Yes!! It worked finally!!!! i was missing some css elements..Thanks Man!! – himanshu sharma Nov 27 '17 at 16:30
  • This is the best answer I found for gradient borders with a radius. – Marc Alexander Oct 03 '19 at 05:12