Two-tone frame

Question

I know that it is possible to have the effect of a double border with one under the other, but is it possible with css to have a part of the width of the border of one color, and the rest a different color?

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

Answer 1

UPDATE:

Having seen that the line in the message is actually a two-color line, you can use the border-image property to achieve a similar effect (the example shows only the principle, but is not configured for perfect correspondence):

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 setting changes from browser to browser, which is apparently why you need to configure it as well. The provided demo will only work with web browsers.

Old

You mean something like this:

You can use the following CSS for this:

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

Here box.shadow, set to insert without blur, acts as the second part of the border. Indentation should prevent overlapping content.

ONLINE DEMO

Answer 2

I think I figured out how to do this. 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; }