CSS3 - Rahmen

1. "Runde Ecken"

Von vielen Designern gewünscht und von noch mehr Entwicklern gehasst. Vor allem, wenn der Internet Explorer 8 und abwärts noch unterstützt werden sollte. Denn in dem Fall musste man mit Hintergrundbildern und mindestens drei Elementen arbeiten, um das hinzubekommen. Mit CSS3 hat es damit nun ein Ende, wenn man sich auf die neuen Browser konzentriert.

Und noch eine gute Nachricht

Alle folgenden Browser unterstützen das nativ. Man kann also getrost auf die browsereigenen Implementierungen verzichten.

Browserunterstützung

• 18.0
• 12.x
• 5.1
• 23.0
• 9.0/10.0

2. border-radius

Ist eigentlich schon ein ziemlich alter Hut, da der immer öfter eingesetzt wird. Ich selber mache das schon seit etwa 2 Jahren. Wichtig dabei ist eigentlich nur, dass man einen Rahmen angeben muss, der darstellbar ist. Und bei border-radius definiert man die Stärke. Neben px sind auch em oder % erlaubt.

Mein Tipp

em kann man notfalls nehmen. Von % solltet ihr allerdings die Finger lassen, da es gar greulich aussieht und zu seltsamen Darstellungseffekten führt. Es sei denn, ihr steht auf den Gebrauch illegaler Halluzinogene und mögt es, wenn sich etwas unnatürlich verformt.

p.radius-1 {
  border: 1px solid #36628A;
  border-radius: 7px;
  padding: 5px;
}
<p class="radius-1">
  Lorem ipsum ...
</p>

3. Unterschiedliche Radien

Ist auch kein Problem. Dabei gibt es ein einfaches Schema, bei dem man mehrere Werte angibt.

• Erster Wert: links oben
• Zweiter Wert: rechts oben
• Dritter Wert: rechts unten
• Vieter Wert: links unten

p.radius-2 {
  border: 1px solid #36628A;
  border-radius: 7px 20px 0 15px;
  padding: 5px;
}
<p class="radius-2">
  Lorem ipsum ...
</p>

Natürlich ist es möglich, auch weniger Werte anzugeben. Bei zum Beispiel zweien gilt dann

• Erster Wert: links oben, rechts unten
• Zweiter Wert: rechts oben, links unten

Wer damit Probleme hat, sich das zu merken, kann das auch jede Ecke einzeln machen. Dabei gibt es folgende Angaben.

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

4. Rahmen-Stile

Davon gibt es bei CSS2 acht an der Zahl. Allerdings spielen die Browser teilweise etwas verrückt, wenn ihr nicht solid nehmt. Denn entweder reagieren sie darauf mit einer solid-Darstellung oder sie machen Darstellungsfehler an den "runden" Ecken. Bei Letzterem tut sich besonders der Firefox unrühmlich hervor.

p.radius-3 {
  border: 1px dashed #36628A;
  border-radius: 7px;
  padding: 5px;
}
<p class="radius-3">
  Lorem ipsum ...
</p>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt