Bordo a due colori

Question

So che è possibile avere l'effetto di un doppio bordo con uno sotto l'altro ma è possibile usare css per avere parte della larghezza di un bordo di un colore e il resto di un altro colore?

Ecco un esempio di un'immagine che vorrei ricreare come solo un css bordo utilizzando:

Answer 1

UPDATE:

Vedendo che la linea nel post è in realtà una linea a due colori è possibile utilizzare la proprietà border-image per ottenere un effetto simile (esempio che mostra solo il principio ma non è adattato per una corrispondenza perfetta):

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; 
    /* ... */ 
} 

Per gli altri browser:

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

Nota che il parametro gradiente varia da browser a browser apparentemente così questa necessità di essere regolato pure. La demo fornita funzionerà solo con i browser Webkit.

Vecchio

Vuoi dire qualcosa di simile:

Per questo si può utilizzare il seguente CSS:

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

Qui il box.shadow impostato inserto senza sfocatura funge da seconda parte del bordo. Il padding dovrebbe impedire il sovrapposizione del contenuto.

ONLINE DEMO

Answer 2

credo di aver capito un modo per farlo. 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; 
}