CSS Schnellstart – Rahmen (border)
Da du nun weißt, wie man die Abstände nach innen und nach außen setzt, kommen wir zum nächsten Thema.
In der Übung haben wir es bereits gesehen: Den Rand um eine Box. CSS bietet hierfür wieder eine Menge an Eigenschaften und eine kleine Besonderheit.
Um einen Rand um eine Box zeigen können, sind mehrere Eigenschaften notwendig. Damit man aber hier aber nicht erst 3 Eigenschaften erstellen muss, gibt es eine kurze Schreibweise. Hierbei werden mehrere Werte getrennt von einem Leerzeichen geschrieben. Das sieht dann so aus:
.rand {
border: 5px solid black;
}
Die Eigenschaft border nimmt also gleich 3 Werte gleichzeitig an. Einmal die Rahmenbreite, den Rahmenstil und die Farbe.
Die Breite kannst du mit den bekannten Einheiten definieren. Für den Rahmenstil gibt es folgende mögliche Werte:
- dotted - gepunktet
- dashed - gestrichelt
- solid - durchgehend
- double - doppelt
- groove – rille nach innen
- ridge – rille nach außen
- inset – nach innen gedrückt
- outset – nach außen gedrückt
- none – kein
- hidden – versteckt
Zu den Farben kommen wir in einem späteren Modul noch. Aber die Farbe kann definitiv geändert werden.
Möchtest du mehr Kontrolle über den Rahmen haben, kannst du auch die einzelnen Werte über eigene Eigenschaften setzen. In manchen Fällen ist das sinnvoll.
Der Rahmenstil kann über die Eigenschaft border-style gesetzt werden:
border-style : dashed;
Die Breite des Rahmens kann über border-width gesetzt werden:
border-width: 55px;
Die Farbe kann über border-color gesetzt werden:
border-color: blue;
Bei border-style und border-width, können die einzelnen Styles und Breite der Box gesetzt werden, z.B.
border-top-style: double;
Sehr beliebt sind momentan runde Ecken z.B. auf Buttons in Webseiten. Genau das kann mit der Eigenschaft border-radius gesetzt werden:
border-radius: 5px;
Genug Theorie! Wie sieht das in Aktion aus?