✔ Dashed Border und Gradient auf einem Element bereitet Problem

[S-lord]

Moin,

ich habe Buttons angefertigt, die einen linearen Verlauf von oben nach unten im Hintergrund haben. Darum soll sich eine gestrichelte weiße Linie befinden. Nun passiert es dabei, dass an der oberen Border die ausgelassenen Stücke in dieser Linie nicht den oberen sondern fälschlicherweise den unteren Farbton des Verlaufes nehmen. Hier einmal stark verdeutlicht, indem ich die border-Größe auf 5px stelle:

Zum Screenshot noch: Die Buttons werden unten von einem Fenster überlagert, also nicht wundern, dass sie dort abgeschnitten sind.

relevanter CSS-Code:

#main-navigation ul li {
text-align: center;
display: inline-block;
}

#main-navigation ul li a {
padding: 10px 25px;
border: 5px dashed white;
border-bottom: none;
color: white;
text-decoration: none;
border-radius: 5px 5px 0px 0px;
background: #bd5df0; /* Old browsers */
background: -moz-linear-gradient(top, #bd5df0 0%, #9e36e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd5df0), color-stop(100%,#9e36e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bd5df0 0%,#9e36e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bd5df0 0%,#9e36e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bd5df0 0%,#9e36e7 100%); /* IE10+ */
background: linear-gradient(to bottom, #bd5df0 0%,#9e36e7 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#bd5df0', endColorstr='#9e36e7',GradientType=0 ); /* IE6-9 */
}

html-Struktur (betroffene Stelle nur):

<div id="main-navigation">
<ul>
<li>
<a href="#">Vokabellisten</a>
</li>
<li>
<a href="#">Vokabeltrainer</a>
</li>
</ul>
</div>

Vielleicht kann ja jemand helfen, würde mich freuen.

Danke und LG!

 

[igestalten]

Lässt sich mit "background-origin:border-box;" beheben:

http://jsfiddle.net/cW8ND/1/

 

[S-lord]

Ja vielen Dank! =)

edit:

Funktioniert aber leider nicht mit a-Elementen. :-/

 

[igestalten]

warum nicht?

http://jsfiddle.net/LyfSd/

 

[S-lord]

Stimmt, ich stelle gerade fest, dass diese Eigenschaft nach den Verläufen definiert werden muss. Ich dachte immer, die Reihenfolge würde keine Rolle spielen.