CODEWITHSUNDEEP
htmlcsswebkitbordergradient
Justin Miller
Justin Miller

Reputation: 807

Linear gradients possible with -webkit-border-image?

Is there a way I can get the styling of the second example down from:

http://css-tricks.com/examples/hrs/

That has the CSS:

/* Gradient transparent - color - transparent */

hr.style-two {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

on a div or p element? Or really any element that can hold content? I tried a bunch of variations of -webkit-border-image and the above code but wasn't able to make anything work.

Thanks, Justin

Upvotes: 0

Views: 1652

Answers (1)

Justin Miller
Justin Miller

Reputation: 807

So I twiddled around the example on this site: http://css-tricks.com/examples/GradientBorder and got the following to achieve the effect I want:

div {
  border-width: 1px;
  -webkit-border-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)) 0 0 100% 0;
}
<div></div>

Granted, this is just for webkit, but I suspect the other -o-* and -moz-* would work as well.

Upvotes: 1

Related Questions