CSS/Eigenschaften/äußere Gestaltung/Rahmen/border

Mit der border-Eigenschaft können Sie das Aussehen eines Rahmens um ein Element bestimmen. Sie ist eine Zusammenfassung der möglichen Einzelangaben zu Rahmendicke, Rahmentyp und Rahmenfarbe.

• 
• 
• 
• 
• 
• 

alle Seiten eines Elements

Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:

Randlinien ansehen …

#one {
	border: 20px solid red;
}

#two {
	border: 5px dotted red;
}

#three {
	border: 20px groove red;
}

#four {
	border: 20px ridge red;
}

#five {
	border: 20px inset red;
}

#six {
	border: 20px outset red;
}

#seven {
	border-width: 20px;
	border-style: solid;
	border-color: red blue yellow green;
}

#eight {
	border: 20px double red;
	border-radius: 20px;
}

#nine {
	border: 20px dashed red;
	border-radius: 50%;
}

#ten {
	border: 10px solid red;
	outline: 10px solid blue;
	box-shadow: 0 0 0 10px yellow inset;
}

Das Beispiel enthält 10 div-Elemente, die über ihre Selektoren unterschiedliche Rahmen erhalten:

• Box 1 erhält einen 20px breiten festen (solid) roten Rahmen.
• Box 2 hat nur einen gepunketen Rahmen (dotted) von 2px Breite.
  Beachten Sie, dass die Breite des Rahmen zur Breite des Elements dazugerechnet wird. Mit box-sizing können Sie dies unterbinden.
• Box 3 -6 erhalten mit den Schlüsselwörtern groove, ridge, inset und outset einen 3d-Effekt. Die Rahmenfarben werden vom Browser aus dem angegebenen Farbwert berechnet.
• Box 7 zeigt, wie Sie über mehrfache Angaben der Einzeleigenschaft border-color jede Seite des Rahmens in der gewünschten Farbe darstellen können.
• Box 8 erhält mit double einen doppelten Rahmen, der mit border-radius abgerundete Ecken erhält.
• Box 9 hat eine gestrichelten Linie (dashed) und einen border-radius von 50%.
• Box 10 ist ein Beispiel für mehrere Konturlinien. Dabei ist nur der rote Streifen ein Rand. Der blaue Streifen besteht aus einer Außenlinie outline, die sich außerhalb der border-box befindet (und deshalb z.B. nicht anklickbar ist). Der gelbe Rand ist ein Innenschatten, der mit box-shadow realisiert wurde.

ansehen …

Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.

Hinweis

Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge border: width style color;.

einzelne Seiten eines Elements

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen.

• border-top definiert eine zusammenhängende Angabe für oben,
• border-right für rechts,
• border-bottom für unten und
• border-left für links.

Beachten Sie: Eine weitere Zusammenfassung wie zum Beispiel border: 1px solid red 3px dotted green; ist nicht möglich.

Randlinien an einzelnen Seiten ansehen …

      h2 {
        border-bottom: thick double blue;
        float: left;
        width: 48%;
      }
      h2.anders {
        border-bottom: medium solid blue;
        float: right;
      }
      p {
        border: 1px solid red;
        width: 30em;
        padding: 5px;
        clear: both;
      }
      p.beachten {
        border: none;
        border-left: 5px solid #FFCCCC;
      }

• Überschriften nehmen als Block-Elemente normalerweise die gesamte Fensterbreite ein. Die Angaben zu float bei den Überschriften stellen sicher, dass diese nur so breit sind, wie ihr Inhalt es erfordert. Näheres dazu finden Sie unter CSS/Eigenschaften/Positionierung/float.
• Für den Absatz mit der Klasse „beachten“ gilt wie für alle Absätze zunächst einmal ein kompletter roter Rahmen. Da dieser nicht erwünscht ist, wird er mit border: none; entfernt, bevor der linke Rahmen gesetzt wird.

ansehen …

Dreiecke mit CSS erzeugen

Zur Jahrtausendwende gab es CSS-Hacks, mit denen Sie geometrische Formen nur mit CSS ohne den Einsatz externer Grafiken erzielen konnten. Diese fanden z.B. bei Weiter-Links oder Buttons Verwendung:

Dreiecke mit CSS erzeugen ansehen …

div {
	border-style: solid;
	border-top-color: yellow;
	border-right-color: green;
	border-bottom-color: blue;		
	border-left-color: red;
	
}

#slant {
  border-width: 1em;	
  width: 4em;
  height: 4em;	
  animation: slant 3s infinite alternate linear;
}

@keyframes slant {
  0 {
    width: 4em;
    height: 4em;
    border-width: 1em;
  }
  100% {
    width: 0;
    height: 0;
    border-width: 3em;
    border-color: transparent;
    border-bottom-color: blue;		
  }
}

#slant2 {
    width: 0;
    height: 0;
    border-width: 3em;	
    animation: slant2 3s infinite alternate linear;
}

@keyframes slant2 {
  0 {
    border-width: 3em;
  }
  50% {
    border-width: 2em 4em 4em 2em;
  }
  100% {
    border-width: 0em 1em 6em 5em;
    border-color: transparent;
    border-bottom-color: blue;	
  }
}

Das obere 5x5em große div hat einen 1em breiten Rand. Durch die Animation slant wird die Randstärke so weit vergrößert und die Höhe und Breite reduziert, dass schließlich nur noch der untere Rand in Form eines Dreiecks sichtbar ist.
Im unteren div wird gezeigt, wie dieses Dreieck durch unterschiedliche Werte für die einzelnen Seitenränder gestaltet werden kann.

ansehen …

Empfehlung: Heute bietet der Einsatz von SVG bessere und einfachere Möglichkeiten.

Siehe auch

• border-radius
• box-shadow
• outline

Weblinks

• Information on Border Slants Zeichnen von geometrischen Formen mithilfe der CSS-border-Eigenschaft