CODEWITHSUNDEEP
csslinear-gradients
jmchauv
jmchauv

Reputation: 147

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

Upvotes: 1

Views: 219

Answers (1)

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 1

Related Questions