Two color border

Question

I know it is possible to have the effect of a double border with one below the other but is it possible using css to have part of the width of a border one color and the rest another color?

Here is an example of an image that I would like to recreate as a border using css only:

Well not really the look of a gradient, just one color then a hard break into another color. Can you do that with a gradient and have it only display on the bottom border, not the entire element? — fender967, Jul 11 '13 at 01:55
That image is [290 x 1] black pixels. What on earth do you mean? — enhzflep, Jul 11 '13 at 02:00
Okay, I see that now. I was confused by the similarity (lack of contrast) between the blue and the black. Perhaps this helps? : http://stackoverflow.com/questions/2717127/css3-gradient-borders — enhzflep, Jul 11 '13 at 02:27

score 5 · Answer 1 · 2013-07-11T02:23:48.830

5

UPDATE:

Seeing that the line in the post is actually a two colored line you can use the border-image property to achieve a similar effect (example showing only the principle but is not adjusted for perfect match):

enter image description here

ONLINE DEMO

CSS:

div {
    border-top:0;
    border-bottom:1px;
    -webkit-border-image: -webkit-gradient(linear, left bottom, right bottom, from(#07f), to(#000), color-stop(0.3, #07f), color-stop(0.31, #000)) 21 20 30 21;
     /* ... */
}

For other browsers:

-moz-border-image:
-webkit-border-image:
-o-border-image:
 border-image: /* standard */

Note that the gradient parameter varies from browser to browser apparently so this need to be adjusted as well. Demo provided will only work with webkit browsers.

Old

Do you mean something like this:

enter image description here

For this you can use the following CSS:

.myClass {
    height:40px;
    width:60px;
    border:5px solid #00a;
    box-shadow:0 0 0 5px #f00 inset;
    padding:5px;
}

Here the box.shadow set to inset with no blur acts as the second part of the border. The padding should prevent content from overlapping.

ONLINE DEMO

edited Jul 11 '13 at 02:23

answered Jul 11 '13 at 01:55

1

No, that is a border under a border. Look at the example image, it is sharing the same line. – fender967 Jul 11 '13 at 02:00
@fender967 I honestly didn't see any image until after posting. I though it was a black line but I see now what you mean. – Jul 11 '13 at 02:02
@fender967 there is also the border-image property which can take a gradient, one with f.ex. hard stops. – Jul 11 '13 at 02:04
@fender967 I updated answer with border-image. The latter values are a bit "harder" to adjust but you can see what you'll get out of it if you'll use it. – Jul 11 '13 at 02:13
Ah yes, that does the trick as well. I wonder which would be a better solution. Unfortunately IE doesn't support border-image, but it is simple in it's implementation. – fender967 Jul 11 '13 at 02:16
@fender967 I also noticed that the gradient parameters must be adjusted for Mozilla and perhaps other browsers. Too young technology unfortunately or it could be a simple way of doing this. – Jul 11 '13 at 02:21

score 5 · Answer 2 · answered Jul 11 '13 at 02:01

I think I figured out one way to do it. Check this out http://jsfiddle.net/RE4A7/

html

<ul>
<li><h3>Mission</h3>
</li>
</ul>

css

ul h3 {
font-size:1.2em;
font-family:arial;
border-bottom:1px solid #333;
padding-bottom:10px;
position:relative;
width:250px;
}
ul li {
list-style:none;
}
ul h3:after {
border-bottom:1px solid #ff4800;
bottom:-1px;
left:0px;
content:"";
position:absolute;
width:55px;
}

Two color border

2 Answers2