border-radius: Runde Ecken

0 | 42378 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "border-radius: Runde Ecken" mit Ihrem Wissen!

Anzeige Hier werben

border-radius

Werte: Längenangaben
Standardwert: 0
Vererbung: nein
Kurzschreibweise: border
Anwendbar auf: Alle Elemente
CSS-Level: CSS3

Mit der Eigenschaft border-radius lassen sich für Boxen (Block-Elemente) runde bzw. elliptische Ecken realisieren.

Bedeutung der Werte

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Nein
Opera11Fast12Fast
1+Unterstützt
Safari4Unterstützt5Unterstützt
border-radius

Ein Wert (Längenangabe) bezieht sich auf den Radius des Kreises, aus dessen einem Viertel sich die runde Ecke bildet. Sind zwei Werte für ein und dieselbe Ecke angegeben bestimmt der erste Wert den horizontalen Wert und der zweite Wert den vertikalen Wert. Die Ecke wird somit elliptisch abgerundet.

Anschaulich bedeutet dies:

(Grafik kommt)

Problematik bei der Spezifikation des W3C

Da es wie in allen anderen Border-Eigenschaften möglich sein muss, border-radius zu verwenden, und nicht für jede Ecke eine eigene Eigenschaft (siehe unten) ergibt sich eine Problematik in der Verteilung der Werte.

Die maximale Anzahl der Werte in der Eigenschaft wären 8, also zum Beispiel: border-radius: 1px 3px 5px 4px 7px 2px 3px 2px;. Hier ist die Aufteilung noch klar. Je zwei Werte gehören zu einer Ecke. Doch ist eine oder zwei Ecken kreisrund ergeben sich Probleme bei der Zuordnung der Werte. Zum Beispiel: border-radius: 1px 3px 5px 4px 7px 2px;.

Bevor diese Problematik nicht gelöst ist, wird es wohl nicht zu einer Veröffentlichung der Eigenschaft kommen.

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Nein
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
Runde Ecken mit verschiedenen Eigenschaften

Anbieterspezifische Eigenschaften

Da der W3C wie gesagt den CSS3-Standard noch nicht veröffentlicht hat, behelfen sich einige Browser mit sogenannten anbieterspezifischen Eigenschaften. Diese wären für border-radius

Eigenschaft
Rendering-Engine (Bekanntester Vertreter)
-moz-border-radius
Gecko (Firefox)
-khtml-border-radius
Webkit (Safari x.x), KHTML (Konqueror x.x)
-webkit-border-radius
Webkit (Safari, Google Chrome, Chromium)
-o-border-radius
Unterstützt in Opera bis zur Version 9(?); keine Unterstützung in Opera 10.x

Speziellere Eigenschaften

Wie auch bei allen anderen Rahmeneigenschaften existieren auch bei border-radius Eigenschaften für alle einzelnen Seiten, die in der folgenden Tabelle aufgelistet werden.

Eigenschaft für einzelne Ecken
Bedeutung
border-top-radius Betrifft die beiden oberen Ecken
border-bottom-radius Betrifft die beiden unteren Ecken
border-left-radius Betrifft die beiden linken Ecken
border-right-radius Betrifft die beiden rechten Ecken
border-top-right-radius Betrifft nur die obere rechte Ecke
border-bottom-right-radius Betrifft nur die untere rechte Ecke
border-bottom-left-radius Betrifft nur die untere linke Ecke
border-top-left-radius Betrifft nur die obere linke Ecke
Eigenschaften für gemeinsam Ecken
Bedeutung
border-radius-topleft
Betrifft Ecke oben links
border-radius-topright Betrifft Ecke oben rechts
border-radius-bottomright
Betrifft Ecke unten rechts
border-radius-bottomleft Betrifft Ecke unten links

Die ober Eigenschaften sollten nur eingesetzt werden, wenn eine einzelne Ecke abgerundet werden sollen. Die unteren Eigenschaften können eingesetzt werden wenn beide Abrundungen gemeinsam angesprochen werden sollen. Hierzu kann ein Wert für gleichmäßige, oder zwei Werte für unterschiedliche Abrundungen angegeben werden.

Analog dazu sollten die anbieter- bzw. browserspezifischen Präfixe vor die jeweilge Eigenschaft gesetzt werden ( -moz..., -khtml..., -webkit..., bis Version 9.x von Opera auch -o... ), bis CSS3 herausgegeben und von allen (gängigen) Browsern umgesetzt wird.

Beispiel

border-radius  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
  <title>border-radius</title>
  <style>
    #foo { 
        -moz-border-radius: 9px; 
        -webkit-border-radius: 9px;
         border-radius: 9px; 
         width:200px;
         height:200px;
         background: #F00;
    }
    #PanelTopDown /* nur untere Eckenpaare mit unterschiedlichen Werten abrunden*/
    {
      border-radius-bottomleft:20px 40px;
      border-radius-bottomright:20px 40px; 
      -moz-border-radius-bottomleft:20px 40px; 
      -moz-border-radius-bottomright:20px 40px; 
      -khtml-border-radius-bottomleft:20px 40px; 
      -khtml-border-radius-bottomright:20px 40px; 
      -webkit-border-radius-bottomleft:20px 40px; 
      -webkit-border-radius-bottomright:20px 40px; 
    }
  </style>
</head>
<body>
<div id="foo"></div>
</body>
</html>


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "border-radius: Runde Ecken" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "border-radius: Runde Ecken" hier bearbeiten.

Mitarbeiter