CSS-Eigenschaft: border-radius, Kategorien: Rahmen (allgemein), Backgrounds and Borders (CSS 3)

Beschreibung
Beispiele
Fehler melden

Abgerundete Ecken (allgemein)

Bestimmt den Radius der Rundung von Ecken.

CSS-Eigenschaft: border-radius
Kurzbeschreibung	Werte	Standardwert	Kategorie	Hinweis
Abgerundete Ecken (allgemein)	<length> <percentage>	0	Allgemein: Rahmen CSS 3: Backgrounds and Borders	Neu in CSS 3

Verwandte Eigenschaften aus der Kategorie: Rahmen (allgemein), Backgrounds and Borders (CSS 3):

Folgendes ist beim Einsatz von border-radius zu beachten:

border-radius bewirkt die Abrundung von Ecken.
Ist die Kurzschreibweise für die CSS-Eigenschaften border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius.
Werte können absolut in PX, PT usw. oder relativ als EM oder %-Wert angegeben werden.
Erwartet einen ersten Block mit 1 bis 4 Parameter. Die Parameter wirken in der Reichenfolge [links oben][rechts oben][rechts unten][links unten]. Oder (vielleicht) einfacher zu merken, ab 10:30 Uhr im Uhrzeigersinn, also [10:30][1:30][4:30][7:30].
Werden keine 4 Parameter übergeben, wird der fehlende Style von der gegenüberliegenden Ecke übernommen. Das heißt, fehlt die 4. Angabe für die linke untere Ecke, wird der Style von rechts oben (2. Parameter) übernommen, fehlt auch der 3. Parameter für rechts unten, wird der Style von links oben (1. Parameter) übernommen. Die Angabe von nur einem Parameter bestimmt die Abrundung von allen Ecken.
Erwartet einen zweiten Block mit 1 bis 4 Parameter. Die Parameter wirken in der Reichenfolge wie oben beschrieben. Der zweite Block wird vom ersten mit einem / getrennt. Dabei bewirken die Werte im zweiten Block, dass zur Berechnung der Rundung kein Kreis, sondern eine Ellipse verwendet wird. Eine Angabe von border-radius: 55pt/25pt rundet die Ecke an einer Ellipse mit einer Breite von 55pt und Höhe von 25pt. Deutlich wird dies an folgender Grafik vom W3C:

Die Beispiele Nr. 10 bis Nr. 12 zeigen die praktische Anwendung einschließlich Beispiele für die Schreibweise.
Bei %-Angaben wird die Ecke im Verhältnis zur Höhe und Breite gerundet. Sind Höhe und Breite unterschiedlich, kommt es dadurch zu einer elliptischen Darstellung (Siehe Beispiel Nr. 8).
Hat die CSS-Eigenschaft border-collapse den Wert collapse, wird border-radius außer Kraft gesetzt.
Der Internetexplorer 9 stellt die Zellen in dem Fall trotzdem rund dar.
Opera, Safari und Chrome haben Probleme bei der Rundung in der Kombination von Bilder und Rahmen.
Firefox vor der Version 4 und Safari vor der Version 4 benötigen das Vendor-Präfix, damit angerundete Ecken dargestellt werden:
- Firefox: -moz-border-radius
- Safari: -webkit-border-radius
Im deutschen hat sich der Begriff "Runde Ecken" eingebürgert. Auch wenn der Begriff unsinnig ist, weiß jeder, was gemeint ist ;-). Runde Ecken - verrückt!

Browserunterstützung von border-radius

Firefox

Google
Chrome

Internet
Explorer

Safari

Opera

CSS3

Version: 16	Version: 25	Version: 30	Version: 31	Version: 32
j

Version: 20	Version: 30	Version: 35	Version: 36	Version: 37
j

Version: 8	Version: 9	Version: 10	Version: 11
n	j

Version: 4	Version: 5	Version: 6	Version: 7
j

Version: 10	Version: 11	Version: 12
j

