jmchauv jmchauv - 3 months ago 10
CSS Question

Is there a way to create a css3 border gradient to a specific pixel?

I know this is possible with background gradients but cannot figure out how to implement this for border gradients.

Here's what I have so far

-webkit-border-image : -webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#000)) 1 100%;
-webkit-border-image : -webkit-linear-gradient(#666, #000) 1 100%;
-moz-border-image : -moz-linear-gradient(#666, #000) 1 100%;
-o-border-image : -o-linear-gradient(#666, #000) 1 100%;
border-image : linear-gradient(to bottom, #666, #000) 1 100%;


I would like the first 32px from the bottom up to be black, and then the rest going upwards grey (#666).

Here is an example of what I would like my right border to look like

Answer

i suggest you do it like so : using a pseudo-element like :before which you position at bottom:0 and left:-15px , because 15px is the width of the border. if you change the border-width you change left:-15px

the same for it's width:15px

i used width:15px and background:#000 but you could simply use border-left:15px solid #000 instead of those two. the result is the same.

.borderme {
  position:relative;
  height:300px;
  border-left:15px solid #666;

}
.borderme:before {
  position:absolute;
  height:32px;
  width:15px;
  background:#000;
  bottom:0;
  left:-15px;

  content:"";
}
<div class="borderme">

</div>