Rimozione dell'effetto smussato sull'angolo dei bordi

Question

Se un elemento esiste in una pagina con più di un colore del bordo, l'angolo in cui si incontrano questi colori crea una smussatura per impostazione predefinita. Questa sembra una scelta strana per lo stile border-corner. Preferirei invece che uno dei bordi "sopraffa" l'altro bordo in modo tale che venga mostrata una linea retta.

per illustrare questo effetto, considerare quanto segue:

Vedi esempio jsFiddle esempio ho creato here.

Le due posizioni in alto mostrano il comportamento predefinito con smusso. I due in basso visualizzano il comportamento desiderato e atteso, dove in questo caso, "overpowers" border-top o "overrides" l'angolo di border-left e border-right.

Il markup per il caso superiore:

<div class="container"> 
    <div class="border">Item one</div> 
    <div class="border">Item two</div> 
</div> 

E il CSS:

.container { 
    margin: 5px; 
    width: 150px; 
    background: yellow; 
} 
.border { 
    padding: 5px; 
    border: 15px solid red; 
    border-top: 15px solid teal; 
} 

Il markup per il caso di fondo:

<div class="container"> 
    <div class="border-top"></div> 
    <div class="border-reg">Item one</div> 
    <div class="border-top"></div> 
    <div class="border-reg">Item two</div> 
</div> 

E il CSS:

.border-top { 
    border-top: 15px solid teal; 
} 
.border-reg { 
    border: 15px solid red; 
    border-top: 0; 
    padding: 5px; 
} 

Sebbene il secondo metodo che ho ideato produca l'effetto che desidero, sembra che questo sia inutilmente noioso per qualcosa che avrei assunto come predefinito. Se volessi che il bordo-sinistra scavalchi gli altri bordi, ad esempio, avrei a che fare con alcuni float: left e follia di elementi in linea.

The Question (finalmente)

Esiste un metodo più semplice di rimuovere la smussatura-comportamento di default osservato su tutti i browser?

Anche se il caso sopra descritto è per lo più facile avere il bordo superiore o inferiore del bordo che sovrascrive gli angoli, non è così facile, ad esempio, se ho bisogno del bordo-sinistra e del bordo-destra per scavalcare il bordo superiore e il bordo inferiore.

Answer 1

Questo è il modo in cui i bordi funzionano, credo che non ci sia modo di cambiare questo senza un elemento in più.

Invece di div vuote, è possibile utilizzare div wrapper.

<div class="outer"> 
    <div class="inner">test</div> 
</div> 

.inner { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
} 
.outer { 
    border-top : 15px solid teal; 
} 

Demo: http://jsfiddle.net/fmcvY/

C'è un altro modo di farlo con :before/:after elementi pseudo ma è un po 'disordinata, ma non richiede markup aggiuntivo:

<div>test</div> 

div { 
    padding : 5px; 
    border : 15px solid red; 
    border-top: 0; 
    position:relative; 
    padding-top: 20px; /* border width plus desired padding */ 
} 
div:before { 
    content:' '; 
    display:block; 
    background: teal; 
    height:15px; 
    padding:0 15px; /* border width plus div padding */ 
    width:100%; 
    position:absolute; 
    top: 0; 
    left:-15px; /* border width plus div padding */ 
} 

È possibile scrivere il CSS in diversi modi per ottenere lo stesso effetto.Demo: http://jsfiddle.net/fmcvY/3/

Answer 2

Se non avete bisogno di supporto per i browser meno recenti (IE 8 e meno) si può usare box-shadow:

.border { 
    padding : 35px 20px 20px 20px; 
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal; 
} 

http://jsfiddle.net/fTGDs/