border-radius: Runde Ecken
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
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.
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
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>
|
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 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.
-
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
-
PHP-Programmierer und Webentwickler. Aktives Mitglied im Entwicklerteam von Textpattern CMS, einem eleganten, kostenlosen und freien Content Management System auf Basis von PHP und MySQL. Entwickler von einigen Plugins für Textpattern und die populäre Blog-Software WordPress.
-
graphic, motion & web design - kernreaktor - mutter kind turnen
-
David Danier arbeitet seit mehr als neun Jahren im Bereich Web Programmierung und ist unter anderem Geschäftsführer der Webagentur Team23 sowie Webmasterpro.de.
-
Ralf hat Informatik an der Uni Koblenz, folgend an der TH Darmstadt studiert. Seit 1989 selbständig, heute als geschäftsführender Gesellschafter einer Marketing Agentur in Sachsen-Anhalt (Harz). Ralf konzipierte und entwickelte branchenspezifische Vertriebsportale für touristisches Destinationsmarketing.
Umsetzung In Opera
Hallo
Habe durch Zufall entdeckt, dass die nicht mehr vorhandene Umsetzung von -o-border-radius ab Opera10 ganz einfach durch border-radius ersetzt wird! Hoffentlich setzten sich die CSS3-Standards bei mehr u. mehr Browsern durch, so das aufwendige Konstrukte wie folgt eingedampft werden können
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
Gruss Georg