Dreiseitiger Rand

Wenn Sie einen Rand nur an drei Seiten eines Elements anbringen müssen, gibt es dafür eine Reihe von Möglichkeiten.

Sie können den Rand gezielt nur für drei Seiten deklarieren

div { 
  border-top:    1px solid red;
  border-right:  1px solid red; 
  border-bottom: 1px solid red;
}

Ausführlich, aber leicht verständlich.

Oder Sie können einfach `border` deklarieren, was alle vier Seiten abdeckt, und dann diejenige entfernen, die Sie nicht möchten.

div {
  border: 1px solid red;
  border-left: 0;
}

Viel kürzer, aber es setzt voraus, dass Sie verstehen und beibehalten, dass die zur Entfernung des Randes dienende Überschreibung nach der Randdeklaration beibehalten wird.

Oder Sie deklarieren Farbe und Stil und verwenden nur die Kurzform `border-width`, um die drei Seiten gezielt anzugeben.

div {
  border-color: red;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}

Kürzer als das erste Beispiel, aber weniger repetitiv. Man muss nur bedenken, dass der linke Rand bereits rot und durchgezogen wäre, wenn er eine Breite hätte.

Und dann ist da noch die Tatsache, dass Ränder die Größe des Elements im regulären Boxmodell beeinflussen. Wenn Sie Ränder hinzufügen möchten, ohne die Größe des Elements zu verändern, müssen Sie sich auf CSS3 verlassen. Hier ist eine Möglichkeit, dies mit inneren Schatten zu tun

div {
  -webkit-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  -moz-box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
  box-shadow:
     inset -1px 0   0 red,
     inset  0  -1px 0 red,
     inset  0   1px 0 red;
}

Aber innere Box-Schatten haben eine weitaus geringere Browserunterstützung als Ränder. Zum Beispiel funktioniert der obige Code nur in Internet Explorer Version 9+. Wenn Sie lieber Ränder verwenden möchten, ohne die Größe des Elements zu beeinträchtigen, könnten Sie mit box-sizing experimentieren, das bis IE 8 unterstützt wird.

Oh, die Wahlmöglichkeiten! Das ist eine so kleine Sache, aber ich denke, es ist ein gutes Beispiel dafür, wie es so oft viele verschiedene Wege gibt, um dasselbe in CSS zu erreichen. Wenn Sie gerade erst mit CSS anfangen, ist diese Art von Sache verwirrend oder ziemlich unkompliziert?

Alle Beispiele anzeigen.