Übersicht

Die border-bottom-style Eigenschaft legt die Rahmenart des unteren Rahmens fest.

Initialwertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

border-bottom-style: <line-style>

wobei
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Werte

none
Standardwert. Es wird kein unterer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
hidden
Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
dotted
Punktierte Linie.
dashed
Gestrichelte Linie.
solid
Durchgehende Linie.
double
Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-bottom-width Angabe groß.
groove
Der Rahmen wirkt eingekerbt (3D-Effekt).
ridge
Der Rahmen wirkt wie eine Kante (3D-Effekt).
inset
Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
outset
Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

.beispielEins {                      
  border-bottom-style: dashed;      /* gestrichelt */
}

.beispielZwei {
  border-bottom-style: groove;      /* Einkerbung */
}

.beispielDrei {
 border-bottom-style: hidden;       /* Collapsing Border Model */ 
 border-collapse: collapse;
}

Spezifikation

Spezifikation Status Anmerkung
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-bottom-style' in dieser Spezifikation.
Anwärter Empfehlung keine Änderung
CSS Level 2 (Revision 1)
Die Definition von 'border-bottom-style' in dieser Spezifikation.
Empfehlung Standardwert definiert

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 9.2Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung JaChrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: SJW, fscholz, Yuichiro, Michael2402
Zuletzt aktualisiert von: SJW,