Cross browser border gradient

Question

I want to get border gradient (from top: #0c93c0; to bottom: white). I wonder, is there any way to get it with css3 for both webkit and moz browsers?

This seems to cover it: http://stackoverflow.com/questions/2717127/css3-gradient-borders — mal-wan, Sep 25 '11 at 10:15
http://stackoverflow.com/questions/6619818/is-it-possible-to-make-a-gradient-border-with-css3/6620749#6620749 — Joonas, Sep 25 '11 at 10:54
possible duplicate of [CSS3 cross browser linear gradient](http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient) — apaul, Mar 05 '14 at 00:20

score 2 · Answer 1 · answered May 07 '12 at 13:12

Using less.css (of course you can do it without also), the trick is in pseudoselectors (:before and :after):

1. define cross-browser gradient:


    .linear-gradient (@dir, @colorFrom, @colorTo) {
        background: -webkit-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -moz-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -ms-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -o-linear-gradient(@dir, @colorFrom, @colorTo);
    }

2. define border-gradient bundle:


    .border-gradient(@colorFrom, @colorTo){
        border-top:1px solid @colorFrom;
        border-bottom:1px solid @colorTo;
        position:relative;

        .border-bundle(@colorFrom, @colorTo){
            position:absolute;
            content:"";
            width:1px;
            height:100%;
            top:0;
            .linear-gradient(top, @colorFrom, @colorTo);
        }

        &:before{ .border-bundle(@colorFrom, @colorTo); left: 0; }
        &:after { .border-bundle(@colorFrom, @colorTo); right:0; }  
    }

We can use it now like this:


    .some-class{

        /* other properties */

        .border-gradient(#0c93c0, #FFF);
    }

Nice for using Less! Sadly the question doesn't asks for it, so can't upvote. Also, there's an error when adding the last two lines (`&:before [...]` and `&:after [...]`). — Alejandro García Iglesias, May 30 '12 at 16:52
The error is: No matching definition was found for `.border-bundle(, , , )` — Alejandro García Iglesias, May 30 '12 at 16:58

score 2 · Accepted Answer · answered Sep 25 '11 at 11:00

instead of borders, I would use background gradients and padding. same look, but much easier, more supported.

a simple example:

<div class="g">
    <div>bla</div>
</div>

CSS:

.g {
  background-image: -webkit-linear-gradient(top, #0c93C0, #FFF); 
  background-image:    -moz-linear-gradient(top, #0c93C0, #FFF); 
  background-image:     -ms-linear-gradient(top, #0c93C0, #FFF); 
  background-image:      -o-linear-gradient(top, #0c93C0, #FFF); 
  background-image:         linear-gradient(top, #0c93C0, #FFF);
  padding: 1px;
}

.g > div { background: #fff; }

@RobW I suppose it's downvoted because lack of elegance (adding extra markup isn't elegant). — Alejandro García Iglesias, May 30 '12 at 16:33

Rob W · Answer 3 · 2011-09-25T10:35:10.030

1

Fiddle: http://jsfiddle.net/9ZDTA/
Add an extra declaration for each browser engine that you want to support, using the specific prefixes.

  background-color: #0c93C0; /* fallback color if gradients are not supported */

  background-image: -webkit-linear-gradient(top, #0c93C0, #FFF); 
  background-image:    -moz-linear-gradient(top, #0c93C0, #FFF); 
  background-image:     -ms-linear-gradient(top, #0c93C0, #FFF); 
  background-image:      -o-linear-gradient(top, #0c93C0, #FFF); 
  background-image:         linear-gradient(top, #0c93C0, #FFF); /* standard, but currently unimplemented */

See this source.

edited Sep 25 '11 at 10:35

answered Sep 25 '11 at 10:29

Rob W

341,306
83
791
678

what's that? i wanna get `border` gradient. i mean border: 1px, solid ... not `background` – Tural Ali Sep 25 '11 at 10:43
Border-gradients are not supported yet by Mozilla. I'm showing a cross-browser way to display `background-gradient`s. When Mozilla adds support for border gradients, you use my answer as a base for cross-browser support. – Rob W Sep 25 '11 at 10:52

Cross browser border gradient

3 Answers3