Two color border - html

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:

Answer 1

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;
}

Answer 2

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):
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:
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