CODEWITHSUNDEEP
css
FeelRightz
FeelRightz

Reputation: 2999

CSS set border gradient color

How can make a simple border bottom color with gradient color?

div{
  border-bottom:10px solid linear-gradient(#FF4000, transparent);
  height:20px;
  width:auto;
  background:#ccc;
  }
<div></div>

Upvotes: 0

Views: 1734

Answers (5)

Kheema Pandey
Kheema Pandey

Reputation: 10285

Using :after pseudo element and linear-gradient you can get desire results. Here in this code I am using background:liner-gradient on :after pseudo element with just using a one single element.

You may have to use browser prefix as well if you targeting older browsers.

Check Demo as well.

div {
  height: 100px;
  border: 1px solid red;
  position: relative;
}
div:after {
  height: 2px;
  width: 100%;
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
<div>Hi</div>

Upvotes: 1

Rounin
Rounin

Reputation: 29511

To set a border gradient on a single border (or multiple borders), you simply need to declare style rules in your CSS for:

  • border-image

  • border-image-slice

  • border-image-width

.box {
width: auto;
height: 20px;
background: #ccc;
border-image: linear-gradient(to right, rgba(255, 64, 0, 1), rgba(255, 64, 0, 0));
border-image-slice: 1;
border-image-width: 0 0 10px 0;
}
<div class="box">
            
</div>

N.B. The fade-to-transparent gradient is achieved using rgba colors (in place of hex colors).

rgba(255, 64, 0, 0) (with an alpha channel of 0) is the completely transparent equivalent of rgba(255, 64, 0, 1) (which, with an alpha channel of 1, is completely opaque).

Upvotes: 1

pavel
pavel

Reputation: 27092

You can set gradient as border color. But you can do it using another element.

<style>
    div {height:20px; background: linear-gradient(#FF4000, transparent); padding-bottom: 10px;}
    div div {background: yellow; padding-bottom: 0;}
</style>
<div>
    <div></div>
</div>

http://jsfiddle.net/7et1w393/

Upvotes: 0

shah sachin
shah sachin

Reputation: 1

-webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%)


div {
  -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
  height: 20px;
  width: auto;
  background: #ccc;
}
<div></div>

Upvotes: -1

Rahul Tripathi
Rahul Tripathi

Reputation: 172628

Try like this:

 .myClass {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,172)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,172) 50%, rgb(0,255,255) 67% );
padding: 10px;
}

.myClass > div { background: #fff; }

JSFIDDLE DEMO

Upvotes: 0

Related Questions