Hinweis

Für ältere Browserversion ist CSS3 Pie eine gute Ergänzung (wird auch hier auf CSS-Wiki.com eingesetzt!) - das funktioniert sogar im IE 6!

Details zur Browserkompatibilität ist auf den Seiten von mozilla.org zu finden: https://developer.mozilla.org/de/CSS/border-radius#Browser_Kompatibilit.C3.A4t

Weiterführende Informationen zu border-radius:

W3C Spezifikation:
http://www.w3.org/TR/css3-background/#border-radius

letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
border-left-width
nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
border-right

Beispiele

HTML:

<div id="example-1">border-radius</div>

CSS:

#example-1 {
   border: 2px solid #bb0000;
   padding: 20px;

   border-radius: 15px
}
/* Angabe in Pixel */

Beispiel Nr. 1 So sieht's aus:

border-radius

HTML:

<div id="example-2">border-radius</div>

CSS:

#example-2 {
   background-color: #DE00FF;
   padding: 20px;

   border-radius: 2em;
}
/* EM-Wert. */

Beispiel Nr. 2 So sieht's aus:

border-radius

HTML:

<div id="example-3">border-radius</div>

CSS:

#example-3 {
   width: 100px;
   height: 100px;
   border: 2px solid #5C00B7;

   border-radius: 50px;
}
/* Hat der Radius mehr als die Hälfte von Höhe bzw. Breite, kommt es zu einem Kreis. */

Beispiel Nr. 3 So sieht's aus:

border-radius

HTML:

<div id="example-4"><img src="img/american_football.jpg" alt="American Football"></div>

CSS:

#example-4 img {
   border: 5px solid black;

   border-radius: 25px;
}
/* Wirkt auch an Bildern. Fast wie Fernseh ;-).
Opera, Safari und Chrome haben Probleme in der Kombination von Bilder und Rahmen. */

Beispiel Nr. 4 So sieht's aus:

HTML:

<div id="example-5">border-radius</div>

CSS:

#example-5 {
   background-color: #DE00FF;
   padding: 20px;
   height: 100px;

   border-radius: 10px 30px;
}
/* Zwei Werte wirken jeweils an gegenüberliegenden Ecken. */

Beispiel Nr. 5 So sieht's aus:

border-radius

HTML:

<div id="example-6">border-radius</div>

CSS:

#example-6 {
   background-color: #5C00B7;
   padding: 20px;
   height: 100px;

   border-radius: 20px 5px 50px;
}
/* Werte wirken von links oben im Uhrzeigersinn. */

Beispiel Nr. 6 So sieht's aus:

border-radius

HTML:

<div id="example-7">border-radius</div>

CSS:

#example-7 {
   background-color: #00C600;
   padding: 20px;
   height: 100px;

   border-radius: 5px 20px 50px 100px;
}
/* Mehr als vier Werte für vier Ecken geht nicht ;-). */

Beispiel Nr. 7 So sieht's aus:

border-radius

HTML:

<div id="example-8">border-radius</div>

CSS:

#example-8 {
   background-color: #C000FF;
   padding: 20px;

   border-radius: 25%;
}
/* %-Angaben verhalten sich realiv zur Höhe und Breite und können eine elliptische Darstellunng erzeugen. */

Beispiel Nr. 8 So sieht's aus:

border-radius

HTML:

<div id="example-9">border-radius</div>

CSS:

#example-9 {
   background-color: #C000FF;
   padding: 20px;
   width: 200px;
   height: 200px;

   border-radius: 25%;
}
/* Sind Höhe und Breite gleich groß kann ein %-Wert eine saubere Darstellung umsetzen.  */

Beispiel Nr. 9 So sieht's aus:

border-radius

HTML:

<div id="example-10">border-radius</div>

CSS:

#example-10 {
   background-color: #DE00FF;
   padding: 20px;
   height: 100px;

   border-radius: 50px/30px;
}
/* Werte hinter dem / führen dazu, dass zur Rundung eine Ellipse verwendet wird. */

