jmchauv jmchauv - 1 year ago 79
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 Source

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 {
  border-left:15px solid #666;

.borderme:before {

<div class="borderme">


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download