Blauer Rahmen um Tabbar oder Titlebar

Hallo zusammen,

nachdem ich gestern abend in Bastellaune war hab ich mir mit unten stehenden css Code einen blauen Rahmen um meine Tabbar oder Titlebar gebaut.

/* Tab-Bar: Blauer Rahmen  */
    #TabsToolbar .toolbarbutton-1 {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
}  

/* Titlebar: Rahmen */
.titlebar-spacer {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
} 

/* Titlebar: Rahmen */
.titlebar-button {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
} 

/* Titlebar: Rahmen */
scrollbox {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
    border-left: 2px solid #00bbff !important;
} 


/* Pfeil alle Tabs auflisten entfernen */
#alltabs-button{
display:none}
} 

/* Schliessen Button: Rahmen rechts */
.titlebar-close {
    border-right: 2px solid #00bbff !important;
} 

Sieht soweit gut aus, bis auf den Teil rechts wo sich die 3 Buttons (min, restore, close) befinden. Hier habe ich diesen unschönen schwarzen Streifen zwischen den blauen Rändern. Wie kann ich den wegkriegen?

Vielen Dank schon mal für alle zielführenden Antworten.

Zitat von 2002Andreas

Zitat von Nikolaus2001at

Wie kann ich den wegkriegen?

Meinst du das so?

Wenn ja, Zeile 17 ist neu. Den Wert wenn dann evtl. noch anpassen.

CSS

/* Tab-Bar: Blauer Rahmen  */
    #TabsToolbar .toolbarbutton-1   {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
}  

/* Titlebar: Rahmen */
.titlebar-spacer {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
} 

/* Titlebar: Rahmen */
.titlebar-button {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
    margin-bottom: -1.6px !important;
} 

/* Titlebar: Rahmen */
scrollbox {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
    border-left: 2px solid #00bbff !important;
} 


/* Pfeil alle Tabs auflisten entfernen */
#alltabs-button{
display:none}
} 

/* Schliessen Button: Rahmen rechts */
.titlebar-close {
    border-right: 2px solid #00bbff !important;
} 

Alles anzeigen

---

Oder Zeile 16 entfernen

Vielen Dank für deine schnelle Antwort. Leider hörte ich gestern gleich nach meinem Posting das Bett rufen und bis vor einer Stunde hat mein Chef nach mir gerufen, darum erst jetzt eine Reaktion von mir. Ich habe vorhin mit dem Wert in Zeile 17 herumgespielt und eine für mich akzeptable Einstellung gefunden. (margin-bottom: -1.0px !important;)

Dann habe ich den Code von Horstmann probiert und ich muss ehrlich gestehen dass mir seine Lösung besser gefällt als mein Gefrickel,

erstens weil viel weniger Code, und

zweitens der unschöne Nebeneffekt im rechtsmausigen Kontextmenü nicht auftritt. (siehe Bild, blauer Balken oben, unten und links).

Nichtsdestotrotz ein ganz herzliches "Dankeschön" für deine Hilfe.

Zitat von Horstmann

Zitat von Nikolaus2001at

Hallo zusammen,

nachdem ich gestern abend in Bastellaune war hab ich mir mit unten stehenden css Code einen blauen Rahmen um meine Tabbar oder Titlebar gebaut.

CSS

/* Tab-Bar: Blauer Rahmen  */
    #TabsToolbar .toolbarbutton-1 {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
}  

/* Titlebar: Rahmen */
.titlebar-spacer {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
} 

/* Titlebar: Rahmen */
.titlebar-button {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
} 

/* Titlebar: Rahmen */
scrollbox {
    border-top: 2px solid #00bbff !important;
    border-bottom: 2px solid #00bbff !important; 
    border-left: 2px solid #00bbff !important;
} 


/* Pfeil alle Tabs auflisten entfernen */
#alltabs-button{
display:none}
} 

/* Schliessen Button: Rahmen rechts */
.titlebar-close {
    border-right: 2px solid #00bbff !important;
} 

Alles anzeigen

Zitat

Warum so kompliziert; der Rahmen soll jeweils einmal rund um die Tableiste und die Navbar gehen, korrekt?

Ganz genau so sollte es sein.

Zitat

Border würde ich dazu eher nicht benutzen, weil das ins Layout eingreift (v.a. in der Navbar, sieht man gut an deinem Screenshot) und Grössen verändert; vielleicht eher sowas?

CSS

 /* Tab-Bar, Navbar: Blauer Rahmen  */

#TabsToolbar, #nav-bar {
    /*border: 2px solid #00bbff !important;*/
    border-image:  linear-gradient(#00bbff, #00bbff) 1 / 2px !important;
} 

Kurz und knackig, so gefällt mir das. Auch dir ein herzliches Dankeschön für deine Mühe.

Alles anzeigen

Zitat von 2002Andreas

Nur als so.

Zitat von Nikolaus2001at

zweitens der unschöne Nebeneffekt im rechtsmausigen Kontextmenü nicht auftritt.

Ich habe mal deinen ersten Code genommen.

Kein Rahmen im Kontextmenü vorhanden.

Hm, vielleicht eine Reaktion auf anderen Code den ich noch in meiner userchrome.css habe.