Beispiel Nr. 10 So sieht's aus:

border-radius

HTML:

<div id="example-11">border-radius</div>

CSS:

#example-11 {
   background-color: #5C00B7;
   padding: 20px;
   height: 100px;

   border-radius: 50px 50px/25px 100px;
}
/* Alle Werte zur Berechnung der elliptischen Rundung stehen zusammen hinter dem /. */

Beispiel Nr. 11 So sieht's aus:

border-radius

HTML:

<div id="example-12">border-radius</div>

CSS:

#example-12 {
   background-color: #00C600;
   padding: 20px;
   height: 100px;

   border-radius: 100px / 0px 40px 60px 150px;
}
/* Dabei muss die Anzahl der Werte zur Berechnung nicht mit der Anzahl der Werte im ersten Block überein stimmen. */

Beispiel Nr. 12 So sieht's aus:

border-radius

HTML:

<div id="example-13">
   <button>border-radius</button>
   <br /><br />
   <input type="text" name="text" value="" />
   <br /><br />
   <input type="submit" name="senden" value="Senden" />
</div>

CSS:

#example-13 input,
#example-13 button {
   padding: 20px;

   border-radius: 20px;
}
/* Auch Schaltflächen unterstützen abgerundete Ecken.
Opera stellt dies allerdings nicht dar. */

Beispiel Nr. 13 So sieht's aus:

HTML:

<div id="example-14">
      <table>
         <tr>
            <td>border-radius</td>
            <td>border-radius</td>
         </tr>
         <tr>
            <td>border-radius</td>
            <td>border-radius</td>
         </tr>
     </table>
</div>

CSS:

#example-14 table {
   padding: 10px;
   border: 2px solid blue;

   border-radius: 20px;
}
#example-14 td {
   padding: 10px;
   border: 2px solid red;

   border-radius: 20px;
}
/* Abgerundete Ecken auch an Tabellen und Tabellenzellen. */

Beispiel Nr. 14 So sieht's aus:

border-radius	border-radius
border-radius	border-radius

HTML:

<div id="example-15">
      <table>
         <tr>
            <td>border-radius</td>
            <td>border-radius</td>
         </tr>
         <tr>
            <td>border-radius</td>
            <td>border-radius</td>
         </tr>
     </table>
</div>

CSS:

#example-15 table {
   padding: 10px;
   border: 2px solid blue;

   border-collapse: collapse;
   border-radius: 20px;
}
#example-15 td {
   padding: 10px;
   border: 2px solid red;

   border-radius: 20px;
}
/* border-collapse: collapse setzt abgerundete Ecken außer Kraft.
Mit Ausnahme des IE 9, der stellt in dem Fall die Zellen trotzdem mit abgerundeten Ecken dar. */

Beispiel Nr. 15 So sieht's aus:

border-radius	border-radius
border-radius	border-radius

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

CSS-Eigenschaft: border-radius, Kategorien: Rahmen (allgemein), Backgrounds and Borders (CSS 3)

Abgerundete Ecken (allgemein)

Verwandte Eigenschaften aus der Kategorie: Rahmen (allgemein), Backgrounds and Borders (CSS 3):

Folgendes ist beim Einsatz von border-radius zu beachten:

Hinweis

Weiterführende Informationen zu border-radius:

Beispiele

HTML:

CSS:

Beispiel Nr. 1 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 2 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 3 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 4 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 5 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 6 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 7 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 8 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 9 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 10 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 11 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 12 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 13 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 14 So sieht's aus:

HTML:

CSS:

Beispiel Nr. 15 So sieht's aus:

Fehler melden

CSS-Wiki.com

Kategorien (allgemein)

Kategorien (W3C: CSS 2.1)

Module (W3C: CSS 3)

A-Z:

Schnell­auswahl

Seiten:

Schnellauswahl