Runde Ecke (border-radius)...
Runde Rahmen, d.h. Rahmen mit abgerundeten Ecken, können mit der CSS-Eigenschaft border-radius definiert werden. In der einfachsten Form werden alle 4 Ecken kreisförmig mit dem gleichen Radius abgerundet.
border-radius: {radius}px;
Als Maßeinheit können px, pt, pc, in, mm, cm, em, ex und % verwendet werden.
border-radius: 2em;
 
Unterschiedliche Abrundung der Ecken...
Um jede Ecke mit einem anderen Radius kreisförmig abzurunden, können die Werte für die Radien in der Reihenfolge oben-links, oben-rechts, unten-rechts, unten-links angegeben werden.
border-radius:
     {oben-links}px {oben-rechts}px
     {unten-rechts}px {unten-links}px;
border-radius: 1em 2em 3em 4em;
 
Elliptische Abrundung...
Für eine elliptische Abrundung kann der horizontale Radius (X-Richtung) und der vertikale Radius (Y-Richtung) getrennt durch einen Schrägstrich '/' angegeben werden.
border-radius:
      {horizontal}px / {vertikal}px;
border-radius: 3.7em / 2.7em;
 
Unterschiedliche elliptische Abrundung...
Um jede Ecke mit einem anderen Radius elliptisch abzurunden, können die horizontalen Radien (X-Richtung) gefolgt von einem Schrägstrich '/' gefolgt von den vertikalen Radien (Y-Richtung) angegeben werden, jeweils in der Reihenfolge oben-links, oben-rechts, unten-rechts, unten-links.
border-radius:
 {h-ol}px {h-or}px {h-ur}px {h-ul}px /
 {v-ol}px {v-or}px {v-ur}px {v-ul}px
border-radius: 1em 3em 5em 7em /
               2em 4em 6em 8em;
 
Weitere Informationen...
CSS-Eigenschaften zur Abrundung einzelner Ecken
Neben der CSS-Eigenschaft border-radius für die Definition der Rundung aller 4 Ecken eines Elements gibt es noch 4 Eigenschaften, um die Rundung jeweils einer einzelnen Ecke zu definieren:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
Browser-Unterstützung
Detaillierte Informationen über die Unterstützung der border-radius-Eigenschaft durch diverse unterschiedliche Browser-Versionen gibt es bei caniuse.com.
Formale Definition
Eine formale Definition der border-radius-Eigenschaft gibt es beim W3C.
CSS-Eigenschaften und Beispiele...
Auf den folgenden Seiten finden Sie einige technische Informationen und Beispiele zu CSS-Eigenschaften, die im CSS-Baukasten für Dekorationen und Schriftarten verwendet werden können:
Prografaktur Software GmbH | Hasenbergsteige 15 | 70178 Stuttgart | Deutschland | service@css-baukasten.de