Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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

Abgerundete Ecken (allgemein)

Bestimmt den Radius der Rundung von Ecken.

CSS-Eigenschaft: border-radius
KurzbeschreibungWerteStandardwertKategorieHinweis
Abgerundete Ecken (allgemein)
  • <length>
  • <percentage>
0
Allgemein:
Rahmen
CSS 3:
Backgrounds and Borders
Neu in 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:
    Grafik der Ellipse, anhand eine Rundung dargestellt wird. Quelle: 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
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 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:



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:

American Football
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 01. 04. 2017
Render Time: 8.415 sec.

Browser-Marktanteile