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.

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

Browser Kompatibilität