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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft border ist eine Zusammenfassung der möglichen Einzelangaben zu Rahmendicke, Rahmentyp und Rahmenfarbe.

[Bearbeiten] alle Seiten eines Elements

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 1.0
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Border</title>
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <h1>Border</h1>
    <h2>Überschrift, doppelt unterstrichen</h2>
    <h2 class="anders">Teilüberschrift, einfach unterstrichen</h2>
    <p>Textabsatz begrenzter Breite, mit einem schmalen roten Rahmen</p>
    <p class="beachten">Dies kennen Sie ...</p>
  </body>
</html>
  • Ü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.

Mit border können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:

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;.

[Bearbeiten] 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.


[Bearbeiten] Weblinks

  • slantastic: Demo, das zeigt, wie sich mit Hilfe von CSS 2.0 komplexe, fast beliebig aussehende Polygone als Anzeigebereiche erzeugen lassen. Dies erlaubt wesentlich mehr Gestaltungsfreiheit und einen Ausbruch aus der Welt des rechteckigen Boxenmodells.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML