Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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:
Animierbarwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

<br-width> || <br-style> || <color>

wobei
<br-width> = <length> | thin | medium | thick
<br-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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

wobei
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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

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,