3em;
    -moz-border-top-right-radius: 3em;
    -moz-border-bottom-left-radius: 3em;
    -webkit-border-top-left-radius: 6em 3em;
    -webkit-border-bottom-right-radius: 6em 3em;
    -webkit-border-top-right-radius: 3em;
    -webkit-border-bottom-left-radius: 3em;
    }
    
    
    
    

    

    Programmier-Blog
    

    

    

    

Artikel

    

    

Programmieren mit CSS?

    

    Eigentlich ist CSS ja eine Beschreibungssprache.
    Doch nicht selten übernimmt sie auch Aufgaben,
    die man auch mit JavaScript lösen könnte.
    

    

    

    
    
    Bild 14.16: Runde Ecken im Browser
Erläuterung
    Das Beispiel zeigt ein vollständiges HTML-Dokument mit einigen typischen Bestandteilen eines Blogs. Wegen der unterschiedlichen Hintergrundfarben (CSS-Eigenschaft
background-color
) sind die Elementboxen der Überschrift im Header-Bereich und die von Artikeln gut sichtbar. In beiden Fällen wird mit runden Ecken gearbeitet.
    Sowohl die Einzeleigenschaften
border-top-left-radius
,
border-top-right-radius
,
border-bottom-left-radius
und
border-bottom-right-radius
als auch die für alle vier Ecken gültige Eigenschaft
border-radius
erwarten eine oder zwei nummerische Angaben. Bei zwei nummerischen Angaben sind diese durch Leerzeichen zu trennen. Mit einer Angabe können Sie eine Viertelkreisrundung bestimmen, mit zwei Angaben eine elliptische Rundung. Das obige Beispiel enthält beide Typen von Angaben. Bei der elliptischen Rundung stehen der erste Wert für den X-Radius und der zweite Wert für den Y-Radius. Nachfolgende Grafik verdeutlicht dies mit den Werten aus dem obigen Beispiel
    Bild 14.17: border
-top-left-radius:6em 3em;
und
border-bottom-right-radius: 6em 3em;
Weitere Hinweise
    Bis auf Weiteres ist es noch zweckmäßig, die herstellerspezifischen Implementierungseigenschaften wie
-moz-border-radius
oder
-webkit-border-radius
wie im obigen Beispiel zusätzlich zur eigentlichen Definition zu
border-radius
zu notieren. Obwohl diese nur mehr der Firefox bis Version 3.6 und Safari bis Version 4.0 benötigen.
    Falls Sie zusätzlich zu runden Ecken mit sichtbaren Rahmen und unterschiedlichen Rahmenstärken an den einzelnen Elementseiten (
border-left-width
usw.) arbeiten, ist es Aufgabe der Browser, die runden Ecken korrekt zu rendern.
Referenzinformationen
    CSS-Eigenschaften
border-radius
,
    CSS-Eigenschaften
border-top-left-radius
,
border-top-right-radius, border-bottom-left-radius
,
border-bottom-right-radius
:

14.6.3    Grafische Rahmen (border-image)
    Für aufwendigere Rahmeneffekte steht seit CSS3 die Möglichkeit zur Verfügung, Grafiken als Basis für Rahmen zu verwenden. Wie bei den übrigen Rahmeneigenschaften gibt es auch in diesem Fall eine zusammenfassende Eigenschaft, nämlich
border-image
. Daneben gibt es Einzeleigenschaften für die Detailaspekte der Rahmendefinitionen. Dies sind die Eigenschaften
border-image-source
(Referenzierung der Rahmengrafik),
border-image-slice
(Werte, die festlegen, wie die Grafik zerteilt wird),
border-image-width
(Bildbreite des Rahmens),
border-image-outset
(Offset des Bildrahmens, ähnlich wie bei
outline-offset
) und
border-image-repeat
(Art, wie das Bild die vier Seitenrahmen des Elements ausfüllen soll – z. B. durch Wiederholung oder Streckung). Die Eigenschaften
border-image-width
und
border-image-outset
spielen in der Praxis derzeit noch keine Rolle.
Beispiel
    
    
    Bild 14.18: Grafische Rahmen im Browser
Erläuterung
    Zunächst benötigen Sie eine Grafik, die einen Rahmen realisiert. Im obigen Beispiel ist das die nachfolgende Grafik.
    Bild 14.19: Grafik für border-image
    Die Grafik muss nicht die Ausmaße des Elements haben,