Ü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

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 oder früher) 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) (Ja) (Ja) (Ja)

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: fscholz, Sebastianz, SJW, Yuichiro, Michael2402
Zuletzt aktualisiert von: fscholz,