border-bottom

Übersicht

Die border-bottom Eigenschaft legt den unteren Rahmen eines Elementes fest und ist eine Kurzform für
border-bottom-color, border-bottom-style und border-bottom-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

<line-width> || <line-style> || <color>

wobei
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Werte

<Rahmenbreite>
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-bottom-width.
<Rahmenstil>
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-bottom-style.
<Rahmenfarbe>
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-bottom-color.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

.beispielEins {
  border-bottom: 1px solid #000;
}

.beispielZwei {  
  border-bottom-style: dotted;
  border-bottom: thick green;
  
  /* Bedeutet das gleiche wie: */
  
  border-bottom-style: dotted;
  border-bottom: none thick green;
  
  /* border-bottom-style wird nach Angabe von border-bottom ignoriert. 
  Es wird kein unterer Rahmen gezeichnet. */
}

Spezifikation

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Die Definition von 'border-bottom' in dieser Spezifikation.
Anwärter Empfehlung No direct changes, though the modification of values for the border-bottom-color do apply to it.
CSS Level 2 (Revision 1)
Die Definition von 'border-bottom' in dieser Spezifikation.
Empfehlung No significant changes
CSS Level 1
Die Definition von 'border-bottom' in dieser Spezifikation.
Empfehlung  

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
border-bottomChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt