CSS Fading Top and Bottom "Borders"

CSS fading top and bottom borders

Do you want something like this?

Demo (Some breathing space for your content, I've used margin there, just make sure that it will apply to both, :before as well as :after, so if you want to separate, declare margin separately for each, p.s - I've made colors lil lighter)

/* Using only background gradients */

.one { 
    width: 400px;
    padding: 20px 25px;
    margin: 40px auto;
}

.one:before, .one:after {
    content: "";
    height: 1px;
    /* I've removed the vendor prefixes, if you are looking to support older browsers
       then refer to older version of this answer.
    */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

Explanation:
I've used :before and :after pseudo having content: "", so it creates a block, you can say a virtual block inside the element... and which is further set to display: block, just make sure you use block there else margins and height will have no effect.. and last but not the least am using gradients with rgba to control the alpha/opacity of the gradient which will fade on both ends

Create linear gradient border for top and bottom edges only?

You are using the shorthand border-image property for setting the size of the gradient and according to the values provided, the top, left and right borders are nullified.

Setting 100% as width of the border gradient on top and 3px as its height would result in the gradient getting applied only on top and bottom.

border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 
              100% 0 100% 0/3px 0 3px 0 stretch;

In the above lines of code, the 100% 0 100% 0/3px 0 3px 0 represents the size of the gradient border on each side (read as [top] [right] [bottom] [left]). Originally it was 0 0 100% 0/0 0 3px 0.

div {

  /* gradient shining border */

  border-style: solid;

  border-width: 3px;

  border-image: linear-gradient(to left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 

                100% 0 100% 0/3px 0 3px 0 stretch;

  

  /* other demo stuff */

  height: 50px;

  line-height: 50px;

  background-color: #222;

  color: white;

  text-align: center;  

}

<div>Some content</div>

CSS - fading gradient border from-to

You can try like below. make sure to correctly set the different values.

.box {

  height:50px; /* this need to be a multiple of 10 for the effect to work */

  border-top:   10px solid;

  border-bottom:10px solid;

  background:#f2f2f2;

  border-image:repeating-linear-gradient(#fff 0,red 10px) 10;

}

<div class="box"></div>

CSS border top and bottom with linear gradient

Use background:

h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 16px;
  color: blue;
  line-height: 36px;
  letter-spacing: 1.6px;
  padding: 3px 0;
  margin-right:80px;
  background: 
    linear-gradient( 90deg, orange, rgba(253, 142, 41, 0)) top,
    linear-gradient(-90deg, orange, rgba(253, 142, 41, 0)) bottom;
  background-repeat:no-repeat;
  background-size:100% 3px;
 }

<div class='bloc-content-lower-upper'>
  <h2>Découvrir la technologie</h2>
  <h2>Test</h2>
</div>

Linear fade out div, content and border (solid at top to transparent at bottom)

Quoting from my answer here:

Check this working demo, and try to add/remove contents from #contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

This will work almost in any browser which supports opacity (including IE9), and here's the IE8 "rgba" fallback (untested):

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

To generate your own gradient, visit Colorzilla.

The first stop (0%) must have opacity 0 ( rgba(255,255,255,0); ), then around 70% - do some tests to find what's good for you - add another stop with opacity 1 ( rgba(255,255,255,1); ).

Fade borders in CSS

You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.

However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.

A quick google turned up these two pages which should help you on your way:

• CSS3 Gradient Borders
• http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders

Hope that helps.

---

Related Topics