Abgerundete Ecken

Im Vorblick auf die Eigenschaft border-radius des CSS-3-Moduls Border ist für die Gecko- Engine seit der Version 0.9.8 die Eigenschaft -moz-border-radius verfügbar. Sie ist eine Kurzschrift- Eigenschaft – auch die Radien der vier Ecken eines Elements lassen sich einzeln deklarieren.

Codebeispiel:

.selektor {
    ...
    border-radius-bottomright:4px;
    -moz-border-radius-bottomright:4px;
    }

Bei der Anwendung dieser Eigenschaft sollte man einige Dinge beachten:

• Diese Eigenschaft wird nur von Gecko-basierten Browsern dargestellt und von allen anderen einfach ignoriert. Daher bleiben alle Elemente dort weiterhin 'eckig'.
• Der proprietären Eigenschaft -moz-border-radius sollte man immer die CSS-3-Eigenschaft border-radius mit demselben Wert voranstellen. Das bewirkt ein automatisches 'Upgrade' der erstellten Site, wenn die verwendete CSS-3-Eigenschaft auch von anderen Browsern dargestellt wird und man beugt dem Problemfall vor, das Mozilla einmal die Unterstützung von -moz-.... einstellt.
• Bei starken Kontrasten kann sich eine auffällige Stufigkeit der Kurve zeigen, denn Anti-Aliasing wird nicht unterstützt. Mit Hilfe der (ebenfalls proprietären) Eigenschaft -moz-border- [top|right|bottom|left] -colors kann dies in beschränktem Umfang simuliert werden.
• Negative Werte sind noch nicht möglich.
• Für border-style kann bisher nur solid verarbeitet weren.
• Deklariert man mit background-image eine Hintergrundgrafik, kann es passieren, dass außerhalb der abgerundeten Ecken noch Zipfel des Hintergrundimages sichtbar sind
• Bei größeren Radien kann der Inhalt der Box an der Ecke vom Rahmen überlappt werden. Deshalb sollte man darauf achten, dass der Rahmenradius nicht größer wie das Dreifache des Wertes für padding ist.

Vom Präfix zum Standard

Die im Text beschriebene Eigenschaft mit dem Herstellerpräfix war ein Vorgriff: Die Gecko-Engine bot sie Jahre vor der Verabschiedung des zugehörigen Moduls an, eine andere Engine zog mit einem eigenen Präfix nach, und beide unterschieden sich in der Schreibweise für die einzelnen Ecken. Die endgültige Fassung heißt border-radius, ohne Präfix, und wird seit Anfang der Zehnerjahre überall unterstützt.

Für heutige Stylesheets heißt das: Die Präfixe sind nicht nur überflüssig, sondern schädlich. Manche greifen noch und setzen eine ältere, abweichende Auslegung um; wo sie vor der Fassung ohne Präfix stehen, gewinnt die letzte, wo sie danach stehen, gewinnt die alte. Die Namen für die einzelnen Ecken haben sich außerdem geändert – aus der zusammengeschriebenen Form wurde eine mit Bindestrich, in der die senkrechte Angabe vor der waagerechten steht.

Was die Eigenschaft heute annimmt

Die Kurzform nimmt bis zu vier Werte entgegen, und zwar im Uhrzeigersinn ab der oberen linken Ecke. Bei zwei Werten gilt der erste für die obere linke und die untere rechte, der zweite für die beiden anderen – dieselbe Systematik wie bei den Abständen, nur an den Ecken statt an den Seiten.

Hinter einem Schrägstrich lässt sich ein zweiter Satz Werte notieren; dann ist der erste Satz der waagerechte und der zweite der senkrechte Radius, und die Ecken werden elliptisch statt kreisrund. Prozentwerte beziehen sich waagerecht auf die Breite und senkrecht auf die Höhe der Box – ein Radius von fünfzig Prozent an allen vier Ecken macht aus einem Quadrat einen Kreis und aus einem Rechteck eine Ellipse. Sind die angegebenen Radien zusammen breiter als die Seite, verkleinert der Browser sie alle im selben Verhältnis, statt sie sich überschneiden zu lassen.

Was die Rundung sonst noch berührt

Der Radius wirkt nicht nur auf die Rahmenlinie. Der Hintergrund der Box wird an derselben Kurve beschnitten, und ein abgeschnittener Überlauf folgt ihr ebenfalls – das ist der Grund, warum ein Bild in einer abgerundeten Karte mit einer einzigen Deklaration am Container rund wird, ohne dass das Bild selbst einen Radius braucht.

Ein Nachfahre, der aus der Box herausragt, wird dagegen nur dann beschnitten, wenn der Überlauf ausdrücklich behandelt wird; die Rundung allein schneidet nichts ab. Und bei sehr breiten Rahmen fällt eine Feinheit auf: Innen- und Außenkante der Rundung haben verschiedene Radien, wobei der innere um die Rahmenbreite kleiner ist und bei null endet. Deshalb wirkt ein dicker Rahmen an einer stark gerundeten Ecke innen eckig – kein Fehler, sondern das vorgeschriebene Verhalten.

Die vier Einzeleigenschaften

Jede Ecke lässt sich einzeln ansprechen, und die Namen folgen dabei einer Reihenfolge, die man sich merken muss: erst die waagerechte Lage der Ecke, dann die senkrechte, also oben links, oben rechts, unten rechts, unten links. Jede von ihnen nimmt einen oder zwei Werte, wobei zwei Werte die Ecke elliptisch machen.

Nützlich sind die Einzeleigenschaften vor allem dort, wo eine Rundung von einer Bedingung abhängt: die erste Karte einer Reihe oben abgerundet, die letzte unten, die dazwischen gar nicht. Mit der Kurzform müsste in jedem Fall der vollständige Satz aus vier Werten stehen; mit den Einzeleigenschaften genügt eine Zeile je Ausnahme.