CODEWITHSUNDEEP
htmlcss
titus
titus

Reputation: 23

left border gradient fill with border radius

I have been trying to add gradient to my border-left on my table but couldnt come up with a solution for the same!

This is what happens

I would prerfer this where the border is curved

In the second picture i commented the border image line

.pricing-plan{
  width:300px;
  border-radius:20px;
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  overflow:hidden;
  font-family:"Lato",sans-serif;
  font-size:16px;
  line-height:1;/*originally 1.5 #9970e0*/
  color:#555555;
  margin: 15px;
  border-left: 4px solid #9970e0  ;
  border-right:0px;
  border-image:linear-gradient(to bottom,#cc0099,#0099ff)1 100%;
}

Upvotes: 1

Views: 63

Answers (1)

devd
devd

Reputation: 703

This is not how you will get gradient border, to get a gradient border, you will have to give a background gradient to parent element.Now if you want to get left border as gradient then give padding left to parent element and in similar fashion you can give padding to other sides as well.

I did not touch other parts of your css declaration, just removed the border and added a padding and background color.

 .test{width:300px;
border-radius:20px;
box-shadow:0 0 5px rgba(0,0,0,0.2);
overflow:hidden;
font-family:"Lato",sans-serif;
font-size:16px;
line-height:1;originally 1.5 #9970e0
color:#555555;
margin: 15px;
background: linear-gradient(to bottom,#cc0099,#0099ff);
border-right:0px;
padding: 0 0 0 5px;
}
.inherit{
  width: 100%;
  padding: 0 0 0 1px;
  background: #fff;
}
<div class="test">
<div class="inherit">
Inherit
</div>
</div>

Upvotes: 1

Related Questions