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.
TOP

Notizen: