Wie setzt man einen Rahmen auf drei Seiten eines Elements?

Ich habe kürzlich eine kleine Unterhaltung darüber gesehen und dachte, es wäre lustig, all die verschiedenen Möglichkeiten zu betrachten, dies zu tun. Keine von ihnen ist besonders knifflig, aber vielleicht bevorzugen Sie eine gegenüber einer anderen wegen der Klarheit der Syntax, der Effizienz oder aus anderen Gründen.

Nehmen wir an, wir möchten einen Rahmen unten, links und rechts (aber nicht oben) eines Elements.

Jede Seite explizit deklarieren

.three-sides {
  border-bottom: 2px solid black;
  border-right:  2px solid black;
  border-left:   2px solid black;
}

Auch wenn das ziemlich klar ist, verwendet es immer noch Kurzschrift. Vollständig erweitert sähe es so aus

.three-sides {
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  
  border-left-color: black;
  border-left-style: solid;
  border-left-width: 2px;
  
  border-right-color: black;
  border-right-style: solid;
  border-right-width: 2px;
}

Eine der Seiten entfernen

Sie können etwas Code sparen, indem Sie den Rahmen für alle vier Seiten mit Kurzschrift deklarieren und dann den nicht benötigten entfernen

.three-sides {
  border: 2px solid black;
  border-top: 0;
}

Kurzschrift nur für die Breite

.three-sides {
  border-color: black;
  border-style: solid;
  /* top, right, bottom, left - just like margin and padding */
  border-width: 0 2px 2px 2px;
}

Als kleiner Nebenaspekt: Sie müssen die Rahmenfarbe nicht angeben, damit ein Rahmen angezeigt wird, da die Farbe von currentColor übernommen wird! Das würde also auch funktionieren

.three-sides {
  /* no color declared */
  border-style: solid;
  border-width: 0 2px 2px 2px;
}

Und Sie hätten rote Rahmen, wenn Sie

.three-sides {
  border-color: red;
  border-style: solid;
  border-width: 0 2px 2px 2px;
}

Seltsam, aber wahr.

Wenn Sie die Farbe explizit hinzufügen möchten, können Sie Kurzschrift mischen und anpassen, sodass dies auch funktioniert

.three-sides {
  border: solid green; 
  border-width: 2px 0 2px 2px;
}